/* Плитки ритуалов.

   Выделено из блока стилей внутри home.html: там сто восемьдесят
   строк лежали вперемешку, и ни переиспользовать, ни прочитать
   это было нельзя. Файлы подключаются в том же порядке, в каком
   правила шли в блоке, чтобы каскад не изменился. */

.rituals{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap-3)}
.ritual{position:relative;grid-column:span 4;min-height:390px;
  border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--surface)}
.ritual:first-child{grid-column:span 7}
.ritual:nth-child(2){grid-column:span 5}
.ritual-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
/* Кадр под роликом лежит в <picture> ради вертикального варианта на
   телефоне; сама обёртка в раскладке не участвует. */
.ritual picture{display:contents}
.ritual::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.05) 70%)}
/* Подпись растянута на всю плитку: она же и кликабельная область.
   Кнопка «Смотреть ритуал» - единственная ссылка карточки, а её ::before
   ложится на всю подпись (ближайший позиционированный предок), поэтому
   нажатие в любом месте плитки ведёт на посадочную, а фокус с клавиатуры
   попадает на одну ссылку, не на две. Так закрыта правка клиента 03.09:
   «хочется нажать» - теперь видно, что и куда. */
.ritual-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-start;padding:var(--gap-3);color:var(--cream)}
.ritual-more{margin-top:var(--gap-2);padding:12px 18px;color:var(--cream);
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);
  background:color-mix(in srgb,var(--deep) 45%,transparent);backdrop-filter:blur(8px);
  font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.ritual-more::before{content:'';position:absolute;inset:0}
/* Стрелка ходит туда-обратно в ритме дыхания - тот же приём, что у подсказки
   листания на телефоне: движение подсказывает, что плитка живая. */
.ritual-more span{color:var(--gold);animation:ritual-cue var(--breath) var(--ease-breath) infinite}
@media (hover:hover){
  .ritual:hover .ritual-more{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 18%,transparent)}
  .ritual:hover .ritual-more span{transform:none;animation-duration:1.6s}
}
.ritual-copy span{font:600 var(--step--1)/1 var(--ui);letter-spacing:.16em;color:var(--gold)}
.ritual-copy h3{font-size:var(--step-2);margin-top:var(--gap-1)}
.rituals-mobile-hint{display:none}
@media(max-width:760px){
  #rituals .wrap{overflow:visible}
  .rituals-mobile-hint{display:flex;align-items:center;gap:10px;margin:0;color:var(--text-dim);font:500 11px/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase}
  .rituals-mobile-hint span{color:var(--gold);font-size:20px;animation:ritual-cue var(--breath) var(--ease-breath) infinite}
  /* Вертикаль у ленты закрыта наглухо. При overflow-x:auto браузер
     по спецификации делает вторую ось auto, и лента получала
     собственную вертикальную прокрутку на пару десятков пикселей.
     Палец вниз дёргал сначала её, потом страницу - это и был
     тот конфликт со сквозной прокруткой. */
  /* Примагничивание «по возможности», а не обязательное. При mandatory
     браузер жёстко держит горизонтальную ось: жест вниз по диагонали
     уходил ленте, страница не двигалась, и человек застревал
     на ритуалах. При proximity карточки всё так же встают по месту,
     но вертикальный свайп уходит странице, как и должен.

     touch-action здесь НЕ задаём: pan-x запретил бы странице вертикаль,
     pan-y запретил бы ленте горизонталь. Значение auto как раз и значит
     «браузер сам решит по направлению жеста». */
  /* Отступы ленты - от --gap-3, как у .wrap. Раньше здесь стояла --pad,
     которой нет ни в одном файле: браузер выбрасывал оба свойства целиком,
     нижних 18 px не было, лента вплотную облегала плитки, и любой их сдвиг
     давал прокрутку вниз (15.09). */
  .rituals{display:flex;gap:14px;width:auto;margin-inline:calc(var(--gap-3) * -1);padding:4px var(--gap-3) 18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  .rituals::-webkit-scrollbar{display:none}
  .ritual,.ritual:first-child,.ritual:nth-child(2){flex:0 0 min(82vw,360px);grid-column:auto;min-height:500px;scroll-snap-align:center}
  .ritual-copy{padding:24px}
  /* 8ch держит короткие названия в две строки («Тепло / кедра»), но слово
     длиннее 8 знаков не переносится и вылезало из плитки на 110 px
     («Прикосновение», «Возвращение», аудит 15.09). min-content не даёт
     блоку стать уже самого длинного слова; переносить посреди слова хуже. */
  .ritual-copy h3{font-size:clamp(32px,10vw,46px);line-height:.96;max-width:8ch;min-width:min-content}
  .ritual::after{background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.08) 78%)}
}
@keyframes ritual-cue{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(8px);opacity:1}}