/* Скелет композиции. Копируется в начало CSS нового макета и правится под проект:
   меняются числа, не структура. Законы - ~/.claude/WEB-DESIGN.md, раздел 7.

   Что здесь уже решено и потому не ломается само:
   7.1 сетка одна на страницу, ширины только в колонках
   7.2 одно внешнее расстояние между полосами
   7.4 кегль заголовка живёт в одной переменной
   7.6 отступы берутся из шкалы
   7.9 сетка перестраивается 12 / 8 / 4, а не сжимается
   7.10 колонки ряда равняются по первой строке текста
   7.12 ряды карточек дышат вдвое шире колонок */

:root{
  /* ---- сетка (7.1) ---- */
  --container:1440px;         /* внешняя граница содержимого */
  --pad:20px;                 /* поле страницы; на десктопе 56 - число с референса */
  --cols:4;                   /* колонок в сетке; ниже по брейкпоинтам 8 и 12 */
  --gap:16px;                 /* жёлоб: 16 у референса, карточка span 4 даёт ровно 432 */

  /* ---- ритм полос (7.2): ОДНО число, модификаторов не бывает ---- */
  --rhythm:96px;

  /* ---- шкала отступов (7.6): других значений в файле быть не должно ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ---- шкала кеглей (7.4): ступеней 5-7, у уровня один размер ---- */
  --t-xs:12px;                /* служебное, подписи */
  --t-s:14px;
  --t-m:16px;                 /* основной текст */
  --t-l:22px;                 /* заголовок карточки, h3 */
  --t-xl:clamp(32px,3.75vw,54px);   /* h2 - ОДНО значение на все h2 страницы */
  --t-hero:clamp(36px,6.2vw,88px);  /* только первый экран */
  --t-group:var(--t-xl);      /* имя группы каталога = кегль H2, правка Максима 03.09 */
  --t-group-note:17px;        /* подпись группы: 13 + 4 по его же числу, вне шкалы */

  /* ---- интерлиньяж обратен кеглю (7.8) ---- */
  --lh-text:1.55;
  --lh-head:.9;
}
@media (min-width:768px){ :root{--pad:32px;--cols:8;--gap:16px;--rhythm:128px} }
@media (min-width:1024px){ :root{--pad:56px;--cols:12;--gap:16px;--rhythm:160px} }

*{box-sizing:border-box}
body{margin:0;font-size:var(--t-m);line-height:var(--lh-text)}

/* ---- контейнер и сетка ---- */
.container{width:min(100% - var(--pad) * 2, var(--container));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
/* Ширина блока называется в колонках. Дробных fr не бывает: их край не совпадает
   ни с одной линией, и блок читается как съехавший. */
.c-12{grid-column:span var(--cols)}
.c-6 {grid-column:span var(--cols)}
.c-4 {grid-column:span var(--cols)}
.c-3 {grid-column:span var(--cols)}
@media (min-width:768px){
  .c-6{grid-column:span 4} .c-4{grid-column:span 4} .c-3{grid-column:span 4}
}
@media (min-width:1024px){
  .c-6{grid-column:span 6} .c-4{grid-column:span 4} .c-3{grid-column:span 3}
}

/* ---- полоса (7.2): расстояние держит секция, а не элементы внутри ---- */
.sec{padding-block:calc(var(--rhythm) / 2)}
.sec > .container > :first-child{margin-top:0}
.sec > .container > :last-child{margin-bottom:0}

/* ---- шапка полосы: объявление, и только оно (7.13) ---- */
.sec__head{margin-bottom:var(--s7)}
/* Колонки шапки равняются по ПЕРВОЙ СТРОКЕ текста (7.10). align-items:baseline
   здесь неверен: грид сводит базовые линии ячеек, и колонка-обёртка уезжает вниз.
   Компенсация полулидинга ставится каждому элементу по его же line-height. */
@media (min-width:1024px){
  .sec__head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
             gap:var(--gap);align-items:start}
  .sec__head > h2{grid-column:span 6;margin-top:calc((1 - var(--lh-head)) / 2 * 1em)}
  .sec__head > :nth-child(2){grid-column:9 / span 4}
  .sec__head > :nth-child(2),
  .sec__head > :nth-child(2) > :first-child{margin-top:calc((1 - var(--lh-text)) / 2 * 1em)}
}
/* Действие закрывает полосу, а не открывает её (7.13) */
.sec__act{margin-top:var(--s7)}

/* ---- типографика (7.4, 7.8) ---- */
h1{font-size:var(--t-hero);line-height:var(--lh-head);max-width:22ch;margin:0}
h2{font-size:var(--t-xl);line-height:var(--lh-head);max-width:22ch;margin:0}
h3{font-size:var(--t-l);line-height:1.15;margin:0}
p{margin:0 0 var(--s3)}
.prose{max-width:66ch}

/* ---- карточки (7.12): ряды дышат вдвое шире колонок ---- */
.cards{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
       column-gap:var(--gap);row-gap:calc(var(--gap) * 2)}
.card{grid-column:span var(--cols);display:flex;flex-direction:column}
@media (min-width:768px){ .card{grid-column:span 4} }
@media (min-width:1024px){ .card{grid-column:span 3} }
/* Отступы внутри карточки убывают по силе связи, самый большой - вдвое меньше
   внешнего между рядами */
.card__title{margin:var(--s4) 0 0}
.card__text {margin:var(--s2) 0 0}
.card__price{margin:var(--s3) 0 var(--s5)}
.card__cta  {margin-top:auto}

/* ---- медиа (2.26): height:auto ОБЯЗАТЕЛЕН, иначе атрибуты width/height у <img>
   отменяют aspect-ratio и картинка сама задаёт высоту строки грида ---- */
img,video{max-width:100%;height:auto;display:block}
/* Когда высоту ряда должен задавать текст, а не кадр, - кадр вынимается из потока */
.fig{position:relative;height:100%}
.fig>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- плашка (7.11): в ряду с соседом на линию садится ПОДЛОЖКА, а не буквы.
   Вынос наружу отрицательным margin - только для одиночной плашки без соседа ---- */
.plaque{background:var(--surface,rgba(0,0,0,.05));padding:var(--s4)}
.plaque--lone{margin-inline:calc(var(--s4) * -1)}

/* ---- один акцент на экран (7.7) ---- */
.btn{background:var(--accent,#000);color:var(--on-accent,#fff);
     display:inline-flex;align-items:center;justify-content:center;
     min-height:48px;padding-inline:var(--s5);text-decoration:none}
.btn--ghost{background:transparent;border:1px solid currentColor;color:inherit}

/* ---- разделитель: у линии есть зона отчуждения (7.14) ---- */
.rule{border:0;border-top:1px solid var(--rule-color,rgba(0,0,0,.15));
      margin-block:var(--s6)}