/* LOOLA — сторінка «Про LOOLA» §23. Источник: theme/demo/about.html.
   Правки вносить в wp/setup/proto/about-extra.css, пересобрать прототип
   и перенести сюда — прототип старше темы.

   Общая база (токены, типографика, кнопки, .main) приходит из
   header-footer.css, он подключается раньше. Страничные файлы вместе
   не грузятся никогда, поэтому .wrap, .crumbs и .ph продублированы
   здесь, а не взяты из info.css.

   Утверждён вариант Б из прототипа; вариант A отклонён 16.09.2026. */

/* ── Заглушки кадрів ──────────────────────────────────────────
   Той самий компонент, що в home.html і catalog.html.          */
.ph{ display:flex; align-items:center; justify-content:center; text-align:center;
  padding:var(--s-5); background:var(--wash);
  border:1px dashed var(--line-strong); border-radius:var(--r-xs) }
.ph > span{ max-width:36ch; font-size:13px; line-height:1.55; color:var(--muted) }
.ph b{ display:block; margin-bottom:var(--s-2); font-family:var(--font-display); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.ph i{ display:block; margin-top:var(--s-2); font-style:normal;
  font-size:11px; letter-spacing:.06em; color:var(--line-strong) }

/* Кадр із заданою пропорцією. Заглушка лягає на всю площу, щоб
   на макеті було видно справжній розмір плями, а не текст у рамці. */
.shot{ position:relative; background:var(--wash); overflow:hidden }
.shot > .ph{ position:absolute; inset:0; border-radius:0 }
.shot > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* ── Обгортка сторінки і крихти ───────────────────────────── */
.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--pad-page) }
.crumbs{ padding:var(--s-3) 0; font-size:13px; color:var(--muted) }
.crumbs a{ color:var(--muted) } .crumbs a:hover{ color:var(--ink) }
.crumbs span{ padding:0 var(--s-2) }

/* §7 · третій рівень — текстове посилання зі стрілкою.
   Підкреслення тільки на наведенні: так задано .btn-ghost у §7 і так
   зроблено .hero-all на головній. Постійна риска на третьому рівні
   робить його гучнішим за другий, а другий тут — контурна кнопка.

   Підкреслюється лише слово. Стрілка — окремий елемент flex, і спільне
   text-decoration малює під нею власний відрізок, розірваний на gap:
   виходить не підкреслення, а дві рисочки. */
.go{ display:inline-flex; align-items:center; gap:var(--s-3); min-height:44px;
  font-size:15px; color:var(--ink) }
.go .arw{ color:var(--line-strong); transition:transform var(--t-fast) var(--ease) }
.go:hover .go-t{ text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px }
.go:hover .arw{ transform:translateX(4px) }

/* ============================================================
   СТОРІНКА «ПРО LOOLA» — §23

   Тексти утверджені власником. Що робить розкладка:
   · ритм по вертикалі, як на головній §20 — контейнер / на всю
     ширину / світле / сіре, а не пʼять однакових пар «кадр + текст»;
   · два кроки з макета стали видимою послідовністю з макрокадром,
     а не парою абзаців під номерами;
   · чотири типи кадру §13 замість трьох знімків тієї самої моделі;
   · сторінка закінчується навігацією, а не абзацом із посиланнями
     всередині: речення обіцяє «у відповідних розділах сайту» —
     тут вони й лежать, рядком.
   ============================================================ */

/* ── Перший екран ─────────────────────────────────────────── */
.about-hero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  border-bottom:var(--hairline) solid var(--line) }
/* Хайрлайн між рейкою і кадром іде через обидва рядки, тому межа
   стоїть і на крихтах: інакше лінія починалася б із середини. */
.about-hero-crumbs{ grid-area:1 / 1; padding-inline-start:var(--pad-page);
  border-right:var(--hairline) solid var(--line) }
.about-hero-rail{ grid-area:2 / 1; display:grid; align-content:space-between; gap:var(--s-8);
  padding:0 var(--s-7) var(--s-6) var(--pad-page);
  border-right:var(--hairline) solid var(--line) }
.about-hero .shot{ grid-area:1 / 2 / -1 }
.about-hero-say{ display:grid; gap:var(--s-5); margin-top:var(--s-6) }
.about-hero-say .t-label{ color:var(--muted) }
.about-hero-say h1{ font-size:clamp(30px,4.4vw,52px); line-height:1.14 }
.about-hero-say p{ font-size:17px; line-height:1.7; color:var(--soft); max-width:38ch }
.about-hero-foot{ display:grid; gap:var(--s-3); justify-items:start }
/* Єдине число на сторінці — і воно справжнє: 7 категорій, 104 моделі,
   як у рейці головної. Решта тексту сторінки чисел не має зовсім. */
.about-hero-foot .t-caption{ font-variant-numeric:tabular-nums }
.about-hero .shot{ min-height:clamp(420px,62vh,680px) }

