/* ============================================================================
   Casino Review Hero — [section cpt="casino-review" type="hero"]
   Full-bleed banner. Mobile-first; breakpoints 768 / 1280.
   Reflow: leaf blocks flatten via display:contents + flex order per breakpoint.
   All values map to design tokens (base + site-overrides). No hard-coded values.
   ============================================================================ */

/* ── Full-bleed shell + Brizy edge-to-edge resets ─────────────────────────── */
.crh {
  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.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-base-light-gray);
  font-family: var(--font-family-paragraph);
}
.crh *, .crh *::before, .crh *::after { box-sizing: border-box; }
.crh h1, .crh p { margin: 0; }

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

/* ── Inner container ──────────────────────────────────────────────────────── */
.crh__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--spacing-25) var(--spacing-5);   /* mobile: 100 / 20 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);                          /* 28 header ↔ panel group */
}

/* ── Left region (identity + intro) ───────────────────────────────────────── */
.crh__left {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--spacing-6);                   /* 24 logo ↔ titles */
  row-gap: var(--spacing-3);                       /* 12 rows */
  align-items: center;
}
.crh__idcol { display: contents; }
.crh__main  { display: contents; }
.crh__intro { display: contents; }

.crh__id {
  order: 1;
  width: 116px;                                    /* mobile logo (Figma 116) */
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.crh__id img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crh__titles {
  order: 2;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);                           /* 8 name ↔ rating */
}
.crh__name {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);                  /* mobile H3 34 (tablet/desktop override to H2) */
  line-height: var(--line-height-h3);
  color: var(--color-primary-light);
}
.crh__rating {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h4);
  line-height: var(--font-size-h4);                /* Figma: line-height = size */
  color: var(--color-base-ghost-white);
}
.crh__excerpt {
  order: 3;
  flex-basis: 100%;
  width: 100%;
  font-size: var(--font-size-p2-base);             /* 14 / 15 / 16 (was p3-caption) */
  line-height: var(--line-height-p2-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-base-light-gray);
}

/* CTA button */
.crh__cta {
  order: 4;
  flex-basis: 100%;
  width: 100%;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  padding: var(--spacing-4) var(--spacing-13);     /* 16 / 52 */
  border-radius: var(--radius-xl);
  background-image: var(--gradient-button-default);
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  text-decoration: none;
  white-space: nowrap;
}
.crh .crh__cta:link,
.crh .crh__cta:visited,
.crh .crh__cta:hover,
.crh .crh__cta:focus,
.crh .crh__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). */
.crh .crh__cta:hover { background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-dark)); }
.crh__cta-chevron { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Panel wrap (stats panel + stacked callout) ───────────────────────────── */
.crh__panelwrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                           /* 16 panel ↔ callout */
}
.crh__panel { display: flex; flex-direction: column; gap: var(--spacing-0); }
.crh__lower { display: contents; }                 /* stack table + meta */

/* Card shells */
.crh__stats {
  background: var(--color-primary-dark);
  border-top: var(--border-width-thin) solid var(--color-glow);
  border-left: var(--border-width-thin) solid var(--color-glow);
  border-right: var(--border-width-thin) solid var(--color-glow);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: var(--spacing-5);
}
.crh__statsinner { display: flex; flex-direction: column; gap: var(--spacing-4); }

.crh__table {
  background: var(--color-deep-dark);
  border: var(--border-width-thin) solid var(--color-primary-dark);
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);                            /* 12 */
}
.crh__meta {
  background: var(--color-callout-info);
  border: var(--border-width-thin) solid var(--color-primary-dark);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                            /* 16 flags ↔ facts */
}
.crh__metarows { display: flex; flex-direction: column; gap: var(--spacing-2); }

/* 3-stat dashed box */
.crh-stat3 {
  background: var(--color-callout-info);
  border: var(--border-width-thin) dashed var(--color-glow);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);                        /* mobile/desktop 12/12 */
  /* 3 stats in ONE horizontal row (labels row 1, values row 2). Mobile per Figma:
     content-width columns hugged left with spacing-4 gaps — labels stay on ONE line. */
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  column-gap: var(--spacing-4);                     /* 16 (Figma spacing-4) */
  align-items: end;                                 /* labels sit just above their value */
}
.crh-stat { display: contents; }
.crh-stat__label { grid-row: 1; white-space: nowrap; }   /* one-line labels (Figma) */
.crh-stat__value {
  grid-row: 2;
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  color: var(--color-base-light-gray);
}

/* micro gradient labels (Slot Games, Accepted Fiat, …) */
.crh-grad {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  background-image: var(--gradient-radial-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* VIP / Loyalty / Tournament flags (rendered in both cards; one shown per breakpoint) */
.crh__flags { display: flex; flex-direction: column; gap: var(--spacing-4); }
.crh__flags--b { display: none; }                  /* base: shown only on tablet */
.crh-flag { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.crh-flag__name {
  display: 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-primary-light);
}
.crh-flag__name .crh-ico { color: var(--color-primary-light); }
.crh-flag__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 var(--spacing-3);                      /* yes: px-3 */
  border-radius: var(--radius-sm);
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-button);
  color: var(--color-base-white);
  white-space: nowrap;
}
.crh-flag__pill--yes { background: var(--color-semantic-success); }
.crh-flag__pill--no  { background: var(--color-semantic-error); padding: 0 var(--spacing-2); }

