/* ═══════════════════════════════════════════════════════════
   BLOG ARCHIVE — blog.css
   Scoped to body.sf-blog-page — does not affect other pages.
   Loaded conditionally via wp_enqueue on is_home() / is_archive().
   blog-card styles are in article.css (used on single posts too).
═══════════════════════════════════════════════════════════ */

/* ── Page background + header offset ─────────────────────── */
.sf-blog-page,
.sf-blog-page .site-content,
.sf-blog-page .entry-content,
.sf-blog-page #page {
    background: linear-gradient(180deg, #0f2207 0%, #0a1a0a 30%, #060d02 70%, #000 100%);
}

.sf-blog-page .site-content,
.sf-blog-page .page-wrapper {
    padding-top: var(--header-h, 80px);
}

.sf-blog-page .elementor,
.sf-blog-page .elementor-section,
.sf-blog-page .elementor-container {
    background: transparent;
}

/* ── Blog main ──────────────────────────────────────────── */
.sf-blog-page .sf-blog-main {
    min-height: 100vh;
}

/* Ensure inner container is sized correctly when WP theme
   doesn't supply a .container on its own */
.sf-blog-page .container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left:  clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
}

/* ── Hero ─────────────────────────────────────────────────── */
.sf-blog-page .blog-hero {
    padding-top:    64px;
    padding-bottom: clamp(36px, 5vw, 60px);
    text-align:  center;
    background:  #0a1a0a !important;
    position:    relative;
    overflow:    hidden;
}

.sf-blog-page .blog-hero__noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
}

.sf-blog-page .blog-hero__glow {
    position:  absolute;
    bottom:    -60px;
    left:      50%;
    transform: translateX(-50%);
    width:  700px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(127,255,0,.13) 0%, transparent 70%);
    pointer-events: none;
}

.sf-blog-page .blog-hero .container {
    position: relative;
    z-index: 1;
}

.sf-blog-page .blog-hero__title {
    font-family:    var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:      clamp(48px, 7vw, 96px);
    line-height:    .95;
    letter-spacing: .02em;
    color:          #fff;
    margin:         0 0 16px;
    font-weight:    400;
    text-transform: uppercase;
}

.sf-blog-page .blog-hero__sub {
    font-size: clamp(14px, 1.6vw, 17px);
    color:     rgba(255,255,255,.45);
    max-width: 520px;
    margin:    0 auto;
    line-height: 1.6;
}

/* ── Category tabs ────────────────────────────────────────── */
.sf-blog-page .blog-cats {
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-top:    clamp(36px, 5vw, 56px);
    margin-bottom: clamp(32px, 5vw, 56px);
}

.sf-blog-page .blog-cats__inner {
    display:        flex;
    overflow-x:     auto;
    scrollbar-width: none;
}

.sf-blog-page .blog-cats__inner::-webkit-scrollbar { display: none; }

.sf-blog-page .blog-cats__btn {
    flex-shrink:    0;
    padding:        12px 22px;
    font-family:    var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:      16px;
    letter-spacing: .04em;
    color:          rgba(255,255,255,.4);
    background:     transparent;
    border:         none;
    border-bottom:  2px solid transparent;
    cursor:         pointer;
    transition:     color .2s ease, border-color .2s ease;
    margin-bottom:  -1px;
    white-space:    nowrap;
}

.sf-blog-page .blog-cats__btn:hover {
    color: rgba(255,255,255,.8);
}

.sf-blog-page .blog-cats__btn.is-active {
    color:              #aaff00;
    border-bottom-color: #aaff00;
}

/* ── Featured post ────────────────────────────────────────── */
.sf-blog-page .blog-featured {
    margin-bottom: clamp(36px, 5vw, 60px);
}

.sf-blog-page .blog-featured__link {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    text-decoration: none;
    background:  rgba(255,255,255,.04);
    border:      1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    overflow:    hidden;
    transition:  border-color .3s ease, box-shadow .3s ease;
}

