/* Slot Review Hero — [section cpt="slot-review" type="hero"]
 *
 * Figma: Volt Design System v1.0 (file B1d1YtTMv0jhPz2e5CbaZN)
 *   mobile 11939-17985 · tablet 5431-28290 · desktop 11855-39324
 *
 * Full-bleed (100vw + :has() Brizy reset) like the other hero cells. Every value
 * maps to an existing token. Breakpoints 768/1280 stay locked to the responsive
 * type scale.
 *
 * Known variance: the Volt DS mobile type scale differs from the theme token scale
 * by 1–2px on a few small sizes (h3 +2, h6 −2, p3 +1 at mobile) and some fixed 13px
 * micro-labels. The semantic tokens are kept intentionally (no hard-code / no new
 * token); the differences are sub-perceptual.
 *
 * The demo player reuses [demo_slot_iframe] (age-gate + SlotLaunch embed), re-skinned
 * to the new design. Its live runtime only loads on production (SlotLaunch), so the
 * frame interior is verified post-merge.
 */

/* ─────────────────────────────────────────────────────────── full-bleed shell */
.srh {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-25) var(--spacing-5);            /* 100 / 20 */
    background: var(--color-deep-dark) url("../images/hero-bg.jpg") center top / cover no-repeat;
    overflow: hidden;
}
.brz-wrapper:has(.srh) { margin-top: 0 !important; margin-bottom: 0 !important; }
.brz-section__content:has(.srh) { padding-top: 0 !important; padding-bottom: 0 !important; }

.srh__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-6);                                  /* 24 */
    width: 100%;
    max-width: 1018px;                                      /* Figma desktop layout width */
}

/* ─────────────────────────────────────────────────────────── top region */
.srh__top {
    display: flex;
    flex-direction: column;                                /* mobile/tablet: aside below main */
    gap: var(--spacing-6);                                  /* 24 mobile */
    width: 100%;
}

.srh__main {
    display: flex;
    flex-direction: row;                                   /* thumbnail | headings */
    gap: var(--spacing-3);                                  /* 12 mobile */
    width: 100%;
}

/* Media: thumbnail + play-for-real */
.srh__media {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);                                  /* 20 */
    flex-shrink: 0;
    width: 132px;                                           /* mobile */
}
.srh__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);                       /* 12 */
    overflow: hidden;
}
.srh__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.srh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    box-sizing: border-box;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-button);                    /* 12 / 14 / 16 */
    line-height: var(--line-height-button);                /* 17 / 19 / 20 */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.srh-btn__chevron { flex-shrink: 0; width: 22px; height: 22px; }   /* 1:1 icon */
.srh-btn--outline {
    padding: var(--spacing-4) var(--spacing-13);           /* 16 / 52 */
    color: var(--color-accent-gold-default);
    background: transparent;
    border: var(--border-width-medium) solid var(--color-accent-gold-default);  /* 2px gold */
    border-radius: var(--radius-xl);                       /* 12 */
}
/* Keep the button gold across every link state (the CTA is an <a>, so override
   the theme's blue link-hover). Scoped under .srh to win on specificity. */
.srh .srh-btn:link,
.srh .srh-btn:visited,
.srh .srh-btn:hover,
.srh .srh-btn:focus,
.srh .srh-btn:active { text-decoration: none; }
.srh .srh-btn--outline:link,
.srh .srh-btn--outline:visited,
.srh .srh-btn--outline:hover,
.srh .srh-btn--outline:focus,
.srh .srh-btn--outline:active { color: var(--color-accent-gold-default); }

/* Headings: title + provider + dates */
.srh__headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);                                 /* 12 mobile (title↔meta) */
    flex: 1 1 auto;
    min-width: 0;
}
.srh__title {
    margin: 0;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h1);                        /* 44 / 48 / 62 */
    line-height: var(--line-height-h1);                    /* 67 / 69 / 73 */
    color: var(--color-base-white);
}
.srh__meta { display: flex; flex-direction: column; gap: var(--spacing-1); width: 100%; }  /* 4 */
.srh__provider {
    margin: 0;
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p2-base);                   /* 14 / 15 / 16 */
    line-height: var(--line-height-p2-base);
    color: var(--color-base-white);
}
/* The theme's `.brz .brz-wp-post-content p strong` sets color:default-text !important
   at specificity (0,2,2). To win, this rule needs BOTH !important AND higher
   specificity — .srh .srh__meta .srh__provider strong is (0,3,1) > (0,2,2). */
