/* ============================================================================
   Casino Bonus Hero — [section cpt="casino-bonus" type="hero"]
   Full-bleed dark hero. Mobile-first; breakpoints 768 / 1280.
   Layout: one centered column — bonus card (brand pill on top), then the dates
   row, then the stats box. Desktop splits the card into offer | CTA columns.
   All values map to design tokens; documented drifts are the closest token where
   the Figma value is off-scale (never hard-coded, never a new token).
   ============================================================================ */

/* ── Full-bleed shell + Brizy edge-to-edge resets ─────────────────────────── */
.cbh {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  background-color: var(--color-deep-dark);
  background-image: url("../images/hero-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-25) 0;                 /* py-25 = 100 top/bottom (all breakpoints) */
  overflow: hidden;
  font-family: var(--font-family-paragraph);
}
.cbh *, .cbh *::before, .cbh *::after { box-sizing: border-box; }
.cbh h2, .cbh p { margin: 0; }

.brz-wrapper:has(.cbh) { margin-top: 0 !important; margin-bottom: 0 !important; }
.brz-section__content:has(.cbh) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ── Inner column ─────────────────────────────────────────────────────────── */
.cbh__inner {
  max-width: 1023px;                            /* desktop content width (Figma) */
  margin: 0 auto;
  padding: 0 var(--spacing-5);                  /* mobile px-5 = 20 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                        /* 16 card ↔ dates ↔ stats (mobile/tablet) */
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.cbh__card {
  background: var(--color-callout-info);
  border: var(--border-width-medium) solid var(--color-primary-dark);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-6) var(--spacing-5);   /* mobile 24 / 20 */
}
.cbh__card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);                        /* 20 mobile/tablet */
}

/* ── Brand pill ───────────────────────────────────────────────────────────── */
.cbh__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;               /* mobile: id ← → rating (full width) */
  gap: var(--spacing-5);
  width: 100%;
  background: var(--color-callout-info);
  border: var(--border-width-thin) solid var(--color-glow);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);   /* mobile py-3 px-4 = 12 / 16 */
}
.cbh__brand-id {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);                        /* 12 logo ↔ name */
  min-width: 0;
}
.cbh__logo {
  flex: 0 0 auto;
  width: 30px;                                  /* mobile 30 (Figma) */
  height: 30px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cbh__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cbh__name {
  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-h7);
  background: var(--gradient-radial-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cbh__rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-p3-caption);       /* 11 / 12 / 13 */
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary-light);
  white-space: nowrap;
}

/* ── Offer row (mobile/tablet: stacked; desktop: 2 columns) ───────────────── */
.cbh__offer-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                        /* 16 offer ↔ cta (mobile/tablet) */
}
.cbh__offer-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                        /* 16 headline ↔ desc (mobile/tablet) */
  min-width: 0;
}
.cbh__headline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);                        /* 8 type ↔ offer (mobile/tablet) */
}

/* Bonus type — gold gradient text + medal icon. H6 on mobile/tablet, H5 desktop. */
.cbh__type {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);                        /* 8 icon ↔ text */
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h6);               /* mobile 16 / tablet 18 */
  line-height: var(--line-height-h6);
  background: var(--gradient-accent-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cbh__type-ico {
  flex: 0 0 auto;
  width: 17px;                                  /* mobile (Figma 17) */
  height: 17px;
  background: url("../images/icons/type.svg") center / contain no-repeat;
}

/* Offer headline — H3. Figma offer is 30/38/38; --font-size-h3 is 34/36/38
   (desktop exact; tablet -2px; mobile +4px — closest semantic token, no hard-code). */
.cbh__offer {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-base-daisy-white);
}

/* Description — p2-base. Shown under the offer on mobile/tablet (--stack),
   moved beside the T&Cs toggle on desktop (--wide). */
.cbh__desc {
  font-size: var(--font-size-p2-base);          /* 14 / 15 / 16 */
  line-height: var(--line-height-p2-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-base-bluish-white);
}
.cbh__desc--wide { display: none; }             /* desktop only */

