/* =========================================================================
   css/ep-components.css — СПІЛЬНІ КОМПОНЕНТИ e-Print
   Підключається на КОЖНІЙ сторінці через includes/head-assets.php, тож ці
   стилі не треба дублювати в кожному файлі — просто використовуйте класи:
     • .ep-shead        — заголовок секції (надзаголовок-пілюля + h2 + підзаголовок)
     • .ep-gallery      — фотогалерея робіт (картки з бейджами й підписами)
     • .ep-cta          — кнопка-заклик у кінці блоків (кольори: blue/red/gold/green)
     • .ep-table        — акуратна таблиця (ціни тощо)
   Палітра: --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; }
.ep-shead h2 {
    font-size: clamp(1.55rem, 3.4vw, 2.35rem);
    font-weight: 800; color: #17324f;
    letter-spacing: -.03em; line-height: 1.14; 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; }