/* ОТЛОЖЕННЫЙ CSS — всё, что ниже первого экрана (§16.2).
 * Грузится с хешем в имени и Cache-Control: immutable.
 */

/* ═══ СОДЕРЖАНИЕ ══════════════════════════════════════════════════════ */

.toc {
  margin-block: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background: var(--land-soft);
  border-inline-start: 3px solid var(--isobath);
}
.toc ol { margin: 0; padding-inline-start: var(--space-6); font-size: var(--t-sm); }
.toc li { margin-block: var(--space-1); }

/* ═══ КАРТОЧКИ ════════════════════════════════════════════════════════
 * Заливка охрой суши, без теней и без скруглений больше 4px.
 * Тени — из мира брошюр, от которого мы уходим (§4.6).
 */

.card {
  background: var(--land);
  border: 1px solid var(--isobath);
  border-radius: 4px;
  padding: var(--space-6);
  margin-block: var(--space-4);
}
.card__title {
  font-family: var(--font-head);
  font-size: var(--t-xl);
  margin-block: 0 var(--space-2);
}
.card__meta {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
/* Многоколоночных макетов на мобильных нет (§4.7) */
@media (min-width: 40rem) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ ТАБЛИЦЫ (§4.6) ══════════════════════════════════════════════════ */

.table-scroll { overflow-x: auto; margin-block: var(--space-6); }

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
th, td {
  text-align: start;
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--isobath);
}
th {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Числа — мононачертанием, с табличными цифрами: колонки выравниваются */
td.num, .num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
/* Зебра только на длинных таблицах */
table.long tbody tr:nth-child(even) { background: var(--land-soft); }

/* ═══ КЛЮЧЕВЫЕ ФАКТЫ ══════════════════════════════════════════════════ */

.key-facts { margin-block: var(--space-8); }
.key-facts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.key-facts dt {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-block-start: 0.2em;
}
.key-facts dd { margin: 0; }
.key-facts dd small { display: block; color: var(--ink-soft); font-size: var(--t-sm); }

/* ═══ ПРЕДУПРЕЖДЕНИЯ И ВРЕЗКА РЕДАКЦИИ (§4.6) ═════════════════════════ */

.warning {
  border-inline-start: 3px solid var(--shoal);
  background: var(--land-soft);
  padding: var(--space-4) var(--space-6);
  margin-block: var(--space-6);
}

/* «Our take» — вывод редакции из данных. Не рассказ о поездке,
 * а решение, которое читатель может применить (§14.1). */
.editor-note {
  border-inline-start: 3px solid var(--caution);
  background: var(--land-soft);
  padding: var(--space-4) var(--space-6);
  margin-block: var(--space-8);
}
.editor-note__label {
  display: block;
  font-family: var(--font-data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--caution);
  margin-block-end: var(--space-2);
}
.editor-note p { margin-block-end: 0; }

/* ═══ ПЛЮСЫ И МИНУСЫ ══════════════════════════════════════════════════ */

.verdict { display: grid; gap: var(--space-6); margin-block: var(--space-8); }
@media (min-width: 40rem) { .verdict { grid-template-columns: 1fr 1fr; } }
.verdict h3 {
  font-size: var(--t-base);
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-start: 0;
}
.verdict ul { margin: 0; padding-inline-start: var(--space-6); }
.verdict li { margin-block: var(--space-2); }

/* Для кого страница НЕ подходит. Самое полезное, что можно написать. */
.not-for { margin-block: var(--space-8); }
.not-for__item {
  border-inline-start: 3px solid var(--shoal);
  padding-inline-start: var(--space-4);
  margin-block: var(--space-4);
}
.not-for__group { font-weight: 600; }
.not-for__alt { color: var(--ink-soft); font-size: var(--t-sm); }

/* ═══ FAQ — нативный <details>, без JS (§4.6) ═════════════════════════ */

.faq details {
  border-block-end: 1px solid var(--isobath);
  padding-block: var(--space-3);
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--t-base);
  min-block-size: 44px;
  display: flex;
  align-items: center;
}
.faq details > div {
  padding-block-start: var(--space-2);
  transition: opacity 150ms;
}

/* ═══ ПРОФИЛЬ СЕЗОНА — второй характерный элемент (§4.5) ══════════════
 *
 * Ползунок месяца подаётся как батиметрический профиль: высота столбика —
 * температура воды, цвет — вердикт. Не «график в travel-блоге», а разрез.
 * Рендерится SVG с сервера, без JS читается таблицей.
 */

.season-profile { margin-block: var(--space-8); }
.season-profile svg { inline-size: 100%; block-size: auto; }
.season-profile__bar { transition: opacity 120ms; }
/* Шкала времени остаётся LTR даже в RTL-раскладке (§4.9) */
[dir="rtl"] .season-profile { direction: ltr; }

.season-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--t-xs);
  font-family: var(--font-data);
  color: var(--ink-soft);
  margin-block-start: var(--space-3);
}
.season-legend span::before {
  content: "";
  display: inline-block;
  inline-size: .75em; block-size: .75em;
  margin-inline-end: var(--space-1);
  background: currentColor;
}

/* ═══ ПАРТНЁРСКИЕ КНОПКИ И ФАСАДЫ ВИДЖЕТОВ (§16.3, §21) ═══════════════ */

.aff-btn {
  display: inline-block;
  background: var(--depth);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  min-block-size: 44px;
  border: 0;
}
.aff-btn:hover { filter: brightness(0.92); }

/* Фасад: Lighthouse видит заглушку, сторонний скрипт грузится по клику.
 * min-block-size держит CLS = 0. */
.widget-facade {
  background: var(--land);
  border: 1px solid var(--isobath);
  border-radius: 4px;
  padding: var(--space-6);
  margin-block: var(--space-8);
  min-block-size: 320px;
  cursor: pointer;
}
.facade-form h3 { margin-block-start: 0; }
.facade-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.facade-field {
  flex: 1 1 8rem;
  background: var(--paper);
  border: 1px solid var(--isobath);
  border-radius: 4px;
  padding: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.facade-btn {
  background: var(--depth);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: var(--space-3) var(--space-6);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-block-size: 44px;
}

/* ═══ СВЯЗАННЫЕ СТРАНИЦЫ, СНОСКИ, ПОДВАЛ ══════════════════════════════ */

.related { margin-block-start: var(--space-16); }

.sources { margin-block-start: var(--space-16); font-size: var(--t-sm); }
.sources ol { padding-inline-start: var(--space-6); }
.sources li { margin-block: var(--space-2); color: var(--ink-soft); }
.sources a { word-break: break-word; }

.site-footer {
  border-block-start: 1px solid var(--isobath);
  padding-block: var(--space-8);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
/* Атрибуция OpenStreetMap обязательна по лицензии ODbL (§11.2) */
.attribution { font-size: var(--t-xs); }

/* ═══ RTL (§4.9) ══════════════════════════════════════════════════════
 * Отдельной таблицы стилей для RTL нет: все свойства логические
 * с первого дня. Здесь только то, что логическими свойствами не решается.
 */
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }
/* Числовые данные в таблицах читаются слева направо и в арабском */
[dir="rtl"] td.num, [dir="rtl"] .num { direction: ltr; text-align: start; }

/* ═══ НИЖЕ СГИБА (§16.2) ══════════════════════════════════════════════ */

.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ═══ ПЕЧАТЬ ══════════════════════════════════════════════════════════ */

@media print {
  .site-header, .site-footer, .widget-facade, .aff-btn, .toc { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}