/* ============================================================
   design-services.css — сторінка «Послуги дизайнера поліграфії»
   /business-printing/printing_design_services.php
   ============================================================

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

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

     1) панель калькулятора з підсумком, що не тікає при прокрутці;
     2) розкладка брифу (ліва колонка — параметри, права — текст);
     3) кілька дрібниць-станів: підсвітка рядка ціни, список обраних
        файлів, повідомлення після відправки.

   Назви з префіксом .dsvc- — щоб нічого звідси не перетнулося з
   класами інших сторінок, які можуть жити на тому ж екрані
   (шапка, підвал, чат).
   ============================================================ */


/* ============================================================
   1. КАЛЬКУЛЯТОР
   ============================================================
   Дві однакові за будовою панелі: вартість макета й робота з
   вектором. Спільний каркас — .dsvc-calc.

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

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

.dsvc-calc__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: var(--sp-4);
}

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

/* Числові поля калькулятора: значення коротке, і розтягнуте на
   всю колонку воно виглядає порожнім. */
.dsvc-calc input[type="number"] { max-width: 100%; }

/* Прибираємо «крутилки» лише там, де крок 1 не має сенсу через
   ширину поля — самі стрілки лишаємо, ними зручно клацати. */
.dsvc-calc__hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-600);
}

.dsvc-calc__total {
    position: sticky;
    top: 96px;                       /* нижче фіксованої шапки */
    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;
}

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

.dsvc-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;
}

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

.dsvc-calc__term {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--g-700);
}

.dsvc-calc__note {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-600);
}

.dsvc-calc__total .ui-btn { margin-top: var(--sp-4); }

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

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


/* ============================================================
   2. КОРОТКІ ФАКТИ НАД ТАБЛИЦЕЮ
   ============================================================
   Список самодостатніх речень для ШІ-відповідачів і для людини,
   яка сторінку не читає, а сканує.

   Оформлення навмисно спокійне — картки з тінями зробили б із нього
   другий hero, а він має читатися як підпис до таблиці, що йде далі.

   Дві колонки на широкому екрані: шість повних речень в одну колонку
   на 1200px дають рядки завдовжки під 150 знаків, а це вже стіна.
   Мінімум саме 400px, а не 330: з 330 на екрані 1400px auto-fit
   складав ТРИ колонки по 373px, і в кожній речення розсипалося на
   пʼять коротких рядків. 3 × 400 + відступи вже не вміщаються
   в контейнер, тож більше двох колонок не буде ніколи. */

.dsvc-tldr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--sp-3) clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dsvc-tldr li {
    position: relative;
    padding-left: 26px;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--g-800);
}

.dsvc-tldr li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-brand-line);
}

.dsvc-tldr strong {
    color: var(--c-navy);
    font-weight: var(--fw-semi);
    /* Табличні цифри: числа в сусідніх рядках вирівнюються на око */
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   3. ТАБЛИЦЯ ЦІН — доповнення до .ptable з blocks.css
   ============================================================ */

/* Перша колонка — назва виробу. По центру, як решта, вона читається
   гірше: очі шукають початок рядка, а він щоразу в іншому місці. */
.dsvc-ptable td:first-child,
.dsvc-ptable th:first-child { text-align: left; }

.dsvc-ptable td:not(:first-child) { white-space: nowrap; }

/* Рядки, які замовляють найчастіше. Підсвічуємо тлом, а не червоним
   текстом (як було на старій сторінці): червоний текст у таблиці цін
   читається як попередження або націнка. */
.dsvc-ptable tr.is-popular td { background: var(--c-brand-soft); }

.dsvc-ptable__tag {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--c-brand);
    color: var(--g-0);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    vertical-align: middle;
}


/* ============================================================
   4. БРИФ
   ============================================================
   Ліворуч — параметри дрібними полями, праворуч — текст макета
   одним великим полем. Саме текст найдовше набирають і найчастіше
   правлять, тож він заслуговує на власну колонку, а не на останній
   рядок під усім іншим. */

.dsvc-brief {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 32px);
    align-items: start;
}

.dsvc-brief__params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
}

.dsvc-brief__params .dsvc-brief__field--wide { grid-column: 1 / -1; }

/* Поле тексту тягнеться на всю висоту колонки — так права половина
   не лишається наполовину порожньою. */
.dsvc-brief__text { display: flex; flex-direction: column; height: 100%; }
.dsvc-brief__text .ui-textarea {
    flex: 1;
    min-height: 260px;
    resize: vertical;
    line-height: var(--lh-base);
}

@media (max-width: 860px) {
    .dsvc-brief { grid-template-columns: minmax(0, 1fr); }
    .dsvc-brief__text .ui-textarea { min-height: 180px; }
}

/* --- Файли --- */
.dsvc-brief__drop {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.dsvc-brief__files {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.dsvc-brief__files li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-pill);
    background: var(--g-50);
    font-size: var(--fs-xs);
    color: var(--g-800);
}

.dsvc-brief__files i { color: var(--g-500); }

/* --- Контакти й кнопка --- */
.dsvc-brief__foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
    align-items: end;
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(20px, 3vw, 28px);
    border-top: 1px solid var(--g-200);
}

.dsvc-brief__submit { align-self: end; }

/* Пастка для ботів. Не display:none — частина автозаповнювачів
   такі поля свідомо пропускає; забираємо з потоку й від очей,
   лишаючи в DOM «видимим». */
.dsvc-brief__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Відповідь після відправки --- */
.dsvc-brief__status {
    grid-column: 1 / -1;
    margin: var(--sp-4) 0 0;
}

.dsvc-brief__status:empty { display: none; }

/* Поле з помилкою підсвічується рамкою, а не лише текстом унизу:
   у формі на 12 полів текст під кнопкою не підказує, куди дивитися. */
.dsvc-brief .is-invalid,
.dsvc-brief .is-invalid:focus {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}


/* ============================================================
   5. ЩО ВПЛИВАЄ НА ЦІНУ
   ============================================================
   Три плитки перед калькулятором. Не .advantages-grid з blocks.css:
   там картки з іконкою-квадратом і заголовком-послугою, а тут
   потрібен короткий причинно-наслідковий рядок. */

.dsvc-factors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(14px, 2vw, 20px);
}

.dsvc-factor {
    padding: var(--sp-4);
    border: 1px solid var(--g-200);
    border-left: 3px solid var(--c-brand-line);
    border-radius: var(--r-lg);
    background: var(--g-0);
}

.dsvc-factor h3 {
    margin: 0 0 6px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}

.dsvc-factor p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-700);
}


/* ============================================================
   6. ЯК ПРОХОДИТЬ РОБОТА — нумеровані кроки
   ============================================================ */

.dsvc-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    counter-reset: dsvc-step;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dsvc-step {
    position: relative;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
}

.dsvc-step::before {
    counter-increment: dsvc-step;
    content: counter(dsvc-step);
    position: absolute;
    top: -16px;
    left: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-round);
    background: var(--c-brand);
    color: var(--g-0);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.dsvc-step h3 {
    margin: 0 0 6px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}

.dsvc-step p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-700);
}


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

/* Відступ між сусідніми блоками всередині однієї секції —
   щоб не плодити порожніх div-обгорток заради повітря. */
.dsvc-after     { margin-top: clamp(20px, 3vw, 28px); }
.dsvc-after--lg { margin-top: clamp(28px, 4vw, 44px); }

@media (prefers-reduced-motion: reduce) {
    .dsvc-factor,
    .dsvc-step { transition: none; }
}