/* ПОЛОСА «AS SEEN ON» — УПОМИНАНИЯ В ПРЕССЕ
 * ============================================================================
 *
 * Два блока на общих данных и общих логотипах: полоса `.press`
 * (шорткод `[freedes_press]`) и список публикаций `.presspage`
 * (шорткод `[freedes_press_list]`, содержимое страницы /press/).
 *
 * Разметка обоих — components/press.php, логотипы — assets/press/*.svg.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ РАЗДЕЛ В service-pages.css. Тот лист едет
 * на `is_page()` и намеренно снят с главных: своих блоков там нет. Полоса
 * же метит в том числе на главную, и, влив её туда, мы либо потащили бы
 * на главные весь сервисный лист (12 КБ), либо оставили бы полосу без
 * оформления. Свой файл — 2 КБ, и он подключается только там, где полоса
 * действительно стоит.
 *
 * ПРАВИЛА ТЕ ЖЕ, ЧТО У service-pages.css
 *
 * 1. В правилах — только роли `--pr-*`, объявленные на корне компонента.
 *    Ступени `--fs-*` и `--sp-*` из `:root` темы встречаются лишь
 *    в объявлении ролей. Адаптив — переопределение ролей, и только их.
 * 2. У каждой ступени запасное значение: файл лежит в плагине, шкала —
 *    в теме, и при её отсутствии полоса не должна рассыпаться.
 * 3. Никаких сокращённых свойств с переменной внутри: движок, который
 *    такое не разбирает, выбрасывает объявление целиком.
 */


/* ==========================================================================
   СОВМЕСТИМОСТЬ С ВИДЖЕТОМ «ШОРТКОД» ELEMENTOR
   ========================================================================== */

/* В main.css стоит `.elementor-widget-shortcode { display: flex }`. Виджет
   становится флекс-контейнером, а компонент внутри — флекс-элементом
   и ужимается по содержимому: полоса встала бы посреди страницы куском
   в половину ширины. Приём не новый, в теме так уже сделано для наград.

   Ширина задана и на самом компоненте (`width: 100%` ниже): она работает
   там, где `:has()` не поддержан. */
.elementor-widget-shortcode:has(.press),
.elementor-widget-shortcode:has(.presspage) {
    display: block;
}


/* ==========================================================================
   ПОЛОСА
   ========================================================================== */

.press {
    /* размеры */
    --pr-fs-label: var(--fs-12, 0.75rem);

    /* Высота ряда логотипов. Она же задаёт всю высоту полосы: считать
       нужно только `--pr-pad-y` × 2 + это. */
    --pr-logo-h: var(--sp-24, 1.5rem);

    /* Предел ширины логотипа. Нужен из-за разброса пропорций: Street
       Insider — строка 936×89, то есть при равной высоте он был бы вшестеро
       шире AP. Упёршись в предел, логотип становится ниже, а не сплющивается:
       за это отвечает `object-fit` ниже. */
    --pr-logo-w: var(--sp-120, 7.5rem);

    /* ритм */
    --pr-pad-y: var(--sp-20, 1.25rem);
    /* Боковое поле и предел ширины взяты у шапки: полоса должна вставать
       по той же сетке, что и всё остальное на странице. */
    --pr-pad-x: clamp(var(--sp-24, 1.5rem), 2.0833vw, var(--sp-40, 2.5rem));
    --pr-max: 120rem;
    --pr-gap: clamp(var(--sp-24, 1.5rem), 3vw, var(--sp-48, 3rem));
    --pr-label-gap: var(--sp-32, 2rem);

    /* Цвета держат роли, а не литералы в правилах: цветовых ступеней
       в `:root` темы нет, и в плагине цвет живёт ролями компонента. */
    --pr-bg: #ffffff;
    --pr-ink: #7a7a7a;
    --pr-line: #d1d1d1;
    --pr-accent: #abcf39;

    /* Логотипы приглушены: полоса — подпись, а не блок внимания.
       На наведении гасилка снимается. */
    --pr-dim: 0.55;

    /* Ширина явно: см. комментарий про виджет «Шорткод» выше. */
    width: 100%;

    background-color: var(--pr-bg);

    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--pr-line);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--pr-line);
}

/* Тёмный вариант: [freedes_press theme="dark"]. Разметка одна на оба,
   отличаются только роли цвета.

   Логотипы светлеют инверсией, а не вторым набором файлов. Это работает
   ровно потому, что каждый файл одноцветный: заливка снята с элементов
   и оставлена одна на корне, поэтому invert(1) переводит #282828
   в ровный светло-серый и ничего больше сделать не может. Если однажды
   в assets/press/ попадёт цветной логотип, инверсия его изуродует —
   класть туда только одноцветные. */
