/* ============================================================
   bind-lamination-eyelets-app/styles.css
   Сторінка «Післядрук» — /business-printing/bind-lamination-eyelets.php
   ============================================================

   Підключати ПІСЛЯ ui.css і blocks.css: усе тут спирається на їхні
   токени й лише доповнює спільні компоненти.

   Тут навмисно мало. Секції, проза, галерея, таблиця цін, FAQ і
   суміжні послуги вже є в blocks.css; поля, списки й плашки — в
   ui.css. Власного CSS потребує рівно одне: панель калькулятора.

   ------------------------------------------------------------
   ЧОМУ НЕ configurator.css І НЕ .dsvc-calc
   ------------------------------------------------------------
   assets/configurator.css — оболонка КОНФІГУРАТОРА: картки макетів,
   тираж, картки терміну, підсумок із кнопками «Замовити» й «У
   кошик». Тут замовити не можна (рішення власника), тож половина
   того файлу описувала б елементи, яких на сторінці немає.

   .dsvc-calc з design-services.css — за будовою те саме, але той
   файл на 14 КБ і майже весь про іншу сторінку: hero-ілюстрації,
   таблиця цін на макети, форма брифу. Тягнути його сюди заради
   90 рядків означало б зчепити дві сторінки, які не мають нічого
   спільного, — і будь-яка правка там ламала б цю.

   Тому свій невеликий блок .pp-calc (pp — postpress). Якщо таких
   сторінок-калькуляторів без замовлення стане три, його варто
   підняти в blocks.css спільним компонентом; на двох це ще рано.
   ============================================================ */


/* ============================================================
   П'ЯТЬ ВХОДІВ У HERO — В ОДИН РЯДОК
   ============================================================
   У blocks.css уже є сходинка стиснення для ТРЬОХ кнопок
   (.hero__actions--triple). Тут їх п'ять — по одній на кожну
   послугу сторінки, — і повнорозмірні вони просять 775 px там, де
   колонка тексту дає від 465 px. Тому власна сходинка, побудована
   за тим самим принципом: спершу падінги й gap, потім іконка,
   і лише в найтіснішій смузі — кегль.

   Чому п'ять, а не дві. Сторінка не продає один виріб: людина
   приходить рівно по одній із п'яти операцій і має побачити свою
   з першого екрана. Звести їх до «Порахувати» означало б сховати
   чотири послуги за одним словом.

   Межі взяті з замірів, не на око:
     ≥ 1251 px — колонка 685 px, вміщається з іконкою;
     981–1250  — колонка 465–528 px, найтісніше місце сторінки;
     621–980   — герой одноколонковий, місця вдосталь;
     ≤ 620     — кнопки стають на всю ширину (правило blocks.css),
                 і п'ять рядків у героєві — це майже екран тексту.
                 Тому тут рядок лишається рядком, але прокручується
                 вбік: 5 × 44 px тап-зони в 343 px не вміщаються
                 ніяк, а ховати чотири послуги під «ще» гірше. */

@media (min-width: 621px) {
    .hero__actions--five { gap: var(--sp-2); }
    .hero__actions--five .hero__btn {
        height: 48px;
        padding: 0 16px;
        gap: 8px;
        font-size: var(--fs-base);
    }
}

/* Іконка коштує ~26 px разом із власним gap — знімаємо її першою
   скрізь, окрім широких екранів. Підпис «Ламінування» самодостатній,
   а колір уже відрізняє головну кнопку від решти.

   Межу поставлено саме на 1250, а не на 981, після заміру: при
   621 px (низ смуги з одноколонковим героєм) з іконкою лишалося
   19 px запасу на весь рядок. Цього мало — досить іншого кегля
   системного шрифту, поки не завантажився свій, і рядок рветься
   навпіл. Без іконки запас там 45 px. */
@media (min-width: 621px) and (max-width: 1250px) {
    .hero__actions--five .hero__btn i { display: none; }
}

/* Двоколонковий герой на вузьких ноутбуках: колонка тексту тут
   найвужча за всю сторінку — 468 px при 981 px вікна. */
@media (min-width: 981px) and (max-width: 1250px) {
    .hero__actions--five { gap: 6px; }
    .hero__actions--five .hero__btn {
        padding: 0 11px;
        font-size: var(--fs-sm);
    }
}

/* Телефон. Горизонтальна стрічка замість п'яти смуг на всю ширину.
   -16px/+16px по боках — щоб крайні кнопки не «прилипали» до краю
   екрана, а зріз останньої підказував, що рядок тягнеться далі. */
