/* blog.css — Blog index. Editorial layout + star ratings. Needs site.css. */

/* ---- Blog hero ---- */
.cw-bloghero{ padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(1.6rem,3vw,2.6rem); position:relative; overflow:hidden; }
.cw-bloghero::before{ content:""; position:absolute; inset:-30% 50% auto -10%; height:360px;
  background:radial-gradient(45% 60% at 30% 40%, color-mix(in srgb,var(--brand-mint) 55%,transparent), transparent 70%);
  filter:blur(20px); z-index:0; pointer-events:none; }
.cw-bloghero > .cw-container{ position:relative; z-index:1; }
.cw-bloghero h1{ font-size:clamp(2.6rem, 1.8rem + 4vw, 4.6rem); margin:1rem 0 1rem; max-width:18ch; }
.cw-bloghero__lead{ font-size:var(--text-xl); line-height:1.6; color:var(--fg-muted); max-width:60ch; font-weight:300; text-wrap:pretty; }

/* ---- Featured post ---- */
.cw-feat{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; border-radius:var(--radius-xl); overflow:hidden;
  background:var(--ink-900); text-decoration:none; box-shadow:var(--shadow-lg); margin-bottom:2.6rem;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.cw-feat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg), 0 30px 60px rgba(23,18,13,.18); }
.cw-feat__media{ position:relative; min-height:380px; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 70% 20%, color-mix(in srgb,var(--accent) 85%, white 15%), var(--accent) 70%); }
.cw-feat__media img{ width:128px; height:128px; filter:drop-shadow(0 16px 30px rgba(0,0,0,.28)); opacity:.96; }
.cw-feat__media .cw-feat__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; opacity:1; }
.cw-feat__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(23,18,13,.25)); }
.cw-feat__body{ padding:clamp(1.8rem,3vw,3rem); display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.cw-feat__cat{ align-self:flex-start; background:rgba(255,255,255,.12); color:#fff; }
.cw-feat__title{ color:#fff; font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height:1.12; font-weight:700;
  letter-spacing:-.01em; text-wrap:balance; }
.cw-feat__ex{ color:var(--gray-300); font-size:var(--text-lg); line-height:1.55; max-width:46ch; }
.cw-feat__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.4rem; }

/* ---- Category chips (sticky) ---- */
.cw-chips-wrap{ position:sticky; top:60px; z-index:30; background:color-mix(in srgb,var(--white) 86%, transparent);
  backdrop-filter:blur(10px); border-block:1px solid var(--border); }
.cw-chips{ display:flex; gap:.5rem; padding-block:.9rem; overflow-x:auto; scrollbar-width:none; }
.cw-chips::-webkit-scrollbar{ display:none; }
.cw-chip{ flex:none; font-family:var(--font-sans); font-weight:500; font-size:.92rem; cursor:pointer;
  padding:.5rem 1.05rem; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong);
  background:var(--white); color:var(--ink-800); transition:all var(--dur) var(--ease-out); white-space:nowrap; }
.cw-chip:hover{ border-color:var(--brand-orange); color:var(--orange-700); }
.cw-chip.is-active{ background:var(--brand-orange); border-color:var(--brand-orange); color:#fff; }

/* ---- Editorial grid ---- */
.cw-blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
.cw-pcard{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; box-shadow:var(--shadow-xs);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.cw-pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.cw-pcard__media{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; background:var(--gray-100); overflow:hidden; }
.cw-pcard__media img{ width:54px; height:54px; opacity:.92; filter:drop-shadow(0 8px 16px rgba(0,0,0,.22)); }
.cw-pcard__media .cw-pcard__img{ width:100%; height:100%; object-fit:cover; opacity:1; filter:none;
  transition:transform var(--dur) var(--ease-out); }
.cw-pcard:hover .cw-pcard__img{ transform:scale(1.04); }
.cw-pcard__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(23,18,13,.18)); }
.cw-pcard__cat{ position:absolute; top:.85rem; left:.85rem; background:rgba(23,18,13,.78); color:#fff; backdrop-filter:blur(4px); }
.cw-pcard__body{ padding:1.2rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.cw-pcard__title{ font-size:1.12rem; font-weight:700; line-height:1.25; color:var(--ink-900); letter-spacing:-.01em; text-wrap:balance; }
.cw-pcard__ex{ font-size:.92rem; line-height:1.55; color:var(--fg-muted); margin:0; }
.cw-pcard .cw-pmeta{ margin-top:auto; }

/* ---- Post meta ---- */
.cw-pmeta{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--fg-subtle); flex-wrap:wrap; }
.cw-pmeta.is-light{ color:var(--gray-400); }
.cw-pmeta__author{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--fg-muted); }
.cw-pmeta.is-light .cw-pmeta__author{ color:var(--gray-200); }
.cw-pmeta__author img{ border-radius:50%; background:var(--gray-100); }
.cw-dot{ opacity:.5; }

/* ---- Star rating ---- */
.cw-stars{ display:inline-flex; align-items:center; gap:.45rem; }
.cw-stars__icons{ display:inline-flex; gap:1px; }
.cw-star{ position:relative; width:17px; height:17px; display:inline-block; line-height:0; }
.cw-star__bg{ width:17px; height:17px; fill:var(--gray-300); }
.cw-star__fg{ position:absolute; inset:0; overflow:hidden; line-height:0; }
.cw-star__fg svg{ width:17px; height:17px; fill:var(--brand-gold); }
.cw-stars__val{ font-weight:700; font-size:.84rem; color:var(--ink-800); }
.cw-stars__votes{ font-size:.78rem; color:var(--fg-subtle); }
.cw-feat .cw-stars__val{ color:#fff; }
.cw-feat .cw-stars__votes{ color:var(--gray-400); }
.cw-feat .cw-star__bg{ fill:rgba(255,255,255,.28); }

/* ---- Load more ---- */
.cw-blog-more{ display:flex; justify-content:center; margin-top:2.6rem; }

/* ---- Responsive ---- */
@media (max-width:920px){
  .cw-feat{ grid-template-columns:1fr; }
  .cw-feat__media{ min-height:220px; }
  .cw-blog-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .cw-blog-grid{ grid-template-columns:1fr; }
  .cw-chips-wrap{ top:58px; }
}