/* Blog index, single post, legal pages and 404 — extras on top of site.css */

/* Category tabs: the current one reads as selected */
.blog-cats { margin-bottom: 32px; }
.tab[aria-current="page"] { background: var(--arch); border-color: var(--arch); color: #fff; box-shadow: var(--shadow-blue); }
.tab { display: inline-flex; align-items: center; }

/* Three-up grid for "Read next" / recent articles */
.post-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .post-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .post-grid--3 { grid-template-columns: 1fr; } }

/* Card without a cover image */
.post-card-ph { aspect-ratio: 16 / 10; background: linear-gradient(160deg, var(--arch-mist), var(--pane)); }

/* Empty state + pagination */
.blog-empty { max-width: 640px; margin: 0 auto; text-align: center; padding: clamp(32px, 5vw, 56px); border-radius: 220px 220px 24px 24px; background: var(--pane); border: 1px solid var(--line); }
.blog-empty a { text-decoration: underline; text-underline-offset: 3px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 64px); }
.page-count { font-size: 14px; font-weight: 700; color: var(--slate); }

/* Editor preview banner */
.blog-preview-note { position: relative; z-index: 2; padding: 12px var(--gutter); text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); background: #FFF4D6; border-bottom: 1px solid rgba(0,0,0,.08); }
.blog-preview-note a { text-decoration: underline; }

/* Single post */
.post-meta--hero { margin-bottom: 14px; }
.post-meta a.cat:hover { color: var(--arch-deep); }
.post-section { padding-top: clamp(40px, 5vw, 64px); }
/* Post banner. With a featured image: the photo fills the banner edge to
   edge and the text sits over it in white, on a scrim that is darkest
   behind the text. Without one: the plain text banner (.page-hero--text). */
.post-hero .page-hero-grid { grid-template-columns: 1fr; }
.post-hero h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.12; }
.post-hero-lead { margin: 18px 0 0; max-width: 56ch; }

.post-hero--overlay { display: flex; align-items: flex-end; min-height: clamp(440px, 58vh, 600px); padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); background: var(--midnight); color: #fff; }
.post-hero--overlay .container { width: 100%; }
.post-hero-bg { position: absolute; inset: 0; z-index: 0; }
.post-hero-bg picture, .post-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(7,10,24,.88) 0%, rgba(7,10,24,.66) 45%, rgba(7,10,24,.18) 100%),
  linear-gradient(0deg, rgba(7,10,24,.55) 0%, rgba(7,10,24,0) 55%); }
.post-hero--overlay .post-hero-text { max-width: 760px; }
.post-hero--overlay h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.post-hero--overlay .post-hero-lead { color: rgba(255,255,255,.88); }
.post-hero--overlay .crumbs, .post-hero--overlay .crumbs a, .post-hero--overlay .post-meta { color: rgba(255,255,255,.78); }
.post-hero--overlay .crumbs a:hover { color: #fff; }
.post-hero--overlay .crumbs [aria-current] { color: #fff; }
.post-hero--overlay .crumbs li + li::before { color: rgba(255,255,255,.5); }
.post-hero--overlay .post-meta .cat { color: #9DB6FF; }
.post-hero--overlay .post-meta a.cat:hover { color: #fff; }
@media (max-width: 767px) {
  .post-hero--overlay { min-height: 420px; }
  /* Text runs the full width on a phone, so darken evenly rather than left-heavy */
  .post-hero-scrim { background: linear-gradient(0deg, rgba(7,10,24,.9) 0%, rgba(7,10,24,.62) 60%, rgba(7,10,24,.45) 100%); }
  .post-hero--overlay .crumbs li:last-child { display: none; }   /* the title is right below */
}

/* "On this page" contents, above the article */
.post-toc { margin-bottom: clamp(28px, 4vw, 40px); }
/* Bullet list (not the rail's left-border style the shared .toc gives) */
.post-toc ul { list-style: disc; padding: 0 0 0 20px; margin: 0; columns: 2; column-gap: 40px; }
.post-toc li { break-inside: avoid; padding: 3px 0; color: var(--arch); }
.post-toc li::marker { font-size: 1.1em; }
.post-toc a { display: inline; padding: 0; border-left: 0; font-size: 15px; }
@media (max-width: 767px) { .post-toc ul { columns: 1; } }
.post-main { min-width: 0; }
.post-body h2 { scroll-margin-top: 140px; }
.post-body img { height: auto; }
.post-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--arch); color: var(--ink); font-style: italic; }

/* Post rail — site.js sets --side-top on .post-side so a tall rail parks by its bottom edge */
.post-aside.post-side { top: var(--side-top, 140px); }
.aside-cta .btn { margin: 6px 0 14px; }
.side-phone { display: block; color: #fff; margin-bottom: 16px; }
.side-phone span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9DB6FF; }
.side-phone strong { font-size: 1.25rem; color: #fff; }
.side-phone:hover strong { color: #C9D7FF; }
.side-points { display: grid; gap: 8px; font-size: 14px; }
.side-points li { display: flex; gap: 10px; align-items: flex-start; }
.side-points svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #9DB6FF; }
.side-card { padding: 24px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.side-card h2 { font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink); }
.side-card p { font-size: 15px; }
.side-links li + li { border-top: 1px solid var(--line); }
.side-links a { display: block; padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--slate); transition: color var(--t-micro) var(--ease); }
.side-links a:hover { color: var(--arch); }
.side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.side-tags .tab { min-height: 38px; padding: 6px 14px; font-size: 13px; }
.side-card--note { background: var(--arch-mist); border-color: var(--line-blue); }
.side-card--note h2 { color: var(--arch-deep); }

/* Legal pages */
.legal-body { margin: 0 auto; }

/* 404 */
.nf { padding-top: clamp(56px, 8vw, 112px); }
.nf-lead { margin: 0 auto 28px; }
.nf-actions { justify-content: center; }

/* Rail: recent articles */
.side-recent { padding: 20px 22px; }
.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list li + li { border-top: 1px solid var(--line); }
.recent-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--ink); }
.recent-item img, .recent-ph { flex: none; width: 72px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--arch-mist); }
.recent-text { min-width: 0; display: grid; gap: 3px; }
.recent-text strong { font-size: 14px; line-height: 1.35; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--t-micro) var(--ease); }
.recent-text time { font-size: 12.5px; color: var(--slate); }
.recent-item:hover strong { color: var(--arch); }
.recent-all { margin-top: 8px; font-size: 14px; }