@media (max-width: 620px) {
    .hero__actions--five {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -16px;
        padding-inline: 16px;
        gap: 8px;
        /* Смуга прокрутки під кнопками лише заважає: рядок і так
           явно обрізаний по краю. */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .hero__actions--five::-webkit-scrollbar { display: none; }

    .hero__actions--five .hero__btn {
        width: auto;              /* скасовує width:100% з blocks.css */
        flex: 0 0 auto;
        height: 46px;
        padding: 0 16px;
        font-size: var(--fs-sm);
        scroll-snap-align: start;
    }
}


/* ============================================================
   КАЛЬКУЛЯТОР
   ============================================================
   П'ять однакових за будовою панелей: ламінування, порізка,
   люверси, бігування, заокруглення кутів.

   Підсумок (.pp-calc__total) на широкому екрані стоїть збоку й
   липне до верху: поки людина докручує до останнього поля, ціна
   не повинна зникати з очей — інакше незрозуміло, що саме її
   змінило. */

.pp-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

/* ── ДОЗАМОВЛЕННЯ ─────────────────────────────────────────────
   Чотири операції в одній секції під спільним H2. Кожна — свій
   .pp-addon із H3; риска між ними показує, що це окремі роботи,
   а не продовження попередньої.

   Перший блок без риски й без відступу: над ним уже стоїть шапка
   секції зі своїм margin-bottom. */
.pp-addon { scroll-margin-top: calc(var(--hdr-h, 130px) + 16px); }

.pp-addon + .pp-addon {
    margin-top: clamp(44px, 5vw, 68px);
    padding-top: clamp(44px, 5vw, 68px);
    border-top: 1px solid var(--g-200);
}

/* Шапка підблоку тісніша за шапку секції: H3 стоїть просто над
   своїм калькулятором, і 44 px з .sec__head розривали б пару. */
.pp-addon__head { margin-bottom: clamp(20px, 2.5vw, 28px); }

.pp-addon__head .sec__title { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }


/* Відступ від попередження над калькулятором.
   .ui-note зі спільного шару має margin: 0 — розраховано на те, що
   відстань задасть контейнер. Тут контейнера немає: попередження
   лежить просто в секції перед .pp-calc, і між ними виходило РІВНО
   0 px. Попередження торкалося і першого ряду полів, і панелі ціни
   під своїм правим краєм, тобто читалося як їхня шапка, а не як
   окремий блок.

   Величина та сама, що й у .pp-calc__main — щоб вертикальний ритм
   секції лишався один. Селектор за сусідством, а не клас у розмітці:
   правило має спрацьовувати саме тоді, коли попередження справді
   стоїть перед калькулятором. */
.ui-note + .pp-calc { margin-top: clamp(28px, 3vw, 40px); }

/* ── СІТКА ПОЛІВ ──────────────────────────────────────────────
   Колонок стільки, скільки полів у цьому калькуляторі, — і це не
   примха. Було `repeat(auto-fit, minmax(215px, 1fr))`: при ширині
   884 px туди влазило рівно ТРИ колонки, тож калькулятор
   ламінування з його чотирма полями лягав 3 + 1, і «Запайка по
   краю» стояла сама в обрізаному другому рядку.

   auto-fit тут і не міг допомогти: він підбирає колонки під
   ширину, не знаючи, скільки їх треба, щоб ряди ділилися націло.
   Кількість полів задає розмітка — нею й керуємо.

   Двом полям повна ширина не потрібна: розтягнуті на 430 px поле
   для числа виглядає порожнім. Тому у --2 є стеля, а підказка під
   ними заразом отримує читабельну довжину рядка. */
.pp-calc__fields {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pp-calc__fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
.pp-calc__fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-calc__fields--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Нижче цієї межі чотири колонки дають поле вужче за 180 px —
   підпис «Кількість аркушів» уже ламається на три рядки. */
@media (max-width: 1150px) {
    .pp-calc__fields--3,
    .pp-calc__fields--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .pp-calc__fields,
    .pp-calc__fields--2,
    .pp-calc__fields--3,
    .pp-calc__fields--4 { grid-template-columns: minmax(0, 1fr); max-width: none; }
}

/* Поле на всю ширину рядка — для тих, чий підпис не вміщається
   у вузьку колонку. */
.pp-calc__field--wide { grid-column: 1 / -1; }

.pp-calc input[type="number"] { max-width: 100%; }

/* ── НИЗ ЛІВОЇ КОЛОНКИ ────────────────────────────────────────
   Знімок послуги + пояснення до неї.

   Спершу знімок стояв у правій колонці під ціною — і права виходила
   на 324–427 px вища за ліву, тобто під полями лишалася пуста пляма
   на пів екрана в кожній із п'яти секцій. Причина арифметична:
   праворуч було два блоки (ціна ~230 px і фото ~260 px), ліворуч —
   один ряд полів на 110–165 px.

   Тепер фото врівноважує ліву колонку, а праворуч лишається сама
   ціна. Заразом знімок став поруч із текстом, який його й пояснює. */
.pp-calc__main {
    display: grid;
    gap: clamp(28px, 3vw, 40px);
    align-content: start;
}

/* Риска згори — не окраса, а роздільник.
   Без неї підказка стояла за 28 px від форми й тим самим кеглем, що
   й мікропідписи під полями («100 мк гнеться, 250 мк тримає форму»).
   Два сірі тексти одного розміру за 45 px один від одного зливаються
   в суцільну пляму, і підказка читається як хвіст останнього поля. */
.pp-calc__foot {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
    padding-top: clamp(20px, 2vw, 28px);
    border-top: 1px solid var(--g-200);
}

@media (max-width: 700px) {
    .pp-calc__foot { grid-template-columns: minmax(0, 1fr); }
}

/* Кегль на щабель більший за .ui-field__hint — щоб рівні не плутались:
   під полем стоїть підпис до ПОЛЯ, тут — пояснення до ОПЕРАЦІЇ.

   Стеля ширини потрібна з іншої причини: без неї рядок тягнувся на
   616 px і впирався в панель ціни за 36 px від неї. Тепер між текстом
   і ціною лишається повітря, а сам рядок має читабельну довжину. */
.pp-calc__hint {
    max-width: 56ch;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--g-700);
}

/* ── ПРАВА КОЛОНКА ────────────────────────────────────────────
   Підсумок + знімок послуги, саме в такому порядку. Спершу було
   навпаки, і ціна опинялася нижче за всі поля — щоб побачити
   відповідь, доводилося вести очима вниз повз фотографію. Ціна —
   це результат дії, вона має стояти на рівні перших параметрів.
   Знімок пояснює, що це за операція, і чекати може.

   Одним стовпчиком, а не блоком .split навколо всього калькулятора,
   — і це виправлення, а не смак.

   Спершу секції 2–5 були зібрані так: .split (фото | текст), а
   всередині текстової колонки ще один .pp-calc (поля | підсумок).
   Два вкладені гриди з'їдали ширину двічі, і на екрані 1360 px поля
   лишалося 171 px — менше за minmax(215px) самої сітки полів, тобто
   жоден варіант розкладки вже не вміщався. У дзеркальних секціях
   (.split--flip) було ще гірше: там текст потрапляє у ВУЖЧУ колонку
   0.85fr, бо flip міняє лише order, а не розмір.

   Тепер фото стоїть у тій самій правій колонці, що й підсумок, а
   поля отримують усю решту ширини. Побічна вигода: усі п'ять
   калькуляторів однакові, і сторінка не йде «драбиною». */
.pp-calc__aside {
    position: sticky;
    top: 96px;                       /* нижче фіксованої шапки */
    display: grid;
    gap: var(--sp-4);
    align-content: start;
}

/* Відступ знімку задає gap сітки, власний йому не потрібен. */
.pp-calc__foot .pp-shot { margin: 0; }

.pp-calc__total {
    padding: var(--sp-5) var(--sp-4);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
    box-shadow: var(--sh-md);
    text-align: center;
}

.pp-calc__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--g-600);
}

