/* ==========================================================================
   Blog: listing pages (/blog/, /blog/category/…) and article pages (/blog/<slug>/).
   The pages are generated by scripts/build-blog.mjs; this file only styles them.
   Builds on style.css tokens and components (phero, section, sec-head, btn, eyebrow…).
   ========================================================================== */

/* ---------- Shared ---------- */
.link-inline { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .25s, text-decoration-color .25s; }
.link-inline:hover { color: var(--gold-deep); text-decoration-thickness: 2px; }

.blog-preview-bar { position: fixed; z-index: 400; left: 0; right: 0; bottom: 0; padding: .6rem 1rem; background: #7d5f22; color: #fff; font-size: .9rem; font-weight: 600; text-align: center; }
.blog-preview-bar code { font-size: .85em; padding: .05em .35em; border-radius: .3em; background: rgba(0, 0, 0, .25); }

/* Breadcrumb list inside the page hero (wraps on phones; the current item is shortened) */
.bcrumb { flex-wrap: wrap; row-gap: .2rem; }
.bcrumb li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; }
.bcrumb li + li::before { content: "/"; opacity: .7; }
.bcrumb [aria-current="page"] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(246, 241, 231, .92); }
.phero--post .bcrumb li:last-child { flex: 1 1 0; max-width: 28ch; }

/* Shorter heroes than the main pages: the content is the point here */
.phero--blog { min-height: clamp(24rem, 56svh, 36rem); }
.phero--post { min-height: clamp(26rem, 64svh, 40rem); }
.phero--post .phero__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.9rem); line-height: 1.08; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; }
.phero--post .lead { max-width: 62ch; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; font-size: .92rem; font-weight: 600; color: rgba(246, 241, 231, .86); }
.post-meta > span { display: inline-flex; align-items: center; gap: .7rem; }
.post-meta > span + span::before { content: ""; flex: none; width: .3rem; height: .3rem; transform: rotate(45deg); background: var(--gold); }
.post-meta > span:empty { display: none; }

/* ---------- Listing ---------- */
.blog-list { padding-top: clamp(3rem, 6vw, 5rem); }
.bpager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.bpager > :last-child { justify-self: end; }
.bpager__nums { display: flex; gap: .35rem; }
.bpager__n { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 600; transition: border-color .3s; }
a.bpager__n:hover { border-color: var(--gold); }
.bpager__n[aria-current="page"] { background: var(--deep); border-color: var(--deep); color: #fff; }

.blog-fineprint { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 78ch; font-size: .9rem; color: var(--muted); }
.blog-empty { padding-block: 2rem; }

/* ---------- Article ---------- */
/* overflow: clip (not hidden) so the sticky side column still sticks */
.post-sec { overflow: clip; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem); }
.post-sec::before { background-image: var(--grain); background-size: 200px 200px; opacity: .3; }

/* The layout's font size sets the measure: 68ch of 18px Source Sans 3 */
.post-layout { display: grid; grid-template-columns: minmax(0, 68ch); justify-content: center; gap: 1.5rem; font-size: 1.125rem; }
.post-aside { display: grid; gap: 1.25rem; align-content: start; font-size: 1rem; }
.post-aside:not(:has(.toc)) { display: none; }
.post-facts { display: none; }
@media (min-width: 1100px) {
  .post-layout { grid-template-columns: minmax(0, 68ch) 16.5rem; grid-template-areas: "main aside"; gap: clamp(3rem, 5vw, 5rem); }
  .post-main { grid-area: main; }
  .post-aside, .post-aside:not(:has(.toc)) { display: grid; grid-area: aside; position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
  .post-facts { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; padding: 1.1rem 1.15rem; border-radius: 1rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); font-size: .9rem; }
}
.post-facts__k { color: var(--muted); }
.post-facts__v { font-weight: 600; color: var(--text); text-align: right; }