.press--dark {
    --pr-bg: #282828;
    --pr-ink: #a7a7a7;
    --pr-line: #4b4b4b;
    --pr-dim: 0.7;
}

.press--dark .press__logo {
    filter: invert(1);
}

/* Полоса без линий сверху и снизу: [freedes_press lines="none"].
   Пригодится там, где соседний блок уже отбит своей линией или фоном. */
.press--flat {
    border-top-style: none;
    border-bottom-style: none;
}

.press__inner {
    max-width: var(--pr-max);
    margin-left: auto;
    margin-right: auto;

    padding-top: var(--pr-pad-y);
    padding-right: var(--pr-pad-x);
    padding-bottom: var(--pr-pad-y);
    padding-left: var(--pr-pad-x);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--pr-label-gap);
    row-gap: var(--sp-12, 0.75rem);
}

/* Подпись. Два уровня в селекторе обязательны: `.elementor-kit-225 p`
   задаёт свой кегль одним классом и тегом (0,1,1), одним классом его
   не перебить. На заголовке сетки клиентов эта ошибка уже стоила вида. */
.press .press__label {
    /* Длинными свойствами, а не `margin: 0`: движок, не разобравший
       переменную в соседнем объявлении, выбрасывает только его, — но
       единообразие важнее экономии строк, иначе правило легко потом
       переписать сокращённым и притащить переменную. */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-size: var(--pr-fs-label);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--pr-ink);
}

/* Список. Обнуление полей и маркера — не перестраховка: тема и кит
   Elementor задают спискам и отступ, и точку. */
.press .press__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--pr-gap);
    row-gap: var(--sp-16, 1rem);

    list-style: none;

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

/* ВЫСОТА РЯДА ЗАДАНА НА ЯЧЕЙКЕ, А НЕ НА КАРТИНКЕ, и это механика.
   У двух логотипов viewBox нарисован с полями — у AP четверть высоты
   сверху пустая, у Big News Network по десятой доле с каждой стороны.
   Им передаётся поправка `--pr-scale`, и картинка становится ВЫШЕ ячейки,
   чтобы сам контур встал вровень с соседями. Ячейка при этом держит
   прежнюю высоту, картинка выступает поровну вверх и вниз внутри
   вертикального поля полосы, и высота полосы не пляшет от состава списка. */
.press .press__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--pr-logo-h);
}

.press .press__link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.press .press__logo {
    display: block;

    /* Обе стороны — пределы, а не размеры: логотип вписывается в коробку
       по своей пропорции, и высокий упирается в высоту, а длинный
       в ширину. `--pr-scale` растягивает коробку целиком, поэтому
       поправка работает в обоих случаях. */
    width: auto;
    height: auto;
    max-width: calc(var(--pr-logo-w) * var(--pr-scale, 1));
    max-height: calc(var(--pr-logo-h) * var(--pr-scale, 1));

    /* Страховка от сплющивания. Если коробка окажется другой пропорции,
       чем картинка, `contain` оставит поля, а не растянет контур. */
    object-fit: contain;

    opacity: var(--pr-dim);
    transition-property: opacity;
    transition-duration: 0.2s;
}

.press .press__link:hover .press__logo,
.press .press__link:focus-visible .press__logo {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .press .press__logo,
    .press .press__more {
        transition-property: none;
    }
}

/* Ссылка на страницу прессы: [freedes_press more="/press/"].
   Стоит после логотипов и набрана тем же кеглем, что подпись слева, —
   это два конца одной строки, а не подпись и кнопка. */
.press .press__more {
    display: inline-flex;
    align-items: baseline;
    column-gap: var(--sp-8, 0.5rem);

    font-size: var(--pr-fs-label);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--pr-ink);

    transition-property: color;
    transition-duration: 0.2s;
}

.press .press__more:hover,
.press .press__more:focus-visible {
    color: var(--pr-accent);
}

/* Стрелка не уезжает вправо на наведении: полоса тонкая, и сдвиг
   в ней заметнее, чем нужен. Меняется только цвет. */
.press .press__arrow {
    font-size: 1.1em;
}



/* ==========================================================================
   ПЛАНШЕТ И ТЕЛЕФОН
   ========================================================================== */

@media (max-width: 1199px) {
    .press {
        --pr-gap: var(--sp-32, 2rem);
        --pr-label-gap: var(--sp-24, 1.5rem);
    }
}

/* На телефоне подпись уходит на свою строку: рядом с шестью логотипами
   она съедает половину ширины, и ряд ломается после второго. */
