/* ============================================================
   Rentla blog — public archive + article styles.

   Loads AFTER /assets/site.css and uses only tokens defined there,
   so the blog inherits the site's colour, type, space and motion
   scales instead of maintaining a second set.

   THE AMBER RULE (see CLAUDE.md): #F5B745 is 1.9:1 on white and can
   never be text on a light ground. In this file amber appears only as
   a fill with navy text on it (9.4:1), or as --amber-700 for small
   accents. Never `color:var(--amber-400)` on white.
   ============================================================ */

/* The starter's markup uses .section / .h2 / .lede, which the site's
   stylesheet does not define. Map them onto the Rentla scale. */
.section{padding-block:var(--sp-16)}
.section.soft{background:var(--s-tint); border-top:1px solid var(--n-200)}
.h2{font-family:var(--f-display); color:var(--t-head); margin:0;
  font-size:clamp(1.625rem,1.2rem + 1.8vw,2.375rem); line-height:1.14;
  letter-spacing:-.02em; font-weight:600}
.lede{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); line-height:1.6; color:var(--t-body)}

/* ── Archive hero ─────────────────────────────────────────── */
.blog-hero{padding:var(--sp-16) 0 var(--sp-10); border-bottom:1px solid var(--n-200);
  background:linear-gradient(180deg,var(--amber-50) 0%,var(--s-page) 100%)}
/* Colour is inherited from site.css's .eyebrow (--t-muted, 6.6:1). Amber-700
   was tried here and measures 4.4:1 on this ground — under AA for small text. */
.blog-hero .eyebrow{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; margin:0 0 var(--sp-3)}
.blog-hero .h2{max-width:20ch}
.blog-hero .lede{max-width:56ch; margin-top:var(--sp-4)}

.blog-empty{color:var(--t-muted); padding:var(--sp-16) 0; text-align:center}

/* ── Card grid ────────────────────────────────────────────── */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6)}

.blog-card{display:flex; flex-direction:column; background:var(--s-page);
  border:1px solid var(--n-200); border-radius:var(--r-card); overflow:hidden;
  transition:transform .3s var(--ease-over), box-shadow .3s var(--ease-std),
             border-color var(--d-base) linear}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--e2); border-color:var(--navy-200)}

.blog-card-img{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--n-100)}
.blog-card-img img{width:100%; height:100%; object-fit:cover}

.blog-card-body{display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5) var(--sp-6); flex:1}

/* Amber as a FILL with navy text — 9.4:1. */
.blog-card-cat{align-self:flex-start; background:var(--amber-400); color:var(--t-on-amber);
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:var(--sp-1) var(--sp-2); border-radius:var(--r-chip)}

.blog-card-title{font-family:var(--f-display); font-size:1.1875rem; line-height:1.25;
  letter-spacing:-.01em; font-weight:600; margin:0}
.blog-card-title a{color:var(--t-head)}
.blog-card:hover .blog-card-title a{color:var(--navy-700)}

.blog-card-excerpt{color:var(--t-muted); font-size:.9375rem; line-height:1.6; margin:0; flex:1}

.blog-card-meta{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-3); margin-top:var(--sp-2); font-family:var(--f-mono); font-size:.6875rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--t-muted)}
.blog-card-link{color:var(--navy-900); font-weight:600; white-space:nowrap;
  border-bottom:1px solid transparent; transition:border-color var(--d-fast) var(--ease-std)}
.blog-card:hover .blog-card-link{border-bottom-color:var(--amber-400)}

/* ── Pagination ───────────────────────────────────────────── */
.blog-pagination{display:flex; align-items:center; justify-content:center;
  gap:var(--sp-6); margin-top:var(--sp-12)}
.blog-pagination a{color:var(--navy-900); font-weight:600; font-size:.9375rem;
  border:1px solid var(--navy-200); border-radius:var(--r-btn);
  padding:var(--sp-3) var(--sp-5); transition:border-color var(--d-base) var(--ease-std),
  background-color var(--d-base) var(--ease-std)}