/* ── Перелік розділів довідки на першому екрані (22.09.2026) ──────
   Варіант B із theme/demo/info-nav.html: ті самі пункти, шрифт і риска
   біля поточного, що на сторінках довідки, — тільки у дві колонки внизу
   рейки. Пропорція «текст — кадр» лишається. Окрема комірка сітки, а не
   частина рейки: на телефоні перелік стоїть під крихтами, над кадром.
   Розмітка — loola_info_pick() (inc/info.php), та сама згортка, що
   в довідці; стилі повторено тут, бо about.css і info.css на одну
   сторінку разом не потрапляють. */
.about-pick{ grid-area:3 / 1; padding:0 var(--s-7) var(--s-8) var(--pad-page);
  border-right:var(--hairline) solid var(--line) }
/* Рядок «Розділи» — тихий підпис, як «Про LOOLA» над заголовком рейки */
.about-pick > summary{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px;
  cursor:pointer; list-style:none; color:var(--muted);
  transition:color var(--t-color) var(--ease-soft) }
.about-pick > summary:hover,.about-pick[open] > summary{ color:var(--ink) }
.about-pick > summary::-webkit-details-marker{ display:none }
.about-pick .info-pick-chev{ flex:none; transition:transform var(--t-fast) var(--ease) }
.about-pick[open] .info-pick-chev{ transform:rotate(180deg) }
/* Колонки — по вмісту: «Політика конфіденційності» — найдовший пункт */
.about-pick .info-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,max-content));
  gap:0 var(--s-7); padding-top:var(--s-5); border-top:var(--hairline) solid var(--line) }
.about-pick .info-nav-col{ display:grid; gap:var(--s-1); align-content:start }
.about-pick .info-nav a{ display:flex; align-items:center; min-height:36px; padding:0 var(--s-3);
  margin-inline:calc(-1 * var(--s-3)); border-radius:var(--r-sm); font-size:14px; color:var(--body);
  transition:background-color var(--t-color) var(--ease-soft), color var(--t-color) var(--ease-soft) }
.about-pick .info-nav a:hover{ background:var(--wash); color:var(--ink) }
.about-pick .info-nav a[aria-current]{ color:var(--ink) }
.about-pick .info-nav a[aria-current]::before{ content:''; width:12px; height:var(--hairline);
  margin-right:var(--s-3); background:var(--ink) }
.about-pick .info-nav .apart{ position:relative; margin-top:calc(2 * var(--s-4) + var(--hairline)) }
.about-pick .info-nav .apart::after{ content:''; position:absolute; left:var(--s-3); right:var(--s-3);
  top:calc(-1 * var(--s-4) - var(--hairline)); height:var(--hairline); background:var(--line) }
@media (min-width:1024px){
  .about-pick[open] > summary{ display:none }
}
/* Ноутбуки 1024–1279: рейка 5/12 — це ~300px, і дві колонки переліку
   ламали пункти навпіл («Обмін і / повернення»). Тут перший екран ділиться
   навпіл: тексту й переліку стає тісно менше, кадр лишається великим.
   З 1280 — знову 5 / 7. */
@media (min-width:1024px) and (max-width:1279px){
  .about-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}

/* ── Відбір: тільки текст ─────────────────────────────────────
   Після великого кадру потрібен такт без фотографії, інакше
   сторінка читається як галерея. Заголовок стоїть окремою
   колонкою — той самий лад, що в довідці §22.                 */
.about-say{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--s-7); padding-block:var(--s-9) }
.about-say h2{ font-size:clamp(22px,2.4vw,28px); line-height:1.25; max-width:14ch }
.about-say-body{ display:grid; gap:var(--s-5) }
.about-say-body .lead{ font-size:19px; line-height:1.65; color:var(--ink); max-width:50ch }
.about-say-body p{ font-size:15px; line-height:1.75; color:var(--body); max-width:56ch }

/* ── Увага до кожної речі ─────────────────────────────────────
   Смуга на сірому, макрокадр ліворуч. Макро — один із чотирьох
   типів кадру §13, і саме він показує те, про що текст: шов,
   рубчик, щільність.                                              */
.about-care{ background:var(--wash); border-block:var(--hairline) solid var(--line) }
.about-care-in{ max-width:var(--container); margin:0 auto;
  padding:var(--s-9) var(--pad-page);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s-7); align-items:center }
.about-care .shot{ aspect-ratio:1/1 }
.about-care-say{ display:grid; gap:var(--s-6) }
.about-care-say > h2{ font-size:clamp(22px,2.4vw,28px) }
.about-steps{ display:grid; gap:var(--s-5) }
.about-step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-5);
  align-items:start; padding-top:var(--s-4);
  border-top:var(--hairline) solid var(--line-strong) }
.about-step-n{ font-family:var(--font-display); font-weight:300; font-size:26px;
  line-height:1.15; letter-spacing:.04em; color:var(--muted);
  font-variant-numeric:tabular-nums }
.about-step-say{ display:grid; gap:var(--s-2) }
.about-step-say .t-label{ color:var(--ink) }
.about-step-say p{ font-size:15px; line-height:1.7; color:var(--soft); max-width:44ch }

