/* ── The guide (/guide, /guide/{slug}) ────────────────────────────
   Loaded after home.css, which supplies the shared chrome (.container,
   .section-label, .section-title, .btn-primary) and the nav/footer this page
   reuses. Everything here is written against the brand tokens in theme.css —
   never the legacy --coral-* aliases, which are remapped by ROLE and now
   resolve to palm green. */

/* ── Archive ─────────────────────────────────────────────────── */

.guide {
  /* Clear the fixed nav, same arithmetic as .legal in home.css. */
  padding-top: calc(var(--space-7) + 64px + env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-9);
}

.guide-head {
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.guide-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  /* Roomy enough for the descenders in "guide" — a 1.0 display line-height
     clips them against the intro below. */
  line-height: 1.12;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}

.guide-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--charcoal-soft);
}

.guide-empty {
  padding: var(--space-8) 0;
  font-size: 1rem;
  color: var(--stone);
}

.guide-empty a {
  color: var(--palm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Cards ───────────────────────────────────────────────────── */

.guide-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.guide-card {
  /* min-width:0 keeps a long unbroken title from widening its grid track and
     pushing the whole row into horizontal overflow. */
  min-width: 0;
}

.guide-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out);
}

.guide-card > a:hover {
  border-color: var(--palm);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px var(--charcoal);
}

.guide-card > a:focus-visible {
  outline: 2px solid var(--palm);
  outline-offset: 3px;
}

.guide-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--panel);
}

.guide-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  /* Pushes the meta line to the card's foot so a row of cards with titles of
     different lengths still lines its dates up. */
  flex: 1 1 auto;
}

.guide-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--charcoal);
}

.guide-card-excerpt {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--charcoal-soft);
}

.guide-card .article-meta {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* The newest article on page one. Two columns wide with the image beside the
   copy above 780px; below that it is an ordinary card, because a side-by-side
   lead in a single-column grid is just a card with a squashed picture. */
@media (min-width: 780px) {
  .guide-card--lead {
    grid-column: 1 / -1;
  }
  .guide-card--lead > a {
    flex-direction: row;
    align-items: stretch;
  }
  .guide-card--lead .guide-card-media {
    flex: 0 0 52%;
    /* A ratio, not `auto`. With auto the row's height comes from the photo's
       intrinsic proportions, so one portrait upload turns the lead card into a
       full-screen banner. */
    aspect-ratio: 3 / 2;
  }
  .guide-card--lead .guide-card-body {
    justify-content: center;
    padding: var(--space-7);
    gap: var(--space-3);
  }
  .guide-card--lead .guide-card-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  }
  .guide-card--lead .guide-card-excerpt {
    font-size: 1rem;
  }
  .guide-card--lead .article-meta {
    margin-top: var(--space-2);
  }
}

/* ── Meta line ───────────────────────────────────────────────── */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ── Pagination ──────────────────────────────────────────────── */

.guide-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.guide-page-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--palm);
}

.guide-page-link:hover {
  color: var(--palm-dark);
}

.guide-page-count {
  font-size: 0.85rem;
  color: var(--stone);
}

/* ── Article ─────────────────────────────────────────────────── */

.article-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(58vh, 520px);
  padding-top: calc(var(--space-8) + 64px + env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-7);
  background: var(--charcoal);
  overflow: hidden;
}

/* No image: a shorter plain band rather than a tall empty rectangle. An
   article whose illustration failed to generate is still publishable. */
.article-hero--plain {
  min-height: 0;
  padding-bottom: var(--space-6);
}

.article-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero-scrim {
  position: absolute;
  inset: 0;
  /* Weighted towards the bottom, where the copy sits. The hero image is
     whatever the generator produced or the host uploaded, so the scrim has to
     carry the contrast on its own rather than assume a dark photograph. */
  background: linear-gradient(
    to top,
    oklch(20% 0.01 67 / 0.92) 0%,
    oklch(20% 0.01 67 / 0.78) 30%,
    oklch(20% 0.01 67 / 0.45) 65%,
    oklch(20% 0.01 67 / 0.15) 100%
  );
}

.article-hero-copy {
  position: relative;
  max-width: 900px;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-accent);
  margin-bottom: var(--space-3);
}

.article-back:hover {
  color: var(--white);
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.article-hero .article-meta {
  color: oklch(93% 0.01 82 / 0.95);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  max-width: 1080px;
}

@media (min-width: 940px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: var(--space-8);
  }
}

/* ── Article body ────────────────────────────────────────────────
   These selectors style body_html, which is written by the markdown renderer
   and sanitized at write time (models.CreatePost → render.RenderBody). The
   element list here must stay in step with render.articlePolicy's allowlist:
   an element the sanitiser permits but this file never styles ships unstyled
   to a reader. */

.article-body {
  /* min-width:0 so a long URL or a wide table scrolls inside the column
     instead of stretching the grid track. */
  min-width: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--charcoal);
}

.article-body > * + * {
  margin-top: var(--space-4);
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--charcoal);
  margin-top: var(--space-7);
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--charcoal);
  margin-top: var(--space-6);
}

.article-body h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin-top: var(--space-5);
}

.article-body a {
  color: var(--palm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-body a:hover {
  color: var(--palm-dark);
}

.article-body ul,
.article-body ol {
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.article-body li::marker {
  color: var(--palm);
}

.article-body blockquote {
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--palm-soft);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--charcoal-soft);
}

.article-body img {
  width: 100%;
  border-radius: var(--radius-md);
}

.article-body figure figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--stone);
}

/* Wide content scrolls inside its own container. Without this a generated
   comparison table pushes the page into horizontal overflow on a phone —
   which is a layout bug the reader has to discover by scrolling sideways. */
.article-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.article-body th,
.article-body td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.article-body th {
  background: var(--panel);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.article-body pre {
  padding: var(--space-4);
  background: var(--panel);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.88rem;
}

.article-body code {
  font-size: 0.9em;
  background: var(--panel);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

.article-body pre code {
  background: none;
  padding: 0;
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: var(--space-6);
}

.article-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--stone);
}

.article-disclosure iconify-icon {
  flex: 0 0 auto;
  margin-top: 0.28em;
}

/* ── Article CTA ─────────────────────────────────────────────── */

.article-cta {
  padding: var(--space-6);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

@media (min-width: 940px) {
  .article-cta {
    position: sticky;
    /* Clears the fixed nav when the aside sticks. */
    top: calc(64px + var(--space-5));
  }
}

.article-cta h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.article-cta p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--charcoal-soft);
  margin-bottom: var(--space-5);
}

.article-cta-rate {
  margin: var(--space-3) 0 0;
  font-size: 0.85rem;
  color: var(--stone);
}

/* ── Related ─────────────────────────────────────────────────── */

.guide-related {
  padding-block: var(--space-8);
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.guide-related .guide-card > a {
  background: var(--white);
}