/* Page styles for /guides/ and the guide articles (builder: guides).
   Small on purpose: layout, type and components come from site.css. Quote-only site: no prices here, ever. */

/* ---------- Typographic hero (icon ring beside the eyebrow, broken-circle mark on the right) ---------- */
.gd-hero-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .gd-hero .gd-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem); align-items: center; column-gap: clamp(2rem, 1rem + 5vw, 6rem); }
}
.gd-hero-text { display: grid; gap: var(--space-5); }
.gd-hero-text h1 { max-width: 20ch; }
.gd-hero-text .lead { max-width: 54ch; }
.gd-hero-eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.page-hero .gd-hero-eyebrow .eyebrow { margin: 0; }
.gd-hero-eyebrow .icon-ring { width: 48px; height: 48px; }
.gd-hero-eyebrow .icon-ring .icon { width: 22px; height: 22px; }
.gd-hero-mark { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; justify-self: end; color: var(--gt-ink); }
.gd-hero-mark .gt-arc { position: absolute; inset: 0; --arc-w: 0.45; }
.gd-hero-mark-text { display: grid; gap: var(--space-3); justify-items: center; text-align: center; margin: 0;
  font: italic 400 var(--step-2)/1.1 var(--font-display); color: var(--gt-ink-2); }
.gd-hero-mark-text span + span::before { content: ""; display: block; width: 1.75rem; height: 1px; margin: 0 auto var(--space-3); background: var(--gt-line); }
@media (max-width: 859px) { .gd-hero-mark { display: none; } }

.guide-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: var(--step--2); letter-spacing: 0.04em; color: var(--gt-ink-3); }
.guide-meta > span + span::before { content: "·"; margin-right: 12px; color: var(--gt-line); }
@media (max-width: 599px) { .guide-meta { flex-direction: column; gap: 2px; } .guide-meta > span + span::before { content: none; } }

/* ---------- Article body ---------- */
.guide-body { padding-top: 0; }
.guide-body > * + * { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.guide-body .prose { max-width: none; }
.guide-body .prose h2 { margin-top: 0; scroll-margin-top: calc(var(--header-h) + 20px); }
.guide-body [id] { scroll-margin-top: calc(var(--header-h) + 20px); }
.guide-body .prose > h2 + p { margin-top: 0.8em; }
.guide-body .prose .answer { color: var(--gt-ink); font-size: var(--step-1); line-height: 1.5; font-weight: 300; }
.guide-body .prose .answer strong { font-weight: 500; }
.guide-body .prose h3 { font-size: var(--step-1); }

/* Lists and components used inside .prose keep their own spacing */
.prose :is(.ticks, .feature-list, .gd-boxes), .prose .checklist-room ul { padding-left: 0; }
.prose .checklist-grid { margin-top: 1.5em; }
.prose .checklist-room li { color: var(--gt-ink); }
.prose .checklist-room h3 { margin-top: 0; }
.prose .table-wrap { margin-top: 1.4em; }
.prose table.data th, .prose table.data td { padding: 12px 16px; }
.prose ol.guide-steps { gap: 0.8em; }
.prose ol.guide-steps li::marker { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; color: var(--gt-ink); }
.prose ol.guide-steps strong { color: var(--gt-ink); font-weight: 500; }
.prose .feature-list strong { color: var(--gt-ink); }
.guide-body .prose .feature-list span { font-size: var(--step-0); line-height: 1.6; }
.prose .media-round { margin-top: 1.6em; }

/* Small tables that should fit a phone without sideways scrolling */
.guide table.data.wrap { min-width: 0; }
.guide table.data thead th { white-space: normal; }
.guide table.data.wrap tbody th { white-space: normal; min-width: 7.5rem; width: 28%; }
.guide table.data.wrap td { white-space: normal; min-width: 9rem; }
@media (max-width: 599px) {
  .guide table.data th, .guide table.data td { padding: 10px 10px; }
  .guide table.data.wrap tbody th { min-width: 6rem; }
  .guide table.data.wrap td { min-width: 7.5rem; }
}
.table-wrap { position: relative; }

/* The short answer */
.guide-key { padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.guide-key h2 { font-size: var(--step-3); }
.guide-key .table-wrap { background: var(--gt-paper); }

/* In this guide */
.guide-toc { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--gt-ink); }
.guide-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: toc; font-size: var(--step--1); }
.guide-toc li { counter-increment: toc; display: grid; grid-template-columns: 2.1em 1fr; align-items: baseline; }
.guide-toc li::before { content: counter(toc, decimal-leading-zero); font: 500 var(--step--2)/1 var(--font-sans); letter-spacing: 0.06em; color: var(--gt-ink-3); }
.guide-toc a { color: var(--gt-ink); text-decoration: none; padding-block: 4px; }
.guide-toc a:hover { text-decoration: underline; }
@media (max-width: 599px) { .guide-toc ol { grid-template-columns: 1fr; } }

