/*
 * Оформление сайта «Экспресс Принт».
 *
 * Замысел: страница — это лист, вышедший из-под пресса. Он лежит белым на сером
 * фоне, по углам у него метки реза, а под шапкой идёт четырёхцветная шкала CMYK
 * — та самая контрольная полоска, что печатается по краю печатного листа.
 * Цвета шкалы — цвета полос на логотипе салона, поэтому сайт остаётся узнаваем.
 *
 * Фирменный коралловый цвет прежнего сайта сохранён и работает акцентом:
 * подчёркиванием ссылок, наведением и заливкой главного действия. Белым по
 * коралловому не пишем — такое сочетание слишком бледное, чтобы его прочитали;
 * по коралловому пишем тёмным.
 */

/* ── Шрифты ─────────────────────────────────────────────────────────────────
   Свои, лежат рядом с сайтом: шрифт со стороннего сервера — это чужой сервер
   между посетителем и текстом. Кириллица и латиница врозь, чтобы браузер брал
   только нужное. */

@font-face {
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/pt-sans-narrow-700-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/pt-sans-narrow-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/pt-serif-400-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/pt-serif-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/pt-serif-700-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/pt-serif-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ── Цвета, шрифты, отступы ────────────────────────────────────────────────── */

:root {
    --ink: #22282c;
    --ink-soft: #5c666c;
    --slate: #43616d;
    --slate-dark: #33505c;
    --coral: #f97352;
    --coral-ink: #b8431f;
    --paper: #ffffff;
    --ground: #eef1f2;
    --rule: #d5dcde;
    --mark: #b4bfc3;

    --cyan: #00aeef;
    --magenta: #ec008c;
    --yellow: #ffd400;
    --key: #22282c;

    --display: 'PT Sans Narrow', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    --body: 'PT Serif', Georgia, 'Times New Roman', serif;

    --gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
    --sheet-pad: clamp(1.15rem, 0.4rem + 3.2vw, 3rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--body);
    /* Слово вроде «широкоформатная» шире узкой колонки телефона; без переноса
       оно вытолкнуло бы страницу за край экрана. */
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--slate-dark);
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--coral-ink);
}

:focus-visible {
    outline: 3px solid var(--coral-ink);
    outline-offset: 2px;
}

/* ── Общая ширина ──────────────────────────────────────────────────────────── */

.shell {
    width: min(72rem, 100% - 2rem);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link:focus {
    position: static;
    display: block;
    width: auto;
    height: auto;
    padding: 0.6rem 1rem;
    clip-path: none;
    background: var(--key);
    color: var(--paper);
}

/* ── Шапка и контрольная шкала ─────────────────────────────────────────────── */

.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

/* Контрольная шкала печатного листа: четыре краски встык, без размывов —
   на настоящем оттиске они тоже стоят ровными плашками. */
.site-header::after {
    content: '';
    display: block;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--cyan) 0 25%,
        var(--magenta) 25% 50%,
        var(--yellow) 50% 75%,
        var(--key) 75% 100%
    );
}

.site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 0;
}

.site-logo {
    flex: none;
    display: block;
    text-decoration: none;
}

.site-logo img {
    display: block;
    width: clamp(3.25rem, 2.4rem + 3.6vw, 4.75rem);
    height: auto;
}

.site-menu {
    flex: 1 1 auto;
}

.site-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu a {
    display: block;
    padding: 0.3rem 0.6rem;
    border-radius: 2px;
    color: var(--slate);
    font: 700 clamp(0.875rem, 0.83rem + 0.2vw, 0.975rem)/1.3 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.site-menu a:hover {
    background: var(--ground);
    color: var(--coral-ink);
}

.site-menu .is-here {
    box-shadow: inset 0 -3px 0 var(--coral);
}

@media (min-width: 52em) {
    .site-menu ul {
        justify-content: flex-end;
    }
}

/* ── Лист ──────────────────────────────────────────────────────────────────
   Метки реза по четырём углам: восемь тонких штрихов, отступив от угла, — так
   их ставят на оттиске, чтобы было видно, где резать. */

.sheet {
    position: relative;
    margin-block: var(--gap);
    padding: var(--sheet-pad);
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
        linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark));
    background-repeat: no-repeat;
    background-size:
        1px 14px, 14px 1px,
        1px 14px, 14px 1px,
        1px 14px, 14px 1px,
        1px 14px, 14px 1px;
    background-position:
        12px 0, 0 12px,
        calc(100% - 12px) 0, 100% 12px,
        12px 100%, 0 calc(100% - 12px),
        calc(100% - 12px) 100%, 100% calc(100% - 12px);
    border: 1px solid var(--rule);
}

/* Лист остаётся листом, даже когда на нём одна строка: «Вакансии» — это
   строчка «свободных вакансий нет», и без запаса высоты она выглядела бы
   обрезком бумаги, а не страницей. */
main.sheet {
    min-height: 16rem;
}

main.sheet > :first-child {
    margin-top: 0;
}

main.sheet > :last-child {
    margin-bottom: 0;
}

