/* ============================================================================
   Home Page Hero — [section option="homepage-hero-section" type="hero"]
   Full-bleed dark hero. Mobile-first; breakpoints 768 / 1280.
   Layout: hero (card image + headline + live stats), then two cards — featured
   bonuses + RTP slots. Cards stack on mobile/tablet, sit side-by-side on desktop.
   All values map to design tokens (raw px only for component dimensions).
   ============================================================================ */

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

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

.hh__inner {
  max-width: 1019px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);                      /* mobile 16 (dense; rows near full-width) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-11);                           /* 44 hero ↔ cards */
}

/* gradient text helpers */
.hh-grad {
  background-image: var(--gradient-radial-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hh-grad--gold { background-image: var(--gradient-accent-gold); }

/* ── Hero (card image + headline + stats) ─────────────────────────────────── */
.hh__top {
  display: flex;
  flex-direction: column;                           /* mobile: card centered, intro below */
  align-items: center;
  gap: var(--spacing-4);
}
.hh__card-img {
  width: 138px;                                     /* mobile */
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 24px rgba(41, 156, 216, 0.45));
}
.hh__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                            /* 16 */
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

.hh__heading { display: flex; flex-direction: column; }
.hh__kicker {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);                   /* 34 / 36 / 38 */
  line-height: var(--line-height-h3);
}
.hh__title {
  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);
  color: var(--color-base-bluish-white);
}
.hh__rule { width: 100%; height: var(--border-width-thin); background: var(--color-primary-dark); }

.hh__stats { display: flex; flex-wrap: wrap; gap: var(--spacing-5); }   /* 20 (desktop 24) */
.hh-stat { display: flex; flex-direction: column; }
.hh-stat__value {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h6);                   /* 16 / 18 / 20 */
  line-height: var(--line-height-h6);
  white-space: nowrap;
}
.hh-stat__label {
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary-light);
  white-space: nowrap;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.hh__cards {
  display: flex;
  flex-direction: column;                           /* mobile/tablet stacked */
  gap: var(--spacing-7);                            /* 28 */
}
.hh-card {
  background: var(--color-callout-info);
  border: var(--border-width-thin) solid var(--color-primary-dark);
  border-radius: var(--radius-xl);
  padding: var(--spacing-7) var(--spacing-4);       /* mobile 28 / 16 (dense) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);                            /* 20 title ↔ body */
}
.hh-card__title {
  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-primary-light);
}
.hh-card__body { display: flex; flex-direction: column; gap: var(--spacing-2); }   /* 8 disclosure ↔ list */
.hh-card__list { display: flex; flex-direction: column; gap: var(--spacing-3); }   /* 12 rows */

/* Advertiser disclosure (fold/unfold) */
.hh-disc { display: flex; flex-direction: column; gap: var(--spacing-1); }
.hh-disc__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);                            /* 8 icon ↔ text (Figma) */
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-family-paragraph);        /* buttons don't inherit the family */
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-p3-caption);           /* 13 (desktop) */
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary-light);
}
.hh-disc__ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; }
.hh-disc__ico img { width: 100%; height: 100%; display: block; }
.hh-disc__text {
  font-size: var(--font-size-p4-caption);
  line-height: var(--line-height-p4-caption);
  color: var(--color-base-gray);
}
.hh-disc__text[hidden] { display: none; }
.hh-disc__text p { margin: 0 0 var(--spacing-1); }

/* Rows (bonus / slot) */
.hh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  background: var(--color-callout-info);
  border: var(--border-width-thin) solid var(--color-glow);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}
.hh-row__brand { display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; flex: 1 1 auto; }
.hh-row__logo {
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hh-row__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hh-row__casino {
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary);
}
.hh-row__offer {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary-light);
}
.hh-row__slot {
  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);
}
.hh-row__provider {
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary-light);
}
.hh-row__meta { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: var(--spacing-1); }
/* slot meta stays a horizontal row on every breakpoint (updated Figma); the compact
   RTP pill + "Play Free" sit side by side and the slot name wraps to 2 lines. */
.hh-row__meta--slot { flex-direction: row; align-items: center; gap: var(--spacing-2); }
.hh-row__rating {
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-primary-light);
  white-space: nowrap;
}
.hh-row__link {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  text-decoration: underline;
  white-space: nowrap;
}
.hh-rtp {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 var(--spacing-3);                      /* px-3 py-0 (updated Figma) */
  border: var(--border-width-thin) solid var(--color-accent-gold-default);
  border-radius: var(--radius-3xl);
  background-image: var(--gradient-accent-gold);
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-p3-caption);           /* mobile 11 — matches row text so it fits */
  line-height: var(--line-height-h6);               /* ~24 pill height */
  color: var(--color-base-dark);
  white-space: nowrap;
}

/* Footer CTA */
.hh-cta {
  margin-top: var(--spacing-3);                     /* + body gap 8 = 20 list ↔ CTA */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: 65px;
  padding: var(--spacing-4) var(--spacing-5);
  background-image: var(--gradient-button-default);
  border-radius: var(--radius-xl);
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  color: var(--color-base-white);
  text-decoration: none;
}
.hh .hh-cta:link, .hh .hh-cta:visited, .hh .hh-cta:hover, .hh .hh-cta:focus, .hh .hh-cta:active { color: var(--color-base-white); text-decoration: none; }
/* Hover: flat left→right darker gradient, no shadow. Composed from color tokens —
   no left/right blue→dark token exists (--gradient-default is top/bottom). */
.hh .hh-cta:hover { background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-dark)); }

/* Kill the theme's blue link hover (Blocksy a:hover → --theme-link-hover-color).
   "See Bonus" / "Play Free" are gradient text, so lock the transparent fill (and
   underline colour) across every interactive state — they keep the gradient, no blue. */
.hh .hh-row__link:link, .hh .hh-row__link:visited, .hh .hh-row__link:hover, .hh .hh-row__link:focus, .hh .hh-row__link:active {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration-color: transparent;
}
/* Disclosure toggle is a <button> but guard it too (no blue on hover/focus) */
.hh .hh-disc__toggle:hover, .hh .hh-disc__toggle:focus, .hh .hh-disc__toggle:active { color: var(--color-primary-light); }
.hh-cta__arrow { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Tablet ≥768 ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hh__inner { padding: 0 var(--spacing-12); }      /* 48 */
  .hh-card { padding: var(--spacing-7) var(--spacing-6); }  /* 28 / 24 — room returns */

  .hh__top { flex-direction: row; align-items: center; gap: var(--spacing-7); }  /* card | intro */
  .hh__card-img { width: 240px; }
  .hh__intro { flex: 1 1 0; }

  /* slot rows have room → wider badge↔link gap (Figma desktop gap-4) + full badge size */
  .hh-row__meta--slot { gap: var(--spacing-4); }
  .hh-rtp { font-size: var(--font-size-p2-base); }  /* 15 / 16 — Figma badge size */
}

/* ── Desktop ≥1280 ────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .hh__inner { padding: 0; }                        /* max-width centers */

  .hh__top { gap: var(--spacing-10); justify-content: center; }  /* 40 */
  .hh__card-img { width: 300px; }
  .hh__stats { gap: var(--spacing-6); }             /* 24 */

  /* Two cards side by side */
  .hh__cards { flex-direction: row; align-items: stretch; }
  .hh-card { flex: 1 1 0; min-width: 0; }
}