/* Rail: quick quote form on the dark card */
/* Kept compact so it sits beside the article without dominating it. Field
   text stays 16px: smaller makes iOS zoom the page on focus. */
.post-side .side-quote { padding: 18px 18px 14px; border-radius: 20px; }
.side-quote h2 { font-size: 1.15rem; margin-bottom: 4px; }
.side-quote > p { font-size: 13.5px; line-height: 1.45; margin-bottom: 12px; }
.side-quote .form-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.side-quote .field input, .side-quote .field select { min-height: 44px; padding: 17px 12px 3px; border-color: transparent; border-radius: 10px; }
.side-quote .field select { padding-right: 36px; background-position: right 10px center; background-size: 16px; }
.side-quote .field label { left: 13px; top: 11px; font-size: 15px; }
.side-quote .field input:focus + label, .side-quote .field input:not(:placeholder-shown) + label,
.side-quote .field select + label { transform: translateY(-8px) scale(.72); }
.side-quote .field-error { color: #FFB4AB; font-size: 12px; margin-top: 4px; }
.side-quote .btn { min-height: 44px; margin: 0; padding: 10px 16px; font-size: 15px; }
.side-quote .form-status { padding: 12px 2px 4px; }
.side-quote .form-status h3 { margin: 0 0 4px; color: #fff; font-size: 1.1rem; }
.side-quote .form-status p { font-size: 14px; }
.side-quote .side-phone { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font-size: 14px; }
.side-quote .side-phone span { display: inline; font-size: 11px; margin-right: 6px; }
.side-quote .side-phone strong { font-size: 1.05rem; }

/* "Topics" / storm note, in a row under the article */
.post-more { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 767px)  { .post-more { grid-template-columns: 1fr; } }

/* "Read next" — plain links under the article, above the services carousel */
.read-next { margin-top: clamp(40px, 5vw, 64px); }
.read-next h2 { font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.read-next ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.read-next li { border-bottom: 1px solid var(--line); }
.read-next a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 600; color: var(--ink); transition: color var(--t-micro) var(--ease); }
.read-next a svg { flex: none; width: 20px; height: 20px; color: var(--arch); transition: transform var(--t-micro) var(--ease); }
.read-next a:hover { color: var(--arch); }
.read-next a:hover svg { transform: translateX(4px); }

/* Services carousel under the post: a scroll-snap row of tiles. It swipes
   without script; site.js pages the prev/next buttons by one card. */
.svc-carousel .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.svc-car-nav { display: flex; gap: 10px; }
.svc-car-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-blue); background: var(--paper); color: var(--arch); box-shadow: var(--shadow-sm); cursor: pointer; transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease); }
.svc-car-btn svg { width: 20px; height: 20px; }
.svc-car-btn:hover:not(:disabled) { background: var(--arch); color: #fff; }
.svc-car-btn:disabled { opacity: .35; cursor: default; }
.svc-car-nav[hidden] { display: none; }
.svc-track { --per: 4; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * 20px) / var(--per)); gap: 20px; list-style: none; margin: 0; padding: 4px 2px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.svc-track::-webkit-scrollbar { display: none; }   /* arrows, swipe and arrow keys do the scrolling */
.svc-track > li { scroll-snap-align: start; display: flex; }
.svc-track:focus-visible { outline: 2px solid var(--arch); outline-offset: 4px; border-radius: 12px; }
.svc-card { width: 100%; }
.svc-card .arch-img { aspect-ratio: 4 / 3; border-radius: 160px 160px 14px 14px; margin-bottom: 18px; transform: none; }
.svc-card h3 { font-size: 1.25rem; }
.svc-card p { font-size: 15px; }
.svc-card-ph { display: grid; place-items: center; color: var(--arch); }
.svc-card-ph svg { width: 56px; height: 56px; }
@media (max-width: 1180px) { .svc-track { --per: 3; } }
@media (max-width: 1024px) { .svc-track { --per: 2; } }
@media (max-width: 767px)  {
  .svc-track { grid-auto-columns: 78%; gap: 14px; }   /* the next card peeks in, so it reads as swipeable */
  .svc-car-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .svc-track { scroll-behavior: auto; } }

/* Breadcrumb list: no numbering (ol default) */
.crumbs { list-style: none; padding-left: 0; }