.sf-blog-page .blog-featured__link:hover {
    border-color: rgba(170,255,0,.28);
    box-shadow:   0 16px 48px rgba(0,0,0,.45), 0 0 32px rgba(170,255,0,.06);
}

.sf-blog-page .blog-featured__img-wrap {
    position: relative;
    overflow: hidden;
}

.sf-blog-page .blog-featured__img-wrap::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(90deg, transparent 60%, rgba(17,17,17,.6) 100%);
    pointer-events: none;
}

.sf-blog-page .blog-featured__img {
    width:      100%;
    height:     100%;
    min-height: 320px;
    object-fit: cover;
    display:    block;
    transition: transform .55s ease;
}

.sf-blog-page .blog-featured__link:hover .blog-featured__img {
    transform: scale(1.04);
}

/* No-image placeholder */
.sf-blog-page .blog-img-placeholder {
    width:      100%;
    height:     100%;
    min-height: 200px;
    background: linear-gradient(135deg, #0f2207 0%, #111f11 50%, #0a1a0a 100%);
}

.sf-blog-page .blog-featured__img.blog-img-placeholder {
    min-height: 320px;
}

.sf-blog-page .blog-featured__badge {
    position:     absolute;
    top:          16px;
    left:         16px;
    z-index:      2;
    background:   #aaff00;
    color:        #0a1a0a;
    font-family:  var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:    12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding:      4px 12px;
    border-radius: 3px;
}

.sf-blog-page .blog-featured__content {
    padding:         clamp(28px, 4vw, 52px);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             16px;
}

.sf-blog-page .blog-featured__cat {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    color:          #aaff00;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sf-blog-page .blog-featured__title {
    font-family:    var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:      clamp(24px, 3vw, 44px);
    line-height:    1.05;
    color:          #fff;
    font-weight:    400;
    transition:     color .2s;
    display:        -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:       hidden;
}

.sf-blog-page .blog-featured__link:hover .blog-featured__title {
    color: #aaff00;
}

.sf-blog-page .blog-featured__desc {
    font-size:   15px;
    color:       rgba(255,255,255,.5);
    line-height: 1.65;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.sf-blog-page .blog-featured__meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   12px;
    color:       rgba(255,255,255,.3);
    flex-wrap:   wrap;
}

.sf-blog-page .blog-featured__meta-dot {
    width:        3px;
    height:       3px;
    border-radius: 50%;
    background:   currentColor;
    flex-shrink:  0;
}

.sf-blog-page .blog-featured__cta {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    color:          #aaff00;
    font-family:    var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:      17px;
    letter-spacing: .04em;
    margin-top:     4px;
    transition:     gap .2s ease;
}

.sf-blog-page .blog-featured__link:hover .blog-featured__cta {
    gap: 14px;
}

/* ── Blog list section ────────────────────────────────────── */
.sf-blog-page .blog-list {
    margin-bottom: clamp(36px, 5vw, 64px);
}

.sf-blog-page .blog-list__header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   clamp(20px, 3vw, 36px);
    flex-wrap:       wrap;
}

.sf-blog-page .blog-list__heading {
    font-family:    var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:      clamp(16px, 2vw, 24px);
    color:          rgba(255,255,255,.3);
    letter-spacing: .06em;
}

.sf-blog-page .blog-list__count {
    font-size:      12px;
    color:          rgba(255,255,255,.2);
    letter-spacing: .04em;
}

.sf-blog-page .blog-list__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(14px, 2vw, 24px);
}

.sf-blog-page .blog-list__empty {
    display:   none;
    text-align: center;
    padding:   48px 20px;
    color:     rgba(255,255,255,.3);
    font-size: 15px;
    grid-column: 1 / -1;
}

.sf-blog-page .blog-list__empty.is-visible {
    display: block;
}

/* ── Blog card overrides (accent colour on blog page) ─────── */
.sf-blog-page .blog-card__cat-badge {
    color: #aaff00;
    background: rgba(170,255,0,.12);
    border-color: rgba(170,255,0,.28);
}