@media (max-width: 767px) {
    .press {
        --pr-logo-h: var(--sp-20, 1.25rem);
        --pr-logo-w: var(--sp-96, 6rem);
        --pr-gap: var(--sp-20, 1.25rem);
        --pr-pad-y: var(--sp-16, 1rem);
    }

    .press__inner {
        flex-direction: column;
        row-gap: var(--sp-16, 1rem);
    }
}


/* ==========================================================================
   СТРАНИЦА /press/ — СПИСОК ПУБЛИКАЦИЙ
   ========================================================================== */

/* Разметка — `freedes_press_list_render()` в том же компоненте,
 * шорткод `[freedes_press_list]`.
 *
 * Живёт в одном файле с полосой намеренно: у них общие данные и общие
 * логотипы, и лист подключается одной и той же проверкой — она ищет
 * подстроку `[freedes_press`, а та есть в обоих именах шорткодов.
 *
 * Роли с другим префиксом, `--pp-*` против `--pr-*` у полосы: блоки
 * разные, и общая роль однажды утащила бы один за другим.
 *
 * Страница идёт на шаблоне «Freedes — страница блоками», у которого нет
 * ни своей обёртки, ни полей. Поэтому ширину и отступы держит сама секция.
 */

.presspage {
    /* размеры */

    /* ЗАГОЛОВОК НАБРАН ПО СТУПЕНИ H2, ХОТЯ ЭТО H1. Шкала темы отдаёт H1
       шестьдесят пикселей — она рассчитана на первый экран с картинкой
       во всю ширину. Здесь текстовая страница-список, и шестьдесят
       на ней спорят с содержимым. Если решите иначе — менять только эту
       строку. */
    --pp-fs-title: var(--fs-h2, 1.75rem);
    --pp-fs-lead: var(--fs-16, 1rem);
    --pp-fs-headline: var(--fs-18, 1.125rem);
    --pp-fs-meta: var(--fs-14, 0.875rem);

    /* Колонка с логотипом. Ширина фиксированная, чтобы заголовки всех
       материалов начинались по одной вертикали независимо от того,
       насколько широк логотип издания. */
    --pp-mark-w: var(--sp-120, 7.5rem);
    --pp-logo-h: var(--sp-24, 1.5rem);

    /* ритм */
    --pp-max: 56rem;
    --pp-pad-y: var(--sp-80, 5rem);
    --pp-pad-x: clamp(var(--sp-24, 1.5rem), 2.0833vw, var(--sp-40, 2.5rem));
    --pp-title-gap: var(--sp-16, 1rem);
    --pp-lead-gap: var(--sp-48, 3rem);
    --pp-row-gap: var(--sp-32, 2rem);
    --pp-mark-gap: var(--sp-32, 2rem);
    --pp-meta-gap: var(--sp-8, 0.5rem);
    /* просвет между именем издания, точкой и датой */
    --pp-inline-gap: var(--sp-8, 0.5rem);

    /* цвета */
    --pp-ink: #282828;
    --pp-muted: #7a7a7a;
    --pp-line: #d1d1d1;
    --pp-accent: #abcf39;

    /* Логотипы приглушены так же, как в полосе: в списке главное — текст. */
    --pp-dim: 0.55;

    width: 100%;
}

.presspage__inner {
    max-width: var(--pp-max);
    margin-left: auto;
    margin-right: auto;

    padding-top: var(--pp-pad-y);
    padding-right: var(--pp-pad-x);
    padding-bottom: var(--pp-pad-y);
    padding-left: var(--pp-pad-x);
}

/* Два уровня в селекторе: `.elementor-kit-225 h1` бьёт одним классом
   и тегом (0,1,1), одним классом его не перебить. */
.presspage .presspage__title {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--pp-title-gap);
    margin-left: 0;

    font-size: var(--pp-fs-title);
    font-weight: 500;
    line-height: 1.2;
    color: var(--pp-ink);
}

.presspage .presspage__lead {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--pp-lead-gap);
    margin-left: 0;

    font-size: var(--pp-fs-lead);
    line-height: 1.6;
    color: var(--pp-muted);
}

.presspage .presspage__list {
    list-style: none;

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.presspage .presspage__item {
    display: flex;
    align-items: flex-start;
    column-gap: var(--pp-mark-gap);

    padding-top: var(--pp-row-gap);
    padding-bottom: var(--pp-row-gap);

    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--pp-line);
}

/* Линия сверху только у первой строки: у остальных её роль играет
   нижняя линия соседа. */
.presspage .presspage__item:first-child {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--pp-line);
}

/* Колонка логотипа. Фиксированная ширина тремя свойствами, а не одним
   `flex`: сокращённое свойство с переменной внутри движок, который его
   не разберёт, выбросит целиком, и колонка схлопнется по картинке. */