.blog-pagination a:hover{background:var(--navy-50); border-color:var(--navy-400)}
.blog-page-count{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t-muted)}

/* ── Single post ──────────────────────────────────────────── */
.post{padding:var(--sp-10) 0 var(--sp-4)}
.post-wrap{max-width:var(--c-prose)}

.post-breadcrumb{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center;
  font-size:.78rem; letter-spacing:.02em; color:var(--t-muted); margin-bottom:var(--sp-5)}
.post-breadcrumb a{color:var(--t-muted); border-bottom:1px solid transparent}
.post-breadcrumb a:hover{color:var(--navy-900); border-bottom-color:var(--amber-400)}
.post-breadcrumb .current{color:var(--t-head); font-weight:600}

.post-cat{display:inline-block; background:var(--amber-400); color:var(--t-on-amber);
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:var(--sp-1) var(--sp-3); border-radius:var(--r-chip);
  margin-bottom:var(--sp-4)}

.post-title{font-family:var(--f-display); color:var(--t-head); margin:0 0 var(--sp-4);
  font-size:clamp(2rem,1.35rem + 2.8vw,3.25rem); line-height:1.06;
  letter-spacing:-.025em; font-weight:700; text-wrap:balance}

.post-meta{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t-muted); margin-bottom:var(--sp-6)}

.post-hero-img{margin:0 0 var(--sp-8); border-radius:var(--r-media); overflow:hidden}
.post-hero-img img{width:100%; height:auto}

/* Navy text on a pale amber ground — the tint is the accent, not the text. */
.post-tldr{background:var(--amber-50); border-left:4px solid var(--amber-400);
  border-radius:0 var(--r-card) var(--r-card) 0; padding:var(--sp-5) var(--sp-6);
  margin:0 0 var(--sp-8)}
/* Navy, not amber-700: on --amber-50 that measured 4.2:1, under AA. The amber
   accent here is the left border, which carries no text. */
.post-tldr-title{font-family:var(--f-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--t-head); margin:0 0 var(--sp-2)}
.post-tldr p{margin:0; color:var(--t-body); line-height:1.65}

/* ── Article body ─────────────────────────────────────────── */
.post-content{font-size:1.0625rem; line-height:1.75; color:var(--t-body)}
.post-content p{margin:0 0 var(--sp-5)}
.post-content h2{font-family:var(--f-display); color:var(--t-head);
  font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem); line-height:1.2; letter-spacing:-.015em;
  font-weight:600; margin:var(--sp-10) 0 var(--sp-4)}
.post-content h3{font-family:var(--f-display); color:var(--t-head); font-size:1.25rem;
  line-height:1.3; font-weight:600; margin:var(--sp-8) 0 var(--sp-3)}
.post-content h4{font-family:var(--f-display); color:var(--t-head); font-size:1.0625rem;
  font-weight:600; margin:var(--sp-6) 0 var(--sp-2)}
/* Navy, not amber — an amber link on white would fail contrast. */
.post-content a{color:var(--navy-900); font-weight:500;
  border-bottom:2px solid var(--amber-400); transition:background-color var(--d-fast) var(--ease-std)}
.post-content a:hover{background:var(--amber-50)}
.post-content ul,.post-content ol{margin:0 0 var(--sp-5); padding-left:var(--sp-5); list-style:revert}
.post-content li{margin:0 0 var(--sp-2)}
.post-content img{border-radius:var(--r-card); margin:var(--sp-4) 0}
.post-content blockquote{margin:0 0 var(--sp-5); padding:var(--sp-2) var(--sp-5);
  border-left:3px solid var(--n-300); color:var(--t-muted); font-style:italic}
.post-content pre{background:var(--s-inv-deep); color:var(--n-100); padding:var(--sp-5);
  border-radius:var(--r-card); overflow:auto; font-family:var(--f-mono); font-size:.875rem}
