/* ==========================================================================
   SKMS blog index — extends styles.css
   ========================================================================== */

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.blog-hero { padding-block: 68px 60px; }

.search-bar {
    position: relative;
    max-width: 460px;
    margin-top: 30px;
}
.search-bar i {
    position: absolute;
    left: 17px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    font-size: .95rem;
    pointer-events: none;
}
.search-bar input {
    width: 100%;
    padding: 14px 18px 14px 46px;
    font-family: var(--ui);
    font-size: 1rem;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--rule-dark);
    border-radius: 10px;
}
.search-bar input::placeholder { color: rgba(255, 255, 255, .5); }
.search-bar input:focus {
    outline: none;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
}
.search-bar input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }

/* ---------- Category filter ---------- */
.categories-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 26px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--rule);
}
.category-btn {
    padding: 9px 17px;
    font-family: var(--ui);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.category-btn:hover { border-color: var(--brand); color: var(--brand); }
.category-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ---------- Category badge used inline in meta rows ---------- */
.badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    font-size: .76rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}
.badge-inline.tax { background: var(--brand); }
.badge-inline.compliance { background: #0F5C7B; }
.badge-inline.business { background: #0F7B4F; }
.badge-inline.guides { background: #7B3F0F; }

/* ---------- Featured post ---------- */
.post-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--rule);
}
.post-feature-media {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--rule);
}
.post-feature-media img { width: 100%; height: auto; }
.post-feature-body h2 {
    font-size: clamp(1.7rem, 3.3vw, 2.3rem);
    line-height: 1.18;
    margin: 6px 0 14px;
}
.post-feature-body h2 a { color: var(--ink); text-decoration: none; }
.post-feature-body h2 a:hover { color: var(--brand); }
.post-feature-body p { color: var(--ink-3); margin-bottom: 20px; font-size: 1.05rem; }

.no-results {
    padding: 48px 0;
    text-align: center;
    color: var(--ink-3);
}

/* Hidden by the filter script */
.is-filtered { display: none !important; }

@media (max-width: 860px) {
    .post-feature { grid-template-columns: 1fr; gap: 24px; }
    .post-feature-media { order: -1; }
}