/* ══════════════════════════════════════════════════════════════════════
   BLOG INDEX REDESIGN — blog-redesign.css   (2026-07)
   Enqueued via mu-plugin zzz-blog-css.php AFTER css/blog.css, only on the
   blog index (is_home()). Scoped to body.sf-blog-page.

   Adds / overrides:
     • hero eyebrow
     • topic filter tabs (All · News · Guides · Market · Collections · Safety)
     • FEATURED hero + TRENDING NOW panel two-column row
     • colored per-topic tags (.sf-tag) + shared meta row (.sf-meta: date • read)
     • self-contained article card grid (article.css is NOT loaded here)
     • client-side tab filtering hooks
   Palette: lime #cde738 · near-black/dark-green bg · Bebas Neue + Inter.
   Card / featured / meta styles are fully self-contained so they don't
   depend on article.css (single-post only) or the older blog.css cards.
════════════════════════════════════════════════════════════════════════ */

.sf-blog-page {
    --sf-lime:      #cde738;
    --sf-lime-dk:   #b6cf20;
    --sf-ink:       #0a1206;
    --sf-card:      rgba(255,255,255,.045);
    --sf-card-brd:  rgba(255,255,255,.09);
    --sf-txt:       #ffffff;
    --sf-txt-2:     rgba(255,255,255,.62);
    --sf-txt-3:     rgba(255,255,255,.42);
    --sf-radius:    16px;
    --sf-radius-sm: 11px;
    /* Topic accent colors (each also carries a text label → not color-only). */
    --tp-news:        #cde738;  /* lime  */
    --tp-guides:      #4fc3f7;  /* sky   */
    --tp-market:      #ffb648;  /* amber */
    --tp-collections: #b98cff;  /* violet*/
    --tp-safety:      #4fd18b;  /* green */
}

/* ── Hero eyebrow (adds to existing blog-hero styles in blog.css) ─────── */
.sf-blog-page .blog-hero__eyebrow {
    display:        inline-block;
    font-family:    var(--font-body, 'Inter'), sans-serif;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--sf-lime);
    margin-bottom:  18px;
    padding:        6px 14px;
    border:         1px solid rgba(205,231,56,.32);
    border-radius:  100px;
    background:     rgba(205,231,56,.06);
}
.sf-blog-page .blog-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.4); }

/* ── Topic filter tabs (override blog.css accent → lime, pill style) ──── */
.sf-blog-page .blog-cats {
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-top:    clamp(30px, 4vw, 48px);
    margin-bottom: clamp(28px, 4vw, 44px);
}
.sf-blog-page .blog-cats__inner {
    display:         flex;
    gap:             6px;
    overflow-x:      auto;
    scrollbar-width: none;
    padding-bottom:  2px;
}
.sf-blog-page .blog-cats__inner::-webkit-scrollbar { display: none; }
.sf-blog-page .blog-cats__btn {
    flex-shrink:    0;
    min-height:     44px;             /* touch target */
    padding:        10px 20px;
    font-family:    var(--font-display, 'Bebas Neue'), sans-serif;
    font-size:      18px;
    line-height:    1;
    letter-spacing: .05em;
    color:          var(--sf-txt-3);
    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,.85); }
.sf-blog-page .blog-cats__btn.is-active {
    color:               var(--sf-lime);
    border-bottom-color: var(--sf-lime);
}
.sf-blog-page .blog-cats__btn:focus-visible {
    outline:        2px solid var(--sf-lime);
    outline-offset: 2px;
    border-radius:  4px;
}

/* ── Shared meta row: date • N min read ──────────────────────────────── */
.sf-blog-page .sf-meta {
    display:     none; /* date + reading time removed per request */
    align-items: center;
    gap:         9px;
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-size:   12px;
    color:       var(--sf-txt-3);
    flex-wrap:   wrap;
}
.sf-blog-page .sf-meta__dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: .6; flex-shrink: 0;
}
.sf-blog-page .sf-meta__read {
    display: inline-flex; align-items: center; gap: 5px;
}
.sf-blog-page .sf-meta__read svg { opacity: .8; }

