/* ОПЛОТ — экранный каталог. Открывается двойным щелчком по index.html:
   ни сервера, ни сборки. Отсюда ограничения — никаких fetch и модульных скриптов,
   данные приходят обычным <script src="data/catalog.js">. */

:root{
  /* Рабочая область во всю ширину окна, но с полями по краям: на 1920 это 1808 px
     против прежних 1280 — двери в сетке становятся крупнее без единой правки данных. */
  --wrap:1840px;
  --pad:clamp(18px, 3.2vw, 56px);
  --head-h:64px;
}

body{background:var(--paper);color:var(--ink);font-size:var(--fs-lg);line-height:1.5}

/* Текст на странице не выделяется — кроме контактов и всего, что помечено .sel:
   адрес и телефон, которые нельзя скопировать, это сломанная страница, а не стиль. */
body{-webkit-user-select:none;user-select:none}
.sel, input, textarea, [contenteditable]{-webkit-user-select:text;user-select:text}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ——— шапка ———
   Контейнер прозрачен для мыши: растянутая на всю ширину панель иначе глотает
   клики по всему, что проезжает под верхней полосой. */
.hdr{position:sticky;top:0;z-index:50;pointer-events:none}
.hdr__in{
  pointer-events:auto;
  background:rgba(239,240,242,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.hdr__row{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  height:var(--head-h);display:flex;align-items:center;gap:clamp(12px,3vw,32px);
}
/* Зона нажатия логотипа: сам он 56x20, палец требует 44. Наращиваем коробку
   и снимаем прирост отрицательным маргином, чтобы строка по-прежнему мерила свой шрифт. */
.logo{
  font-family:var(--font-alt);font-weight:600;font-size:20px;line-height:1;
  color:var(--ink);text-decoration:none;flex:0 0 auto;
  display:inline-flex;align-items:center;min-height:44px;
  margin-block:calc((20px - 44px) / 2);
}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 12px;
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);text-decoration:none;
  border-radius:6px;
  transition:color .25s cubic-bezier(.16,1,.3,1), background-color .25s cubic-bezier(.16,1,.3,1);
}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a[aria-current="true"]{color:var(--ink);background:var(--paper-2)}

/* ——— первый экран ——— */
.intro{padding:clamp(48px,9vw,110px) 0 clamp(32px,5vw,56px)}
.intro__t{font-family:var(--font-alt);font-weight:600;font-size:var(--fs-3xl);line-height:.98;margin:0 0 18px}
.intro__d{font-size:var(--fs-lg);line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0}
.intro__nums{display:flex;gap:clamp(20px,4vw,54px);margin-top:clamp(26px,4vw,44px);flex-wrap:wrap}
.num__v{font-family:var(--font-alt);font-weight:600;font-size:var(--fs-2xl);line-height:1}
.num__l{font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}
.intro__dl{margin:clamp(22px,3vw,34px) 0 0}
.intro__dl a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:24px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:var(--fs-sm);font-weight:500;
  transition:background-color .5s cubic-bezier(.16,1,.3,1);
}
.intro__dl a:hover{background:#2b2f36}

/* ——— фильтр ——— */
.bar{
  position:sticky;top:var(--head-h);z-index:40;
  background:var(--paper);
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.bar__row{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-2);
  font-family:inherit;font-size:var(--fs-sm);font-weight:500;
  min-height:44px;padding:0 16px;border-radius:22px;cursor:pointer;
  transition:color .25s cubic-bezier(.16,1,.3,1), background-color .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1);
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bar__count{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-3)}

/* ——— раздел ——— */
/* Якорь должен останавливаться ПОД шапкой и панелью фильтра, иначе заголовок
   раздела уезжает под них. Высоты обеих панелей меряются по DOM (см. index.html). */
.sec{padding-top:clamp(46px,7vw,88px);scroll-margin-top:calc(var(--head-h) + var(--bar-h, 72px) + 16px)}
.sec__head{border-top:1px solid var(--line);padding-top:20px;margin-bottom:clamp(26px,4vw,42px)}
.sec__t{font-family:var(--font-alt);font-weight:600;font-size:var(--fs-2xl);line-height:1;margin:0}
.sec__d{font-size:var(--fs-md);line-height:1.55;color:var(--ink-2);max-width:62ch;margin:10px 0 0}

