/* ============================================================
   PRIME TOURS — Foundation CSS
   Дизайн-токены + базовые компоненты фирменного стиля.

   Это выжимка из продакшн-стилей сайта primetours.ru:
   токены, типографика и ядро UI-компонентов — без страничной
   специфики. Подключайте как основу для лендингов, писем-шаблонов
   и любых материалов бренда.

   Шрифты: Prata (дисплейный, h1/h2) + Inter (текст).
   Подключить: <link href="https://fonts.googleapis.com/css2?family=Prata&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

   Канон: brandbook.primetours.ru · синхронно с global.css сайта.
   ============================================================ */

/* ── Дизайн-токены ─────────────────────────────────────────── */
:root {
  /* Цвет */
  --navy: #142238;       /* основной тёмный: фон, текст, хедер/футер */
  --navy-2: #1b2c47;     /* navy hover / второй тёмный */
  --gold: #c9a35f;       /* акцент: кнопки, кикеры на тёмном */
  --gold-2: #b08c45;     /* золото на светлом фоне (контраст выше) */
  --gold-ink: #856529;   /* золото для текста на светлом, WCAG AA ~5:1 */
  --gold-tint: rgba(201, 163, 95, 0.14); /* фон бейджа */
  --cream: #f7f4ee;      /* светлый фон секций */
  --white: #ffffff;
  --ink: #1d2533;        /* основной текст */
  --muted: #667182;      /* приглушённый текст */
  --line: #e6e1d7;       /* границы */

  /* Форма */
  --radius: 14px;
  --maxw: 1180px;
  --header-h: 84px;    /* высота sticky-шапки; hero: calc(100vh - var(--header-h)) */
  --shadow: 0 10px 30px rgba(13, 23, 38, 0.10);

  /* Шрифты */
  --font-display: 'Prata', Georgia, 'Times New Roman', serif;
  --font-head: 'Inter', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
}

/* ── База ──────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (min-width: 1280px) { html { font-size: 20px; } }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Заголовки ─────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 400; line-height: 1.25; }
h1, h2 { font-family: var(--font-display); }        /* Prata */
h3 { font-family: var(--font-head); }               /* Inter */

h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }

/* ── Раскладка секций ──────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.section { padding: clamp(72px, 6.25vw, 90px) 0; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: var(--white); }
.section--slim { padding-top: 48px; padding-bottom: 24px; }
.section--no-top { padding-top: 0; }

.section-head { margin-bottom: 40px; }

/* ── Кикер — надзаголовок ──────────────────────────────────── */
.kicker {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);        /* на светлом фоне */
  margin-bottom: 10px;
}
.section--navy .kicker { color: var(--gold); }  /* на navy — яркое золото */

.page-sub { margin-top: 8px; max-width: 560px; color: var(--muted); }

/* ── Кнопки ────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font: 600 0.92rem var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  text-align: center;
}
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-2); }
.btn-gold-ink { background: var(--gold); color: var(--navy); }
.btn-gold-ink:hover { background: var(--gold-2); }
/* .btn-ghost — контурная кнопка, цвет зависит от фона (как .kicker): нет
   единого цвета (поправка владельца 2026-07-11). Три фоновых варианта: */
.btn-ghost { border-color: var(--gold-ink); color: var(--gold-ink); background: transparent; }  /* светлый (по умолчанию) */
.section--navy .btn-ghost { border-color: var(--gold); color: var(--gold); }                    /* на navy — яркое золото */
.btn-ghost--on-photo { border-color: var(--white); color: var(--white); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } /* на фото — белый + тень */
/* Hover — единый для всех трёх контекстов: заливка золотом, текст navy
   (контраст ~6.7:1 — лучше, чем белый текст ~2.4:1 на золоте). */
.btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn-ghost--on-photo:hover { text-shadow: none; }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover { background: var(--navy-2); }

/* ── Бейдж ─────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--gold-tint);
  color: var(--gold-2);
}

/* Звёзды рейтинга */
.stars { color: var(--gold); letter-spacing: 2px; font-size: 0.85rem; }

/* ── Сетки ─────────────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
}