/* Deposit Limits — mockup frames betfans-deposit-limits-desktop [1:1622]
 * / betfans-deposit-limits-mobile [74:1138].
 *
 * The article is the mockup's 320 + 24 + 936 row inside the 1280 column.
 * Формы лимита на странице нет: макет её не рисует, а текст страницы отправляет
 * за ней в My Account — стили формы живут в pages/limit-control.css.
 */

/* ── hero [50:138] — 286 tall, copy 520 wide ───────────────────────────── */
.dl-hero { padding-block: 56px; background: var(--color-bg); }
.dl-hero__inner { display: flex; flex-direction: column; gap: var(--space-16); max-width: 520px; }
.dl-hero__lead { font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-muted); }

/* ── article [50:146] ──────────────────────────────────────────────────── */
.dl-article { padding-block: 50px 80px; background: var(--color-surface); }
.dl-article__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-24); align-items: start; }

/* contents [50:147] */
.dl-contents { position: sticky; top: 140px; display: flex; flex-direction: column; gap: var(--space-12); }
.dl-contents__title { font-size: var(--fs-xs); font-weight: 700; line-height: 16px; letter-spacing: var(--ls-wide); color: var(--color-ink); }
.dl-contents__items { display: flex; flex-direction: column; gap: var(--space-10); }
.dl-contents__items li + li { padding-top: var(--space-10); border-top: 1px solid var(--color-border); }
.dl-contents__item {
  display: flex; align-items: center; gap: var(--space-12);
  min-height: 18px; text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.dl-contents__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); line-height: 16px; color: var(--color-brand); }
.dl-contents__label { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 700; line-height: 18px; color: var(--color-ink); }
.dl-contents__item:hover .dl-contents__label { color: var(--color-brand); }

/* content column [50:189] — sections 64 apart, hairline between */
.dl-content { display: flex; flex-direction: column; gap: 64px; }
.dl-rule { display: block; height: 1px; background: var(--color-tint); }

.dl-section { display: flex; flex-direction: column; gap: var(--space-12); scroll-margin-top: 140px; }
.dl-section__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h6); line-height: 29px; color: var(--color-brand); }
.dl-section__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 34px; color: var(--color-ink); }
.dl-body { font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-text); }

/* bullets [50:199] — 8px brand dot, 10px gutter */
.dl-bullets { display: flex; flex-direction: column; gap: var(--space-10); }
.dl-bullets li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-text);
}
.dl-bullets li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-brand);
}

/* term lists [50:220] / [50:236] */
.dl-terms { display: flex; flex-direction: column; gap: var(--space-6); }
.dl-terms__term { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 20px; color: var(--color-ink); }
.dl-terms__def { font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-text); }
/* [50:220] the period blocks are 10 apart and 6 inside, so the extra margin is
   the difference, not a second full gap — otherwise sections 04 and 05 run 12 long. */
.dl-terms__def + .dl-terms__term { margin-top: var(--space-4); }

.dl-link { font-size: var(--fs-body-sm); line-height: 20px; text-decoration: underline; text-underline-offset: 2px; }
.dl-links { display: flex; flex-wrap: wrap; gap: var(--space-24); }


/* ── tablet: no mockup frame, derived from the constraints ─────────────── */
@media (max-width: 1199px) {
  .dl-article__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .dl-contents { position: static; }
}

/* ── mobile frame [74:1138]: hero 250, article 48/20, contents as rows ─── */
@media (max-width: 767px) {
  .dl-hero { padding-block: 40px; background: var(--color-surface); }
  .dl-hero .display--72 { font-size: var(--fs-h2); line-height: 58px; }
  .dl-hero__lead { max-width: none; }

  /* The mobile frame splits the row into two full-bleed sections — on-this-page
     [74:1161] 32/20/40/20 and article [74:1214] 48/20/64/20 — so the container
     padding moves onto them and the grid gap goes to zero. */
  .dl-article { padding-block: 0; }
  .dl-article .container { padding-inline: 0; }
  .dl-article__grid { gap: 0; }
  .dl-contents { gap: var(--space-16); padding: var(--space-32) var(--container-pad) 40px; }
  .dl-content { padding: 48px var(--container-pad) 64px; }
  .dl-contents__items { gap: 0; }
  /* [74:1168] is a LINE: it paints a rule but adds no height to the 47px row. */
  .dl-contents__items li { box-shadow: inset 0 -1px 0 var(--color-border); }
  .dl-contents__items li + li { padding-top: 0; border-top: 0; }
  .dl-contents__item { min-height: 47px; padding-block: 14px; }
  .dl-contents__no { font-size: var(--fs-body); line-height: 19px; }
  .dl-contents__label { font-size: var(--fs-base); line-height: 19px; }

  .dl-content { gap: 48px; }
  .dl-section { gap: var(--space-16); }

}