/* ══════════════════════════════════════════════════
   BLOG — page-specific CSS
   ══════════════════════════════════════════════════
   Loaded BEFORE global.css so any selectors that
   collide (e.g. .hero base styles) lose the cascade.

   The :root color tokens, #main-nav, footer, crumbs,
   and base .btn rules in this file are intentionally
   left in place — they're harmless duplicates of
   global.css and were extracted verbatim from the
   standalone /new_blog.php mockup. global.css wins
   the cascade because it's enqueued AFTER this file.
   ══════════════════════════════════════════════════ */


*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--obsidian);color:var(--text);overflow-x:clip;font-size:18px;line-height:1.65;}
.container{max-width:1360px;margin:0 auto;padding:0 2.5rem;}
.hero-wrap{position:relative;background:var(--hero-photo,var(--team-photo)) center 62%/cover no-repeat;}.hero-wrap::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,18,0.92),rgba(5,11,18,0.82),rgba(5,11,18,0.96));z-index:1;}.hero-wrap::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 60%,rgba(22,192,183,0.05),transparent 60%);z-index:2;}.hero-wrap>*{position:relative;z-index:3;}
.crumbs{padding:110px 0 20px;font-size:13px;color:var(--muted);}.crumbs a{color:var(--muted);text-decoration:none;}.crumbs a:hover{color:var(--teal);}.crumbs i{font-size:9px;margin:0 8px;opacity:0.5;}.crumbs span{color:var(--teal);}
.hero{padding:30px 0 60px;}
.hero-pre{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--teal);margin-bottom:12px;text-align:center;}
.hero h1{font-size:clamp(42px,5.5vw,72px);font-weight:900;letter-spacing:-2px;line-height:0.95;margin-bottom:28px;text-align:center;}.hero h1 em{font-style:normal;color:var(--teal);}