/* fact rows (payout table + casino facts) */
.crh-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); width: 100%; }
.crh-row__label {
  flex-shrink: 0;
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-base-gray);
}
.crh-row__value {
  text-align: right;
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-button);
  color: var(--color-base-gray);
  overflow-wrap: anywhere;
}
.crh__rule { height: var(--border-width-thin); width: 100%; background: var(--color-primary-dark); }

/* accepted-currencies / customer-service callout (D) */
.crh__extra {
  background: var(--color-callout-info);
  border: var(--border-width-thin) dashed var(--color-glow);
  border-radius: var(--radius-lg);                  /* mobile 8 */
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                            /* mobile/tablet 16 */
}
.crh__extra--inline { display: none; }              /* desktop-only */
.crh-fact { display: flex; flex-direction: column; gap: var(--spacing-1); }
.crh-fact__head { display: flex; align-items: center; gap: var(--spacing-1); }
.crh-fact__value {
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-base-light-gray);
  overflow-wrap: anywhere;
}

/* icons */
.crh-ico { flex-shrink: 0; width: 18px; height: 18px; display: block; }
.crh-fact__head .crh-ico { color: var(--color-primary); }

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

  .crh__left { column-gap: var(--spacing-7); row-gap: var(--spacing-7); align-items: flex-start; }  /* 28; logo tops with the title even when the description is long */
  .crh__intro { display: flex; flex-direction: column; gap: var(--spacing-6); order: 2; flex: 1 1 0; min-width: 0; }
  .crh__id { width: 211px; }
  .crh__cta { order: 3; }
  .crh__name { font-size: var(--font-size-h2); line-height: var(--line-height-h2); }  /* tablet/desktop H2 (mobile stays H3) */

  .crh-stat3 {                                     /* px-5 py-3; content-width columns, left-aligned (Figma) */
    padding: var(--spacing-3) var(--spacing-5);
    grid-template-columns: auto auto auto;
    justify-content: start;
    column-gap: var(--spacing-5);                 /* 40 — roomy gaps, hugged left */
  }

  .crh__extra { border-radius: var(--radius-xl); }                /* 12 */

  /* flags move from the stats card into the meta card */
  .crh__flags--a { display: none; }
  .crh__flags--b { display: flex; }

  /* table | meta side by side under the stats card */
  .crh__lower { display: flex; flex-direction: row; gap: var(--spacing-0); align-items: stretch; }
  .crh__table { flex: 1 1 0; min-width: 0; border-bottom-left-radius: var(--radius-xl); }
  .crh__table { gap: var(--spacing-4); }                          /* 16 */
  .crh__meta { flex: 1 1 0; min-width: 0; border-bottom-left-radius: 0; }
}

/* ── Desktop ≥1280 ────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .crh__inner {
    padding: var(--spacing-25) var(--spacing-11);   /* 100 / 44 */
    flex-direction: row;
    gap: var(--spacing-7);
    justify-content: flex-end;
    align-items: flex-start;
  }

  .crh__left {
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: var(--spacing-7);                    /* 28 idcol ↔ main */
    align-items: flex-start;
    width: 706px;
    flex-shrink: 0;
  }
  .crh__idcol {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);                           /* 20 logo ↔ cta */
    width: 211px;
    flex-shrink: 0;
  }
  .crh__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);                           /* 24 intro ↔ callout */
    flex: 1 1 0;
    min-width: 0;
  }
  .crh__intro { gap: var(--spacing-4); order: 0; flex: 0 0 auto; }  /* 16 titles ↔ excerpt */
  .crh__id { width: 211px; order: 0; }
  .crh__cta { order: 0; flex-basis: auto; }         /* column: let height:77 hold */

  .crh__extra--inline { display: flex; }
  .crh__extra--stacked { display: none; }
  .crh__extra { gap: var(--spacing-3); border-radius: var(--radius-lg); }   /* 12; radius 8 (desktop) */

  .crh__panelwrap { display: block; width: 452px; flex-shrink: 0; }
  .crh__panel { width: 100%; }

  /* flags back in the stats card; table + meta stacked again */
  .crh__flags--a { display: flex; }
  .crh__flags--b { display: none; }

  .crh__lower { display: contents; }
  .crh__table { border-bottom-left-radius: 0; gap: var(--spacing-3); }  /* 12 */
  .crh__meta {
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }

  .crh-stat3 {                                     /* 12/12; distributed across the fixed-width card (desktop) */
    padding: var(--spacing-3);
    justify-content: space-between;
  }
}