/* =================================================================================================
   Guides (content workstream): /guides, /guides/{slug}, and the content admin previews.
   Built on base.css tokens and components (cards, chips, bands, frames); this file only adds the
   reading layout: a comfortable measure, generous rhythm, a table of contents beside the text on
   wide screens, and prose styles for the Markdown body (.guide-body). Logical properties only.
   ================================================================================================= */

/* ---- Breadcrumbs -------------------------------------------------------------------------------- */

.guide-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-size: var(--text-s);
  color: var(--ink-soft);
}
.guide-crumbs li + li::before {
  content: "›";
  margin-inline-end: var(--space-2xs);
  color: var(--ink-soft);
}
.guide-crumbs a { color: var(--ink-soft); }
.guide-crumbs a[aria-current="page"] { color: var(--ink); text-decoration: none; }

/* ---- Index -------------------------------------------------------------------------------------- */

.guides-head { margin-block: var(--space-l) var(--space-m); max-inline-size: 48rem; }
.guides-filter { margin-block-end: var(--space-l); }
.guides-filter .chip { text-decoration: none; }
.guides-count {
  display: inline-block;
  min-inline-size: 1.6em;
  margin-inline-start: var(--space-3xs);
  padding-inline: 0.4em;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 0.85em;
  text-align: center;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
}
.guide-card { display: flex; flex-direction: column; }
.guide-card .card-body { flex: 1; display: flex; flex-direction: column; }
.guide-card .card-body > .fine { margin-block-start: auto; padding-block-start: var(--space-xs); color: var(--ink-soft); }
.guide-card .card-title { margin: 0; }
.guide-card .card-title a { color: var(--ink); }
.guide-card .eyebrow { margin: 0; }

/* The first featured guide spans two columns on wide screens. */
@media (min-width: 48rem) {
  .guide-card-lead { grid-column: span 2; }
  .guide-card-lead .card-title { font-size: var(--h2); }
}

.guides-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-block: var(--space-l);
}

/* ---- Article ------------------------------------------------------------------------------------ */

.guide { margin-block-start: var(--space-m); }
.guide-head { max-inline-size: 48rem; margin-block-end: var(--space-m); }
.guide-head h1 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1.15; }
.guide-summary { margin: 0; color: var(--ink-soft); }
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3xs);
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--display);
}
.guide-fallback { max-inline-size: 48rem; margin-block-end: var(--space-m); }
.guide-hero { margin-block-end: var(--space-l); }
.guide-hero .frame { box-shadow: var(--shadow); }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: start; }
.guide-layout > * { min-inline-size: 0; }
@media (min-width: 64rem) {
  .guide-layout { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: var(--space-xl); }
  .guide-toc { position: sticky; inset-block-start: var(--space-m); }
}

.guide-toc {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  background: var(--sand);
  font-family: var(--display);
  font-size: var(--text-s);
}
.guide-toc-title {
  margin: 0 0 var(--space-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral-ink);
}
.guide-toc ol, .guide-toc-list { margin: 0; padding-inline-start: 1.2em; }
.guide-toc li + li, .guide-toc-list li + li { margin-block-start: var(--space-3xs); }
.guide-toc a { color: var(--ink); }
.guide-toc a:hover { color: var(--lagoon-deep); }

/* ---- Prose: the Markdown body ------------------------------------------------------------------- */

.guide-body {
  max-inline-size: var(--measure);
  font-family: var(--body);
  font-size: var(--text-m);
  line-height: 1.7;
}
.guide-body > * { margin-block: 0; }
.guide-body > * + * { margin-block-start: 1.05em; }
.guide-body h2 {
  margin-block-start: 1.9em;
  font-size: var(--h3);
  line-height: 1.25;
  scroll-margin-block-start: var(--space-m);
}
.guide-body h3 { margin-block-start: 1.6em; font-size: var(--h4); line-height: 1.3; }
.guide-body h4, .guide-body h5, .guide-body h6 { margin-block-start: 1.4em; font-size: var(--text-m); }
.guide-body h2 + *, .guide-body h3 + *, .guide-body h4 + * { margin-block-start: 0.5em; }
.guide-body > :first-child { margin-block-start: 0; }
.guide-body ul, .guide-body ol { padding-inline-start: 1.4em; }
.guide-body li + li { margin-block-start: 0.4em; }
.guide-body li::marker { color: var(--coral-deep); }
.guide-body ol > li::marker { font-family: var(--display); font-weight: 800; }
.guide-body strong { font-weight: 700; color: var(--ink); }
.guide-body blockquote {
  padding: var(--space-xs) var(--space-m);
  border-inline-start: 4px solid var(--lagoon-line);
  border-start-end-radius: var(--radius-s);
  border-end-end-radius: var(--radius-s);
  background: var(--foam);
}
.guide-body hr { border: 0; border-block-start: 2px dashed var(--sand-deep); margin-block: 2em; }
.guide-body img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.guide-body code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--sand);
  font-size: 0.9em;
}
.guide-body table {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-s);
  line-height: 1.5;
}
.guide-body th, .guide-body td {
  padding: 0.55em 0.8em;
  border-block-end: 1px solid var(--sand-deep);
  text-align: start;
  vertical-align: top;
}
.guide-body thead th {
  font-family: var(--display);
  font-weight: 800;
  background: var(--sand);
  border-block-end: 2px solid var(--sand-deep);
}
.guide-body tbody tr:nth-child(even) { background: var(--tile-low); }

/* ---- After the article -------------------------------------------------------------------------- */

.guide-cities { margin-block: var(--space-xl) var(--space-l); }
.guide-cities .chip { text-decoration: none; }
.guides-grid-related { margin-block-start: var(--space-m); }
.guide-cta { max-inline-size: 46rem; margin-inline: auto; margin-block: var(--space-xl); }

/* ---- FAQ (city preview) and admin previews ------------------------------------------------------ */

.guide-faq > div + div { margin-block-start: var(--space-s); }
.guide-faq dt { font-family: var(--display); font-weight: 800; }
.guide-faq dd { margin: var(--space-3xs) 0 0; }
.guide-preview { max-inline-size: 60rem; }
.guide-preview-title { font-family: var(--display); font-size: var(--h2); font-weight: 800; line-height: 1.2; }