/* ==========================================================================
   Article single (posts). Markup: resources/views/single.blade.php
   The header repeats the page-hero pattern (gradient band, glass card, photo)
   so an article opens like every other inner page; the body is a .prose column.
   ========================================================================== */

.article-hero{padding-block:clamp(40px, 4vw, 56px)}
.article-hero__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gap);align-items:stretch}
.article-hero__card{display:flex;flex-direction:column;justify-content:center;min-height:clamp(320px, 28.5vw, 410px);padding:clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 32px)}
.article-hero__title{color:var(--white)}
.article-hero__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.5rem 0 0;color:var(--accent);font-size:var(--step-body)}
.article-hero__media{aspect-ratio:544 / 410;background:rgba(255,255,255,.1)}

.article-body{max-width:820px}
.article-body>*+*{margin-top:1.25em}
.article-body .wp-block-image{margin-block:2rem}
.article-body figcaption{font-size:var(--step-small);color:var(--ink-muted);margin-top:.5rem}
.article-back{margin-top:2.5rem}

@media (max-width: 820px){
  .article-hero__grid{grid-template-columns:minmax(0, 1fr)}
  .article-hero__card{min-height:0}
  .article-hero__media{aspect-ratio:16 / 10}
}