/* ── CTA + code column ────────────────────────────────────────────────────── */
.cbh__cta-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);                        /* mobile 20 CTA ↔ code */
}
.cbh__cta-col--no-code { justify-content: center; }

.cbh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100%;
  min-height: 63px;                             /* mobile h-63 (Figma) */
  padding: var(--spacing-4) var(--spacing-10);  /* 16 / 40 */
  background: var(--color-accent-gold-default);
  border-radius: var(--radius-xl);
  font-family: var(--font-family-header);
  font-size: var(--font-size-button);           /* 12 / 14 / 16 */
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-dark);
  text-decoration: none;
}
.cbh-btn:hover, .cbh-btn:focus, .cbh-btn:active, .cbh-btn:visited {
  color: var(--color-deep-dark);
  text-decoration: none;
}
.cbh-btn__chevron { font-weight: var(--font-weight-bold); }

/* Promo code — dashed box with the EXCLUSIVE badge tab overlapping its top edge. */
.cbh-code {
  position: relative;
  padding-top: var(--spacing-4);                /* reserve room so the badge overlaps the top border */
}
.cbh-code__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);                        /* 12 "Code:" ↔ value group */
  width: 100%;
  padding: var(--spacing-3) var(--spacing-6);   /* 12 / 24 */
  background: transparent;
  cursor: pointer;
  border: var(--border-width-thin) dashed var(--color-primary-light);
  border-radius: var(--radius-xl);
}
.cbh-code--exclusive .cbh-code__box { border-top-right-radius: 0; }   /* flush with the badge tab */
.cbh-code__copy { font: inherit; color: inherit; text-align: left; }
.cbh-code__group { display: inline-flex; align-items: center; gap: var(--spacing-2); }  /* 8 code ↔ copy */
.cbh-code__label {
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary-light);
}
.cbh-code__value {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-accent-gold-default);
}
.cbh-code__icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: url("../images/icons/copy.svg") center / contain no-repeat;
}
.cbh-code__badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 var(--spacing-3);                  /* px-3 = 12 */
  background: var(--gradient-accent-gold);
  border-radius: var(--radius-md) var(--radius-lg) 0 0;
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-p4-caption);       /* 9 */
  line-height: var(--line-height-p4-caption);
  color: var(--color-base-dark);
}

/* ── T&Cs (description on desktop + toggle) + terms ───────────────────────── */
.cbh__tcs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);                        /* 8 toggle-row ↔ terms (mobile/tablet) */
}
.cbh__tcs-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;                    /* mobile/tablet: toggle right-aligned, alone */
  gap: var(--spacing-2);
}
.cbh-tcs__toggle {
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-base-light-gray);
  white-space: nowrap;
}
.cbh-tcs__caret {
  display: inline-block;
  width: 16px;
  height: 19px;
  background: url("../images/icons/caret.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.cbh-tcs__toggle[aria-expanded="true"] .cbh-tcs__caret { transform: rotate(180deg); }

.cbh__terms {
  background: var(--color-callout-info);
  border-radius: var(--radius-md);
  padding: var(--spacing-2);                    /* mobile 8 */
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-base-gray);
}
.cbh__terms[hidden] { display: none; }

/* ── Dates ────────────────────────────────────────────────────────────────── */
.cbh__dates {
  display: flex;
  flex-direction: column;                       /* mobile/tablet: stacked */
  gap: var(--spacing-1);                         /* 4 */
}
.cbh-date {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);                        /* 4 */
  font-size: var(--font-size-p2-base);          /* 14 / 15 / 16 */
  line-height: var(--line-height-p2-base);
  color: var(--color-primary);
}
.cbh-date__ico {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cbh-date__ico--start { background-image: url("../images/icons/start.svg"); }
.cbh-date__ico--end { width: 17px; height: 17px; background-image: url("../images/icons/expire.svg"); }
.cbh-date__label { color: var(--color-primary); }
.cbh-date__val {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-bold);
  color: var(--color-base-light-gray);
}

