/*──────────────────────────────────────────────────────────
  MANOVA — Blog page
  Loads after resources.css and reuses its tokens (--res-line,
  --res-accent) plus the site's global --font-display, --ease-expo and
  .r/.stg reveal system. The hero, newsletter, and contact section are
  NOT restyled here — they reuse .ed-hero (about.css),
  .resource-newsletter, and .contact as-is. This file only adds the
  two genuinely new pieces: the varied Featured Insights grid and the
  Why Read Manova band.
──────────────────────────────────────────────────────────*/

.blog-page .container{padding-inline:clamp(1.25rem,5vw,4rem)}

/*──────────────────────────────────────────────────────────
  FEATURED INSIGHTS — one large lead card + two compact list cards.
  Two deliberately different card shapes, not one card repeated.
──────────────────────────────────────────────────────────*/
.blog-featured{border-bottom:1px solid var(--res-line)}
.blog-featured__grid{
  display:grid;grid-template-columns:1.55fr 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);align-items:stretch;
}

/* Lead card — vertical magazine composition, large immersive image */
.blog-lead-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--res-line);background:rgba(255,255,255,.015);
  transition:transform .55s var(--ease-expo),border-color .4s;
}
.blog-lead-card:hover{transform:translateY(-5px);border-color:rgba(103,232,237,.35)}
.blog-lead-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--gray-100)}
.blog-lead-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-expo)}
.blog-lead-card:hover .blog-lead-card__media img{transform:scale(1.05)}
.blog-lead-card__body{padding:clamp(1.5rem,2.4vw,2.25rem);display:flex;flex-direction:column;flex:1}
.blog-lead-card__tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-light);font-weight:700;margin-bottom:.75rem}
.blog-lead-card__body h3{
  font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:.85rem;
  transition:color .35s;
}
.blog-lead-card:hover .blog-lead-card__body h3{color:var(--blue-light)}
.blog-lead-card__body p{font-size:.92rem;line-height:1.7;color:var(--gray-500);margin-bottom:1.4rem;max-width:60ch}
.blog-lead-card__meta{display:flex;gap:.75rem;font-size:.76rem;color:var(--gray-400);margin-bottom:auto;padding-bottom:1.5rem}
.blog-lead-card__meta span:not(:last-child):after{content:'·';margin-left:.75rem;color:var(--gray-300)}
.blog-lead-card__read{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:700;color:var(--gray-500);
  transition:color .35s,transform .35s var(--ease-expo);
}
.blog-lead-card__read .arrow{transition:transform .35s var(--ease-expo)}
.blog-lead-card:hover .blog-lead-card__read{color:var(--white);transform:translateX(3px)}
.blog-lead-card:hover .blog-lead-card__read .arrow{transform:translateX(4px)}

/* Compact cards — horizontal list composition, stacked in the side column */
.blog-compact-stack{display:flex;flex-direction:column;gap:clamp(1.25rem,2vw,1.5rem)}
.blog-compact-card{
  display:flex;gap:1.1rem;text-decoration:none;color:inherit;flex:1;
  padding:1rem;border-radius:16px;border:1px solid var(--res-line);
  background:rgba(255,255,255,.015);
  transition:transform .5s var(--ease-expo),border-color .4s,background .4s;
}
.blog-compact-card:hover{transform:translateY(-3px);border-color:rgba(103,232,237,.3);background:rgba(255,255,255,.03)}
.blog-compact-card__media{width:112px;flex:none;aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:var(--gray-100)}
.blog-compact-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-expo)}
.blog-compact-card:hover .blog-compact-card__media img{transform:scale(1.08)}
.blog-compact-card__body{display:flex;flex-direction:column;min-width:0;flex:1}
.blog-compact-card__tag{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light);font-weight:700;margin-bottom:.35rem}
.blog-compact-card__body h3{
  font-family:var(--font-display);font-size:.98rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;margin-bottom:.4rem;
  transition:color .35s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-compact-card:hover .blog-compact-card__body h3{color:var(--blue-light)}
.blog-compact-card__body p{
  font-size:.76rem;line-height:1.55;color:var(--gray-500);margin-bottom:.55rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-compact-card__meta{display:flex;align-items:center;gap:.55rem;font-size:.68rem;color:var(--gray-400);margin-top:auto}
.blog-compact-card__meta span:nth-child(2):before{content:'·';margin-right:.55rem;color:var(--gray-300)}
.blog-compact-card__read{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--gray-500);transition:color .35s,transform .35s var(--ease-expo)}
.blog-compact-card:hover .blog-compact-card__read{color:var(--white);transform:translateX(2px)}

/*──────────────────────────────────────────────────────────
  WHY READ MANOVA — a statement + plain value-prop list.
  Deliberately not a card grid: no borders, no panels, just a
  considered editorial split on the site's calm "stone" surface.
──────────────────────────────────────────────────────────*/
.blog-why{padding:clamp(4.5rem,8vw,7.5rem) 0}
.blog-why__grid{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.blog-why h2{
  margin-top:.8rem;font-family:var(--font-display);
  font-size:clamp(1.9rem,3.2vw,2.85rem);line-height:1.1;letter-spacing:-.03em;
  max-width:16ch;
}
.blog-why__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.6rem}
.blog-why__list li{padding-top:1.4rem;border-top:1px solid rgba(23,19,13,.12)}
.blog-why__list strong{display:block;font-size:1rem;margin-bottom:.4rem;letter-spacing:-.01em}
.blog-why__list p{font-size:.88rem;line-height:1.65;max-width:46ch}

@media(max-width:1000px){
  .blog-featured__grid{grid-template-columns:1fr}
  .blog-compact-stack{flex-direction:row}
  .blog-compact-card{flex-direction:column}
  .blog-compact-card__media{width:100%;aspect-ratio:16/9}
  .blog-why__grid{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:640px){
  .blog-compact-stack{flex-direction:column}
  .blog-lead-card__body{padding:1.4rem}
  .blog-lead-card:hover,.blog-compact-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .blog-lead-card,.blog-compact-card,.blog-lead-card__media img,.blog-compact-card__media img,
  .blog-lead-card__read,.blog-lead-card__read .arrow,.blog-compact-card__read{transition:none!important}
}