/* ============================================================
   blog.css — shared styles for the Ora Blog hub + post pages
   Loaded after styles.css; reuses the same design tokens
   (--blue, --gold, --ink, --muted, --tint, --line, --radius, --maxw)
   ============================================================ */

/* ---- blog hub hero ---- */
.blog-hero{padding-bottom:2rem}
.blog-hero__inner{display:flex;flex-direction:column;gap:1.6rem;text-align:center;align-items:center}
.blog-hero__inner h1{max-width:20ch}
.blog-hero__inner p{font-size:1.14rem;max-width:52ch}
.blog-hero__media{border-radius:var(--radius);overflow:hidden;margin-top:1rem;max-height:420px}
.blog-hero__media img{width:100%;height:100%;object-fit:cover}

/* ---- post teaser grid (hub) ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.blog-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:transparent;display:flex;flex-direction:column;text-decoration:none;transition:.18s ease}
.blog-card:hover{border-color:var(--ink)}
.blog-card__img{border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;margin:-1.5rem -1.5rem 1.2rem;background:var(--tint)}
.blog-card__img img{aspect-ratio:16/11;object-fit:cover;width:100%}
.blog-card h3{font-family:var(--sans);color:var(--ink);font-weight:600;font-size:1.2rem;margin-bottom:.5rem;line-height:1.25}
.blog-card p{font-size:.95rem;margin-bottom:.9rem;flex:1}
.blog-card .link-arrow{margin-top:auto}

@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}

/* ---- article post header ---- */
.post-hero{padding-bottom:1.5rem}
.post-hero__inner{max-width:74ch;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.post-hero__inner h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.post-hero__byline{font-family:var(--sans);color:var(--muted);font-size:.92rem;font-weight:500}
.post-hero__media{border-radius:var(--radius);overflow:hidden;margin-top:1rem}
.post-hero__media img{width:100%;max-height:480px;object-fit:cover}

/* ---- article body (single readable column) ---- */
.post-body{padding-top:0}
.post-body__inner{max-width:65ch;margin:0 auto}
.post-body__inner h2{font-size:1.7rem;margin:2.4rem 0 1rem}
.post-body__inner h3{font-size:1.25rem;color:var(--ink);font-family:var(--sans);font-weight:600;margin:1.8rem 0 .7rem}
.post-body__inner p{margin-bottom:1.2rem;font-size:1.05rem}
.post-body__inner ul{margin:0 0 1.2rem 1.3rem}
.post-body__inner li{margin-bottom:.6rem;font-size:1.05rem;color:var(--muted)}
.post-body__inner li strong{color:var(--ink)}
.post-body__inner strong{color:var(--ink)}
.post-body__img{border-radius:var(--radius);overflow:hidden;margin:1.6rem 0}
.post-body__img img{width:100%}
.post-body__back{display:inline-block;margin-top:1rem}

/* ---- related posts ---- */
.post-related .wrap{max-width:900px}
.post-related h2{font-size:1.5rem;margin-bottom:1.4rem}
.post-related .blog-grid{grid-template-columns:1fr}

@media(min-width:640px){.post-related .blog-grid{grid-template-columns:repeat(3,1fr)}}

/* ---- back to blog link ---- */
.post-back{padding-top:0}
.post-back .wrap{max-width:65ch}