/* Responsible Gambling — mockup frames betfans-responsible-gambling-desktop [1:3606]
 * / betfans-responsible-gambling-mobile [74:311].
 *
 * Everything is prefixed rgp- so it cannot collide with the shared .rg-section
 * / .rg-col component that components.css already owns for the repeated band.
 *
 * Colours come from tokens.css: --color-slate is the guide arrow glyph
 * (the mobile frame draws the same glyph #777777), --color-ink-deep the
 * near-black cards of section 08, --color-on-dark-20 the hairlines and the
 * ghost section index on brand blue.
 */

/* ── hero [1:3634] — 840/600 split of the 1440 frame, 580 tall ─────────── */
.rgp-hero { display: grid; grid-template-columns: 840fr 600fr; min-height: 580px; background: var(--color-bg); }
.rgp-hero__panel {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; flex-direction: column; justify-content: center;
  padding: 56px 40px 56px max(var(--container-pad), calc((100vw - var(--container)) / 2));
  background: var(--grad-hero);
  color: var(--color-on-dark);
}
.rgp-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-24); max-width: 720px; }
.rgp-hero__headline {
  display: flex; flex-direction: column; gap: var(--space-12);
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px; line-height: 86.4px;
  color: var(--color-on-dark);
}
.rgp-hero__lead { font-size: var(--fs-body-sm); line-height: 23px; color: var(--color-on-dark-70); }
.rgp-hero__support { display: flex; flex-direction: column; gap: var(--space-10); }
.rgp-hero__support-title { font-size: var(--fs-base); font-weight: 700; line-height: 19.12px; color: var(--color-on-dark); }
.rgp-hero__support-link { align-self: flex-start; line-height: 19.12px; color: var(--color-on-dark); }
.rgp-hero__support-link:hover { text-decoration: underline; }

/* Decorative discs [37:376] / [37:377] — behind the copy, clipped by the panel. */
.rgp-hero__circle, .rgp-hero__arc {
  position: absolute; z-index: 1; border-radius: var(--radius-pill);
  background: var(--color-on-dark); opacity: .08; pointer-events: none;
}
.rgp-hero__circle { width: 220px; height: 220px; left: 680px; top: 120px; }
.rgp-hero__arc { width: 260px; height: 260px; left: -80px; top: 320px; opacity: .06; }

.rgp-hero__media { position: relative; }
.rgp-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── page guide [37:379] — "ON THIS PAGE", plain in-page anchors ────────── */
.rgp-guide { padding-block: var(--section-pad-y); background: var(--color-surface); }
.rgp-guide__title { font-size: var(--fs-xs); font-weight: 700; line-height: 16px; letter-spacing: var(--ls-wide); color: var(--color-ink); }
.rgp-guide__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16);
  margin-top: var(--space-24);
}
.rgp-guide__item {
  display: flex; align-items: center; gap: var(--space-12);
  min-height: 58px; padding-block: var(--space-16);
  box-shadow: inset 0 -1px 0 var(--color-border);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.rgp-guide__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 26.4px; color: var(--color-brand); }
.rgp-guide__label { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 700; line-height: 19.12px; color: var(--color-ink); }
.rgp-guide__arrow { font-size: var(--fs-sm); line-height: 18px; color: var(--color-slate); transition: transform var(--dur-fast) var(--ease); }
.rgp-guide__item:hover .rgp-guide__label { color: var(--color-brand); }
.rgp-guide__item:hover .rgp-guide__arrow { transform: translateX(3px); color: var(--color-brand); }

/* ── section shell ─────────────────────────────────────────────────────── */
.rgp-section { padding-block: var(--section-pad-y); background: var(--color-bg); scroll-margin-top: 132px; }
.rgp-section--white { background: var(--color-surface); }
.rgp-section--tint { background: var(--color-tint); }
.rgp-section--brand { background: var(--color-brand); color: var(--color-on-dark); }