/* ——— модель ——— */
.model{padding-bottom:clamp(34px,5vw,60px)}
.model__head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.model__t{font-size:var(--fs-xl);font-weight:600;line-height:1.1;margin:0}
.model__sub{font-size:var(--fs-sm);color:var(--ink-3)}
.model__d{font-size:var(--fs-md);line-height:1.6;color:var(--ink-2);max-width:74ch;margin:0 0 22px}

/* Четыре двери в ряд, а не сколько влезет: при auto-fill на широком экране
   получалось шесть штук, и полотна выходили мелкими. */
.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,30px);
  align-items:end;
}
@media (max-width:1249px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:699px){  .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Карточка двери. Кнопка, а не div: открывается с клавиатуры и читается скринридером.
   container-type даёт дверям внутри мерить ширину колонки: высота полотна задаётся
   в cqw и растёт вместе с сеткой. Объявление контейнера стоит на карточке, а не на
   .door — cqw не умеет мерить элемент, в котором контейнер объявлен. */
.card{
  container-type:inline-size;
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  font-family:inherit;color:inherit;text-align:center;cursor:zoom-in;
  display:flex;flex-direction:column;align-items:center;
  border-radius:10px;
}
.card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.card__art{
  width:100%;display:flex;justify-content:center;align-items:flex-end;
  padding:10px 6px 0;border-radius:10px;
  background:transparent;
  transition:background-color .5s cubic-bezier(.16,1,.3,1);
}
.card:hover .card__art{background:var(--paper-2)}
/* Высота полотна от ширины колонки. Одинаковая у всех дверей — они и физически
   одной высоты; шире или уже получается само, по пропорции полотна. */
.card__art .door{--body-h:clamp(210px, 105cqw, 450px)}
.card__cap{display:block;padding:12px 4px 0}
.card__t{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.25}
.card__s{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}

/* ——— крупный просмотр ——— */
.view{
  position:fixed;inset:0;z-index:100;
  background:rgba(22,24,28,.94);
  display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
}
.view[open]{display:flex}
.view__img{max-height:70vh;width:auto;max-width:min(86vw,460px)}
.view__cap{position:absolute;left:0;right:0;bottom:clamp(24px,5vw,54px);text-align:center;color:#fff}
.view__t{font-size:var(--fs-lg);font-weight:600}
.view__s{font-size:var(--fs-xs);color:var(--on-dark);margin-top:3px}
.view__x{
  font-family:inherit;
  position:absolute;top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);
  width:48px;height:48px;border:0;border-radius:24px;
  background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer;
}
.view__x:hover{background:rgba(255,255,255,.2)}
.view__nav{
  font-family:inherit;
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border:0;border-radius:24px;
  background:rgba(255,255,255,.1);color:#fff;font-size:20px;cursor:pointer;
}
.view__nav--prev{left:clamp(8px,2vw,24px)}
.view__nav--next{right:clamp(8px,2vw,24px)}
.view__nav:hover{background:rgba(255,255,255,.2)}

/* ——— подвал ——— */
.ftr{margin-top:clamp(56px,8vw,110px);background:var(--ink);color:#fff;padding:clamp(38px,6vw,72px) 0}
.ftr__row{display:flex;gap:clamp(20px,5vw,60px);flex-wrap:wrap;align-items:flex-start}
.ftr .logo{color:#fff}
.ftr__d{font-size:var(--fs-md);line-height:1.6;color:var(--on-dark);max-width:46ch;margin:0}
/* Подчёркивание рисуем самим текстом, а не рамкой коробки: коробка ссылки нарощена
   до 44 px ради зоны нажатия, и border-bottom уезжает от букв вниз. */
.ftr :where(a:not(.logo)){color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;text-decoration-thickness:1px}
.ftr :where(a:not(.logo)):hover{text-decoration-color:#fff}
.ftr__foot{
  margin-top:clamp(26px,4vw,44px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--on-dark-2);
}
/* Зона нажатия 44x44 при слове в 41 px: наращиваем коробку и снимаем прирост
   зеркальным маргином, чтобы строка по-прежнему мерила свой шрифт. */
.ftr__foot a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  margin-block:calc((18px - 44px) / 2);
  padding-inline:4px;margin-inline:-4px;
}

@media (max-width:640px){
  .nav{width:100%;margin-left:0;order:3;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .nav a{white-space:nowrap}
  .hdr__row{height:auto;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    animation-delay:0s !important;transition-delay:0s !important}
}