/* Casino Top List Hero — [section cpt="casino-top-list" type="hero"]
 *
 * Figma: Volt Design System v1.0 (file B1d1YtTMv0jhPz2e5CbaZN)
 *   mobile  4624-121243 · tablet 4624-114099 · desktop 11726-11125
 *
 * Every value maps to an existing design token. Type tokens are responsive in
 * design-tokens-base.css and match the Figma per-breakpoint sizes, so most text
 * needs no per-breakpoint overrides. Breakpoints 768/1280 stay locked to that scale.
 *
 * Notable vs the bonus-top-list hero:
 *  - Layout is REVERSED: text left, illustration right (desktop/tablet); on mobile
 *    the illustration sits on top (column-reverse keeps the h1 first in the DOM).
 *  - THREE stats; the callout wraps them 2+1 on tablet/mobile, single row on desktop.
 *  - The stat VALUE is H6 on mobile/tablet but H5 on desktop (family switch) → an
 *    override at ≥1280, not a single token.
 *
 * Known variance: at mobile the P3 caption font-size token is 11px vs Figma 12px
 * (+1px); the semantic token is kept intentionally (no hard-code, no new token).
 */

/* ------------------------------------------------------------------ mobile */
.ctlh {
    position: relative;
    /* Full-bleed: break out of the Brizy / .entry-content container so the hero
       spans the full viewport width (same technique as casino-bonus-hero). The
       theme's body{overflow-x:hidden} clips the scrollbar-width overshoot. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Vertical padding (Figma py-25) is the band the background fills. */
    padding: var(--spacing-25) var(--spacing-5);   /* 100px / 20px */
    background: var(--color-deep-dark) url("../images/hero-bg.jpg") center top / cover no-repeat;
    overflow: hidden;
}

/* Edge-to-edge top+bottom: zero the Brizy wrapper margin / section-content padding
   for the section holding THIS shortcode (scoped via :has()). Mirrors casino-bonus-hero. */
.brz-wrapper:has(.ctlh) { margin-top: 0 !important; margin-bottom: 0 !important; }
.brz-section__content:has(.ctlh) { padding-top: 0 !important; padding-bottom: 0 !important; }

.ctlh__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;  /* mobile: illustration on top, text below */
    align-items: flex-start;
    gap: var(--spacing-0);           /* 0 */
    width: 100%;
    max-width: 1021px;               /* Figma desktop layout-frame width */
}

.ctlh__illustration {
    position: relative;
    flex-shrink: 0;
    width: 166px;
    height: 150px;
    overflow: hidden;
}

.ctlh__illustration img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ctlh__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-7);           /* 28px */
    min-width: 0;
    width: 100%;
}

.ctlh__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-0);           /* 0 — title & description are flush */
    width: 100%;
}

.ctlh__title {
    margin: 0;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);          /* 700 */
    font-size: var(--font-size-h1);                /* 44 / 48 / 62 */
    line-height: var(--line-height-h1);            /* 67 / 69 / 73 */
    color: var(--color-base-white);
}

.ctlh__desc {
    margin: 0;
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);       /* 400 */
    font-size: var(--font-size-p2-base);           /* 14 / 15 / 16 */
    line-height: var(--line-height-p2-base);       /* 21 / 27 / 24 */
    color: var(--color-base-ghost-white);
}

.ctlh__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--spacing-6) var(--spacing-7);    /* 24px / 28px */
    background-color: var(--color-callout-warning);            /* rgba(220,54,69,0.1) */
    border: var(--border-width-thin) dashed var(--color-glow); /* 1px dashed #246988 */
    border-radius: var(--radius-xl);               /* 12px */
}

.ctlh__stats-row {
    display: flex;
    flex-wrap: wrap;                 /* mobile/tablet: 3 stats wrap 2 + 1 */
    align-items: center;
    column-gap: var(--spacing-8);    /* 32px within a row */
    row-gap: var(--spacing-5);       /* 20px between wrapped rows (mobile) */
}

/* Force the 3rd stat (min deposit) onto its own row on mobile/tablet. */
.ctlh__stat:nth-child(3) { flex-basis: 100%; }

.ctlh__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ctlh__stat-value {
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-semibold);      /* 600 */
    font-size: var(--font-size-h6);                /* 16 mobile / 18 tablet */
    line-height: var(--line-height-h6);            /* 23 mobile / 25 tablet */
    color: var(--color-base-light-gray);
    white-space: nowrap;
}

.ctlh__star {
    margin-left: var(--spacing-1);   /* 4px */
    font-size: 0.85em;
}

.ctlh__stat-label {
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);       /* 400 */
    font-size: var(--font-size-p3-caption);        /* 11 / 12 / 13  (Figma 12/12/13 — mobile −1px token drift) */
    line-height: var(--line-height-p3-caption);    /* 17 / 18 / 20 */
    color: var(--color-primary-light);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ tablet ≥768
   Illustration beside text (row); stats still wrap 2+1 but tighter row-gap. */
@media (min-width: 768px) {
    .ctlh {
        padding: var(--spacing-25) var(--spacing-11);   /* 100px / 44px */
    }

    .ctlh__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-6);       /* 24px */
    }

    .ctlh__illustration {
        width: 328px;
        height: 296px;
    }

    .ctlh__content {
        flex: 1 1 0;
        width: auto;
    }

    .ctlh__stats-row {
        row-gap: var(--spacing-4);   /* 16px */
    }

    .ctlh__stat-value {
        font-size: var(--font-size-h6);       /* 18px tablet */
        line-height: var(--line-height-h6);   /* 25px tablet */
    }
}

/* ------------------------------------------------------------------ desktop ≥1280
   Larger illustration & gap; 3 stats in a single row; stat value steps up to H5. */
@media (min-width: 1280px) {
    .ctlh {
        padding: var(--spacing-25) var(--spacing-25);   /* 100px */
    }

    .ctlh__inner {
        gap: var(--spacing-11);      /* 44px */
    }

    .ctlh__illustration {
        width: 371px;
        height: 354px;
    }

    .ctlh__stats {
        padding: var(--spacing-6) var(--spacing-9);     /* 24px / 36px */
    }

    .ctlh__stats-row {
        flex-wrap: nowrap;
        column-gap: var(--spacing-10);   /* 40px, single row */
    }

    .ctlh__stat:nth-child(3) { flex-basis: auto; }

    .ctlh__stat-value {
        font-size: var(--font-size-h5);       /* 24px desktop */
        line-height: var(--line-height-h5);   /* 33px desktop */
    }
}