.post-content code{font-family:var(--f-mono); font-size:.9em}
.post-content .ql-align-center{text-align:center}
.post-content .ql-align-right{text-align:right}
.post-content .ql-align-justify{text-align:justify}

/* ── Tags ─────────────────────────────────────────────────── */
.post-tags{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-8) 0}
.post-tag{background:var(--n-100); color:var(--t-body); border:1px solid var(--n-200);
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill)}

/* ── FAQ ──────────────────────────────────────────────────── */
.post-faq{margin:var(--sp-10) 0}
.post-faq h2{font-family:var(--f-display); color:var(--t-head); font-size:1.5rem;
  letter-spacing:-.015em; font-weight:600; margin:0 0 var(--sp-4)}
.post-faq-item{background:var(--s-page); border:1px solid var(--n-200);
  border-radius:var(--r-card); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-3);
  transition:border-color var(--d-base) linear}
.post-faq-item:hover{border-color:var(--navy-200)}
.post-faq-item summary{cursor:pointer; font-weight:600; color:var(--t-head); list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4)}
.post-faq-item summary::-webkit-details-marker{display:none}
.post-faq-item summary::after{content:"+"; font-family:var(--f-mono); color:var(--navy-600);
  font-size:1.1rem; line-height:1; flex:none}
.post-faq-item[open] summary::after{content:"−"}
.post-faq-answer{margin-top:var(--sp-3); color:var(--t-body); line-height:1.65}

/* Same smooth open/close as the site's own FAQ. <details> hides its content
   outright when closed, so ::details-content is the part that can be animated;
   interpolate-size lets height reach `auto`, and allow-discrete keeps the
   element around for the closing run. Unsupported browsers just snap open. */
@supports selector(details::details-content){
  :root{interpolate-size:allow-keywords}
  .post-faq-item::details-content{
    height:0; overflow:hidden;
    transition:height var(--d-slow) var(--ease-out),
               content-visibility var(--d-slow) allow-discrete;
  }
  .post-faq-item[open]::details-content{height:auto}
}

/* ── Author ───────────────────────────────────────────────── */
.post-author{display:flex; gap:var(--sp-4); align-items:flex-start; background:var(--s-tint);
  border:1px solid var(--n-200); border-radius:var(--r-card); padding:var(--sp-5);
  margin:var(--sp-8) 0}
.post-author-avatar{width:48px; height:48px; flex:none; border-radius:var(--r-pill);
  background:var(--amber-400); color:var(--t-on-amber); display:flex; align-items:center;
  justify-content:center; font-family:var(--f-display); font-weight:700; font-size:1.25rem}
.post-author-name{font-weight:600; color:var(--t-head)}
.post-author-bio{margin:var(--sp-1) 0 0; color:var(--t-muted); font-size:.9375rem; line-height:1.6}

/* ── End-of-post CTA — inverted, matching the site's navy panels ── */
.post-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-6); background:var(--s-inv); color:var(--t-inv);
  border-radius:var(--r-media); padding:var(--sp-8); margin:var(--sp-12) 0 var(--sp-2)}
.post-cta-text{flex:1; min-width:16rem}
.post-cta h2{font-family:var(--f-display); color:var(--t-inv); font-size:1.5rem;
  line-height:1.2; letter-spacing:-.015em; font-weight:600; margin:0 0 var(--sp-2)}
.post-cta p{margin:0; color:var(--t-inv-muted); font-size:.9375rem; line-height:1.6; max-width:44ch}
.post-cta-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap}
/* On navy, amber text is legitimate (9.4:1) — this is the one place it is. */
.post-cta .btn-ghost{background:transparent; color:var(--t-inv); border-color:var(--navy-500)}
.post-cta .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:var(--amber-400)}
/* The starter template also ships .btn-outline; keep it looking the same. */
.post-cta .btn-outline{background:transparent; color:var(--t-inv);
  border:1px solid var(--navy-500); border-radius:var(--r-btn)}
.post-cta .btn-outline:hover{background:rgba(255,255,255,.08); border-color:var(--amber-400)}