/* ── Colored topic tags ──────────────────────────────────────────────── */
.sf-blog-page .sf-tag {
    display:        inline-flex;
    align-items:    center;
    align-self:     flex-start;
    font-family:    var(--font-body, 'Inter'), sans-serif;
    font-size:      10.5px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding:        5px 10px;
    border-radius:  6px;
    line-height:    1;
    white-space:    nowrap;
}
/* per-topic color pairs (bg tint + solid text; ≥4.5:1 on dark) */
.sf-blog-page .sf-tag--news        { color: var(--tp-news);        background: rgba(205,231,56,.14);  border: 1px solid rgba(205,231,56,.30); }
.sf-blog-page .sf-tag--guides      { color: var(--tp-guides);      background: rgba(79,195,247,.14);  border: 1px solid rgba(79,195,247,.30); }
.sf-blog-page .sf-tag--market      { color: var(--tp-market);      background: rgba(255,182,72,.15);  border: 1px solid rgba(255,182,72,.32); }
.sf-blog-page .sf-tag--collections { color: var(--tp-collections); background: rgba(185,140,255,.15); border: 1px solid rgba(185,140,255,.32); }
.sf-blog-page .sf-tag--safety      { color: var(--tp-safety);      background: rgba(79,209,139,.14);  border: 1px solid rgba(79,209,139,.30); }
/* text-only variant (trending panel) */
.sf-blog-page .sf-tag-text {
    font-family:    var(--font-body, 'Inter'), sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sf-blog-page .sf-tag-text--news        { color: var(--tp-news); }
.sf-blog-page .sf-tag-text--guides      { color: var(--tp-guides); }
.sf-blog-page .sf-tag-text--market      { color: var(--tp-market); }
.sf-blog-page .sf-tag-text--collections { color: var(--tp-collections); }
.sf-blog-page .sf-tag-text--safety      { color: var(--tp-safety); }

/* ══ Featured + Trending row ═════════════════════════════════════════ */
.sf-blog-page .blog-top {
    display:               grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap:                   clamp(16px, 2vw, 26px);
    margin-bottom:         clamp(40px, 5vw, 68px);
    align-items:           stretch;
}

/* ── Featured hero (self-contained; overrides blog.css .blog-featured) ─ */
.sf-blog-page .blog-featured { margin-bottom: 0; height: 100%; }
.sf-blog-page .blog-featured__link {
    display:         flex;
    flex-direction:  column;
    height:          100%;
    text-decoration: none;
    background:      var(--sf-card);
    border:          1px solid var(--sf-card-brd);
    border-radius:   var(--sf-radius);
    overflow:        hidden;
    grid-template-columns: none;            /* neutralize blog.css grid */
    transition:      transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sf-blog-page .blog-featured__link:hover {
    transform:    translateY(-4px);
    border-color: rgba(205,231,56,.34);
    box-shadow:   0 22px 60px rgba(0,0,0,.5), 0 0 40px rgba(205,231,56,.07);
}
.sf-blog-page .blog-featured__img-wrap {
    position:     relative;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    background:   rgba(255,255,255,.03);
}
.sf-blog-page .blog-featured__img-wrap::after {
    content:'' ; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(6,13,2,.55) 100%);
    pointer-events:none;
}
.sf-blog-page .blog-featured__img {
    width:100%; height:100%; min-height:0;
    object-fit:cover; display:block;
    transition: transform .6s ease;
}
.sf-blog-page .blog-featured__link:hover .blog-featured__img { transform: scale(1.04); }
.sf-blog-page .blog-featured__flag {
    position:absolute; top:16px; left:16px; z-index:2;
    display:inline-flex; align-items:center; gap:6px;
    background: var(--sf-lime); color: var(--sf-ink);
    font-family: var(--font-display,'Bebas Neue'),sans-serif;
    font-size:13px; letter-spacing:.1em; text-transform:uppercase;
    padding:5px 13px; border-radius:100px;
    box-shadow:0 4px 16px rgba(205,231,56,.3);
}
.sf-blog-page .blog-featured__content {
    padding:        clamp(24px, 3vw, 40px);
    display:        flex;
    flex-direction: column;
    gap:            15px;
    flex:           1;
}
.sf-blog-page .blog-featured__title {
    font-family:    var(--font-display,'Bebas Neue'),sans-serif;
    font-size:      clamp(30px, 3.4vw, 50px);
    line-height:    1.02;
    letter-spacing: .005em;
    color:          var(--sf-txt);
    font-weight:    400;
    margin:         0;
    transition:     color .2s;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sf-blog-page .blog-featured__link:hover .blog-featured__title { color: var(--sf-lime); }
.sf-blog-page .blog-featured__desc {
    font-family: var(--font-body,'Inter'),sans-serif;
    font-size:   15px; color: var(--sf-txt-2); line-height:1.62; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sf-blog-page .blog-featured__meta { margin-top:2px; }
.sf-blog-page .blog-featured__cta {
    display:inline-flex; align-items:center; gap:8px;
    color: var(--sf-lime);
    font-family: var(--font-display,'Bebas Neue'),sans-serif;
    font-size:19px; letter-spacing:.04em;
    margin-top:auto; padding-top:6px;
    transition: gap .2s ease;
}
.sf-blog-page .blog-featured__link:hover .blog-featured__cta { gap:14px; }

/* ── Trending panel ──────────────────────────────────────────────────── */
.sf-blog-page .blog-trending {
    display:flex; flex-direction:column;
    background: var(--sf-card);
    border:1px solid var(--sf-card-brd);
    border-radius: var(--sf-radius);
    padding: clamp(18px, 2vw, 24px);
    height:100%;
}
.sf-blog-page .blog-trending__head {
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:16px; margin-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.sf-blog-page .blog-trending__title {
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-display,'Bebas Neue'),sans-serif;
    font-size:20px; letter-spacing:.05em; color: var(--sf-txt);
}
.sf-blog-page .blog-trending__title svg { color: var(--sf-lime); }
.sf-blog-page .blog-trending__list {
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; flex:1;
}
.sf-blog-page .blog-trending__item {
    border-bottom:1px solid rgba(255,255,255,.06);
}
.sf-blog-page .blog-trending__item:last-child { border-bottom:none; }
.sf-blog-page .blog-trending__link {
    display:flex; align-items:flex-start; gap:12px;
    padding:15px 0; text-decoration:none;
}
.sf-blog-page .blog-trending__rank {
    flex-shrink:0;
    font-family: var(--font-display,'Bebas Neue'),sans-serif;
    font-size:22px; line-height:1;
    color: rgba(205,231,56,.5);
    width:20px; text-align:center; padding-top:2px;
    transition: color .2s;
}
.sf-blog-page .blog-trending__link:hover .blog-trending__rank { color: var(--sf-lime); }
.sf-blog-page .blog-trending__thumb {
    flex-shrink:0; width:60px; height:60px;
    border-radius:9px; overflow:hidden;
    background: rgba(255,255,255,.04);
}
.sf-blog-page .blog-trending__thumb img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .4s ease;
}
.sf-blog-page .blog-trending__link:hover .blog-trending__thumb img { transform: scale(1.06); }
.sf-blog-page .blog-trending__body {
    display:flex; flex-direction:column; gap:5px; min-width:0;
}
.sf-blog-page .blog-trending__cat { display:block; }
.sf-blog-page .blog-trending__name {
    font-family: var(--font-body,'Inter'),sans-serif;
    font-size:13.5px; font-weight:600; line-height:1.32; color: var(--sf-txt);
    transition: color .2s;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sf-blog-page .blog-trending__link:hover .blog-trending__name { color: var(--sf-lime); }
.sf-blog-page .blog-trending__meta { font-size:11px; }
.sf-blog-page .blog-trending__all {
    display:inline-flex; align-items:center; gap:7px; justify-content:center;
    margin-top:16px; padding:11px 16px;
    font-family: var(--font-display,'Bebas Neue'),sans-serif;
    font-size:16px; letter-spacing:.05em;
    color: var(--sf-lime); text-decoration:none;
    background: rgba(205,231,56,.07);
    border:1px solid rgba(205,231,56,.22);
    border-radius:10px;
    transition: background .2s, gap .2s, border-color .2s;
}
.sf-blog-page .blog-trending__all:hover {
    background: rgba(205,231,56,.14);
    border-color: rgba(205,231,56,.4);
    gap:12px;
}

/* ══ Article grid ════════════════════════════════════════════════════ */
.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; flex-wrap:wrap;
    margin-bottom: clamp(18px, 2.5vw, 30px);
}
.sf-blog-page .blog-list__heading {
    font-family: var(--font-display,'Bebas Neue'),sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--sf-txt); letter-spacing:.03em;
}
.sf-blog-page .blog-list__count {
    font-family: var(--font-body,'Inter'),sans-serif;
    font-size:12px; color: var(--sf-txt-3); letter-spacing:.03em;
}
.sf-blog-page .blog-list__grid {
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(16px, 2vw, 24px);
}

/* Self-contained card (article.css not loaded on the index) */
.sf-blog-page .blog-card {
    display:flex; flex-direction:column;
    background: var(--sf-card);
    border:1px solid var(--sf-card-brd);
    border-radius: var(--sf-radius-sm);
    overflow:hidden; text-decoration:none;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.sf-blog-page .blog-card:hover {
    transform: translateY(-5px);
    border-color: rgba(205,231,56,.28);
    box-shadow: 0 16px 40px rgba(0,0,0,.42), 0 0 28px rgba(205,231,56,.05);
}
.sf-blog-page .blog-card__img-wrap {
    position:relative; aspect-ratio:16/10; overflow:hidden;
    background: rgba(255,255,255,.03);
}
.sf-blog-page .blog-card__img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .45s ease;
}
.sf-blog-page .blog-card:hover .blog-card__img { transform: scale(1.06); }
.sf-blog-page .blog-card__tag {
    position:absolute; top:12px; left:12px; z-index:2;
    backdrop-filter: blur(6px);
}
.sf-blog-page .blog-card__body {
    padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; gap:10px;
}
.sf-blog-page .blog-card__title {
    font-family: var(--font-display,'Bebas Neue'),sans-serif;
    font-size:22px; line-height:1.08; letter-spacing:.01em;
    color: var(--sf-txt); font-weight:400; margin:0;
    transition: color .2s;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sf-blog-page .blog-card:hover .blog-card__title { color: var(--sf-lime); }
.sf-blog-page .blog-card__text {
    font-family: var(--font-body,'Inter'),sans-serif;
    font-size:13px; color: var(--sf-txt-2); line-height:1.6; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sf-blog-page .blog-card__footer {
    margin-top:auto; padding-top:12px;
    border-top:1px solid rgba(255,255,255,.06);
}

/* Empty (per-topic filter) state */
.sf-blog-page .blog-list__empty {
    display:none;
    grid-column:1 / -1;
    text-align:center; padding:56px 20px;
    color: var(--sf-txt-3); font-size:15px;
    font-family: var(--font-body,'Inter'),sans-serif;
}
.sf-blog-page .blog-list__empty.is-visible { display:block; }

/* Filtered-out card */
.sf-blog-page .blog-card[hidden] { display:none !important; }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@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,
    .sf-blog-page .blog-trending__thumb img,
    .sf-blog-page .blog-trending__all { transition: none !important; }
    .sf-blog-page .blog-featured__link:hover,
    .sf-blog-page .blog-card:hover { transform: none; }
}

/* ══ Responsive ══════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
    .sf-blog-page .blog-top {
        grid-template-columns: 1fr;
    }
    .sf-blog-page .blog-featured__img-wrap { aspect-ratio: 16/8; }
}
@media (max-width: 900px) {
    .sf-blog-page .blog-list__grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media (max-width: 560px) {
    .sf-blog-page .blog-list__grid { grid-template-columns: 1fr; }
    .sf-blog-page .blog-featured__content { padding: 22px 18px; gap:13px; }
    .sf-blog-page .blog-featured__img-wrap { aspect-ratio: 16/10; }
    .sf-blog-page .blog-trending { padding:18px; }
    .sf-blog-page .blog-cats__btn { font-size:17px; padding:10px 16px; }
}