/* Blog index + article pages — layered on product-page.css */
.bloghero{padding:72px 0 88px}
.bloghero h1{max-width:16ch}
.bloghero .lede{max-width:54ch}
.bloghero .quickfacts{grid-template-columns:repeat(3,1fr)}

.posts{padding:80px 0 104px}

/* Featured (newest) post: horizontal editorial card */
.feature{display:grid;grid-template-columns:1.12fr 1fr;background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);color:inherit;transition:border-color var(--duration-fast,150ms) var(--ease-out,ease-out),box-shadow var(--duration-fast,150ms) var(--ease-out,ease-out),transform var(--duration-fast,150ms) var(--ease-out,ease-out)}
.feature:hover{border-color:var(--navy);box-shadow:var(--shadow-raised);color:inherit}
.feature .shot{position:relative;min-height:360px;background:var(--navy);overflow:hidden}
.feature .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 200ms var(--ease-out,ease-out)}
.feature .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,.04),rgba(13,27,42,.22))}
.feature .body{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.feature h2{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);line-height:1.15;color:var(--navy)}
.feature p{font-size:15.5px;line-height:1.75;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Standard cards: uniform three-up grid */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.postcard{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);color:inherit;transition:border-color var(--duration-fast,150ms) var(--ease-out,ease-out),box-shadow var(--duration-fast,150ms) var(--ease-out,ease-out),transform var(--duration-fast,150ms) var(--ease-out,ease-out)}
.postcard:hover{border-color:var(--navy);box-shadow:var(--shadow-raised);color:inherit}
.postcard .shot{position:relative;aspect-ratio:16/10;background:var(--navy);overflow:hidden}
.postcard .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 200ms var(--ease-out,ease-out)}
.postcard .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,.04),rgba(13,27,42,.24))}
.postcard .body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.postcard h3{font-family:var(--font-display);font-size:21px;line-height:1.3;color:var(--navy);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.postcard p{font-size:14.5px;line-height:1.7;color:var(--text-muted);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Shared card pieces */
.badge{position:absolute;top:14px;left:14px;z-index:2;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--navy);padding:7px 11px;border-radius:4px}
.when{font-size:11px;font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}
.go{font-size:11px;font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--taupe);display:inline-flex;align-items:center;gap:7px}
.go .arr{display:inline-block;transition:transform 160ms var(--ease-out,ease-out)}
.feature:hover .go,.postcard:hover .go{color:var(--navy)}
.feature:focus-visible,.postcard:focus-visible,.related a:focus-visible{outline:2px solid var(--slate);outline-offset:3px}

/* Article hero: clean navy + glow, image shown once below */
.articlehero{padding:56px 0 128px}
.articlehero::after{display:none}
.articlehero .glow{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 72% 16%,rgba(74,107,138,.34),transparent 65%)}
.articlehero h1{max-width:26ch;font-size:clamp(28px,3.8vw,48px);line-height:1.14}
.articlehero .lede{max-width:60ch}
.postmeta{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.postmeta span{font-size:11px;font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:rgba(255,255,255,.75)}
.postmeta .pill{background:rgba(255,255,255,.12);color:var(--taupe);padding:6px 10px;border-radius:4px}

.article{padding:0 0 56px}
.leadimg{margin:-72px auto 40px;max-width:920px;position:relative;z-index:3;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-raised);background:var(--navy)}
.leadimg img{width:100%;height:auto;display:block}

.article .prose{max-width:70ch;margin:0 auto}
.article .prose p{font-size:17px;line-height:1.85;color:var(--text-body)}
.article .prose h2{font-size:clamp(25px,2.5vw,32px);margin-top:26px}
.article .prose h3{font-size:21px;margin-top:8px}
.article .prose a{color:var(--slate);text-decoration:underline;text-underline-offset:3px}
.article .prose a:hover{color:var(--navy)}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-default);border:1px solid var(--border-default);margin:10px 0 14px}
.metrics>div{background:var(--white);padding:26px 24px;display:flex;flex-direction:column;gap:8px}
.metrics strong{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);color:var(--navy);line-height:1.15}
.metrics span{font-size:11px;font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}

.steplist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-default);border:1px solid var(--border-default);margin:10px 0 14px}
.steplist>div{background:var(--white);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.steplist .n{font-family:var(--font-display);font-size:36px;color:var(--taupe);line-height:1}
.steplist h3{font-size:18px;margin-top:0}
.steplist p{font-size:14.5px;line-height:1.7;color:var(--text-muted)}

.callout{background:var(--gray-light);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:28px 32px;display:flex;flex-direction:column;gap:10px;margin:8px 0}
.callout p{font-size:16px;line-height:1.75;color:var(--text-body)}

.more{padding:24px 0 96px}
.more .sechead{margin-bottom:28px}

@media (hover: hover) and (pointer: fine) {
  .feature:hover, .postcard:hover { transform: translateY(-3px); }
  .feature:hover .shot img, .postcard:hover .shot img { transform: scale(1.03); }
  .feature:hover .go .arr, .postcard:hover .go .arr { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .feature, .postcard, .feature .shot img, .postcard .shot img, .go .arr { transition: none; }
  .feature:hover, .postcard:hover { transform: none; }
  .feature:hover .shot img, .postcard:hover .shot img { transform: none; }
  .feature:hover .go .arr, .postcard:hover .go .arr { transform: none; }
}

@media (max-width:1100px){
  .postgrid{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .steplist{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature .shot{min-height:0;aspect-ratio:16/9}
  .feature .shot img{position:static}
  .articlehero{padding:44px 0 104px}
  .leadimg{margin:-60px auto 32px}
}
@media (max-width:720px){
  .postgrid,.metrics,.steplist{grid-template-columns:1fr}
  .bloghero .quickfacts{grid-template-columns:1fr}
  .postcard .body{padding:22px 22px 24px}
  .feature .body{padding:26px 24px 28px}
}