/* Help Centre — mockup frames betfans-help-centre-desktop [1:1218] / betfans-help-centre-mobile [74:629].
 *
 * One page-local number: --help-arrow-size 28px, the decorative chevrons [44:41…43].
 * The 16px panel radius now comes from --radius-2xl in tokens.css.
 */
.help-hero { --help-arrow-size: 28px; }

/* ── help-hero [44:28] — 56px band, 744/512 split ─────────────────────── */
.help-hero { padding-block: 56px; background: var(--color-bg); }
.help-hero__split {
  display: grid; grid-template-columns: 744fr 512fr; gap: var(--space-24);
  align-items: start;
}
.help-hero__copy { display: flex; flex-direction: column; gap: var(--space-20); }
.help-hero__headline {
  display: flex; flex-direction: column; gap: var(--space-20);
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px; line-height: 91.2px;
  color: var(--color-ink);
}
.help-hero__lead { font-size: var(--fs-body-sm); line-height: 23px; color: var(--color-muted); }

/* hero-graphic [44:35] — gradient panel, rings and the question mark */
.help-hero__graphic {
  position: relative; overflow: hidden;
  height: 400px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(63deg, var(--color-brand) 0%, var(--color-brand-lift) 100%);
  color: var(--color-on-dark);
}
.help-hero__grain { position: absolute; inset: 0; background: var(--color-on-dark); opacity: .03; }
.help-hero__ring {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  border: 1px solid var(--color-on-dark);
  background: rgb(255 255 255 / 0);        /* the mockup fills the ellipse with 0-alpha white */
  opacity: .35;
}
.help-hero__ring--lg { width: 180px; height: 180px; border-radius: 90px; }
.help-hero__ring--md { width: 140px; height: 140px; border-radius: 70px; }
.help-hero__ring--sm { width: 100px; height: 100px; border-radius: 50px; }
/* [44:215] sits 12px above the panel centre, not on it. */
.help-hero__mark {
  position: absolute; left: 50%; top: calc(50% - 12px); translate: -50% -50%;
  display: grid; place-items: center; width: 220px; height: 220px;
}
.help-hero__mark .icon { width: 183.35px; height: 183.35px; fill: currentColor; stroke: none; }

.help-hero__arrow { position: absolute; width: var(--help-arrow-size); height: var(--help-arrow-size); }
.help-hero__arrow .icon { width: 100%; height: 100%; fill: currentColor; stroke: none; }
/* One chevron in the mockup, placed three times — the rotation is the difference. */
.help-hero__arrow--up { left: 28px; top: 28px; rotate: 180deg; }
.help-hero__arrow--right { right: 28px; top: 50%; margin-top: calc(var(--help-arrow-size) / -2); rotate: -90deg; }
.help-hero__arrow--down { left: 28px; bottom: 28px; }

/* ── help-topics [44:44] + the open topic [44:86] ─────────────────────── */
.help-topics { padding-block: 56px; background: var(--color-surface); }

/* The list is a wrapping flex row so the open panel can be a full-width child:
   on desktop `order` sends every panel below the whole grid, which is exactly
   what frame [44:86] draws; on mobile the order is dropped and the panel stays
   where the mobile frame nests it, right under its own topic [79:2453]. */
/* The frame's own row does not add up: three 416px cards with a 24px gap need
   1296px inside a 1280px column [44:47]. The card size is the visible object, so
   416px is kept and the gap gives way — 416×3 + 16×2 = 1280 exactly. */
.topics { display: flex; flex-wrap: wrap; gap: 10px var(--space-16); margin-top: var(--space-32); }

.topic {
  flex: 0 0 calc((100% - var(--space-16) * 2) / 3);
  display: flex; align-items: center; gap: var(--space-12);
  height: 54px; padding: 0 var(--space-16);
  border: 0; border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.topic:hover { background: var(--color-tint); box-shadow: inset 0 0 0 1px var(--color-brand); }
/* [44:48]: the open topic is tinted and carries a 4px left / 2px bottom brand edge. */
.topic[aria-expanded="true"] {
  background: var(--color-tint);
  box-shadow: inset 4px 0 0 var(--color-brand), inset 0 -2px 0 var(--color-brand);
}
.topic__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); line-height: 34px; color: var(--color-brand);
}
.topic__name {
  flex: 1; min-width: 0;
  font-size: var(--fs-body-sm); font-weight: 700; line-height: 20.49px; color: var(--color-ink);
}
.topic__arrow {
  font-size: var(--fs-sm); font-weight: 700; line-height: 18px; color: var(--color-brand);
  transition: transform var(--dur-fast) var(--ease);
}
.topic:hover .topic__arrow { transform: translateX(3px); }
.topic[aria-expanded="true"] .topic__arrow { transform: rotate(90deg); }