.toc { border: 1px solid var(--line-strong); border-radius: 1rem; background: #fff; box-shadow: var(--shadow-sm); }
.toc__sum { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .75rem 1.1rem; cursor: pointer; list-style: none; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.toc__sum::-webkit-details-marker { display: none; }
.toc__sum svg { width: 1rem; height: 1rem; flex: none; transition: transform .35s var(--ease-expo); }
.toc[open] .toc__sum svg { transform: rotate(180deg); }
.toc__list { counter-reset: toc; display: grid; padding: 0 1.1rem 1rem; }
.toc__list li { counter-increment: toc; border-top: 1px solid var(--line); }
.toc__list a { display: grid; grid-template-columns: 1.8rem 1fr; padding: .55rem 0; font-size: .95rem; line-height: 1.4; color: var(--muted); transition: color .25s; }
.toc__list a::before { content: counter(toc, decimal-leading-zero); padding-top: .12rem; font-size: .72rem; font-weight: 700; color: var(--gold); }
.toc__list a:hover { color: var(--text); }

/* Reading typography: Source Sans 3 at 1.125rem / 1.75, Playfair headings */
.post-body { max-width: 68ch; font-family: var(--font-sans); font-size: 1em; line-height: 1.75; color: var(--text); overflow-wrap: break-word; }
.post-body > * + * { margin-top: 1.15em; }
.post-body > p:first-child { font-size: 1.16em; line-height: 1.65; }
.post-body h2, .post-body h3, .post-body h4 { color: var(--text); text-wrap: balance; }
.post-body h2 { margin-top: 2.2em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -.01em; }
.post-body h2::before { content: ""; display: block; width: 2.5rem; height: 2px; margin-bottom: .75rem; background: var(--gold); }
.post-body h3 { margin-top: 1.9em; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.3; }
.post-body h4 { margin-top: 1.7em; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: .7em; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { padding-left: .3em; }
.post-body li + li, .post-body li > ul, .post-body li > ol { margin-top: .5em; }
.post-body li::marker { color: var(--gold-deep); }
.post-body ol > li::marker { font-weight: 700; }
.post-body a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .25s, text-decoration-color .25s; }
.post-body a:hover { color: var(--gold-deep); text-decoration-thickness: 2px; }
.post-body strong { font-weight: 700; }
.post-body blockquote { padding: .15em 0 .15em 1.2em; border-left: 3px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 1.08em; line-height: 1.6; }
.post-body blockquote > * + * { margin-top: .8em; }
.post-body hr { width: 6rem; height: 1px; margin: 2.5em auto; border: 0; background: var(--line-strong); }
.post-body code { padding: .1em .35em; border-radius: .3em; background: var(--ivory-2); font-size: .88em; }
.post-body img { height: auto; border-radius: 1rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: .8rem; background: #fff; }
.post-body table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.5; }
.post-body th, .post-body td { padding: .7em .9em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.post-body th { background: var(--ivory); font-weight: 700; }
.post-body tr:last-child td { border-bottom: 0; }

.post-note { margin-top: 2.75rem; padding: 1.2rem 1.35rem; border-radius: 1rem; border: 1px solid rgba(184, 145, 63, .35); border-left: 4px solid var(--gold); background: var(--ivory); font-size: 1rem; line-height: 1.65; color: var(--muted); }
.post-note__h { margin-bottom: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }

.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.post-tags li { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .85rem; color: var(--muted); }

.post-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: .9rem; margin-top: 2.5rem; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--radius); background: radial-gradient(30rem 16rem at 100% 0, rgba(200, 165, 91, .2), transparent 70%), var(--black); }
.post-cta__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.post-cta__text { max-width: 52ch; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }

.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; font-size: 1rem; }
.post-share__k { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.post-share__list { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Older / newer */
.post-pn { display: grid; gap: 1rem; padding-block: clamp(2rem, 4vw, 3rem); }
@media (min-width: 700px) { .post-pn { grid-template-columns: 1fr 1fr; } }
.post-pn__link { display: grid; align-content: start; gap: .45rem; padding: 1.2rem 1.4rem; border-radius: 1rem; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); transition: border-color .4s, box-shadow .5s var(--ease-expo); }
.post-pn__link:hover { border-color: rgba(184, 145, 63, .5); box-shadow: var(--shadow-lg); }
.post-pn__link--next { justify-items: end; text-align: right; }
.post-pn__k { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.post-pn__k svg { width: 1rem; height: 1rem; }
.post-pn__t { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; }
.post-pn > span:empty { display: none; }
@media (min-width: 700px) { .post-pn > span:empty { display: block; } }

/* ---------- Phones ---------- */
@media (max-width: 699px) {
  .phero--blog, .phero--post { min-height: 0; padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 2.25rem; }
  .phero--post .phero__inner { gap: 1rem; }
  .phero--post .lead { font-size: 1rem; }
  .post-meta { font-size: .85rem; }



  .bpager { grid-template-columns: auto 1fr auto; gap: .5rem; }
  .bpager__nums { justify-content: center; }
  .bpager .btn { padding-inline: .85rem; }

  .post-sec { padding-block: 1.75rem 3rem; }
  .post-layout { gap: 1.25rem; }
  .post-body > p:first-child { font-size: 1.06em; }
  .post-body h2 { margin-top: 1.9em; }
  .post-note { margin-top: 2.25rem; padding: 1rem 1.1rem; font-size: .95rem; }
  .post-cta { padding: 1.4rem 1.25rem; border-radius: 1rem; }
  .post-cta__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .post-cta__actions .btn { padding-inline: .8rem; }
  .post-cta__actions .btn-primary { grid-column: 1 / -1; }
  .post-share { gap: .6rem; }
  .post-share__list .btn { min-height: 2.75rem; padding-inline: .9rem; }
  .post-pn__link { padding: 1rem 1.1rem; }
  .post-pn__t { font-size: 1.08rem; }
}