/* KLUMBA — shared shell for text-only pages (контакты, оплата и доставка;
   Task 9 adds оферта + политика on top of this same file). Figma nodes
   658:731 (контакты) and 658:1095 (оплата и доставка), both single 1440
   desktop masters — no adaptive frames were found for either at implementation
   time, so 375/600/1024 values below are interpolated following the same
   scaling pattern already used in css/product.css (16 → 24 → 40 → 84 px
   content padding, breakpoints 600/1024/1440 only — these are copy-heavy
   pages, not full-bleed sections, so the 1280/1920 steps home.css uses
   weren't warranted here). */

/* ---------- page shell ---------- */

.textpage {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* ---------- section title (display font, shared by h1 and repeated h2s) ---------- */

.textpage__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Scales below 36px on narrow screens so long single words («ПЕРСОНАЛЬНЫХ»)
     wrap between words instead of breaking mid-word. The 600/1024/1440 rules
     below set explicit sizes and override this. */
  font-size: clamp(22px, 7.5vw, 36px);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: break-word; /* last-resort guard against overflow */
  margin: 0 0 16px;
}

/* Only the page's first heading gets extra breathing room under the header —
   repeated headings (e.g. «Оплата», «Возврат» on delivery.html) sit directly
   under the previous section's own bottom margin, matching the Figma frames
   (title blocks after the first carry no extra top padding). */
.textpage__title:first-child {
  margin-top: 40px;
}

/* ---------- section (heading + body group) ---------- */

.textpage__section {
  margin-bottom: 40px;
}

.textpage__section:last-child {
  margin-bottom: 0;
}

/* Bold sub-heading inside a section, e.g. «Доставка по России». */
.textpage__subhead {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* ---------- body copy rhythm ---------- */

.textpage__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
}

.textpage__body p {
  margin: 0;
}

.textpage__list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Оферта/политика sub-lines carry their own «—» in the legal text itself, so the
   list must not add a second marker. Контакты/доставка lists have no such prefix
   and keep the default discs. */
.textpage__list--dash {
  list-style: none;
  padding-left: 0;
}

.textpage__link {
  color: var(--green-link);
  text-decoration: underline;
  font-weight: 600;
}

/* ---------- оферта / политика specifics (Task 9) ----------
   These four are genuinely new patterns not needed by контакты/оплата и
   доставка: those pages only ever had one flat list of clauses. Оферта and
   политика are numbered legal documents with centered section headings,
   a subtitle/date/city meta block under the h1, clauses that carry their
   own nested — bulleted sub-lines or indented N.N.N sub-clauses, and (on
   политика) a two-column signature row at the end. */

/* Centered variant of .textpage__subhead, for the numbered section
   headings inside оферта/политика (contacts/delivery subheads are always
   left-aligned, so this couldn't just be baked into the base class). */
.textpage__subhead--center {
  text-align: center;
}

/* Subtitle / «Дата размещения» / «г. Москва» block under the оферта h1. */
.textpage__doc-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 24px;
}

/* A single clause that owns its own tightly-packed — bulleted sub-lines or
   trailing sub-clause list (e.g. оферта 1.5, 6.4.1; политика 1.5, 1.6).
   Sits as one flex item inside .textpage__body, so it still gets that
   container's 12px rhythm from the clause before/after it — the 4px gap
   here is only between the clause's own intro line and its sub-lines. */
.textpage__clause {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Indented group of N.N.N sub-clauses (оферта 4.2.1–4.2.5; политика
   1.9.1–1.9.4). */
.textpage__sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
}

/* Политика footer signature row: «Утверждено Приказом…» / «ИП Тунгусов К.В.» */
.textpage__meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

/* ---------- centered intro column (контакты) ---------- */

.textpage__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.textpage__lede {
  max-width: 624px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
}

/* ---------- контакты specifics (page-specific, kept minimal) ---------- */

.textpage__contact-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.textpage__contact-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
}

.textpage__contact-link {
  color: var(--ink);
  text-decoration: none;
}

.textpage__telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.textpage__telegram svg {
  width: 24px;
  height: 24px;
}

.textpage__requisites {
  max-width: 624px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

.textpage__requisites p {
  margin: 0;
}

/* ---------- breakpoints ---------- */

/* 600 */
@media (min-width: 600px) {
  .textpage {
    padding: 0 24px 80px;
  }

  .textpage__title {
    font-size: 44px;
  }

  .textpage__title:first-child {
    margin-top: 48px;
  }

  .textpage__subhead,
  .textpage__body,
  .textpage__doc-meta,
  .textpage__meta-row {
    font-size: 16px;
  }

  .textpage__lede {
    font-size: 20px;
  }
}

/* 1024 */
@media (min-width: 1024px) {
  .textpage {
    padding: 0 40px 96px;
  }

  .textpage__title {
    font-size: 56px;
  }

  .textpage__title:first-child {
    margin-top: 56px;
  }

  .textpage__section {
    margin-bottom: 56px;
  }

  .textpage__subhead,
  .textpage__body,
  .textpage__doc-meta,
  .textpage__meta-row {
    font-size: 18px;
  }

  .textpage__lede {
    font-size: 24px;
  }

  .textpage__intro {
    gap: 56px;
  }

  .textpage__contact-line {
    font-size: 20px;
  }

  .textpage__requisites {
    font-size: 18px;
  }
}

/* 1440 */
@media (min-width: 1440px) {
  .textpage {
    padding: 0 84px 112px;
  }

  .textpage__title {
    font-size: 64px;
    margin-bottom: 20px;
  }

  .textpage__title:first-child {
    margin-top: 64px;
  }

  .textpage__section {
    margin-bottom: 64px;
  }

  .textpage__subhead,
  .textpage__body,
  .textpage__doc-meta,
  .textpage__meta-row {
    font-size: 20px;
  }

  .textpage__lede {
    font-size: 28px;
  }

  .textpage__intro {
    gap: 64px;
  }

  .textpage__contact-line {
    font-size: 20px;
  }

  .textpage__requisites {
    font-size: 20px;
  }
}