/* Ezorxpdf - Blog index (/blog)
   Centred header, then a card grid. Card colour follows the post category.
   Own stylesheet on purpose: it does not depend on which Tailwind classes were compiled. */

:root {
    --bl-ink: #33333B;
    --bl-text: #4b5563;
    --bl-muted: #8a919d;
    --bl-line: #e8eaee;
}

.bl-page { background: #fff; padding: 56px 20px 112px; }
.bl-box { max-width: 1040px; margin: 0 auto; }

/* ---------- Header ---------- */
.bl-head { text-align: center; padding: 0 0 48px; }
.bl-eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}
.bl-title {
    margin: 0 0 14px;
    font-size: clamp(32px, 5.2vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--bl-ink);
}
.bl-lead { max-width: 560px; margin: 0 auto; font-size: 17px; line-height: 1.65; color: var(--bl-text); text-wrap: balance; }

/* ---------- Grid (last row is centred) ---------- */
.bl-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.bl-grid > li { flex: 0 1 calc((100% - 56px) / 3); display: flex; margin: 0; padding: 0; }

.bl-card {
    --c: #2563eb; --c2: #1d4ed8;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid var(--bl-line);
    border-radius: 16px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.bl-card:hover { transform: translateY(-3px); border-color: #d9dde3; box-shadow: 0 14px 32px rgba(20, 23, 28, .10); }
.bl-card:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

.bl-card[data-cat="tips"]         { --c: #2563eb; --c2: #1d4ed8; }
.bl-card[data-cat="guide"]        { --c: #7c3aed; --c2: #6d28d9; }
.bl-card[data-cat="tutorial"]     { --c: #059669; --c2: #047857; }
.bl-card[data-cat="security"]     { --c: #dc2626; --c2: #b91c1c; }
.bl-card[data-cat="productivity"] { --c: #ea580c; --c2: #c2410c; }
.bl-card[data-cat="conversion"]   { --c: #4f46e5; --c2: #4338ca; }
.bl-card[data-cat="ai"]           { --c: #0284c7; --c2: #0369a1; }

.bl-thumb { height: 150px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c), var(--c2)); color: #fff; }
.bl-thumb svg { width: 56px; height: 56px; opacity: .85; }

.bl-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.bl-tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.bl-h { margin: 8px 0 10px; font-size: 19px; line-height: 1.35; font-weight: 650; color: var(--bl-ink); transition: color .2s ease; }
.bl-card:hover .bl-h { color: var(--c); }
.bl-desc { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--bl-text); }
.bl-meta { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bl-muted); }
.bl-meta svg { width: 16px; height: 16px; flex: none; }

/* ---------- Call to action ---------- */
.bl-cta { margin-top: 64px; text-align: center; }
.bl-cta p { margin: 0 0 16px; font-size: 16px; color: var(--bl-text); }
.bl-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px;
    border-radius: 12px;
    background: #2563eb; color: #fff;
    font-size: 15.5px; font-weight: 600; text-decoration: none;
    transition: background .2s ease;
}
.bl-btn:hover { background: #1d4ed8; }
.bl-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.bl-btn svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
    .bl-grid > li { flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 600px) {
    .bl-page { padding: 36px 18px 80px; }
    .bl-head { padding-bottom: 32px; }
    .bl-grid { gap: 20px; }
    .bl-grid > li { flex-basis: 100%; }
    .bl-thumb { height: 120px; }
    .bl-cta { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .bl-card, .bl-h, .bl-btn { transition: none; }
    .bl-card:hover { transform: none; }
}