.presspage .presspage__mark {
    display: flex;
    align-items: center;

    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--pp-mark-w);

    /* Логотип встаёт вровень со строкой заголовка, а не с её верхом. */
    height: calc(var(--pp-fs-headline) * 1.4);
}

.presspage .presspage__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--pp-logo-h);
    object-fit: contain;
    opacity: var(--pp-dim);
}

.presspage .presspage__body {
    display: block;
}

.presspage .presspage__headline {
    display: block;

    font-size: var(--pp-fs-headline);
    font-weight: 500;
    line-height: 1.4;
    color: var(--pp-ink);
    text-decoration: none;
}

.presspage .presspage__headline:hover,
.presspage .presspage__headline:focus-visible {
    color: var(--pp-accent);
}

/* ФЛЕКС, А НЕ СТРОКА С ПРОБЕЛАМИ. Между `<span>` в шаблоне стоят переносы
   строк, и в обычном потоке каждый из них печатается пробелом: просвет
   вокруг точки-разделителя зависел бы от того, как отформатирован PHP.
   Во флекс-контейнере текстовые узлы из одних пробелов не участвуют
   в раскладке вовсе, и просвет держит только `column-gap`. */
.presspage .presspage__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--pp-inline-gap);

    margin-top: var(--pp-meta-gap);

    font-size: var(--pp-fs-meta);
    line-height: 1.4;
    color: var(--pp-muted);
}

/* На телефоне логотип уходит над заголовком: колонка в 120px съедает
   треть экрана, и заголовок ломается по два слова в строку. */
@media (max-width: 767px) {
    .presspage {
        --pp-pad-y: var(--sp-48, 3rem);
        --pp-row-gap: var(--sp-24, 1.5rem);
    }

    .presspage .presspage__item {
        flex-direction: column;
        row-gap: var(--sp-12, 0.75rem);
    }

    .presspage .presspage__mark {
        flex-basis: auto;
        height: auto;
    }
}


/* ── шапка над страницей без баннера ────────────────────────────────────── */

/* ТА ЖЕ БОЛЯЧКА, ЧТО НА СТРАНИЦЕ АВТОРА, И ЛЕЧИТСЯ ТАК ЖЕ.
 *
 * Шапка на сайте прозрачная, а текст и логотип в ней белые: на остальных
 * страницах под ней лежит тёмный герой, и белое читается по фотографии.
 * Фон шапке добавляет скрипт при прокрутке — класс `.header__background-color`.
 * На `/press/` под шапкой сразу белый лист, и от логотипа остаётся одно
 * зелёное слово STUDIO.
 *
 * Решение — сплошная тёмная полоса, а не перекраска текста: логотип
 * приезжает готовым белым SVG в теге `img`, перекрасить его можно только
 * фильтром инверсии, а это подгонка, которая сломается на первой же правке
 * логотипа. Разбор — раздел «шапка над страницей без баннера»
 * в service-pages.css, там же лежит близнец этого правила для `body.author`.
 *
 * УСЛОВИЕ — НЕ «ЭТО СТРАНИЦА ПРЕССЫ», А «СПИСОК ЛЕЖИТ ПЕРВЫМ БЛОКОМ».
 * Именно тогда над ним нет баннера и полоса нужна. Поставь кто-нибудь
 * `[freedes_press_list]` под героем — правило само не сработает,
 * и шапка останется прозрачной, как ей и положено над баннером.
 *
 * Цвет литералом, а не ролью: роли `--pp-*` объявлены на `.presspage`,
 * а `.header` лежит выше по дереву и до них не достаёт. У правила для
 * страницы автора цвет записан так же.
 *
 * `:has()` знают Chrome 105+, Safari 15.4+, Firefox 121+. Где его нет,
 * шапка останется прозрачной — некрасиво, но страница работает. Тема
 * и сервисный лист на этот селектор уже опираются.
 *
 * Специфичность (1,1,1) — внутри `:has()` считается самый весомый
 * аргумент, а это `#content`. Значит правило перебивает и
 * `.header__background-color` (0,1,0), и полоса при прокрутке не станет
 * полупрозрачной серой. Так и надо: на белом фоне полупрозрачный чёрный
 * читается как грязь.
 */
body:has(#content > .presspage:first-child) .header {
    background-color: #282828;
}

/* Шапка `position: fixed`, поэтому содержимое под неё подныривает.
   На страницах с баннером это незаметно — ему и положено лежать под
   шапкой. Здесь сверху заголовок, и его надо опустить на высоту полосы. */
body:has(#content > .presspage:first-child) .presspage__inner {
    padding-top: calc(var(--header-h, 4.5rem) + var(--pp-pad-y));
}