/* Featured post */
.featured{display:grid;grid-template-columns:1.4fr 1fr;gap:0;border-radius:20px;overflow:hidden;border:1px solid rgba(22,192,183,0.08);background:linear-gradient(135deg,rgba(12,26,38,0.8),rgba(5,11,18,0.6));transition:all 0.35s;}
.featured:hover{border-color:rgba(22,192,183,0.2);box-shadow:0 24px 60px rgba(0,0,0,0.4);}
.featured-img{background:linear-gradient(135deg,#0a2a28,#0d1f2d,#1a0f30);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:300px;}.featured-img i{font-size:80px;opacity:0.06;color:#fff;}.featured-badge{position:absolute;top:16px;left:16px;padding:5px 12px;border-radius:6px;font-size:10px;font-weight:800;background:var(--teal);color:#050b12;text-transform:uppercase;letter-spacing:1px;}
.featured-body{padding:36px;display:flex;flex-direction:column;justify-content:center;}
.featured-meta{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.f-cat{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--teal);padding:4px 10px;border-radius:4px;background:rgba(22,192,183,0.08);}
.f-date,.f-read{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px;}.f-read i{font-size:10px;}
.featured-title{font-size:26px;font-weight:900;letter-spacing:-0.5px;line-height:1.2;margin-bottom:12px;}.featured-title a{color:var(--text);text-decoration:none;transition:color 0.2s;}.featured-title a:hover{color:var(--teal);}
.featured-excerpt{font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:18px;}
.featured-link{font-size:14px;font-weight:800;color:var(--teal);text-decoration:none;display:flex;align-items:center;gap:6px;transition:gap 0.2s;}.featured-link:hover{gap:10px;}.featured-link i{font-size:11px;}

/* Filter bar */
.filter-bar{padding:30px 0 10px;position:sticky;top:70px;z-index:10;background:var(--obsidian);border-bottom:1px solid rgba(22,192,183,0.06);}
.filter-inner{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:12px;}
.cat-pill{font-family:var(--font);font-size:13px;font-weight:700;padding:8px 18px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.02);color:var(--muted);cursor:pointer;transition:all 0.2s;text-decoration:none;white-space:nowrap;flex-shrink:0;}.cat-pill:hover{border-color:rgba(22,192,183,0.2);color:var(--text);}.cat-pill.active{background:rgba(22,192,183,0.1);border-color:rgba(22,192,183,0.3);color:var(--teal);}

/* Post grid */
.blog-grid{padding:30px 0 40px;}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;}
.post-card{background:linear-gradient(180deg,rgba(12,26,38,0.7),rgba(5,11,18,0.5));border:1px solid rgba(22,192,183,0.06);border-radius:16px;overflow:hidden;transition:all 0.35s;display:flex;flex-direction:column;}.post-card:hover{border-color:rgba(22,192,183,0.18);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,0.4);}.post-card:hover::before{opacity:1;}.post-card::before{content:'';display:block;height:2px;background:var(--text-grad);opacity:0;transition:opacity 0.3s;}.post-card.hidden{display:none;}
.post-card-img{height:160px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(22,192,183,0.04),rgba(22,192,183,0.01));position:relative;}.post-card-img i{font-size:40px;opacity:0.06;color:#fff;transition:all 0.4s;}.post-card:hover .post-card-img i{opacity:0.1;transform:scale(1.1);}
.post-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.post-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.post-cat{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--teal);padding:3px 8px;border-radius:4px;background:rgba(22,192,183,0.06);}.post-date,.post-read{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:3px;}.post-read i{font-size:9px;}
.post-title{font-size:19px;font-weight:900;letter-spacing:-0.3px;line-height:1.25;margin-bottom:8px;}.post-title a{color:var(--text);text-decoration:none;transition:color 0.2s;}.post-title a:hover{color:var(--teal);}
.post-excerpt{font-size:14px;color:var(--muted);line-height:1.65;flex:1;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.post-link{font-size:13px;font-weight:800;color:var(--teal);text-decoration:none;display:flex;align-items:center;gap:6px;transition:gap 0.2s;margin-top:auto;}.post-link:hover{gap:10px;}.post-link i{font-size:10px;}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;padding:20px 0 60px;}
.page-btn{font-family:var(--font);font-size:14px;font-weight:800;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--muted);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;}.page-btn:hover{border-color:rgba(22,192,183,0.2);color:var(--text);}.page-btn.active{background:rgba(22,192,183,0.1);border-color:rgba(22,192,183,0.3);color:var(--teal);}
.page-arrow{font-family:var(--font);font-size:14px;font-weight:800;padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--muted);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:6px;}.page-arrow:hover{border-color:rgba(22,192,183,0.2);color:var(--text);}.page-arrow:disabled{opacity:0.3;cursor:default;}

.no-results{display:none;text-align:center;padding:60px 20px;color:var(--muted);}.no-results.show{display:block;}.no-results i{font-size:36px;color:rgba(22,192,183,0.12);margin-bottom:12px;display:block;}

@media(max-width:960px){.featured{grid-template-columns:1fr;}}
@media(max-width:700px){.posts-grid{grid-template-columns:1fr;}}

/* ──────────────────────────────────────────────
   Modernized category filter pills

   The legacy mockup pills were generic gray chips with a
   barely-visible 5% white border. Modernized to feel
   intentional rather than placeholder:

     • Bigger pills with more breathing room
     • Stronger resting state (visible border + bg, not 5% white)
     • Active state uses the gradient teal-to-sky bar from
       --text-grad as a bg overlay, with white text — high
       contrast, immediately scannable
     • Hover lifts -1px and intensifies the border + bg tint
     • Slow-out cubic-bezier easing matches the .nav-cta-btn
       transition timing
   ────────────────────────────────────────────── */
