/* ============================================================
   maket-requirements.css — сторінка «Вимоги до макетів»
   ============================================================

   Підключати після ui.css і blocks.css:
       /assets/ui.css        — токени
       /assets/blocks.css    — .sec, .prose, .hero, .faq-*, .order-terms
       /assets/maket-requirements.css

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

   ------------------------------------------------------------------
   ЧОМУ ЧИСЛА ТУТ ВЕЛИКІ
   ------------------------------------------------------------------
   Цю сторінку не читають — у ній шукають одне конкретне число:
   «скільки мм вильоту», «який dpi», «від якого кегля». Тому головні
   значення винесені в окремий блок великим кеглем, а не сховані в
   середині абзацу. Решта тексту пояснює, чому це число саме таке, —
   для тих, хто після відповіді захотів причину.
   ============================================================ */


/* ============================================================
   1. HERO БЕЗ КАРТИНКИ
   ============================================================
   .hero з blocks.css розрахований на дві колонки: текст і знімок.
   Ілюстрації тут немає навмисно — фотографія наклейки нічого не
   додає до вимог, — тож колонка одна. */

.hero--plain .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--plain .hero__lead  { max-width: 68ch; }

/* Хлібні крихти в heroʼї. Стоять на місці колишнього надзаголовка, тож
   і кегль той самий — але не золоті: золотий у цьому шаблоні позначає
   акцент, а це службовий рядок. */
.hero__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .55);
}
.hero__crumbs a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    transition: color var(--transition), border-color var(--transition);
}
.hero__crumbs a:hover {
    color: var(--g-0);
    border-bottom-color: var(--g-0);
}


/* ============================================================
   2. ШПАРГАЛКА — ГОЛОВНІ ЧИСЛА
   ============================================================ */

/* Рівно три в ряд, а не auto-fit. Карток шість, і при auto-fit широкий
   екран ставив пʼять у перший ряд, а шосту лишав саму в другому —
   осиротілий кубик читається як «щось не долізло». Три і два ділять
   шістку без залишку, тож ряди завжди повні. */
.mreq-specs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
    margin: 0;
    padding: 0;
}

@media (max-width: 860px) {
    .mreq-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mreq-spec {
    padding: clamp(16px, 2vw, 22px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.mreq-spec:hover {
    border-color: var(--c-brand-line);
    box-shadow: var(--sh-md);
}

.mreq-spec__value {
    display: block;
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--c-navy);
}

.mreq-spec__name {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--g-850);
}

.mreq-spec__note {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--g-600);
}


/* ============================================================
   3. СХЕМА ВИЛЬОТУ Й БЕЗПЕЧНОГО ПОЛЯ
   ============================================================
   Три межі на одному малюнку пояснюють те, на що в тексті йде абзац:
   де закінчується фон, де їде ніж і докуди можна ставити текст. */

.mreq-scheme {
    padding: clamp(16px, 2vw, 24px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
}

.mreq-scheme svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Кольори схеми — тут, а не в атрибутах SVG: var() у presentation-
   атрибуті (fill="var(--c-brand)") працює не в кожному браузері, і там,
   де не працює, значення вважається невалідним — заливка падає в чорну
   типову. Як CSS-властивість токен розуміють усі. */
.mreq-scheme__bleed {
    fill: var(--c-brand-soft);
    stroke: var(--c-brand-line);
    stroke-width: 2;
    stroke-dasharray: 7 5;
}
.mreq-scheme__trim {
    fill: var(--g-0);
    stroke: var(--c-brand);
    stroke-width: 2.5;
}
.mreq-scheme__safe {
    fill: none;
    stroke: var(--c-accent);
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

/* Умовний вміст: «заголовок», два рядки тексту й знак */
.mreq-scheme__ink  { fill: var(--c-navy); }
.mreq-scheme__line { fill: var(--g-300); }
.mreq-scheme__mark { fill: none; stroke: var(--g-400); stroke-width: 2; }

.mreq-scheme__label {
    font-family: var(--font);
    font-size: 12px;
    font-weight: var(--fw-semi);
    fill: var(--c-brand);
}
.mreq-scheme__label--safe { fill: var(--c-accent); }

/* Риска від підпису до його лінії. Колір той самий, що в підпису:
   разом вони читаються як одна вказівка, а не як окремий штрих. */
.mreq-scheme__tick {
    stroke: var(--c-brand);
    stroke-width: 1.5;
    stroke-linecap: round;
}
.mreq-scheme__tick--safe { stroke: var(--c-accent); }

.mreq-legend {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--g-200);
    display: grid;
    gap: var(--sp-3);
}

.mreq-legend li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--g-800);
}

.mreq-legend strong { color: var(--c-navy); }

/* Зразок лінії з самої схеми: суцільна, пунктирна чи заливка —
   так підпис читається без «а це який із трьох прямокутників» */
.mreq-legend__key {
    flex-shrink: 0;
    width: 26px;
    height: 16px;
    margin-top: 2px;
    border-radius: var(--r-xs);
}
.mreq-legend__key--bleed { background: var(--c-brand-soft); border: 1px dashed var(--c-brand-line); }
.mreq-legend__key--trim  { border: 2px solid var(--c-brand); }
.mreq-legend__key--safe  { border: 2px dashed var(--c-accent); }