.pp-calc__price {
    display: block;
    margin: var(--sp-2) 0 var(--sp-1);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--c-brand);
    /* Табличні цифри: без них число «сіпається» вбік при кожній
       зміні параметра, бо 1 вужча за 8. */
    font-variant-numeric: tabular-nums;
}

.pp-calc__unit {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
    color: var(--g-700);
}

/* Ціна за штуку під сумою. Головне число сторінки для тиражів:
   саме воно показує, що з кількістю штука дешевшає. Порожній
   <span> схлопується, тож на калькуляторах без тиражу (порізка,
   люверси) рядок просто не займає місця. */
.pp-calc__per {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--g-700);
    font-variant-numeric: tabular-nums;
}

.pp-calc__per:empty { margin-top: 0; }

.pp-calc__note {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--g-200);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-600);
}

/* Нуль — це не ціна, а «ще нічого не введено». Поки в підсумку
   нуль, він сірий: червоне «0 грн» читалося б як обіцянка
   безкоштовної роботи. */
.pp-calc__total.is-empty .pp-calc__price { color: var(--g-400); }

@media (max-width: 900px) {
    .pp-calc { grid-template-columns: minmax(0, 1fr); }
    .pp-calc__aside {
        position: static;
        order: 2;
    }
}


/* ============================================================
   ЗНІМОК ПОСЛУГИ
   ============================================================
   Живе у правій колонці калькулятора (.pp-calc__aside). Це
   ілюстрація «що це за операція», а не половина екрана: люверс і
   бігування важко уявити з самої назви, а фото знімає питання за
   секунду. */

.pp-shot {
    margin: 0 0 var(--sp-5);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

.pp-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.pp-shot figcaption {
    padding: var(--sp-3) var(--sp-4);
    background: var(--g-50);
    font-size: var(--fs-sm);
    color: var(--g-700);
}


/* ============================================================
   ДРІБНИЦІ
   ============================================================ */

/* Підзаголовок усередині секції — над таблицею цін, яка йде після
   калькулятора. .sec__head сам по собі має лише нижній відступ, а
   тут потрібен ще й верхній: без нього таблиця злипається з
   підсумком калькулятора. */
.pp-subhead { margin-top: clamp(40px, 5vw, 64px); }

/* Лише для скрінрідера.
   Спільного хелпера в ui.css/blocks.css немає — єдина така заготовка
   на сайті (.sc-sr) лежить у sticker-printing-app/styles.css, тобто
   в CSS чужої сторінки, і тягнути його сюди означало б підключати
   весь той файл заради семи рядків.

   Потрібен для <caption> таблиці цін: видимий заголовок над нею вже
   є, а caption пояснює скрінрідеру, за яких саме умов ці ціни, — і
   дублювати той самий текст на екрані ні до чого. */
.pp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}