/* =========================================================================
 * DFLV category archive page. Loaded alongside homepage.css (both printed
 * inline on category pages — see the wp_head hook in dflv-homepage.php),
 * so every token and shared component (.dflv-card, .dflv-ed-grid, .dflv-cta,
 * .dflv-trust, .dflv-wrap, .dflv-label, .dflv-sec-head, .dflv-more, .dflv-dot)
 * comes from that file, unchanged — this file only adds what's new here:
 * the hero, filter chips, sort bar, featured post, and load-more button.
 * ====================================================================== */

/* Full-width hero + trust strip. The 100vw/negative-margin rule below is a
   CSS-only fallback; the reliable version is the JS-measured breakout in
   dflv-homepage.php's category-critical inline script (same reason the
   series-archive/article/event templates don't trust a CSS-only vw
   breakout alone in this theme). Scoped under .dflv-cat-page so .dflv-trust
   — shared with the real homepage — is untouched everywhere else. */
.dflv-cat-page .dflv-cat-hero,
.dflv-cat-page .dflv-trust{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

.dflv-cat-crumb{font-size:.78rem;color:var(--dflv-ink-3);margin-bottom:16px}
.dflv-cat-crumb a:hover{color:var(--dflv-ink-2)}
.dflv-cat-crumb b{color:var(--dflv-ink-2);font-weight:500}

.dflv-cat-hero{
  padding:44px 0 40px;
  background:radial-gradient(560px 260px at 88% 0%, var(--dflv-teal-soft) 0%, transparent 70%), #F6F6F3;
  border-bottom:1px solid var(--dflv-line);
}
.dflv-cat-count{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dflv-teal-ink);margin-bottom:10px}
.dflv-cat-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:24ch;margin-bottom:12px}
.dflv-cat-dek{font-size:1.02rem;color:var(--dflv-ink-2);max-width:64ch;line-height:1.6}
.dflv-cat-dek p{margin:0 0 10px}
.dflv-cat-dek p:last-child{margin-bottom:0}

.dflv-cat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.dflv-cat-chip{font-size:.82rem;font-weight:600;color:var(--dflv-ink-2);background:#fff;border:1px solid var(--dflv-line);border-radius:999px;padding:7px 15px;display:inline-block}
.dflv-cat-chip:hover{border-color:var(--dflv-ink-3)}
.dflv-cat-chip.is-active{background:var(--dflv-ink);border-color:var(--dflv-ink);color:#fff}

.dflv-cat-sortbar{padding:18px 0;border-bottom:1px solid var(--dflv-line)}
.dflv-cat-sortcount{font-size:.86rem;color:var(--dflv-ink-2)}

.dflv-cat-featured{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--dflv-line);border-radius:var(--dflv-radius);overflow:hidden;background:#fff;transition:.18s}
.dflv-cat-featured:hover{box-shadow:0 16px 40px -20px rgba(0,0,0,.14)}
.dflv-cat-featured .dflv-thumb{aspect-ratio:auto;height:100%}
.dflv-cat-featured .dflv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dflv-cat-featured-body{padding:30px 32px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.dflv-cat-featured-body h3{font-size:1.5rem;line-height:1.22}
.dflv-cat-featured:hover .dflv-cat-featured-body h3{color:var(--dflv-coral-ink)}
.dflv-cat-featured-body p{color:var(--dflv-ink-2);font-size:.95rem;line-height:1.6}

.dflv-cat-loadmore{display:flex;justify-content:center;padding-top:26px}
.dflv-cat-loadmore button{background:#fff;border:1px solid var(--dflv-line);color:var(--dflv-ink);font-weight:600;font-size:.88rem;padding:13px 26px;border-radius:11px;cursor:pointer;font-family:inherit}
.dflv-cat-loadmore button:hover{border-color:var(--dflv-ink-3)}
.dflv-cat-loadmore button:disabled{opacity:.6;cursor:default}

.dflv-cat-empty{padding:30px 0;color:var(--dflv-ink-3);font-size:.95rem}

@media(max-width:900px){
  .dflv-cat-featured{grid-template-columns:1fr}
  .dflv-cat-featured .dflv-thumb{aspect-ratio:16/9}
}
@media(max-width:620px){
  .dflv-cat-hero{padding:32px 0 28px}
}