/* =========================================================================
   css/ep-components.css — СПІЛЬНІ КОМПОНЕНТИ e-Print
   Підключається на КОЖНІЙ сторінці через includes/head-assets.php, тож ці
   стилі не треба дублювати в кожному файлі — просто використовуйте класи:
     • .ep-shead        — заголовок секції (надзаголовок-пілюля + h2 + підзаголовок)
     • .ep-gallery      — фотогалерея робіт (картки з бейджами й підписами)
     • .ep-cta          — кнопка-заклик у кінці блоків (кольори: blue/red/gold/green)
     • .ep-table        — акуратна таблиця (ціни тощо)
     • .ep-table--price — прайс: двоярусна шапка, вирівняні числа, скрол на мобільному
   Палітра: --navy #1E3A5F, --cyan #3AAFD9, --red #DA1A32, --gold #FFC857,
            --green #1E9E57. Заголовки — єдиний, «охайний» стиль на всьому сайті.
   ========================================================================= */

/* ── Уніфікований заголовок секції ─────────────────────────────────────── */
.ep-shead { max-width: 780px; margin: 0 auto 40px; text-align: center; }
.ep-shead__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #2b8fb3; margin: 0 0 16px; padding: 7px 16px;
    background: rgba(58, 175, 217, .1);
    border: 1px solid rgba(58, 175, 217, .2);
    border-radius: 999px;
}
.ep-shead__eyebrow i { font-size: .95rem; line-height: 1; }
/* Вигляд заголовка — css/09-typography.css; тут лише відступ. */
.ep-shead h2 { margin: 0 0 14px; }
/* Акуратна риска-акцент під заголовком (бренд-градієнт) */
.ep-shead h2::after {
    content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
    margin: 14px auto 0; background: linear-gradient(90deg, #1E9E57, #3AAFD9);
}
.ep-shead__sub { color: #5b6b7c; line-height: 1.72; font-size: 1.02rem; margin: 12px 0 0; }
/* Ліво-вирівняний варіант (для статей/односторонніх блоків) */
.ep-shead--left { text-align: left; margin-left: 0; }
.ep-shead--left h2::after { margin-left: 0; margin-right: auto; }

/* ── Фотогалерея наших робіт ───────────────────────────────────────────── */
.ep-gallery { max-width: 1140px; margin: 0 auto; padding: 12px 20px 62px; }
.ep-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 24px; }
.ep-gallery__card { position: relative; margin: 0; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2, 0, 0, 1); }
.ep-gallery__card:hover { transform: translateY(-4px); }
.ep-gallery__card img {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: 16px; background: #eef2f6;
    box-shadow: 0 1px 2px rgba(16, 40, 70, .06), inset 0 0 0 1px rgba(16, 40, 70, .06);
    transition: box-shadow .35s ease;
}
.ep-gallery__card:hover img { box-shadow: 0 16px 34px rgba(16, 40, 70, .16); }
.ep-gallery__badge {
    position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; background: rgba(23, 50, 79, .82); color: #fff;
    font-size: .76rem; font-weight: 600; letter-spacing: .01em;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ep-gallery__badge i { font-size: .82rem; line-height: 1; }
.ep-gallery__card figcaption { margin: 15px 2px 0; color: #5b6b7c; line-height: 1.5; font-size: 0.9rem; }
.ep-gallery__outro { color: #5b6b7c; line-height: 1.75; margin: 44px auto 0; max-width: 760px; text-align: center; }

/* ── CTA-кнопка в кінці блоків ─────────────────────────────────────────── */
.ep-cta { text-align: center; margin: 40px 0 4px; }
.ep-cta__btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: 999px;
    font-weight: 700; font-size: 1.03rem; text-decoration: none; border: none; cursor: pointer;
    transition: transform .25s cubic-bezier(.2, 0, 0, 1), box-shadow .25s ease, background .25s ease;
}
.ep-cta__btn i { font-size: 1.15rem; line-height: 1; }
.ep-cta__btn:active { transform: translateY(0) !important; }
.ep-cta__hint { display: block; margin-top: 11px; font-size: .82rem; color: #8493a5; }
.ep-cta__btn--blue { background: #1E3A5F; color: #fff; box-shadow: 0 8px 22px rgba(30, 58, 95, .30); }
.ep-cta__btn--blue:hover { background: #172d4a; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30, 58, 95, .38); }
.ep-cta__btn--red { background: #DA1A32; color: #fff; box-shadow: 0 8px 22px rgba(218, 26, 50, .30); }
.ep-cta__btn--red:hover { background: #c0152b; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(218, 26, 50, .38); }
.ep-cta__btn--gold { background: #FFC857; color: #1E3A5F; box-shadow: 0 8px 22px rgba(230, 170, 40, .38); }
.ep-cta__btn--gold:hover { background: #DA1A32; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(218, 26, 50, .40); }
.ep-cta__btn--green { background: #1E9E57; color: #fff; box-shadow: 0 8px 22px rgba(30, 158, 87, .30); }
.ep-cta__btn--green:hover { background: #17803f; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30, 158, 87, .40); }

/* ── Акуратна таблиця (ціни тощо) ──────────────────────────────────────── */
.ep-table {
    width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse;
    background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(30, 58, 95, .08);
}
.ep-table th { background: #1E3A5F; color: #fff; font-weight: 700; padding: 14px 16px; text-align: left; font-size: .92rem; }
.ep-table td { padding: 13px 16px; border-top: 1px solid #eef2f7; color: #2c3e50; font-size: .96rem; }
.ep-table tbody tr:nth-child(even) { background: #f7fafd; }

/* ── Прайс-таблиця ──────────────────────────────────────────────────────────
   Модифікатор .ep-table для таблиць «тираж × параметр»: двоярусна шапка,
   числа стовпчик у стовпчик, назва рядка ліворуч. Обгортати в .ep-tablewrap —
   на вузьких екранах таблиця гортається вбік замість того, щоб ламати верстку.
   Розмітка:
     <div class="ep-tablewrap">
       <table class="ep-table ep-table--price"> … <td class="ep-table__unit">…
   ------------------------------------------------------------------------- */
.ep-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }
/* Подвійний клас (.ep-table.ep-table--price) — навмисно: так модифікатор
   специфічніший за базові .ep-table th/td і його не перебʼє жоден пізніший модуль. */
.ep-table.ep-table--price { max-width: none; min-width: 640px; font-variant-numeric: tabular-nums; }
.ep-table.ep-table--price th,
.ep-table.ep-table--price td { text-align: right; white-space: nowrap; padding: 9px 12px; }
.ep-table.ep-table--price thead th { background: #1E3A5F; color: #fff; text-align: center; font-size: .82rem; padding: 9px 12px; }
.ep-table.ep-table--price thead tr:first-child th + th { border-left: 1px solid rgba(255,255,255,.22); }
.ep-table.ep-table--price tbody th { text-align: left; font-weight: 700; color: #1E3A5F; background: #f7fafc; }
.ep-table.ep-table--price tbody tr:nth-child(even) td { background: #fbfcfe; }
/* Друга цифра в парі «разом / за 1 шт.» — приглушена, щоб головне число читалось першим */
.ep-table__unit { color: #6b7c91; font-size: .88rem; }