/* ═══════════════════════════════════════════════════════════════════════════
   ВЕРАНДА · три двери на главной.

   Блок между первым экраном и картой: «Рестораны», «Доставка», «Своя
   продукция». Разметка — js/главная.js, функция `двери`.

   🔴 Своим файлом, а не хвостом витрина.css, по той же причине, по которой
   отдельно живут карта.css, язык.css и плавность.css: блок появился одним
   решением и снимается одной строкой в index.html. Цена приёма видна.

   🔴 Ни одного hex-кода: всё из токенов. Цвет каждой двери — не выбор
   оформителя, а цвет её сюжета, уже закреплённый ниже по странице:
   зал — бумага и коричневый знак, доставка — зелень (поправка владельца
   28.08), производство — тёмное. Гость узнаёт раздел по цвету раньше, чем
   дочитает подпись, и попадает в блок того же цвета.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Раздел ниже обычного: поля 48 вместо 64. Читать здесь нечего, и полный
   рост раздела развёл бы три двери с первым экраном на пустое место.       */
.сек-двери{ padding:var(--v-7) 0; }

/* ── сетка ──────────────────────────────────────────────────────────────────
   390 — три полосы одна под другой: на ширину 350 три колонки дали бы по
   110 px, а в такую колонку «Своя продукция» не встаёт ни одной строкой.
   760 и выше — три равные колонки. Шаг и поля у всех трёх одинаковые: ряд
   из разных по размеру плиток и есть тот разнобой, за который ругали
   прежние варианты, и машинная проверка читает его так же.                 */
/* 🔴 `grid-auto-rows:1fr` — не тонкость, а само правило про одинаковые
   блоки. Подписи на четырёх языках переносятся по-разному: «Своя продукция»
   на 390 идёт в две строки, «Доставка» в одну, а на вьетнамском наоборот.
   Без общей высоты ряд из трёх дверей получал бы разный рост на каждом
   языке — тот самый разнобой, за который ругали прежние варианты. */
.двери{ display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:var(--v-2); }

.дверь{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--v-4);
  min-height:var(--v-9);
  padding:var(--v-4) var(--v-5);
  border:var(--v-bw) solid transparent; border-radius:var(--v-r);
  text-decoration:none; color:inherit;
  transition:background var(--v-t), border-color var(--v-t);
}

.дверь-знак{ width:48px; height:48px; flex:none; }

.дверь-текст{ display:grid; gap:var(--v-1); min-width:0; }

/* Название — антиквой: это «большая кнопка», а не пункт списка. На 390 в
   размер подзаголовка, а не заголовка карточки: на колонку остаётся 202 px,
   и «Своя продукция» антиквой в 26 не влезает в строку ни одной шириной
   поля. Переносить название двери из двух слов надвое — хуже, чем набрать
   его на четыре пункта мельче.                                             */
.дверь-текст b{
  font:600 var(--v-fs-d4)/var(--v-lh-h) var(--v-font-h);
}

/* Вторая строка — счёт из данных. Гротеск и 16 px: цифру читают, а не
   разглядывают. Курсив снят: `i` здесь взят как «строка помельче», наклон
   антиквы рядом с гротеском был бы третьим начертанием на одной двери.     */
.дверь-текст i{
  font:500 var(--v-fs-2)/var(--v-lh-2) var(--v-font-ui);
  font-style:normal;
}

.дверь-стрелка{ width:24px; height:24px; }

/* ── зал ─────────────────────────────────────────────────────────────────── */
.дверь--зал{ background:var(--v-paper-2); border-color:var(--v-paper-2); color:var(--v-ink-2); }
.дверь--зал .дверь-текст b{ color:var(--v-brand); }
.дверь--зал .дверь-знак,
.дверь--зал .дверь-стрелка{ color:var(--v-gold-ink); }
.дверь--зал:hover{ background:var(--v-paper-3); border-color:var(--v-paper-3); }

/* ── доставка ────────────────────────────────────────────────────────────── */
.дверь--доставка{ background:var(--v-green); border-color:var(--v-green); color:var(--v-green-ink-2); }
.дверь--доставка .дверь-текст b{ color:var(--v-green-ink); }
.дверь--доставка .дверь-знак,
.дверь--доставка .дверь-стрелка{ color:var(--v-green-ink); }
.дверь--доставка:hover{ background:var(--v-green-2); border-color:var(--v-green-line); }

/* ── производство ────────────────────────────────────────────────────────── */
.дверь--цех{ background:var(--v-dark); border-color:var(--v-dark); color:var(--v-dark-ink-2); }
.дверь--цех .дверь-текст b{ color:var(--v-dark-ink); }
.дверь--цех .дверь-знак,
.дверь--цех .дверь-стрелка{ color:var(--v-dark-ink); }
.дверь--цех:hover{ background:var(--v-dark-2); border-color:var(--v-dark-line); }

/* Фокус с клавиатуры. Общее правило витрины красит обводку коричневым — на
   зелени и на тёмном её не видно, поэтому здесь светлая, как в разделах
   `.on-green` и `.on-dark`.                                                */
.дверь--доставка:focus-visible,
.дверь--цех:focus-visible{ outline-color:var(--v-focus-light); }

/* ── десктоп ────────────────────────────────────────────────────────────────
   Дверь встаёт столбиком: знак, название с подписью, стрелка внизу. Ряд из
   трёх одинаковых по высоте карточек — та же сетка, что у карточек точек
   ниже, и тот же шаг.                                                      */
@media (min-width:760px){
  .двери{ grid-template-columns:repeat(3, 1fr); gap:var(--v-3); }
  .дверь{
    grid-template-columns:1fr; grid-template-rows:auto 1fr auto;
    align-items:start; justify-items:start;
    gap:var(--v-5); padding:var(--v-6);
    min-height:260px;
  }
  /* Знак крупнее ровно настолько, чтобы держать колонку: на 1440 дверь
     втрое шире, чем на 390, и знак в 48 висел бы в ней точкой.            */
  .дверь-знак{ width:64px; height:64px; }
  .дверь-текст b{ font-size:var(--v-fs-d3); }
}