/* ── Заголовки и текст ─────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
    margin: 1.9em 0 0.5em;
    color: var(--slate-dark);
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.005em;
}

h1 {
    font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
    margin-top: 0;
}

h2 {
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
}

h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
}

h4 {
    font-size: 1.1rem;
}

p,
ul,
ol {
    margin: 0 0 1.15em;
}

main ul,
main ol {
    padding-left: 1.25em;
}

main li {
    margin-bottom: 0.35em;
}

strong {
    color: var(--slate-dark);
}

/* ── Ряды и колонки содержимого ───────────────────────────────────────────── */

.row {
    display: grid;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.row:last-child {
    margin-bottom: 0;
}

/* Колонка вправе быть уже своего самого длинного слова. Без этого ряд
   раздвинулся бы под «копированию\сканированию\тиражированию» — слово,
   которое некуда перенести, — и вытолкнул бы страницу за край экрана. */
.column {
    min-width: 0;
}

.column > :first-child {
    margin-top: 0;
}

.column > :last-child {
    margin-bottom: 0;
}

.column img {
    display: block;
    width: 100%;
    margin-bottom: 0.85rem;
    border: 1px solid var(--rule);
}

.column img:last-child {
    margin-bottom: 0;
}

/* Колонка с одними снимками уходит под текст: посетитель приходит из поиска на
   страницу Услуги за рассказом, а не за тремя снимками до первого слова. */
.column-media {
    order: 2;
}

/* То же этажом выше. На двадцати с лишним страницах Услуг карусель или галерея
   стоит своим рядом над рассказом, и на телефоне страница начиналась бы с
   четырёх снимков. Порядок в самой разметке не меняется — двигает только
   оформление; снимки подписаны пустым alt, читалка их и так пропускает.
   Переставить ряд может только сам лист, поэтому он становится гибким — но
   лишь там, где такой ряд есть: на «Контактах» и «Вакансиях» содержимое лежит
   без рядов, и у гибкого листа отступы абзаца и заголовка перестали бы
   сливаться, разойдясь вдвое. Браузер постарше просто оставит снимки сверху. */
main.sheet:has(.row-media) {
    display: flex;
    flex-direction: column;
    /* Расстояние между рядами держит сам лист, а не поля рядов: поле привязано
       к порядку в разметке, и у переставленных рядов оно оказалось бы не там —
       рассказ упёрся бы в снимки, а внизу листа осталась бы лишняя полоса. */
    gap: var(--gap);
}

main.sheet:has(.row-media) > .row {
    margin-bottom: 0;
}

.row-media {
    order: 2;
}

@media (min-width: 56em) {
    .row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
    }

    .column {
        grid-column: span 12;
    }

    /* Конструктор прежнего сайта отдавал рассказу об Услуге четверть ряда —
       строку в сорок с небольшим знаков, читать её тяжело. Доли смещены в
       пользу текста: 8 + 4 становится 7 + 5, ряд по-прежнему сходится в 12. */
    .column-3 { grid-column: span 4; }
    .column-4 { grid-column: span 5; }
    .column-6 { grid-column: span 6; }
    .column-8 { grid-column: span 7; }
    .column-9 { grid-column: span 8; }
    .column-12 { grid-column: span 12; }

    /* На широком экране снимки остаются там, где их поставил автор страницы. */
    .column-media,
    .row-media {
        order: 0;
    }
}

/* ── Плитки Услуг ──────────────────────────────────────────────────────────
   Главная — это витрина: одиннадцать снимков того, что салон печатает.
   Ничего, кроме них, на ней нет, поэтому они и есть страница. */

.tiles {
    display: grid;
    /* На телефоне — две плитки в ряд: одиннадцать снимков в столбик заставили бы
       прокручивать витрину дольше, чем на неё смотрят. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
    gap: clamp(0.6rem, 0.3rem + 1.2vw, 1.1rem);
}

@media (min-width: 34em) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    }
}

/* Четыре в ряд, а не сколько поместится: одиннадцать плиток ложатся 4 + 4 + 3,
   и последний ряд не выглядит обрывком. Доля в 22% — это и есть «не больше
   четырёх»: пятая колонка в ряд уже не встаёт. Зато лишние места в ряду
   схлопываются, и три позиции «Магазина обрезков» занимают его целиком, а не
   три четверти с прорехой справа. */
@media (min-width: 62em) {
    .tiles {
        grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));
    }
}

.tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper);
    color: var(--slate-dark);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tile-title {
    margin-top: auto;
    padding: 0.65rem 0.7rem;
    /* Подпись должна умещаться в строку: «ШИРОКОФОРМАТНАЯ» — одно слово, и
       перенос разорвал бы его посередине. */
    font: 700 clamp(0.8rem, 0.71rem + 0.36vw, 1.05rem)/1.25 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tile:hover,
.tile:focus-visible {
    border-color: var(--coral);
    transform: translateY(-2px);
}

.tile:hover .tile-title,
.tile:focus-visible .tile-title {
    color: var(--coral-ink);
}

@media (prefers-reduced-motion: reduce) {
    .tile {
        transition: none;
    }

    .tile:hover,
    .tile:focus-visible {
        transform: none;
    }
}

/* ── Кнопка ────────────────────────────────────────────────────────────────── */

.button {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 2px;
    background: var(--coral);
    color: var(--ink);
    font: 700 1.0625rem/1.2 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.button:hover {
    background: var(--coral-ink);
    color: var(--paper);
}

/* ── Карусель ──────────────────────────────────────────────────────────────
   Лента оттисков, съезжающая вбок. Прокручивается она сама, без единого
   скрипта, и прокрутка живёт внутри ленты: страница вбок не едет. */

.slider {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Полоса прокрутки — часть карусели: без неё не видно, что вбок есть ещё. */
    scrollbar-color: var(--mark) transparent;
    overscroll-behavior-x: contain;
}

.slider img {
    flex: none;
    width: min(100%, 24rem);
    margin-bottom: 0;
    scroll-snap-align: start;
}

/* ── Галерея ──────────────────────────────────────────────────────────────
   Снимки одного размера, встык, — так их раскладывают на монтажном столе.
   Общая доля кадра важнее исходных пропорций: вразнобой это стопка бумаг. */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.gallery img {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ── Прайс прямо на странице ───────────────────────────────────────────────
   Окно во весь лист: Прайс — это страницы формата A4 стоймя, и разглядывать
   их в узкой щели невозможно. Выше окна стоит карусель — на телефонах
   встроенный просмотр PDF работает неровно. */

.embed {
    margin-bottom: var(--gap);
}

.embed-file {
    display: block;
    width: 100%;
    height: min(85vh, 52rem);
    border: 1px solid var(--rule);
    background: var(--ground);
}

.embed-file p {
    margin: 0;
    padding: 1rem;
}

/* ── Показатель ────────────────────────────────────────────────────────────
   Полоска краски: название, доля цифрой и сама плашка нужной длины. Длину
   задаёт сборщик записью --meter — взять её больше неоткуда, скриптов нет. */

.meter {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.3rem 0.75rem;
    margin-bottom: 1rem;
}

.meter-title {
    color: var(--slate-dark);
    font: 700 1.05rem/1.3 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.meter-value {
    color: var(--ink-soft);
    font: 700 0.95rem/1.3 var(--display);
}

.meter::after {
    content: '';
    grid-column: 1 / -1;
    height: 12px;
    border: 1px solid var(--rule);
    background:
        linear-gradient(var(--meter-ink, var(--coral)), var(--meter-ink, var(--coral)))
            0 0 / var(--meter, 0) 100% no-repeat,
        var(--ground);
}

/* Четыре показателя на «О нас» — это C, M, Y и K, в том же порядке, в каком
   они стоят в содержимом; плашки красятся своей краской. Пятый, если он
   когда-нибудь появится, останется фирменного цвета. */
.meter:nth-of-type(1) { --meter-ink: var(--cyan); }
.meter:nth-of-type(2) { --meter-ink: var(--magenta); }
.meter:nth-of-type(3) { --meter-ink: var(--yellow); }
.meter:nth-of-type(4) { --meter-ink: var(--key); }

/* ── Оборудование ──────────────────────────────────────────────────────────
   Восемнадцать аппаратов подряд — это список, а не восемнадцать листов.
   Каждая запись отбита сверху линией реза: фотография слева, рассказ справа. */

.equipment {
    display: grid;
    gap: 0.6rem 2rem;
    margin-bottom: var(--gap);
    padding-top: var(--gap);
    border-top: 1px solid var(--rule);
}

.equipment:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.equipment-name {
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
}

.equipment-photo {
    width: 100%;
    margin-bottom: 0;
    border: 1px solid var(--rule);
}

.equipment-description > :last-child {
    margin-bottom: 0;
}

@media (min-width: 46em) {
    .equipment {
        grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
        align-items: start;
    }

    .equipment-name {
        grid-column: 1 / -1;
    }
}

/* ── Как с нами связаться ──────────────────────────────────────────────────
   Тот же лист, что и содержимое, со шкалой CMYK по верхнему краю: связь — не
   приписка внизу страницы, а вторая половина разговора. */

.site-contacts {
    padding-top: calc(var(--sheet-pad) + 5px);
    margin-bottom: calc(var(--gap) * 1.5);
}

.site-contacts::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--cyan) 0 25%,
        var(--magenta) 25% 50%,
        var(--yellow) 50% 75%,
        var(--key) 75% 100%
    );
}

.site-contacts h2 {
    margin-top: 0;
}

.site-contacts > p {
    max-width: 44rem;
    color: var(--ink-soft);
}

.contacts {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Четыре способа связи — в две пары, а не в ряд по трое с одиноким четвёртым. */
@media (min-width: 46em) {
    .contacts {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--slate);
    border-radius: 2px;
}

.contact a {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.contact a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Почта помечена фирменным цветом: с неё начинается Заказ с сайта. */
.contact-email {
    border-left-color: var(--coral);
}

.contact-hint {
    color: var(--ink-soft);
    font-size: 0.9375rem;
    line-height: 1.5;
}