.srh .srh__meta .srh__provider strong { font-weight: var(--font-weight-bold); color: var(--color-primary-light) !important; }
.srh__dates {
    display: flex;
    flex-direction: column;                                /* mobile: stacked */
    gap: var(--spacing-1);                                 /* 4 */
}
.srh__date { display: inline-flex; align-items: baseline; gap: var(--spacing-1); }
.srh__date-label {
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p3-caption);                /* 11 / 12 / 13 (Figma 12/12/13) */
    line-height: var(--line-height-p3-caption);
    color: var(--color-base-light-gray);
    white-space: nowrap;
}
.srh__date-value {
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-p3-caption);                /* 13 fixed in Figma → p3 (scales 11/12/13) */
    line-height: var(--line-height-p3-caption);
    color: var(--color-base-daisy-white);
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────── aside: RTP + facts */
.srh__aside {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-0);                                 /* cards join */
    width: 100%;
    flex-shrink: 0;
}

/* RTP + volatility card (top, rounded top, deep-dark) */
.srh-rtp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);                                 /* 12 (head ↔ volatility) */
    box-sizing: border-box;
    padding: var(--spacing-5);                             /* 20 */
    background: var(--color-deep-dark);
    border: var(--border-width-medium) solid var(--color-primary-dark);
    border-bottom: 0;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;   /* 16 top */
}
.srh-rtp__head { display: flex; flex-direction: column; align-items: center; width: 100%; }
.srh-rtp__value {
    margin: 0;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3);                        /* 34 / 36 / 38 (Figma 36/36/38) */
    line-height: var(--line-height-h3);
    color: var(--color-base-light-gray);
    text-align: center;
}
.srh-rtp__label {
    margin: 0;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h6);                        /* 16/18/20 → desktop overridden to h7 */
    line-height: var(--line-height-h6);
    text-align: center;
}

/* Volatility box */
.srh-vol {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);                                 /* 8 */
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-9);            /* 12 / 36 (mobile) */
    background-color: var(--color-callout-info);
    border: var(--border-width-medium) solid var(--color-callout-info);
    border-radius: var(--radius-xl);                       /* 12 */
}
.srh-vol__title {
    margin: 0;
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p2-base);                   /* 14 / 15 / 16 */
    line-height: var(--line-height-p2-base);
    color: var(--color-base-light-gray);
    text-align: center;
}
.srh-vol__scale { display: flex; align-items: center; gap: var(--spacing-1); width: 100%; }  /* 4 */
.srh-vol__bar {
    flex: 1 0 0;
    height: 9px;
    border-radius: var(--radius-lg);                       /* ~8.5 → 8 */
    background: var(--color-primary-dark);                 /* dimmed / unlit track */
}
/* Fill-to-level: green (low) → gold (medium) → red (high) */
.srh-vol--low .srh-vol__bar:nth-child(1),
.srh-vol--medium .srh-vol__bar:nth-child(1),
.srh-vol--high .srh-vol__bar:nth-child(1) { background: var(--color-semantic-success); }
.srh-vol--medium .srh-vol__bar:nth-child(2),
.srh-vol--medium .srh-vol__bar:nth-child(3),
.srh-vol--high .srh-vol__bar:nth-child(2),
.srh-vol--high .srh-vol__bar:nth-child(3) { background: var(--color-accent-gold-default); }
.srh-vol--high .srh-vol__bar:nth-child(4),
.srh-vol--high .srh-vol__bar:nth-child(5) { background: var(--color-semantic-error); }
.srh-vol__level {
    margin: 0;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-p3-caption);                /* 13 fixed → p3 */
    line-height: var(--line-height-p3-caption);
    text-align: center;
}
.srh-vol__level--low { color: var(--color-semantic-success); }
.srh-vol__level--medium { color: var(--color-accent-gold-default); }
.srh-vol__level--high { color: var(--color-semantic-error); }

/* Bet range + max win card (bottom, rounded bottom, gradient) */
.srh-facts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);                                 /* 12 */
    box-sizing: border-box;
    padding: var(--spacing-5);                             /* 20 */
    /* No --gradient token matches vertical primary-dark→deep-dark; compose from color tokens. */
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-deep-dark) 100%);
    border: var(--border-width-medium) solid var(--color-primary-dark);
    border-top: 0;
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);   /* 16 bottom */
}
.srh-facts__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.srh-facts__label {
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p2-base);                   /* 14 / 15 / 16 */
    line-height: var(--line-height-p2-base);
    color: var(--color-primary-light);
}
.srh-facts__value {
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h7);                        /* 13 / 14 / 16 */
    line-height: var(--line-height-p2-base);
    color: var(--color-primary-light);
    white-space: nowrap;
}
.srh-facts__maxwin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    box-sizing: border-box;
    padding: var(--spacing-3) var(--spacing-4);            /* 12 / 16 */
    background-color: var(--color-callout-info);
    border: var(--border-width-thin) solid var(--color-glow);
    border-radius: var(--radius-lg);                       /* 8 */
}
.srh-facts__maxwin-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h7);
    line-height: var(--line-height-p2-base);
}
.srh-facts__maxwin-icon { flex-shrink: 0; width: 14px; height: 14px; display: block; }
.srh-facts__maxwin-value {
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h7);
    line-height: var(--line-height-p2-base);
    color: var(--color-primary-light);
    white-space: nowrap;
}

