/* ═══════════════════════════════════════════════════════════════════════
   prorecept-landing.css — правки вёрстки публичных страниц: / и /kurs/…

   prorecept.css заморожен (см. CLAUDE.md): все правки лендинга живут здесь.
   Новых классов не вводим — селекторы опираются на уже существующие
   .hero / .tiers / .tier и на разметку, которую выдаёт
   src/Content/Landing/LandingParser.

   ПРАВИЛО ПЕРЕОПРЕДЕЛЕНИЯ. Файл грузится ПОСЛЕ prorecept.css и при равной
   специфичности побеждает. Поэтому перед каждым правилом проверяем, есть ли
   у переопределяемого СВОЙСТВА медиа-вариант в замороженном файле:
     — есть  -> правило обязано быть заперто в непересекающийся брейкпойнт,
                иначе перебьёт базовое (случай .tiers, см. ниже);
     — нет   -> безусловное правило корректно (случай .hero h1).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── HERO: потолок кегля заголовка ────────────────────────────────────
   prorecept.css:220 задаёт font-size: clamp(40px, 5.6vw, 80px). Средний
   член растёт от вьюпорта, а колонка .hero .left упирается в --maxw
   (1100px у .shell). Выше этого порога колонка замирает, шрифт продолжает
   расти до 80px, и overflow: hidden на .hero .left срезает хвост строки.

   Потолок = сколько дал бы 5.6vw при вьюпорте, равном --maxw:
   1100 × 0.056 = 61.6px. Коэффициент тот же, что в 5.6vw, — связь видна
   прямо в коде, и при смене --maxw потолок поедет следом.

   Ширина под текст при окне >= 1100px: контент .shell 1020px -> левая
   колонка 1.3fr из 1.3fr 1fr = ~576px -> минус padding 44px×2 = 486px.

   Замерено (scrollWidth - clientWidth, шрифт Bitter загружен):
     окно  1100px: кегль 61.6px, вынос 13px   <- потолок ещё не задействован
     окно  1280px: было 71.68px / 95px  -> стало 61.6px / 13px
     окно  1920px: было 80px    / 162px -> стало 61.6px / 13px
   Вынос 13px уходит в правый padding 44px и до рамки-орнамента
   (::after, inset 14px, т.е. 30px от края текста) не достаёт.
   Слово «КОНДИТЕРСКИЕ» шире content-box на всех ширинах и до правки
   (30px на 420px, 24px на 1000px) — потолок этого не создаёт и не лечит.

   Правило безусловное: у .hero h1 font-size медиа-варианта нет —
   единственный @media на hero (prorecept.css:241) меняет только
   grid-template-columns и границы.

   На ширинах <= --maxw значение clamp по-прежнему даёт 5.6vw, потолок
   не достигается, и вёрстка совпадает с прежней пиксель в пиксель. */
.hero h1 { font-size: clamp(40px, 5.6vw, calc(var(--maxw) * 0.056)); }

/* ─── HERO: пол кегля на телефонах (QA ISSUE-003) ──────────────────────
   Зеркальная проблема потолка: нижний предел clamp 40px шире колонки на
   узких экранах — «КОНДИТЕРСКИЕ» (~8.05px ширины на 1px кегля, Bitter 900)
   срезалось overflow:hidden уже на 430px и уродовало первый экран на 390.

   Бюджет ширины: вьюпорт − паддинги .shell (40) − паддинги .left (88),
   плюс невидимый запас ~30px (padding 44 минус рамка-орнамент inset 14).
   clamp(22px, 8.3vw, 40px): 480→39.8 (стык с базовым правилом), 390→32.4,
   360→29.9, 320→26.6 — везде в бюджете. Замерено скриншотами 320/390.

   Каскад: правило ниже базового в ЭТОМ файле, специфичность равная — на
   <=480px побеждает оно; замороженный файл font-size в media не трогает. */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(22px, 8.3vw, 40px); }
}

/* ─── TIER: кнопка покупки в карточке (QA ISSUE-001) ───────────────────
   LandingParser (buy: Текст | href [| style]) кладёт в карточку <a class=
   "btn …"> — лендинговую плашку. В замороженном файле у .btn нет width/
   margin и медиа-вариантов, у .tier нет display — правила безусловно
   корректны. Карточка становится flex-колонкой, кнопка прижата к низу:
   в ряду разной высоты все кнопки стоят на одной линии. */
.tier { display: flex; flex-direction: column; }
.tier .btn { display: block; text-align: center; margin-top: auto; font-size: 16px; padding: 10px 18px; }
.tier ul { margin-bottom: 14px; }

/* ─── TIERS: сетка тарифных карточек ───────────────────────────────────
   Лестница «Орешков» выросла до четырёх ступеней, а .tiers в замороженном
   файле — repeat(3, 1fr): четвёртая карточка падала во второй ряд на треть
   ширины, «Экстра» как :last-child теряла рамку, а «Высший сорт» —
   последний в первом ряду — рисовал свою поверх внешней рамки секции.

   У grid-template-columns медиа-вариант ЕСТЬ (prorecept.css:263, одна
   колонка на <= 760px), поэтому безусловных правил на .tiers здесь быть
   не должно — перебили бы мобильную раскладку. Диапазон <= 760px
   намеренно оставлен замороженному файлу. */

/* Широкий экран: четыре карточки в один ряд. Границы пересобирать не
   нужно — ряд один, и базовое .tier:last-child отрабатывает верно.
   Кегли подрезаны под ~211px текста (255px колонка минус padding 22px×2). */
@media (min-width: 1001px) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
  .tier .name  { font-size: 19px; }
  .tier .price { font-size: 30px; }
}

/* Средние ширины: сетка 2×2. Здесь :last-child уже недостаточно —
   рамку справа теряет каждая вторая карточка, а первому ряду нужна
   нижняя граница. Кегли остаются исходными: карточки шире. */
@media (min-width: 761px) and (max-width: 1000px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tier:nth-child(2n) { border-right: none; }
  .tier:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink); }
}