/* ── Stats box (dashed, hugs content, left-aligned) ───────────────────────── */
.cbh__stats { display: flex; }
.cbh__stats-box {
  display: flex;
  align-items: flex-start;                      /* top-align columns so all labels stay on one line
                                                   (the Wagering value's suffix makes its column taller) */
  gap: var(--spacing-7);                        /* mobile 28 */
  background: var(--color-callout-info);
  border: var(--border-width-thin) dashed var(--color-primary-dark);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-6);   /* mobile 16 / 24 */
}
.cbh-stat { display: flex; flex-direction: column; }
.cbh-stat__label {
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  background: var(--gradient-radial-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.cbh-stat__value {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h6);               /* mobile 16 (H6) */
  line-height: var(--line-height-h6);
  color: var(--color-base-light-gray);
  white-space: nowrap;
}
.cbh-stat__suffix {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-p3-caption);
}

/* ── Tablet ≥768 ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .cbh__inner { padding: 0 var(--spacing-12); }              /* px-12 = 48 */

  .cbh__card { padding: var(--spacing-9) var(--spacing-10); } /* 36 / 40 */

  /* Brand pill hugs its content (no longer full-width) */
  .cbh__brand {
    width: auto;
    align-self: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-7);                                    /* 28 id ↔ rating */
    padding: var(--spacing-4);                                /* 16 */
  }
  .cbh__logo { width: 39px; height: 39px; }
  .cbh__type-ico { width: 26px; height: 26px; }

  .cbh__cta-col { gap: var(--spacing-4); }                   /* 16 CTA ↔ code */
  .cbh-btn { min-height: 70px; }                             /* tablet h-70 */

  .cbh__stats-box {
    gap: var(--spacing-10);                                  /* 40 */
    padding: var(--spacing-5) var(--spacing-7);              /* 20 / 28 */
  }
  .cbh-stat__value {
    font-size: var(--font-size-h5);                          /* tablet 22 */
    line-height: var(--line-height-h5);
  }
}

/* ── Desktop ≥1280 ────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .cbh__inner { gap: var(--spacing-5); padding: 0; }         /* 20 gap; drop side padding so the card spans the full 1023 (viewport centers it) */

  .cbh__card { padding: var(--spacing-10); }                /* 40 */
  .cbh__card-inner { gap: var(--spacing-6); }               /* 24 */

  /* Offer row becomes 2 columns: offer (flex) | CTA (267px) */
  .cbh__offer-row {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-15);                                  /* 60 */
  }
  .cbh__offer-col { flex: 1 1 auto; }
  .cbh__headline { gap: var(--spacing-6); }                 /* 24 type ↔ offer */
  .cbh__type { font-size: var(--font-size-h5); line-height: var(--line-height-h5); }  /* 24 */

  .cbh__desc--stack { display: none; }
  .cbh__desc--wide { display: block; }

  .cbh__cta-col { flex: 0 0 267px; }                        /* Figma CTA column width */
  .cbh-btn { min-height: 74px; }                            /* desktop h-74 */

  /* T&Cs row: description (left) ↔ toggle (right) */
  .cbh__tcs { gap: var(--spacing-3); }                      /* 12 */
  .cbh__tcs-row {
    justify-content: space-between;
    align-items: flex-end;
  }
  .cbh__terms { padding: var(--spacing-1) var(--spacing-3); } /* 4 / 12 */

  /* Dates in a single row */
  .cbh__dates { flex-direction: row; flex-wrap: wrap; gap: var(--spacing-6); } /* 24 */

  .cbh__stats-box { padding: var(--spacing-4) var(--spacing-9); }   /* 16 / 36 */
  .cbh-stat__value {
    font-size: var(--font-size-h5);                          /* desktop 24 */
    line-height: var(--line-height-h5);
  }
}

/* Tablet terms padding (py-2 px-3) sits between mobile (8) and desktop (4/12). */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .cbh__terms { padding: var(--spacing-2) var(--spacing-3); } /* 8 / 12 */
}