.related-title{margin-bottom:var(--sp-6)}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:999px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .section{padding-block:var(--sp-12)}
}
@media (max-width:700px){
  .blog-grid{grid-template-columns:1fr}
  .post-cta{flex-direction:column; align-items:stretch; padding:var(--sp-6)}
  .post-cta p{max-width:none}
  .post-cta-actions{flex-direction:column}
  .post-cta .btn{width:100%}
  /* The sticky call/quote bar overlays the bottom of the page on mobile. */
  .post{padding-bottom:var(--sp-16)}
}

/* ============================================================
   ARCHIVE  ·  featured lead + side list
   A large lead article beside a stack of recent ones, then the remainder
   as cards. Mirrors the reference layout, with one departure: there is no
   blog photography yet, so a post without a featured image gets a navy
   typographic panel instead of the logo repeated in every slot. Drop a real
   image on a post and it takes over automatically.
   ============================================================ */
.bloghead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-6)}
.bloghead-text{max-width:46ch}
.bloghead-text .t-lead{margin-top:var(--sp-3); color:var(--t-muted)}
.bloghead-cta{flex:none}

.blog-lead{display:grid; gap:var(--sp-10); margin-bottom:var(--sp-12)}
@media (min-width:1000px){
  .blog-lead{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--sp-12); align-items:start}
}

/* ── Media well ───────────────────────────────────────────
   Neutral, rounded, always present: the block the layout is built around.
   An image fills it; an empty one stays quiet grey rather than announcing
   itself. No label or motif inside — that is what made the previous panels
   read as placeholders. */
.bfeat-media{display:block; position:relative; overflow:hidden;
  background:var(--n-100); border-radius:var(--r-media)}
.bfeat-media img{width:100%; height:100%; object-fit:cover; display:block}
.bfeat-media-lg{aspect-ratio:16/11}
.bfeat-media-md{aspect-ratio:16/9}
.bfeat-media-sm{aspect-ratio:1/1; width:7.25rem; flex:none; border-radius:var(--r-card)}

/* ── Lead article ─────────────────────────────────────────
   No card surface: in the reference the media well carries the weight and the
   title and byline sit directly on the page, which is what makes the block
   read as editorial rather than as another card. */
.bfeat{display:flex; flex-direction:column; gap:var(--sp-5)}
.bfeat-title{font-family:var(--f-display); color:var(--t-head); margin:0;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.125rem); line-height:1.15;
  letter-spacing:-.025em; font-weight:700; text-wrap:balance; max-width:20ch}
.bfeat-title a{color:inherit}
.bfeat-title a:hover{color:var(--navy-700)}

.bfeat-meta{display:flex; align-items:center; gap:var(--sp-3)}
.bfeat-byline{display:flex; flex-direction:column; gap:2px}
.bfeat-byline b{color:var(--t-head); font-size:.9375rem; font-weight:600}
.bfeat-role{color:var(--t-muted); font-size:.8125rem}
.bfeat-avatar{display:grid; place-items:center; flex:none; width:2.75rem; height:2.75rem;
  border-radius:var(--r-pill); background:var(--amber-400); color:var(--t-on-amber);
  font-family:var(--f-display); font-weight:700; font-size:1.0625rem}

/* ── Side list ────────────────────────────────────────────
   Thumbnail beside a title, hairline between rows. No dates: the reference
   keeps these to the headline alone so they stay scannable next to the lead. */
.blog-side{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.bside{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-5);
  align-items:center; padding-block:var(--sp-5); border-bottom:1px solid var(--n-200)}
.bside:first-child{padding-top:0}
.bside:last-child{border-bottom:0}
.bside-title{font-family:var(--f-body); font-size:1rem; line-height:1.45; font-weight:500;
  margin:0; color:var(--t-head)}
.bside-title a{color:inherit; border-bottom:1px solid transparent;
  transition:border-color var(--d-fast) var(--ease-std)}
.bside:hover .bside-title a{border-bottom-color:var(--amber-400)}