/* Страницы-ответы («что надеть» и будущие соседи). Свой файл, чтобы главная
   не тащила лишние правила, а страницы не зависели от её механики. */


.lp-hero{padding:clamp(28px,7vw,72px) 0 clamp(20px,4vw,40px)}
.lp-hero h1{font-size:clamp(2rem,8vw,3.4rem); margin:10px 0 16px}
.lp-hero .lead{max-width:46ch}
.lp-hero .cta-row{margin-top:clamp(20px,4vw,30px)}

.lp-sec{padding:clamp(26px,6vw,60px) 0}
.lp-sec.tint{background:var(--bg2)}
.lp-sec h2{font-size:clamp(1.5rem,5.6vw,2.3rem); margin-bottom:14px}
.lp-note{color:var(--muted); max-width:52ch; margin-bottom:clamp(18px,3vw,26px)}

/* Три опоры ответа: повод, погода, гардероб. */
.lp-cards{display:grid; gap:clamp(12px,2vw,18px)}
@media (min-width:720px){.lp-cards{grid-template-columns:repeat(3,1fr)}}
.lp-card{background:var(--surface); border:1px solid var(--gold-line);
  border-radius:18px; padding:clamp(16px,2.4vw,22px)}
.lp-card h3{font-size:1.06rem; font-weight:650; margin-bottom:8px}
.lp-card p{color:var(--muted); line-height:1.5}

/* Ряд образов: на телефоне два в ряд, дальше — четыре. */
.lp-shots{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,2vw,16px)}
@media (min-width:860px){.lp-shots{grid-template-columns:repeat(4,1fr)}}
.lp-shots figure{margin:0}
/* Соотношение задано заранее (кадры ровно 3:4): до загрузки картинки место
   уже размечено. Без этого высота кадра — ноль, вёрстка прыгает при
   догрузке, а расчёт раскрытия срывается и анимации нет (Алексей, 23.08). */
.lp-shots img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  display:block; border-radius:16px; background:var(--surface-2)}
.lp-shots figcaption{margin-top:8px; color:var(--soft); font-size:.9rem; text-align:center}

/* Шпаргалка по градусам: слева диапазон, справа что он значит. */
.lp-temp{display:grid; gap:2px; border-radius:18px; overflow:hidden;
  border:1px solid var(--gold-line)}
.lp-temp>div{display:grid; gap:4px; padding:clamp(14px,2.2vw,18px);
  background:var(--surface)}
@media (min-width:720px){
  .lp-temp>div{grid-template-columns:minmax(140px,.22fr) 1fr; gap:18px; align-items:baseline}
}
.lp-temp dt{font-weight:650}
.lp-temp dd{margin:0; color:var(--muted); line-height:1.5}

/* Вопрос-ответ: раскрывается по клику, в разметке — как FAQ для поиска. */
.lp-qa{display:grid; gap:10px; max-width:78ch}
.qa{background:var(--surface); border:1px solid var(--gold-line);
  border-radius:16px; padding:clamp(12px,2vw,16px) clamp(14px,2.2vw,20px)}
.qa summary{cursor:pointer; font-weight:600; list-style:none; position:relative;
  padding-right:28px;
  /* Без этого iOS красит вопрос серым прямоугольником на тап — на записи
     это читалось как мерцание (Алексей, 23.08). Свой отклик мягче: строка
     чуть гаснет, пока палец на ней. */
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s ease}
.qa summary:active{opacity:.62}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:""; position:absolute; right:4px; top:50%;
  width:9px; height:9px; margin-top:-6px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg);
  transition:transform .18s}