.rgp-stack { display: flex; flex-direction: column; gap: var(--space-32); }
.rgp-stack--24 { gap: var(--space-24); }
.rgp-section__head { display: flex; flex-direction: column; gap: var(--space-8); }
.rgp-section__intro { max-width: none; }

/* 360 / 872 split with a 48 gutter — exactly the 1280 content column. */
.rgp-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-48); }
.rgp-split__left { display: flex; flex-direction: column; gap: var(--space-12); }
.rgp-split__right { display: flex; flex-direction: column; gap: var(--space-20); }

/* In the mockup each headline line is its own text node inside the column, so
   the 12px column gap sits between them too — without it section 05 comes up
   12px short and the whole section box misses. */
.rgp-section .display span { display: block; }
.rgp-split__left .display { display: flex; flex-direction: column; gap: var(--space-12); }
.rgp-section__title--light { color: var(--color-on-dark); }

.rgp-section__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px; line-height: 115.2px;
  color: var(--color-on-brand-dim);
}
.rgp-section__no--brand { color: var(--color-brand); }
/* The mockup draws the index of a coloured section as a watermark: the fill is
   already translucent and the node carries its own opacity on top ([1:3746],
   [1:3760], [37:475]). Both halves are reproduced, or the number reads far
   heavier than the frame. */
.rgp-section__no--ghost { color: var(--color-on-dark-20); opacity: .2; }
.rgp-section__no--xl { font-size: 120px; line-height: 144px; opacity: .06; }
.rgp-section__no--md { font-size: var(--fs-h1); line-height: 86.4px; }
.rgp-section__no--sm { font-size: var(--fs-h2); line-height: 57.6px; }
/* Section 02 is numbered on the mobile frame [74:413] and unnumbered on the
   desktop one [1:3719] — the index follows the frame it belongs to. */
.rgp-section__no--m { display: none; }

.rgp-lead { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }
.rgp-section--brand .rgp-lead { color: var(--color-on-dark-70); }

.rgp-bullets { display: flex; flex-direction: column; gap: var(--space-12); }
.rgp-bullets li { font-size: var(--fs-base); line-height: 21px; color: var(--color-text); }
.rgp-bullets--two {
  display: grid; grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  column-gap: var(--space-24); row-gap: var(--space-12);
}

/* ── 02 tools [37:423] ─────────────────────────────────────────────────── */
.rgp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.rgp-tool {
  display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--space-20); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.rgp-tool__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 26.4px; color: var(--color-brand); }
.rgp-tool__body { font-size: var(--fs-base); line-height: 21px; color: var(--color-text); }
.rgp-tool__link { align-self: flex-start; line-height: 19.12px; }

/* ── 03 white surface on brand blue [37:435] ───────────────────────────── */
.rgp-surface {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-32); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.rgp-surface__body { font-size: var(--fs-base); line-height: 21px; color: var(--color-text); }
.rgp-surface__label { font-size: var(--fs-xs); font-weight: 700; line-height: 16px; letter-spacing: var(--ls-wide); color: var(--color-brand); }
.rgp-surface__note { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }
.rgp-surface__link { align-self: flex-start; font-size: var(--fs-xs); line-height: 16px; }
.rgp-surface__heading { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-ink); }
/* The two BetStop lines are loose children on desktop [37:436]/[37:437] and one
   8px group on mobile [74:441]; the wrapper carries the desktop gap so the
   desktop box is unchanged. The hairlines [74:438]/[74:444] are mobile only. */
.rgp-surface__links { display: flex; flex-direction: column; gap: var(--space-12); }
.rgp-surface__rule { display: none; height: 1px; background: var(--color-border); }

/* ── 04 questions card [37:444] ────────────────────────────────────────── */
.rgp-questions { display: flex; flex-direction: column; gap: var(--space-20); }
.rgp-questions__title { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-ink); }
.rgp-questions__list { display: flex; flex-direction: column; gap: var(--space-12); }
.rgp-questions__list li { font-size: var(--fs-base); line-height: 21px; color: var(--color-text); }
.rgp-questions__foot { font-size: var(--fs-base); line-height: 21px; color: var(--color-brand); }