/* ============================================================
   4. ПАРИ «ТАК / НЕ ТАК»
   ============================================================
   Вимогу швидше зрозуміти на протиставленні, ніж на описі. Колонки
   рівні за вагою: «не так» — не страшилка, а другий приклад. */

.mreq-vs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.mreq-vs__col {
    padding: clamp(18px, 2.2vw, 24px);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
}
.mreq-vs__col--yes { background: var(--c-ok-bg);     border-color: var(--c-ok-line); }
.mreq-vs__col--no  { background: var(--c-danger-bg); border-color: var(--c-danger-line); }

.mreq-vs__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}
.mreq-vs__col--yes .mreq-vs__title i { color: var(--c-ok); }
.mreq-vs__col--no  .mreq-vs__title i { color: var(--c-danger); }
.mreq-vs__title i { display: block; line-height: 1; }

.mreq-vs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.mreq-vs li {
    position: relative;
    padding-left: 22px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--g-850);
}

.mreq-vs li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: var(--fw-bold);
}
.mreq-vs__col--yes li::before { content: "✓"; color: var(--c-ok); }
.mreq-vs__col--no  li::before { content: "✕"; color: var(--c-danger); }


/* ============================================================
   5. КАРТКИ РЕДАКТОРІВ
   ============================================================
   «Переведіть шрифти в криві» — порада, яку не виконують не через
   лінощі, а тому що не знають, де ця команда в їхній програмі. */

.mreq-editors {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
    margin: 0;
    padding: 0;
}

.mreq-editor {
    padding: var(--sp-4);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
}

.mreq-editor strong {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-base);
    color: var(--c-navy);
}

.mreq-editor span {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--g-700);
}

.mreq-kbd {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--g-300);
    border-bottom-width: 2px;
    border-radius: var(--r-xs);
    background: var(--g-50);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--g-900);
    white-space: nowrap;
}


/* ============================================================
   6. ЧЕКЛІСТ
   ============================================================ */

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

.mreq-check li {
    position: relative;
    padding-left: 34px;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--g-850);
}

/* Порожній квадратик, а не галочка: це список, який людина проходить
   зараз, а не звіт про вже зроблене. */
.mreq-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-brand-line);
    border-radius: var(--r-xs);
    background: var(--g-0);
}

.mreq-check strong { color: var(--c-navy); }


/* ============================================================
   7. ТАБЛИЦІ ПОРОГІВ
   ============================================================
   .ui-table центрує все — це правильно для цін, але не для рядків
   зі словами: перша колонка тут читається як список, і рвана ліва
   межа заважає його переглядати. */

.mreq-table th,
.mreq-table td { text-align: left; }
.mreq-table td:first-child { font-weight: var(--fw-semi); color: var(--c-navy); white-space: nowrap; }


/* ============================================================
   8. ПОСИЛАННЯ В ЗАГОЛОВКАХ КАРТОК І ГЕО-РЯДОК
   ============================================================ */

/* Заголовок картки «Окремі випадки» веде на саму послугу. Підкреслення
   тонке й сіре: це заголовок, який до того ж клікається, а не рядкове
   посилання — кричати про себе він не має. */
.advantage-card h3 a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--g-300);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
.advantage-card h3 a:hover {
    color: var(--c-brand);
    text-decoration-color: var(--c-brand);
}

/* Рядок «звідки ми» під картками послуг. Не плашка-попередження, а
   спокійна примітка: гео-питання «а ви де?» має бути закрите на самій
   сторінці, не лише в підвалі. */
.mreq-geo {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    max-width: 760px;
    margin: clamp(20px, 2.5vw, 28px) auto 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-700);
    text-align: left;
}
.mreq-geo i {
    flex-shrink: 0;
    position: relative;
    top: 2px;
    color: var(--c-brand);
}
.mreq-geo strong { color: var(--c-navy); }


/* ============================================================
   9. ВІДСТУП ВІД БЛОКУ ВИЩЕ
   ============================================================
   Плашка-примітка чи пара «так / не так» після таблиці або сітки.
   Клас, а не style="" у розмітці: інакше ті самі 20 пікселів
   довелося б правити в шести місцях сторінки. */

.mreq-after      { margin-top: var(--sp-4); }
.mreq-after--lg  { margin-top: clamp(20px, 2.5vw, 28px); }


/* ============================================================
   10. АДАПТИВ
   ============================================================ */

@media (max-width: 620px) {
    /* Дві лишаються й на телефоні: числа короткі, у 167px вони читаються,
       а один стовпчик розтягнув би шпаргалку на півтора екрана. */
    .mreq-check { grid-template-columns: minmax(0, 1fr); }
    /* Дві однакові колонки «так / не так» на телефоні стають одна під
       одною самі — але ширину нижче 280px їм задає minmax, тож на
       найвужчих екранах знімаємо й це обмеження. */
    .mreq-vs    { grid-template-columns: minmax(0, 1fr); }
}

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