.cat-pill{
  font-family:var(--font);
  font-size:13px;font-weight:800;
  letter-spacing:0.01em;
  padding:11px 22px;
  border-radius:50px;
  border:1px solid rgba(22,192,183,0.18);
  background:rgba(12,26,38,0.55);
  color:rgba(168,194,217,0.85);
  cursor:pointer;text-decoration:none;
  white-space:nowrap;flex-shrink:0;
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cat-pill:hover{
  border-color:rgba(22,192,183,0.45);
  background:rgba(22,192,183,0.08);
  color:#fff;
}
.cat-pill.active{
  background:var(--teal);
  border-color:var(--teal);
  color:#050b12;
}
.cat-pill.active:hover{
  background:#1ad4ca;
  border-color:#1ad4ca;
  color:#050b12;
}

/* Filter bar container — slightly more breathing room around
 * the bigger pills, and a subtle gradient fade at the right
 * edge so users know there's more to scroll on overflow. */
.filter-bar{
  padding:36px 0 18px;
  position:sticky;top:70px;z-index:10;
  background:linear-gradient(180deg,var(--obsidian) 0%,var(--obsidian) 80%,rgba(5,11,18,0.92) 100%);
  border-bottom:1px solid rgba(22,192,183,0.08);
}
/* Horizontal scroll slider with fade edges so users see
 * there's more to scroll. The mask-image fades the first
 * and last 40px to transparent, creating a visual "more"
 * cue on both sides. */
.filter-inner{
  display:flex;align-items:center;gap:10px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:18px;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(22,192,183,0.3) transparent;
  mask-image:linear-gradient(90deg, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.filter-inner::-webkit-scrollbar{height:4px;}
.filter-inner::-webkit-scrollbar-track{background:transparent;}
.filter-inner::-webkit-scrollbar-thumb{background:rgba(22,192,183,0.3);border-radius:4px;}
.filter-inner::-webkit-scrollbar-thumb:hover{background:rgba(22,192,183,0.5);}

@media(max-width:700px){
  .cat-pill{font-size:12px;padding:10px 18px;}
  .filter-bar{padding:28px 0 14px;}
}

/* ──────────────────────────────────────────────
   Image containment overrides

   The legacy mockup used <i> icons as image placeholders
   inside .post-card-img / .featured-img, so neither
   container had any rules for an actual <img> child.
   When the WP_Query loop renders the_post_thumbnail()
   the raw <img> sized itself naturally and overflowed —
   which is why the post-card images bled into the body
   text on the live blog index. Fix: clip + cover.

   Also bumped .post-card-img to a 16/10 aspect ratio
   so cards keep a uniform shape regardless of how tall
   the underlying image is.
   ────────────────────────────────────────────── */
.post-card-img{
  height:auto;
  aspect-ratio:16/10;
  overflow:hidden;
}
.post-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease;
}
.post-card:hover .post-card-img img{
  transform:scale(1.04);
}
/* When there's no featured image the <i> icon shows on
 * the gradient placeholder — keep the icon centered. */
.post-card-img:has(> i){
  display:flex;align-items:center;justify-content:center;
}

.featured-img{
  min-height:0;
  aspect-ratio:4/3;
}
.featured-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease;
}
.featured:hover .featured-img img{
  transform:scale(1.03);
}
@media(max-width:960px){
  .featured-img{aspect-ratio:16/9;}
}

/* ══════════════════════════════════════════════════
   .blog-grid IS THE SECTION HERE, NOT THE CARD GRID
   ══════════════════════════════════════════════════
   Two templates use this class for a section wrapper
   holding .container > .posts-grid — page-blog.php and
   category.php. One uses it for an actual card grid:
   page-spotlight.php, as .blog-grid.spot-grid.

   interior.css carries a :where(.blog-grid){display:grid}
   base layer written for the second usage. Applied to
   the first it turned the <section> into a three-column
   grid, which made .container a grid item sized to its
   content: the post grid rendered 385px wide inside a
   1440px viewport with every card on its own row.

   Specificity settles it — :where() contributes nothing,
   so this plain class wins wherever it appears in the
   file. Declared here rather than by weakening the base
   layer because blog.css is the stylesheet both affected
   templates load, and spotlight must keep its grid.
   ══════════════════════════════════════════════════ */
.blog-grid{display:block;}