/* Gradient text (RTP + Max win labels) — DS radial primary gradient */
.srh-grad {
    background-image: var(--gradient-radial-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─────────────────────────────────────────────────────────── demo player */
.srh-demo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-6);                                 /* 24 mobile */
    width: 100%;
}
.srh-demo__wrap { display: flex; flex-direction: column; width: 100%; }
.srh-demo__header {
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacing-4) var(--spacing-7);            /* 16 / 28 */
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-deep-dark) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;   /* 16 mobile → 24 ≥768 */
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p2-base);                   /* 14 / 15 / 16 */
    line-height: var(--line-height-p2-base);
    color: var(--color-primary-light);
}
.srh-demo__header strong { font-weight: var(--font-weight-bold); }
.srh-demo__frame {
    box-sizing: border-box;
    width: 100%;
    height: 403px;                                         /* Figma mobile demo-frame height (11939:17945) — definite so the iframe's height:100% resolves */
    display: flex;
    flex-direction: column;
    overflow: hidden;                                      /* clip the player to the rounded corners */
    background: var(--color-base-gray);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);   /* 16 mobile → 24 ≥768 */
}
/* Re-skin the embedded [demo_slot_iframe] and stretch its player to FILL the gray
   container (drop the 16:9 aspect so width AND height match the box). The age-gate
   and declined screens stay centered inside the same box. */
.srh-demo__frame .demoplay { margin: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; border-radius: inherit; }
.srh-demo__frame .demoplay__gate,
.srh-demo__frame .demoplay__declined {
    flex: 1 1 auto;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.srh-demo__frame .demoplay__btn--yes { background: var(--color-accent-gold-default); color: var(--color-deep-dark); }
.srh-demo__frame .demoplay__frame {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;                                    /* fill the container height, not 16:9 */
    height: auto;
    border-radius: inherit;                                /* carry the container's rounded bottom */
}
/* Iframes ignore an ancestor's border-radius clip, so round the iframe itself —
   its bottom corners then match the container (24px desktop/tablet, 16px mobile). */
.srh-demo__frame .demoplay__frame iframe { border-radius: inherit; }

.srh-demo__copy { display: flex; flex-direction: column; gap: var(--spacing-1); width: 100%; }  /* 4 */
.srh-demo__heading {
    margin: 0;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h5);                        /* 20 / 22 / 24 */
    line-height: var(--line-height-h5);
    color: var(--color-base-white);
}
.srh-demo__desc {
    margin: 0;
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p2-base);                   /* 14 / 15 / 16 */
    line-height: var(--line-height-p2-base);
    color: var(--color-base-ghost-white);
}

/* ─────────────────────────────────────────────────────────── tablet ≥768 */
@media (min-width: 768px) {
    .srh { padding: var(--spacing-25) var(--spacing-12); }         /* 100 / 48 */
    .srh__inner { gap: var(--spacing-10); }                        /* 40 */
    .srh__top { gap: var(--spacing-8); }                           /* 32 */
    .srh__main { gap: var(--spacing-7); }                          /* 28 */
    .srh__media { width: 211px; }
    .srh__headings { gap: var(--spacing-5); }                      /* 20 */
    .srh__dates { flex-direction: row; gap: var(--spacing-4); }    /* 16, side by side */
    .srh-vol { padding: var(--spacing-3) var(--spacing-25); }      /* 12 / 100 */
    .srh-demo { gap: var(--spacing-7); }                           /* 28 */
    .srh-demo__header { padding: var(--spacing-4) var(--spacing-7); border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; }  /* 24 */
    .srh-demo__frame { height: 457px; border-radius: 0 0 var(--radius-3xl) var(--radius-3xl); }  /* Figma tablet 11919:18205 · h457 · r24 */
}

/* ─────────────────────────────────────────────────────────── desktop ≥1280 */
@media (min-width: 1280px) {
    .srh { padding: var(--spacing-25); }                           /* 100 */
    .srh__top { flex-direction: row; gap: var(--spacing-8); align-items: stretch; }  /* main | aside */
    .srh__aside { width: 316px; }
    .srh-rtp__label { font-size: var(--font-size-h7); line-height: var(--line-height-p2-base); }  /* desktop uses H7 */
    .srh-vol { padding: var(--spacing-3) var(--spacing-8); }       /* 12 / 32 */
    .srh-demo__header { padding: var(--spacing-5) var(--spacing-7); }   /* py-5=20 / px-7=28 (node 11855:39365) */
    .srh-demo__frame { height: 588px; }                                /* Figma desktop 11855:39367 · h588 */
}