/* ── Від тренування до міста ──────────────────────────────────
   Кадри різного масштабу і різної пропорції: високий lifestyle
   і широкий студійний. Два однакових кадри поруч читаються як
   ряд каталогу, а це не каталог.                              */
.about-city{ padding-block:var(--s-9) }
.about-city h2{ margin-bottom:var(--s-6); font-size:clamp(22px,2.4vw,28px) }
.about-city-in{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s-5) }
.about-city-tall{ aspect-ratio:4/5 }
.about-city-side{ display:grid; grid-template-rows:auto minmax(0,1fr); gap:var(--s-5) }
.about-city-wide{ aspect-ratio:4/3 }
.about-city-say{ display:flex; flex-direction:column; gap:var(--s-4) }
.about-city-say p{ font-size:15px; line-height:1.75; color:var(--body) }
/* Речення каже «окремо або комплектом» — тут воно стає двома
   справжніми заходами з лічильниками, а не одним «обрати комплект».
   Заходи відкинуті до низу колонки: так вони стають на одну лінію
   з нижнім краєм високого кадру, і порожнє місце під текстом
   перетворюється на межу композиції, а не на дірку. */
.about-city-go{ display:grid; margin-top:auto; padding-top:var(--s-5) }
.about-city-go a{ display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:var(--s-3); min-height:48px; font-size:15px; color:var(--ink);
  border-top:var(--hairline) solid var(--line) }
.about-city-go a:last-child{ border-bottom:var(--hairline) solid var(--line) }
.about-city-go .n{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums }
.about-city-go .arw{ color:var(--line-strong); transition:transform var(--t-fast) var(--ease) }
.about-city-go a:hover{ color:var(--soft) }
.about-city-go a:hover .arw{ transform:translateX(4px) }

/* ── Куди далі ────────────────────────────────────────────────
   Сторінку про бренд читають згори вниз і один раз. Липкий
   перелік розділів §22 їй не потрібен — потрібен вихід у кінці.
   Чотири розділи рядком і одна суцільна кнопка (§1).          */
.about-next{ background:var(--wash); border-top:var(--hairline) solid var(--line) }
.about-next-in{ max-width:var(--container); margin:0 auto;
  padding:var(--s-9) var(--pad-page); display:grid; gap:var(--s-6) }
.about-next h2{ font-size:clamp(22px,2.4vw,28px) }
.about-next-say{ display:grid; gap:var(--s-4); max-width:62ch }
.about-next-say p{ font-size:15px; line-height:1.75; color:var(--body) }
.about-links{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5);
  padding-top:var(--s-5); border-top:var(--hairline) solid var(--line-strong) }
.about-links a{ display:grid; gap:var(--s-2); align-content:start; min-height:44px }
.about-links .t-label{ color:var(--ink) }
.about-links a:hover .t-label{ text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px }
.about-next-act{ display:flex; flex-wrap:wrap; gap:var(--s-4) }

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width:1023px){
  .about-hero{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto }
  /* Крихти на телефоні сховані — як на сторінках довідки (варіант A,
     theme/demo/info-top.html): першим рядком стоїть «Розділи» */
  .about-hero-crumbs{ display:none }
  .about-hero .shot{ grid-area:3 / 1; min-height:clamp(340px,54vh,520px) }
  .about-hero-rail{ grid-area:4 / 1; padding:0 var(--pad-page) var(--s-8); border-right:0 }
  /* «Розділи» — першим рядком над кадром, як на сторінках довідки */
  .about-pick{ grid-area:2 / 1; padding:0 var(--pad-page); border-right:0 }
  .about-pick .info-nav{ grid-template-columns:minmax(0,1fr); gap:var(--s-1);
    padding:var(--s-1) 0 var(--s-4); margin-bottom:var(--s-4); border-top:0;
    border-bottom:var(--hairline) solid var(--line) }
  .about-pick .info-nav a{ min-height:44px; font-size:15px }
  .about-hero-say{ margin-top:var(--s-6) }
  .about-hero-foot{ margin-top:var(--s-6) }
  .about-say{ grid-template-columns:minmax(0,1fr); gap:var(--s-5) }
  .about-say h2{ max-width:none }
  .about-care-in{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  .about-care .shot{ aspect-ratio:3/2 }
  .about-city-in{ grid-template-columns:minmax(0,1fr) }
  .about-city-tall{ aspect-ratio:3/4 }
  .about-links{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) var(--s-6) }
}
/* Планшет 600–1023: кадр на всю ширину, а висота 54vh робила з нього
   смугу 1.5–2 : 1 — героїні С04 зрізало пальці й стопи (28.09.2026).
   Кадр генерується в 4:3 — у 4:3 його й показуємо. На телефоні
   лишається вертикальний зріз: там героїня вміщується цілком. */
@media (min-width:600px) and (max-width:1023px){
  .about-hero .shot{ min-height:0; aspect-ratio:4/3 }
}
@media (max-width:739px){
  .about-links{ grid-template-columns:minmax(0,1fr) }
  .about-next-act .btn{ width:100% }
}