/* ============================================================
   shared.css — общие утилитарные классы, используются в каждой секции
   ============================================================ */

/* ---- Дизайн-токены ---- */
:root {
  --navy:        #1B2538;   /* тёмно-синий — основной */
  --cream:       #F5F2ED;   /* кремовый фон / текст на тёмном */
  --gold:        #8B7355;   /* золотой акцент */
  --gold-light:  #C4A97D;   /* более яркий золотой (для мелкого текста на тёмном) */
  --border:      #D8D4CE;   /* цвет разделителей */
  --bg-white:    #FFFFFF;
  --bg-cream:    #F5F2ED;
  --text-dark:   #1A1A1A;
  --text-mid:    #6B6B6B;
  --text-soft:   #7E7977;

  --font-serif:  'Playfair Display', serif;
  --font-sans:   'Golos Text', sans-serif;

  --section-v:   clamp(64px, 10vw, 140px);   /* вертикальный padding секций */
  --section-h:   clamp(20px, 5vw, 96px);     /* горизонтальный padding секций */
  --max-width:   1280px;

  --radius-card:    24px;
  --radius-pill:    50px;
}

/* ---- Обёртка с ограничением ширины ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-h);
}

/* ---- Маленький надзаголовок (метка секции) ---- */
/* Используется перед h2 в каждой секции.
   Если нужен другой отступ снизу — добавляйте style="margin-bottom:Xpx" прямо на элемент. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

/* ---- Заголовок секции h2 ---- */
.section-h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Вариант для тёмного фона (блок Записаться) */
.section-h2--light {
  color: var(--cream);
}

/* ---- Стандартный блок-шапка секции (eyebrow + h2) ---- */
.section-header {
  margin-bottom: 52px;
}

/* ---- Большие экраны (> Full HD) ---- */
@media (min-width: 1921px) {
  :root {
    --max-width:   1600px;
    --section-v:   clamp(100px, 9vw, 180px);
    --section-h:   clamp(40px,  5vw, 128px);
  }
  .section-h2  { font-size: clamp(48px, 3.5vw, 80px); }
  .eyebrow     { font-size: 13px; }
  .section-header { margin-bottom: 64px; }
}

@media (min-width: 2561px) {
  :root {
    --max-width:   2100px;
    --section-v:   clamp(120px, 9vw, 220px);
    --section-h:   clamp(60px,  5vw, 180px);
  }
  .section-h2  { font-size: clamp(60px, 3.5vw, 108px); }
  .eyebrow     { font-size: 15px; }
  .section-header { margin-bottom: 80px; }
}

@media (min-width: 3841px) {
  :root {
    --max-width:   2800px;
  }
  .section-h2  { font-size: clamp(80px, 3.5vw, 140px); }
  .eyebrow     { font-size: 18px; }
}