/* Tick boxes for printable checklists (empty squares to mark by hand) */
.gd-boxes { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: var(--step--1); }
.gd-boxes li { position: relative; padding-left: 28px; color: var(--gt-ink); }
.gd-boxes li::before { content: ""; position: absolute; left: 0; top: 0.22em; width: 15px; height: 15px; border: 1.5px solid var(--gt-ink); border-radius: 3px; }
.gd-boxes.gd-boxes--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
@media (max-width: 639px) { .gd-boxes.gd-boxes--2col { grid-template-columns: minmax(0, 1fr); } }
.checklist-room .gd-boxes li { display: block; }
.prose > .gd-boxes { margin-top: 1.4em; }
.gd-boxes .gd-who { display: block; margin-top: 2px; font-size: var(--step--2); letter-spacing: 0.02em; color: var(--gt-ink-3); }

/* Frequency blocks (weekly / monthly / quarterly) */
.gd-freq { padding: var(--space-5); background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-m); }
.gd-freq + .gd-freq { margin-top: var(--space-4); }

/* Linen call-out (our answers, make it yours) */
.guide-aside { display: grid; gap: var(--space-5); padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); background: var(--gt-linen); border-radius: var(--radius-l); }
.guide-aside h2 { font-size: var(--step-3); }
.guide-aside .table-wrap { background: var(--gt-white); }

/* Letter template (switching guide): a white sheet; [bracketed] fill-ins in muted italics, distinct from owner placeholders */
.prose .gd-letter { margin: 1.5em 0 0; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
.gd-letter figcaption { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: var(--border-hair); font-size: var(--step--2); letter-spacing: 0.04em; color: var(--gt-ink-3); }
.gd-letter-body { font-size: var(--step-0); line-height: 1.65; }
.prose .gd-letter-body p, .prose .gd-letter-body li { color: var(--gt-ink); }
.gd-letter-body > * { margin: 0; }
.gd-letter-body > * + * { margin-top: 1em; }
.prose .gd-letter-body ul { list-style: disc; }
.gd-letter-body strong { font-weight: 500; }
.gd-fill { font-style: italic; color: var(--gt-ink-3); border-bottom: 1px dotted currentColor; }

/* Sources */
.guide-sources ol { font-size: var(--step--1); }
.guide-sources a { overflow-wrap: anywhere; }

/* Hub */
.guides-list { padding-top: 0; }
.guide-card .tag { align-self: start; }
.guide-card h2, .guide-card h3 { font-size: var(--step-2); }
.gd-jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: var(--space-5) 0 0; font-size: var(--step--1); }

/* A plain section after a band keeps its top padding */
.section--band + .section:not(.section--band):not(.section--tint):not(.theme-ink) { padding-top: var(--space-section); }

@media print {
  .guide-toc, .guide-related, .gd-hero-mark, .gd-hero .btn-row, .gd-hero .icon-ring, .guide-aside .btn-row { display: none !important; }
  .page-hero { padding-block: 0 0.5rem; }
  .guide-body > * + * { margin-top: 1.5rem; }
  .guide-body .prose h2, .guide-body .prose .answer { break-after: avoid; }
  .guide-key { box-shadow: none; border: 0; padding: 0; }
  .guide-key .table-wrap, .table-wrap tr { break-inside: avoid; }
  .gd-freq, .checklist-room { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .guide-aside { background: none; border: 1px solid #bbb; }
  .gd-boxes li { break-inside: avoid; }
  .gd-boxes li::before { border-color: #000; }
  .prose .gd-letter { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .gd-fill { color: #000; }
  .guide-sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}