/* Правки адаптива для apps.art, поверх экспорта из Claude Design.
 *
 * Подключается на этапе деплоя (deploy.sh) последним, чтобы перебивать
 * стили страницы. Везде !important — потому что density() в самой странице
 * проставляет свойства инлайном и переставляет их заново на каждый resize,
 * а инлайновый стиль иначе выигрывает у любого файла.
 *
 * Чинит две вещи, найденные при проверке на WebKit (движок Safari/Chrome/
 * WebView на iPhone) и Chromium (Chrome и WebView на Android):
 *
 *  1. Фоны — это <img> с width:100%/height:auto, то есть масштабируются ПО
 *     ШИРИНЕ. Все они 16:9 (1600×900). На экране 390×844 страница ставила им
 *     min-width:480px, и фон превращался в полосу 480×270 — 32% высоты экрана,
 *     а сверху и снизу оставалась пустая чернота. Заодно пропадала вся
 *     анимация героя: гореть и лететь было нечему, слои были этой же полосой.
 *
 *  2. min-height:100vh у героя. На iOS 100vh — это высота БЕЗ учёта панелей
 *     Safari, то есть больше реально видимой области: блок уезжает вниз и
 *     частично прячется под тулбаром. 100svh — как раз видимая часть.
 */

/* --- 1. фоны заполняют секцию целиком, обрезаясь по краям ----------------- */
/* Порог 720px совпадает с тем, что использует density() в самой странице. */
@media (max-width: 720px) {
  img[data-bg] {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
}

/* --- 2. герой ровно по видимой области на мобильных ----------------------- */
/* На десктопе svh равен vh, так что там ничего не меняется. */
@supports (min-height: 100svh) {
  header {
    min-height: 100svh !important;
  }
}

/* --- 3. подписи картин: крупнее и с переносом ----------------------------- */
/* Было 14px на десктопе и 12px на мобильном (последнее скрипт ставит инлайном,
 * поэтому только !important и помогает). Читалось плохо на обоих.
 *
 * Ключевой момент — снять white-space: nowrap. С запретом переноса подпись
 * растёт в ширину, и после переименования картин длинные имена начали
 * сталкиваться: на 360px «Watching Over Childhood» налезало на «Your Private
 * Network». С переносом подпись растёт вниз, и коллизии исчезают вовсе —
 * замерено на 360/375/390/430/1280/1440/1920: пересечений 0, причём пропали
 * и наложения подписей на чужие рамки, которые были и до укрупнения (до 8 штук).
 *
 * display:block у meta — скрипт прячет вторую строку на мобильном
 * (meta.style.display='none'), а нам она нужна: год отдельной строкой вместо
 * склейки «Имя · Год», в которой точка повисала в конце строки.
 */
[data-frame] figcaption {
  white-space: normal !important;
  max-width: 100% !important;
}
[data-frame] figcaption [data-cap-title] {
  font-size: 18px !important;
  text-align: center;
}
[data-frame] figcaption [data-cap-meta] {
  display: block !important;
  font-size: 13px !important;
  text-align: center;
}

/* === ОБЩИЕ ПРАВКИ (не только мобильные) ================================== */

/* --- 4. строка с цифрами заметнее ----------------------------------------- */
/* Замечание Максима: «цифры про 100 приложений лучше выделить посильнее».
 * Замерил: 13.5px, вес 400, серый #8A8880 — против заголовка 72px на десктопе,
 * то есть в 5,3 раза мельче и приглушённым цветом, читается как сноска.
 * Первая версия (15px + #D8D3C8) оказалась слишком громкой: цифры начали
 * спорить с текстовым блоком под ними. Размер вернули к исходному (13px),
 * а заметность даём весом 500 и цветом #A6A29A — светлее исходного #8A8880,
 * но тише текста о студии. Иерархия: заголовок -> что делаем -> цифры.
 * Крючок data-aa-stats навешивает deploy.sh — своего класса у блока нет.
 * Блок flex-wrap с max-width 560px, поэтому просто перенесётся на строку. */
[data-aa-stats] {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #A6A29A !important;
}
/* точки-разделители оставляем приглушёнными, иначе рябит */
[data-aa-stats] span[style*="opacity"] {
  color: #8A8880 !important;
}

/* --- 5. мобильная стена галереи: grid вместо многоколоночности ------------ */
/* Дефект экспорта, воспроизводится и БЕЗ этого файла (проверено с
 * заблокированным site-fixes.css). Скрипт страницы раскладывает картины на
 * мобильном через CSS-многоколоночность: fit.style.columnCount='2' плюс
 * break-inside:avoid на рамках. В WebKit (движок Safari/Chrome/WebView на
 * iPhone) эта связка ломается: колонки схлопываются, рамка «Composing
 * Memories» раздувается со 160x204 до 345x1149 и накрывает соседей —
 * коллекция на айфоне выглядела одной кривой колонкой. В Chromium всё было
 * нормально, поэтому дефект и не был заметен без проверки на WebKit.
 *
 * Лечение: тот же двухколоночный вид, но через grid — он ведёт себя
 * одинаково в обоих движках. После правки максимальная высота рамки 263px
 * вместо 1351, раскладка WebKit и Chromium совпадает попиксельно.
 *
 * Порог 719px повторяет условие в скрипте (mobile = w < 720).
 */
@media (max-width: 719px) {
  [data-wall-fit] {
    column-count: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 26px 14px !important;
    align-items: start !important;
    justify-items: center !important;
  }
  [data-frame] {
    margin-bottom: 0 !important;
  }
}

/* --- 6. этикетка к слогану ------------------------------------------------- */
/* Свёрнутая табличка на нативном <details>. Прячем системный треугольник
 * (в WebKit он рисуется отдельным псевдоэлементом) и меняем + на − когда
 * раскрыто — чтобы состояние читалось без JS. */
[data-aa-note] summary::-webkit-details-marker { display: none; }
[data-aa-note] summary::marker { content: ""; }
[data-aa-note] details[open] [data-aa-note-mark]::after { content: "−"; }
[data-aa-note] details:not([open]) [data-aa-note-mark]::after { content: "+"; }
[data-aa-note] [data-aa-note-mark] { font-size: 0; }
[data-aa-note] [data-aa-note-mark]::after { font-size: 12px; }