.sf-blog-page .blog-card:hover {
    border-color: rgba(170,255,0,.22);
    box-shadow:   0 8px 32px rgba(0,0,0,.35);
}

.sf-blog-page .blog-card:hover .blog-card__title {
    color: #aaff00;
}

.sf-blog-page .blog-card__cta {
    color: rgba(170,255,0,.65);
}

.sf-blog-page .blog-card:hover .blog-card__cta {
    color: #aaff00;
}

/* ── Pagination ───────────────────────────────────────────── */
.sf-blog-page .blog-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             6px;
    padding:         clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
}

.sf-blog-page .blog-pagination .blog-page-btn,
.sf-blog-page .blog-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    height:          38px;
    padding:         0 10px;
    background:      rgba(255,255,255,.05);
    border:          1px solid rgba(255,255,255,.08);
    border-radius:   5px;
    color:           rgba(255,255,255,.5);
    font-size:       14px;
    text-decoration: none;
    transition:      background .2s ease, border-color .2s ease, color .2s ease;
    cursor:          pointer;
    font-family:     inherit;
}

.sf-blog-page .blog-pagination .blog-page-btn:hover,
.sf-blog-page .blog-pagination .page-numbers:not(.dots):hover {
    background:   rgba(170,255,0,.08);
    border-color: rgba(170,255,0,.3);
    color:        #aaff00;
}

.sf-blog-page .blog-pagination .blog-page-btn.current,
.sf-blog-page .blog-pagination .page-numbers.current {
    background:   rgba(170,255,0,.15);
    border-color: rgba(170,255,0,.4);
    color:        #aaff00;
}

.sf-blog-page .blog-pagination .blog-page-btn.dots,
.sf-blog-page .blog-pagination .page-numbers.dots {
    background:   transparent;
    border-color: transparent;
    cursor:       default;
    color:        rgba(255,255,255,.25);
}

/* ── Empty state (no posts at all) ───────────────────────── */
.sf-blog-page .blog-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        clamp(64px, 10vw, 120px) 20px;
    gap:            20px;
}

.sf-blog-page .blog-empty__icon svg {
    stroke: rgba(170,255,0,.35);
}

.sf-blog-page .blog-empty__text {
    font-size:   16px;
    color:       rgba(255,255,255,.35);
    max-width:   400px;
    line-height: 1.65;
    margin:      0;
}

.sf-blog-page .blog-empty__btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        12px 32px;
    background:     #aaff00;
    color:          #0a1a0a;
    font-family:    var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:      18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius:  5px;
    transition:     background .2s, box-shadow .2s;
}

.sf-blog-page .blog-empty__btn:hover {
    background: #c8ff33;
    box-shadow: 0 4px 20px rgba(170,255,0,.3);
}

/* ── Accessibility ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sf-blog-page .blog-featured__link,
    .sf-blog-page .blog-featured__img,
    .sf-blog-page .blog-featured__cta,
    .sf-blog-page .blog-card,
    .sf-blog-page .blog-card__img { transition: none; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 920px) {
    .sf-blog-page .blog-featured__link {
        grid-template-columns: 1fr;
    }
    .sf-blog-page .blog-featured__img-wrap::after {
        background: linear-gradient(0deg, rgba(17,17,17,.7) 0%, transparent 60%);
    }
    .sf-blog-page .blog-featured__img {
        min-height: 260px;
    }
    .sf-blog-page .blog-list__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .sf-blog-page .blog-hero__title {
        font-size: clamp(44px, 11vw, 72px);
    }
    .sf-blog-page .blog-featured__content {
        padding: 24px 20px;
    }
    .sf-blog-page .blog-list__grid {
        grid-template-columns: 1fr;
    }
    .sf-blog-page .blog-pagination {
        gap: 4px;
    }
    .sf-blog-page .blog-pagination .blog-page-btn,
    .sf-blog-page .blog-pagination .page-numbers {
        min-width: 34px;
        height:    34px;
        font-size: 13px;
    }
}