.qa[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.qa p{margin-top:10px; color:var(--muted); line-height:1.55}

.lp-final{padding:clamp(30px,7vw,70px) 0 clamp(36px,8vw,80px); text-align:center}
/* Подзаголовок финального блока — по центру колонки: своей ширины 52ch ему
   мало, нужны ещё авто-поля, иначе текст прижат влево (Алексей, 23.08). */
.lp-final .lp-note{margin-left:auto; margin-right:auto}
.lp-final .lead{margin:0 auto; max-width:44ch}
.lp-final .cta-row{margin-top:clamp(18px,3vw,28px); justify-content:center}
.lp-final .stores{justify-content:center}
.lp-back{margin-top:clamp(18px,3vw,26px)}
.lp-back a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* Кнопка-действие на странице-ответе крупнее, чем на главной: здесь она
   единственная, и человек пришёл сюда именно за ней (Алексей, 23.08). */
.btn-store--lg{padding:18px 38px}
.btn-store--lg .bt b{font-size:1.06rem}
.btn-store--lg svg{width:20px; height:20px}
/* Общее правило кнопки сжимает её на узких телефонах — этой не даём:
   размер один и тот же на любом экране. */
@media (max-width:400px){
  .btn-store--lg{padding:18px 38px; gap:10px}
  .btn-store--lg .bt b{font-size:1.06rem}
}

/* Переключатель «он/она» здесь — ссылки на соседнюю страницу, а не
   переключение картинок: у мужской версии свой адрес и свой текст. */
.who-toggle a.who{text-decoration:none}
.who-toggle .who--on{cursor:default}

/* Активную сторону на широком экране не нажимают — она и так текущая.
   А на узком (≤380) переключатель схлопывается в одну капсулу, и тап по
   ней должен уводить на соседнюю страницу — там ссылку возвращаем. */
.who-toggle .who--on{pointer-events:none}
@media (max-width:380px){
  .who-toggle .who--on{pointer-events:auto}
}

/* «Первые 5 образов бесплатно» — строго под кнопкой и по её центру.
   Колонка сжата по ширине кнопки, поэтому подпись держится за неё, а не
   разъезжается по всей ширине текста (Алексей, 23.08). */
.lp-hero .cta-row{display:inline-flex; flex-direction:column;
  align-items:stretch; width:auto; max-width:100%}
.lp-hero .cta-row .stores{justify-content:center}
.lp-hero .cta-row .micro{margin:10px auto 0; text-align:center; max-width:100%}


/* ============================================================
   ЖИВАЯ ЧАСТЬ СТРАНИЦЫ — правила перенесены с главной (Алексей, 23.08)
   ============================================================ */

/* ---------- появление блоков по прокрутке ----------
   Блок въезжает снизу, когда доходит до экрана. Прячем только при живом
   скрипте (класс .js ставится в <head> до отрисовки): без скрипта страница
   читается целиком — это важно и для поисковых роботов. */
.js .lp-in{opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease}
.js .lp-in.in{opacity:1; transform:none}
/* Соседи по ряду выходят не разом, а с полушагом — иначе ряд «хлопает» */
.js .lp-cards .lp-in:nth-child(2){transition-delay:.09s}
.js .lp-cards .lp-in:nth-child(3){transition-delay:.18s}
.js .lp-shots .lp-in:nth-child(2){transition-delay:.07s}
.js .lp-shots .lp-in:nth-child(3){transition-delay:.14s}
.js .lp-shots .lp-in:nth-child(4){transition-delay:.21s}
.js .lp-temp .lp-in:nth-child(2),.js .lp-qa .lp-in:nth-child(2){transition-delay:.05s}
.js .lp-temp .lp-in:nth-child(3),.js .lp-qa .lp-in:nth-child(3){transition-delay:.1s}
.js .lp-temp .lp-in:nth-child(4),.js .lp-qa .lp-in:nth-child(4){transition-delay:.15s}
.js .lp-temp .lp-in:nth-child(5),.js .lp-qa .lp-in:nth-child(5){transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .js .lp-in{opacity:1; transform:none; transition:none}
}

/* ---------- кадр отзывается на курсор (десктоп) ---------- */
@media (hover:hover) and (min-width:901px){
  .lp-shots figure img{
    transition:transform .45s cubic-bezier(.22,.68,.3,1), box-shadow .45s ease;
    will-change:transform}
  .lp-shots figure:hover img{transform:scale(1.022);
    box-shadow:0 26px 54px -28px rgba(20,12,32,.6)}
  [data-theme="light"] .lp-shots figure:hover img{
    box-shadow:0 24px 48px -28px rgba(58,45,74,.4)}
}

@media (max-width:900px){
  /* ---------- кадр раскрывается по нажатию ----------
     Растёт из своего места к центру экрана поверх вуали, как на главной. */

  /* Механика ровно как на главной: растёт СЛОЙ вокруг картинки, а на самой
     картинке transform не живёт вообще. Пока увеличение висело на <img>
     вместе с дыханием и сменой position, Safari срезал раскрытие — кадр
     выскакивал разом, хотя закрывался плавно (Алексей, 23.08).
     position и слой — постоянные, они не приходят вместе с классом. */
  .lp-shots figure{position:relative; z-index:1}
  .lp-shots figure.is-zoom{z-index:401}
  .lp-shots figure.was-zoom{z-index:5}
  .lp-shots .lp-shot{display:block; position:relative; transform-origin:50% 50%;
    will-change:transform;
    transition:transform .52s cubic-bezier(.32,.72,.24,1)}
  .lp-shots figure.is-zoom .lp-shot{
    transform:translate(var(--zx,0px), var(--zy,0px)) scale(var(--zs,1))}
  .lp-shots figure img{cursor:zoom-in; transition:box-shadow .5s ease}
  .lp-shots figure.is-zoom img,
  .lp-shots figure.was-zoom img{cursor:zoom-out}
  .lp-shots figure.is-zoom img{box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
  /* Подпись повода едет вместе с кадром и встаёт под его увеличенным
     краем — так видно, к какому поводу образ. Как на главной. */
  .lp-shots figcaption{transition:transform .42s cubic-bezier(.22,.68,.3,1),
    opacity .3s ease, color .3s ease}
  .lp-shots figure.is-zoom figcaption,
  .lp-shots figure.was-zoom figcaption{position:relative; color:var(--text)}
  .lp-shots figure.is-zoom figcaption{
    transform:translate(var(--cx,0px), var(--cy,0px)) scale(1.08)}
}

/* ---------- «Ещё по теме»: связи между страницами ----------
   Собирается генератором из групп тем, руками не ведётся. Ссылка выглядит
   как карточка, но легче: у неё нет фона, только рамка и надзаголовок. */
.lp-more{display:grid; gap:clamp(10px,1.8vw,16px)}
@media (min-width:720px){.lp-more{grid-template-columns:repeat(3,1fr)}}
.lp-more a{display:block; padding:clamp(14px,2.2vw,20px);
  border:1px solid var(--gold-line); border-radius:18px;
  text-decoration:none; color:var(--text);
  transition:border-color .25s ease, transform .35s cubic-bezier(.22,.68,.3,1)}
.lp-more-eye{display:block; color:var(--soft); font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px}
.lp-more-t{display:block; font-size:1.04rem; font-weight:650; line-height:1.3}
@media (hover:hover) and (min-width:901px){
  .lp-more a:hover{border-color:var(--gold); transform:translateY(-2px)}
}

/* ---------- первый экран: фигура справа ----------
   Тот же кадр, что на главной, и та же подпись-«копирайт»: страница
   обещает образ — значит образ должен быть виден сразу (Алексей, 23.08). */
@media (min-width:900px){
  /* Колонки одной высоты: фигура тянется во весь блок текста, а её подпись
     встаёт на одну линию с «Первые 5 образов бесплатно». Привязка к высоте
     окна делала фигуру крошечной на низких экранах, хотя место было
     (Алексей, 23.08). */
  /* Колонки равняются по низу: подпись «Образ собран в Esleya» встаёт на
     одну линию с «Первые 5 образов бесплатно». */
  .lp-hero .wrap{display:grid; align-items:end; gap:clamp(20px,3.5vw,52px);
    grid-template-columns:minmax(0,1fr) minmax(280px,.62fr)}
  .lp-hero .lp-fig{margin:0}
  /* Верхняя граница прежняя — 440px. Поднята только нижняя: на низком
     экране фигура съёживалась, хотя места по бокам хватало
     (Алексей, 23.08). */
  .lp-hero .lp-fig img{height:clamp(380px,44vh,440px)}
}
.lp-fig{position:relative; display:grid; justify-items:center;
  margin-top:clamp(26px,6vw,40px)}
.lp-fig img{position:relative; z-index:1; display:block; width:auto;
  height:clamp(290px,44vh,440px); max-width:100%; object-fit:contain}
.lp-fig-pool{position:absolute; z-index:0; bottom:26px; width:92%; height:58%;
  pointer-events:none;
  background:radial-gradient(46% 40% at 50% 52%, rgba(227,184,92,.26),
    rgba(227,184,92,.12) 38%, rgba(227,184,92,.04) 62%, rgba(227,184,92,0) 82%)}
:root.for-he .lp-fig-pool{
  background:radial-gradient(46% 40% at 50% 52%, rgba(214,190,140,.24),
    rgba(214,190,140,.11) 38%, rgba(214,190,140,.04) 62%, rgba(214,190,140,0) 82%)}
[data-theme="light"] .lp-fig-pool{
  background:radial-gradient(42% 36% at 50% 50%, rgba(168,118,26,.4),
    rgba(168,118,26,.18) 40%, rgba(168,118,26,0) 78%)}
.lp-fig-cap{margin-top:10px; color:var(--soft); font-size:.82rem;
  letter-spacing:.02em; text-align:center}

/* Вопросы и шпаргалка — во всю ширину страницы: узкая колонка оставляла
   справа пустое поле (Алексей, 23.08). */
.lp-qa{max-width:none}

/* На телефоне кнопка стоит по центру — как на главной. Строка кнопок
   inline, а inline авто-поля не центрируют: делаем её блочной по ширине
   содержимого (Алексей, 23.08). */
@media (max-width:900px){
  .lp-hero .cta-row{display:flex; width:fit-content;
    margin-left:auto; margin-right:auto}
}

/* Шапка на страницах-ответах красится в тон вуали БЕЗ задержки: Safari
   снимает цвет статус-бара в момент раскрытия, а переход (0.14 + 0.3 с)
   не успевает — верх оставался цвета обычной шапки (Алексей, 23.08). */
@media (max-width:900px){
  body:has(.zoom-veil.is-on) header.bar,
  body:has(.zoom-veil.is-on) header.bar > *{transition:none !important}
}

/* Системная подсветка тапа гасится и у выпадашки в подвале. */
.f-pop summary{-webkit-tap-highlight-color:transparent}

/* Кадр из библиотеки на первом экране: у него есть фон, поэтому он живёт в
   такой же рамке, как кадры ниже, а не парит силуэтом (Алексей, 23.08).
   И ведёт себя так же: отклик на курсор, дыхание на телефоне, раскрытие
   по нажатию — вся механика ниже написана для «.lp-shots figure», поэтому
   те же правила повторены и для него. */
.lp-fig img.lp-fig-shot{border-radius:18px; object-fit:cover;
  box-shadow:0 26px 60px -30px rgba(10,6,20,.7)}
[data-theme="light"] .lp-fig img.lp-fig-shot{
  box-shadow:0 22px 48px -30px rgba(58,45,74,.35)}
.lp-fig:has(img.lp-fig-shot) .lp-fig-pool{display:none}

/* ---------- верхний кадр: то же поведение, что у кадров ниже ---------- */
@media (hover:hover) and (min-width:901px){
  .lp-fig img.lp-fig-shot{
    transition:transform .45s cubic-bezier(.22,.68,.3,1), box-shadow .45s ease;
    will-change:transform}
  .lp-fig:hover img.lp-fig-shot{transform:scale(1.022);
    box-shadow:0 30px 64px -28px rgba(10,6,20,.8)}
  [data-theme="light"] .lp-fig:hover img.lp-fig-shot{
    box-shadow:0 26px 52px -28px rgba(58,45,74,.45)}
}
@media (max-width:900px){
  /* Кадр один, наезжать не на что — тихое дыхание в общий метроном сайта. */
  @keyframes lpBreathOne{0%,100%{transform:scale(1)} 50%{transform:scale(1.022)}}
  /* Дыхание остаётся на картинке и во время раскрытия: слои разные, друг
     другу они не мешают. Раньше дыхание гасили в тот же кадр, что задавали
     увеличение, — от этого кадр и выскакивал рывком. */
  .lp-fig img.lp-fig-shot{animation:lpBreathOne 3.6s ease-in-out infinite}
  .js .lp-fig img.lp-fig-shot{cursor:zoom-in}
  /* Раскрытие — тем же кодом, что у кадров ниже. */
  .lp-fig{z-index:1}
  .lp-fig.is-zoom{z-index:401}
  .lp-fig.was-zoom{z-index:5}
  .lp-fig .lp-shot{display:block; position:relative; transform-origin:50% 50%;
    will-change:transform;
    transition:transform .52s cubic-bezier(.32,.72,.24,1)}
  .lp-fig.is-zoom .lp-shot{
    transform:translate(var(--zx,0px), var(--zy,0px)) scale(var(--zs,1))}
  .lp-fig.is-zoom img.lp-fig-shot,
  .lp-fig.was-zoom img.lp-fig-shot{cursor:zoom-out}
  .lp-fig.is-zoom img.lp-fig-shot{
    transition:box-shadow .5s ease;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
  .lp-fig .lp-fig-cap{transition:transform .42s cubic-bezier(.22,.68,.3,1),
    opacity .3s ease, color .3s ease}
  .lp-fig.is-zoom .lp-fig-cap,
  .lp-fig.was-zoom .lp-fig-cap{position:relative; color:var(--text)}
  .lp-fig.is-zoom .lp-fig-cap{
    transform:translate(var(--cx,0px), var(--cy,0px)) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .lp-fig img.lp-fig-shot{animation:none}
}