/* Article templates (blog posts, local guides, tools) and hub pages, generated by scripts/build-blog.mjs,
   build-local.mjs and build-tools.mjs. Tokens and shared components: styles.css. The builders copy this file to dist/. */
.post .page-head h1, .hub .page-head h1 { max-width: 24ch; }
/* Articles: the text column (760 px, tools 820) plus a sticky rail on wide screens, on the 12-column grid. */
.post-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: var(--s-8); padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem) var(--section); }
.post--tool .post-layout { grid-template-columns: minmax(0, 820px) minmax(0, 1fr); }
.post-main { min-width: 0; }
.post-rail { position: sticky; top: 104px; align-self: start; max-width: 300px; justify-self: end; width: 100%; font-size: .9375rem; }
.post-rail > * + * { margin-top: var(--s-4); }
.post-toc ol { margin-top: var(--s-2); border-top: 2px solid var(--text); list-style: none; padding: 0; }
.post-toc li { border-bottom: 1px solid var(--rule); }
.post-toc a { display: flex; align-items: center; min-height: 44px; padding: .4rem 0; text-decoration: none; color: var(--text-2); line-height: 1.35; }
.post-toc a:hover { color: var(--accent-text); }
.rail-person { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.rail-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.rail-person b { display: block; font-stretch: 108%; color: var(--text); }
.rail-person span { color: var(--text-muted); font-size: .875rem; }
.rail-lines a { display: flex; align-items: center; min-height: 44px; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .post-layout, .post--tool .post-layout { grid-template-columns: minmax(0, 1fr); } .post-main { max-width: 760px; } .post--tool .post-main { max-width: 820px; } .post-rail { display: none; } }

/* Hubs: a sticky side column beside the listing (4/8). */
.hub__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) var(--s-8); padding-block: 0 var(--section); }
.hub__side { position: sticky; top: 104px; align-self: start; color: var(--text-2); }
.hub__side > * + * { margin-top: var(--s-4); }
.hub__side p:not(.label) { max-width: 34ch; }
.hub__main { min-width: 0; }
@media (max-width: 900px) { .hub__grid { grid-template-columns: minmax(0, 1fr); } .hub__side { position: static; } }

/* Section headings in articles carry the same 2 px rule as .post-body h2; a list right under one drops to 1 px. */
.post-section { margin-top: var(--s-8); }
.post-section > h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: var(--s-5); padding-top: var(--s-4); border-top: 2px solid var(--text); scroll-margin-top: 96px; }
.post-section > h2 + :is(.faq, .listing, .link-list) { border-top-width: 1px; border-top-color: var(--rule); }
.hub__group { margin: var(--s-8) 0 var(--s-4); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.hub__main > .hub__group:first-child { margin-top: 0; }
.hub__note { margin-top: var(--s-5); color: var(--text-muted); font-size: .9375rem; }
.link-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--text); }
.link-list li { border-bottom: 1px solid var(--rule); }
.link-list a { display: flex; align-items: center; min-height: 52px; padding: var(--s-2) 0; font-weight: 620; text-decoration: none; }
.link-list a:hover { text-decoration: underline; }

.post-body { color: var(--text-2); font-size: 1.125rem; line-height: 1.7; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { color: var(--text); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 2.2em; padding-top: var(--s-4); border-top: 2px solid var(--text); scroll-margin-top: 96px; }
.post-body h3 { color: var(--text); font-size: 1.3125rem; margin-top: 1.8em; }
.post-body h4 { color: var(--text); font-size: 1.125rem; font-weight: 700; margin-top: 1.5em; }
.post-body a { color: var(--accent-text); overflow-wrap: anywhere; }
.post-body li { overflow-wrap: anywhere; }
.post-body strong { color: var(--text); }
.post-body ul { list-style: disc; padding-left: 1.3em; }
.post-body ol { list-style: decimal; padding-left: 1.4em; }
.post-body li::marker { color: var(--accent); }
.post-body li + li { margin-top: .45em; }
.post-body li > ul, .post-body li > ol { margin-top: .45em; }
.post-body blockquote { background: var(--tint); color: var(--on-tint); padding: var(--s-4) var(--s-5); border-top: 2px solid var(--text); font-size: 1.1875rem; font-weight: 520; }
.post-body code { background: var(--tint); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.post-body pre { background: var(--teal-950); color: #E6EEEF; padding: var(--s-4); border-radius: var(--r-ctl); overflow-x: auto; font-size: .9rem; line-height: 1.6; }
.post-body pre code { background: none; padding: 0; color: inherit; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-doc); }
.post-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-bottom: 1px solid var(--rule); }
.post-body thead th { background: var(--tint); color: var(--on-tint); font-weight: 700; border-bottom: 2px solid var(--text); }
/* Phones: 3+ column tables become one card per row, each value under its column name (built by mdToHtml). */
@media (max-width: 640px) {
  .post-body .table-wrap:has(.table-stack) { overflow: visible; background: none; }
  .post-body table.table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack tr { border-top: 2px solid var(--text); padding: var(--s-3) 0 var(--s-2); }
  .table-stack tbody td { border: 0; padding: .3rem 0; position: static; background: none; }
  .table-stack tbody td:first-child { font-weight: 700; color: var(--text); font-size: 1.0625rem; padding-bottom: var(--s-2); }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 650; color: var(--text-muted); }
}
.post-faq summary { cursor: pointer; }
.post .cta-block, .hub .cta-block { margin-top: var(--s-8); }
.post--tool .post-main { max-width: 820px; }
/* Blog index: evergreen guides first, then one group per local market (scripts/build-blog.mjs groupByMarket). */
.listing-group { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-stretch: 106%; font-weight: 700; margin: 0 0 var(--s-3); }
.listing + .listing-group, .link-list + .listing-group { margin-top: var(--s-7); }