/**
 * Lottery block styles.
 *
 * Layout follows the tiered arrangement of the existing live lottery page — one
 * feature block, three abreast, then full-width rows for the long number lists.
 * Colours come from the new site's design tokens, which already carry the exact
 * values the live page uses (deep purple, toasted almond, rosewood on cream),
 * with hex fallbacks so the block also renders correctly outside the theme.
 */

.th-lottery {
    --th-lottery-purple: var(--deep-purple-800, #511b4a);
    --th-lottery-purple-deep: var(--deep-purple-900, #39182e);
    --th-lottery-almond: var(--toasted-almond-400, #da9265);
    --th-lottery-rosewood: var(--rosewood-600, #a04e5e);
    --th-lottery-cream: var(--antique-white-100, #f3e7d9);
    --th-lottery-surface: var(--core-white, #fff8f1);
    --th-lottery-border: var(--antique-white-200, #dcd0c1);
    --th-lottery-radius: 30px;
    --th-lottery-gap: 0.625rem;

    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    container-type: inline-size;
}

/* Jackpot ----------------------------------------------------------------- */

.th-lottery__jackpot {
    background: var(--th-lottery-purple);
    color: var(--th-lottery-cream);
    border-radius: var(--th-lottery-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.th-lottery__jackpot-label {
    margin: auto;
    font-size: clamp(1.125rem, 3cqi, 1.75rem);
    line-height: 1.2;
}

.th-lottery__jackpot-amount {
    margin: 0.25rem 0 0;
    font-size: clamp(2.75rem, 10cqi, 5rem);
    font-weight: 700;
    line-height: 1.05;
}

.th-lottery__jackpot-strapline {
    margin: 0.75rem auto;
    font-size: clamp(0.95rem, 2cqi, 1.125rem);
    opacity: 0.9;
}

/* Countdown --------------------------------------------------------------- */

.th-lottery__countdown {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.th-lottery__countdown-label {
    margin: 0 0 1rem;
    font-size: clamp(1.125rem, 3cqi, 1.5rem);
    font-weight: 700;
    color: var(--th-lottery-purple);
}

.th-lottery__clock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--th-lottery-gap);
    max-width: 34rem;
    margin: 0 auto;
}

.th-lottery__unit {
    background: var(--th-lottery-cream);
    border-radius: calc(var(--th-lottery-radius) / 2);
    padding: 0.875rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.th-lottery__unit-value {
    font-size: clamp(1.75rem, 6cqi, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--th-lottery-purple);
    font-variant-numeric: tabular-nums;
}

.th-lottery__unit-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--th-lottery-purple-deep);
    opacity: 0.75;
}

.th-lottery__draw-time {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Results ----------------------------------------------------------------- */

.th-lottery__results-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.th-lottery__results-heading {
    margin: 0;
    font-size: clamp(1.5rem, 4cqi, 2.25rem);
    color: var(--th-lottery-purple);
}

.th-lottery__results-date {
    margin: 0.25rem auto;
    font-size: 1rem;
    opacity: 0.8;
}

.th-lottery__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--th-lottery-gap);
}

.th-lottery__tier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--th-lottery-gap);
}

.th-lottery__block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 240px;
    padding: 1.25rem;
    border-radius: var(--th-lottery-radius);
    color: var(--th-lottery-cream);
    background: var(--th-lottery-almond);
    flex: 0 1 auto;
    width: calc(33.333% - (var(--th-lottery-gap) * 2 / 3));
}

.th-lottery__tier--feature .th-lottery__block {
    background: var(--th-lottery-purple);
    width: 330px;
    max-width: 100%;
}

.th-lottery__tier--wide .th-lottery__block {
    background: var(--th-lottery-rosewood);
    width: 100%;
}

.th-lottery__block-title {
    margin: 0 0 0.625rem;
    color: inherit;
    font-size: clamp(1.25rem, 3cqi, 1.75rem);
    line-height: 1.2;
}

.th-lottery__winner {
    margin: 0;
    font-size: 1.125rem;
}

.th-lottery__winners {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem 0.9375rem;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

/* Buttons ----------------------------------------------------------------- */

.th-lottery__previous-wrap,
.th-lottery__cta-wrap {
    margin: 1.5rem 0 0;
    text-align: center;
}

.th-lottery__cta-wrap {
    margin: 0;
}

.th-lottery__previous,
.th-lottery__cta {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    padding: 0.875rem 2rem;
    border-radius: 999px;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.th-lottery__cta {
    background: var(--th-lottery-rosewood);
    color: var(--th-lottery-cream);
}

.th-lottery__previous {
    background: transparent;
    color: var(--th-lottery-purple);
    box-shadow: inset 0 0 0 2px currentcolor;
}

.th-lottery__cta:hover,
.th-lottery__cta:focus-visible,
.th-lottery__previous:hover,
.th-lottery__previous:focus-visible {
    background: var(--th-lottery-purple);
    color: var(--th-lottery-cream);
}

/* Responsive -------------------------------------------------------------- */

@container (max-width: 48rem) {
    .th-lottery__block {
        width: 100%;
        min-height: 185px;
    }

    .th-lottery__tier--feature .th-lottery__block {
        width: 100%;
    }
}

@container (max-width: 30rem) {
    .th-lottery__clock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}