/* ── 05 rules [37:449] / [1:3793] ──────────────────────────────────────── */
.rgp-rule { display: block; height: 2px; background: var(--color-brand); }

/* ── 06 restriction cards [37:456] / [37:458] ──────────────────────────── */
.rgp-restrictions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-48); align-items: start; }
.rgp-card {
  display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--space-32); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.rgp-card--tint { background: var(--color-tint); }
.rgp-card__mark { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 77px; color: var(--color-brand); }
.rgp-card__title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; line-height: 25px; color: var(--color-ink); }
.rgp-card__body { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.rgp-card__debit { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.rgp-card__debit-note { font-size: var(--fs-sm); line-height: 18px; color: var(--color-faint); }
/* [1:3800] / [74:503] — this label is 11/15 in both frames; the shared .eyebrow
   drops to 9px below 768, which would shorten the card by 2.7px. */
.rgp-card .eyebrow { font-size: var(--fs-2xs); line-height: 15px; }

/* ── 07 support directory [74:513] ─────────────────────────────────────── */
.rgp-directory { display: flex; flex-direction: column; }
.rgp-directory__entry { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-16); }
.rgp-directory__entry + .rgp-directory__entry { border-top: 1px solid var(--color-border); }
.rgp-directory__name { font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-brand); }
.rgp-directory__phone { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 34px; color: var(--color-ink); }
.rgp-directory__phone a { text-decoration: none; }
.rgp-directory__phone a:hover { color: var(--color-brand); }
.rgp-directory__note { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }

/* ── 08 responsibilities [37:477] — three cards with 1px hairlines ─────── */
/* [37:477] the row is 220 tall because the hairlines are 220 while the cards
   are only as tall as their copy (180 / 180 / 159). Cards therefore sit at the
   top and the rules stretch to the row. */
.rgp-resp-grid { display: flex; gap: var(--space-16); align-items: flex-start; min-height: 220px; }
.rgp-resp {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--space-20); border-radius: var(--radius-sm);
  background: var(--color-ink-deep);
  box-shadow: inset 0 0 0 1px var(--color-on-dark-20);
}
.rgp-resp__title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; line-height: 25px; color: var(--color-on-dark); }
.rgp-resp__body { font-size: var(--fs-base); line-height: 21px; color: var(--color-on-dark-70); }
.rgp-resp-grid__rule { flex: 0 0 1px; align-self: stretch; background: var(--color-on-dark-20); }

/* ── 09 regulation and complaints [74:540] ─────────────────────────────── */
.rgp-block { display: flex; flex-direction: column; gap: var(--space-12); }
.rgp-block__title { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-brand); }
.rgp-divider { display: block; height: 1px; background: var(--color-border); }

