/* Bonus Top List Hero — [section cpt="bonus-top-list" type="hero"]
 *
 * Figma: Volt Design System v1.0 (file B1d1YtTMv0jhPz2e5CbaZN)
 *   mobile  5431-35643 · tablet 5431-27959 · desktop 11726-11181
 *
 * Every value maps to an existing design token. The h1/h5/p2/p3 type tokens are
 * responsive in design-tokens-base.css and already match the Figma per-breakpoint
 * sizes, so font-size/line-height need NO per-breakpoint overrides here.
 * Breakpoints are 768/1280 to stay locked to that token scale (not 1440).
 *
 * Known variance: at mobile the P3 caption font-size token is 11px while Figma
 * specifies 12px (+1px). The semantic token is kept intentionally — no hard-code,
 * no new token — per the design-token rules.
 *
 * Mobile-first: base = mobile (illustration stacked above text); ≥768 & ≥1280 add
 * the side-by-side layout and larger spacing.
 */

/* ------------------------------------------------------------------ mobile */
.btlh {
    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 /
       casino-summary). box-sizing:border-box keeps the horizontal padding inside
       the 100vw so it never triggers horizontal scroll. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;          /* illustration stacked above the text */
    align-items: center;
    justify-content: flex-end;       /* content anchored to the bottom */
    /* Vertical padding ON the shortcode (Figma py-25) is the band the background
       fills, so the Brizy section background never shows behind the full-bleed hero. */
    padding: var(--spacing-25) var(--spacing-5);   /* 100px / 20px */
    /* Full-bleed backdrop (opaque) with the deep-dark token as fallback. */
    background: var(--color-deep-dark) url("../images/hero-bg.jpg") center top / cover no-repeat;
    overflow: hidden;
}

/* Edge-to-edge (top + bottom): Brizy adds vertical spacing around the shortcode
   element (a ~10px element margin on .brz-wrapper; a section-content padding on
   others), leaving a strip of the Brizy section background above/below the
   full-bleed hero. Zero it for the section that holds THIS shortcode, scoped via
   :has() so only our shortcode is affected. Mirrors casino-bonus-hero / casino-summary. */
.brz-wrapper:has(.btlh) { margin-top: 0 !important; margin-bottom: 0 !important; }
.brz-section__content:has(.btlh) { padding-top: 0 !important; padding-bottom: 0 !important; }

.btlh__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;          /* image over text on mobile */
    align-items: center;
    justify-content: center;
    gap: var(--spacing-0);           /* 0 */
    width: 100%;
    max-width: 419px;                /* Figma mobile layout-frame width */
}

.btlh__illustration {
    position: relative;
    flex-shrink: 0;
    width: 247px;
    height: 174px;
    overflow: hidden;                /* container is a window onto the square art */
}

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

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

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

.btlh__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);
}

.btlh__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);
}

.btlh__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--spacing-5) var(--spacing-9);    /* 20px / 36px */
    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 */
}

.btlh__stats-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-10);          /* 40px */
}

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

.btlh__stat-value {
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-semibold);      /* 600 */
    font-size: var(--font-size-h5);                /* 20 / 22 / 24 */
    line-height: var(--line-height-h5);            /* 26 / 30 / 33 */
    color: var(--color-base-light-gray);
}

.btlh__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 moves beside the text; layout frame becomes a row. */
@media (min-width: 768px) {
    .btlh {
        justify-content: center;
        padding: var(--spacing-25) var(--spacing-12);   /* 100px / 48px */
    }

    .btlh__inner {
        flex-direction: row;
        gap: var(--spacing-5);       /* 20px */
        max-width: 698px;            /* Figma tablet layout-frame width */
    }

    .btlh__illustration {
        width: 247px;
        height: 219px;
    }

    .btlh__content {
        flex: 1 0 0;
        gap: var(--spacing-7);       /* 28px */
    }
}

/* ------------------------------------------------------------------ desktop ≥1280 */
@media (min-width: 1280px) {
    .btlh {
        padding: var(--spacing-25);  /* 100px all sides */
    }

    .btlh__inner {
        gap: var(--spacing-11);      /* 44px */
        max-width: 1015px;           /* Figma desktop layout-frame width */
    }

    .btlh__illustration {
        width: 386px;
        height: 340px;
    }

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