.topic-panel { flex: 0 0 100%; order: 1; display: none; background: var(--color-surface); }
.topic-panel.is-open { display: block; }
/* The list's row gap is 10px, the frame leaves 56px above the open topic.
   [44:86] is a full-bleed 1440 frame carrying its own 80/56 padding, so the open
   panel breaks out of the container and takes that padding on itself; the negative
   bottom margin gives the 56px back, leaving the section rhythm unchanged. */
.topics > .topic-panel.is-open {
  flex-basis: calc(100% + var(--container-pad) * 2);
  margin-top: 46px;
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  padding-bottom: 56px;
  margin-bottom: -56px;
}

/* gs-header [44:87] */
.gs { display: flex; flex-direction: column; gap: var(--space-16); }
.gs__index {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-hero); line-height: 144px; color: var(--color-on-brand-dim);
}
.gs__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 52px; line-height: 62.4px; color: var(--color-ink);
}
.gs__lead { font-size: var(--fs-body-sm); line-height: 22.5px; color: var(--color-muted); }
.gs__rule { height: 1px; border: 0; background: var(--color-brand); }

/* article-list [44:93] */
.article-list { margin-top: var(--space-32); }
/* [44:94] is 130px tall by the frame, not by its text — a fixed height in the
   mockup becomes min-height here. The +1 on the following rows is the separator:
   the frame draws it as its own 1px rectangle, the border-box eats it. */
.article { display: flex; align-items: center; gap: var(--space-24); min-height: 130px; padding-block: var(--space-16); }
.article + .article { min-height: 131px; border-top: 1px solid var(--color-border); }
.article__no {
  flex: 0 0 120px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: 43.2px; color: var(--color-on-brand-dim);
}
.article__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.article__title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; line-height: 25px; color: var(--color-ink); }
.article__text { font-size: var(--fs-base); line-height: 22px; color: var(--color-muted); }

/* ── tablet: no frame in the mockup, derived from the splits ──────────── */
@media (max-width: 1199px) {
  .help-hero__split { grid-template-columns: minmax(0, 1fr); }
  .help-hero__headline { font-size: 72px; line-height: 72px; }
  .help-hero__graphic { height: 320px; }
  .topic { flex-basis: calc((100% - var(--space-24)) / 2); }
  .article__no { flex-basis: 72px; }
}

/* ── mobile frame [74:629] ────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* [74:648] — 40px band, no graphic panel on mobile. The shared .eyebrow drops to
     9px on mobile [66:194]; these two frames keep the desktop 11px [74:650, 74:660]. */
  .help-hero .eyebrow,
  .help-topics .eyebrow { font-size: var(--fs-2xs); line-height: 15.03px; }
  .help-hero { padding-block: 40px; }
  .help-hero__copy { gap: var(--space-16); }
  .help-hero__headline { gap: var(--space-4); font-size: 54px; line-height: 51px; }
  .help-hero__lead { font-size: var(--fs-base); line-height: 21px; }
  .help-hero__graphic { display: none; }

  /* [74:659] — one column, 8px between cards, panel in place */
  .help-topics { padding-block: 40px; }
  .topics { gap: var(--space-8); margin-top: var(--space-20); }
  .topic { flex-basis: 100%; height: 56px; border-radius: var(--radius-lg); }
  .topic__no { font-size: var(--fs-lg); line-height: 26px; }
  .topic__name { font-size: var(--fs-base); line-height: 19px; }
  .topic__arrow { font-size: var(--fs-base); line-height: 19px; }

  /* [79:2453] — the open topic is an inset white panel inside the list */
  .topic-panel { order: 0; }
  .topics > .topic-panel.is-open {
    flex-basis: 100%; margin: 0; padding: 40px var(--space-20);
  }

  .gs { gap: var(--space-12); }
  .gs__index { font-size: 80px; line-height: 68px; }
  .gs__title { font-size: var(--fs-h2); line-height: 48px; }
  .gs__lead { font-size: var(--fs-base); line-height: 21px; }

  /* [79:2459] — number and title share a row, each article closes with a rule.
     The desktop title is sentence-case Manrope, the mobile one condensed caps:
     same words, so the case comes from CSS and the JSON keeps one spelling. */
  .article-list { display: flex; flex-direction: column; gap: var(--space-24); margin-top: var(--space-32); }
  .article {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-12); row-gap: var(--space-12); align-items: baseline;
    min-height: 0; padding-block: 0 var(--space-12);
    border-bottom: 1px solid var(--color-border);
  }
  .article + .article { min-height: 0; border-top: 0; }
  .article__body { display: contents; }
  .article__no {
    display: block; flex: none; grid-column: 1; grid-row: 1;
    font-size: var(--fs-h6); line-height: 29px;
  }
  .article__title {
    grid-column: 2; grid-row: 1;
    font-family: var(--font-display); font-size: var(--fs-md); line-height: 22px;
    text-transform: uppercase;
  }
  .article__text { grid-column: 1 / -1; font-size: var(--fs-sm); line-height: 21px; }
}