/* ── tablet: no mockup frame, derived from the constraints ─────────────── */
@media (max-width: 1199px) {
  .rgp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rgp-hero__panel { padding: var(--space-32) var(--container-pad); }
  .rgp-hero__headline { font-size: 72px; line-height: 68px; }
  .rgp-hero__media img { max-height: 360px; }
  .rgp-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgp-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .rgp-restrictions { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .rgp-tools { grid-template-columns: minmax(0, 1fr); }
  .rgp-resp-grid { flex-direction: column; }
  .rgp-resp-grid__rule { display: none; }
}

/* ── mobile frame [74:311]: sections pad 56/20, index 72, headings 38 ──── */
@media (max-width: 767px) {
  .rgp-hero__panel { min-height: 443px; padding: 40px var(--container-pad); justify-content: flex-start; }
  .rgp-hero__inner { gap: var(--space-20); }
  .rgp-hero__headline { font-size: 54px; line-height: 51px; gap: 0; }
  .rgp-hero__lead { font-size: var(--fs-base); line-height: 21px; color: rgb(255 255 255 / .851); }
  .rgp-hero__support { gap: var(--space-8); padding-block: var(--space-8) 0; }
  .rgp-hero__circle { width: 120px; height: 120px; left: auto; right: -30px; top: 20px; }
  .rgp-hero__arc { width: 100px; height: 100px; left: -30px; top: 180px; }
  .rgp-hero__media img { height: 240px; }

  .rgp-guide { padding-block: 56px; }
  .rgp-guide__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rgp-guide__item { min-height: 50px; padding-block: 14px; }
  .rgp-guide__no { font-size: var(--fs-md); line-height: 22px; }
  .rgp-guide__arrow { color: var(--color-faint); }

  /* Mobile sections are 56/20 with a 24 column gap; only section 01 [74:382]
     uses 20, so it carries its own modifier. */
  .rgp-section { padding-block: 56px; }
  .rgp-section__no--m { display: block; }
  .rgp-stack, .rgp-stack--24 { gap: var(--space-24); }
  .rgp-split { gap: var(--space-24); }
  .rgp-split__left { gap: var(--space-24); }
  .rgp-split__right { gap: var(--space-24); }
  .rgp-split--20 { gap: var(--space-20); }
  .rgp-split__left--20 { gap: var(--space-20); }
  .rgp-split__right--20 { gap: var(--space-20); }
  .rgp-split__left .display { gap: 0; }
  .rgp-section__no,
  .rgp-section__no--xl,
  .rgp-section__no--md,
  .rgp-section__no--sm { font-size: var(--fs-h1); line-height: 72px; }
  .rgp-section__no--m { font-size: var(--fs-h6); line-height: 24px; }   /* [74:413] */
  .rgp-section .display,
  .rgp-section .display--48,
  .rgp-section .display--36 { font-size: 38px; line-height: 38px; }

  .rgp-bullets--two { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: var(--space-8); }
  .rgp-tool { gap: var(--space-12); }
  .rgp-surface { padding: var(--space-24); gap: var(--space-20); }
  .rgp-surface__rule { display: block; }
  .rgp-surface__links { gap: var(--space-8); }
  .rgp-surface__label { font-size: var(--fs-body-sm); line-height: 20px; letter-spacing: normal; }
  .rgp-surface__link { font-size: var(--fs-base); line-height: 19.12px; }
  .rgp-surface__links .rgp-surface__label { font-size: var(--fs-base); line-height: 19.12px; }
  .rgp-surface__heading { font-size: var(--fs-body-sm); line-height: 20px; }
  .rgp-resp-grid { align-items: stretch; min-height: 0; gap: var(--space-16); }
  .rgp-resp { gap: var(--space-8); }
  .rgp-resp__title { font-size: var(--fs-body); line-height: 22px; }
  .rgp-resp__body { font-size: var(--fs-sm); line-height: 20px; }
  .rgp-card { padding: var(--space-24); gap: var(--space-12); }
  .rgp-card__mark { font-size: var(--fs-h2); line-height: 48px; }
  .rgp-card__body { font-size: var(--fs-base); line-height: 21px; }
  /* [74:506] the note block carries a 12px top inset and a 23px badge. */
  .rgp-card__debit { flex-direction: column; align-items: flex-start; gap: var(--space-8); padding-top: var(--space-12); }
  .rgp-card__debit .badge { min-height: 23px; padding-block: var(--space-4); }
  .rgp-tool__title { line-height: 26px; }
  .rgp-questions {
    gap: var(--space-16); padding: var(--space-20);
    background: var(--color-surface); border-radius: var(--radius-sm);
  }
  .rgp-questions__list { gap: var(--space-10); }
  .rgp-questions__list li,
  .rgp-questions__foot { font-size: var(--fs-sm); line-height: 18px; }
  .rgp-directory__phone { font-size: var(--fs-h4); line-height: 34px; }
}