/* Content section stylesheet (blog + guides).
   Loaded by base_content.html. Critical above-the-fold rules are inlined via
   includes/critical-content-css.html; everything else lives here. */

/* ── Typography variables ─────────────────────────────────────────── */
:root {
  --content-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --content-fg: #1f2433;
  --content-fg-muted: #5a6173;
  --content-accent: #1d4ed8;
  --content-accent-hover: #1e40af;
  --content-rule: #e5e7eb;
  --content-soft: #f6f8fb;
  --content-soft-2: #eef2f7;
}

/* ── Layout containers ───────────────────────────────────────────── */
.content-container {
  max-width: 760px;
  margin: 2rem auto 4rem;
  padding: 0 1.25rem;
  font-family: var(--content-sans);
  color: var(--content-fg);
}

.content-container--wide {
  max-width: 1080px;
}

.content-container header h1 {
  font-family: var(--content-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1rem;
  color: var(--content-fg);
}

/* ── Typography for rendered body_html ───────────────────────────── */
.content-body {
  font-family: var(--content-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--content-fg);
  /* Float-clear container so floated images don't escape the article. */
  overflow: auto;
}

.content-body h2 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
  color: var(--content-fg);
  clear: both;
}

.content-body h3 {
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 1.75rem 0 0.5rem;
  color: var(--content-fg);
}

.content-body p {
  margin: 0 0 1.1rem;
}

.content-body strong {
  font-weight: 600;
  color: var(--content-fg);
}

.content-body em {
  font-style: italic;
}

.content-body ul,
.content-body ol {
  margin: 0 0 1.1rem 1.25rem;
  padding-left: 0.75rem;
}

.content-body li {
  margin-bottom: 0.4rem;
}

.content-body a {
  color: var(--content-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.content-body a:hover {
  color: var(--content-accent-hover);
  text-decoration-thickness: 2px;
}

.content-body blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 4px solid var(--content-accent);
  background: var(--content-soft);
  color: var(--content-fg);
  font-style: normal;
  border-radius: 0 6px 6px 0;
}

.content-body blockquote p {
  margin: 0.25rem 0;
}

/* ── Inline images: alternating left/right floats ────────────────── */
/* The markdown renderer tags each inline <picture> with content-image-right
   (odd-numbered) or content-image-left (even-numbered) so the body breathes
   left-right as you scroll. markdown-it wraps the standalone image in a <p>,
   so the float has to live on the WRAPPING PARAGRAPH (via :has()), not just
   the <picture> — otherwise the <p> reserves a full line and the image
   looks full-width instead of floated. :has() is broadly supported in 2026
   (Chrome 105+, Safari 15.4+, Firefox 121+); browsers that don't support it
   render the image as a normal full-width block, which is still readable. */

.content-body p:has(> picture.content-image-right),
.content-body p:has(> picture.content-image-left) {
  /* Fallback width for any floated image that lacks an orientation class
     (e.g. content rendered before markdown.py started tagging orientation and
     not yet re-synced). The orientation rules below override this via source
     order. Without this, such a float would collapse to zero width. */
  width: 36%;
  max-width: 300px;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
  border-radius: 6px;
  /* line-height: 0 strips the leftover baseline space between the bottom of
     the <img> and the bottom of its wrapping inline-block context — half of
     the "white margin below the image" bug. */
  line-height: 0;
}

/* Size the float by orientation. Landscape images can be wide without towering
   over the prose, so they get a generous width. Portrait images are sized
   narrower: a tall image at a wide float-width overruns the paragraph beside it
   and leaves an orphaned white column ("the image just sits alone at the bottom
   of the paragraph"). The renderer tags orientation in markdown.py. Equal
   selector specificity to the base rule above, so source order makes these win. */
.content-body p:has(> picture.content-image-landscape) {
  width: 44%;
  max-width: 430px;
}

.content-body p:has(> picture.content-image-portrait) {
  width: 32%;
  max-width: 260px;
}

.content-body p:has(> picture.content-image-right) {
  float: right;
  margin-left: 1.5rem;
  margin-right: 0;
  clear: right;
}

.content-body p:has(> picture.content-image-left) {
  float: left;
  margin-left: 0;
  margin-right: 1.5rem;
  clear: left;
}

/* Lists, blockquotes, and code blocks must clear prior floats. Without this,
   a floated image whose top sits in a paragraph can have its bottom edge poke
   into the following <ol> / <ul> / <blockquote>, which makes the list items
   indent visually weird (text starts beside the float). H2 already has
   clear: both for the same reason. */
.content-body ol,
.content-body ul,
.content-body blockquote,
.content-body pre {
  clear: both;
}

.content-body picture.content-image-right,
.content-body picture.content-image-left {
  display: block;
}

.content-body picture.content-image-right > img,
.content-body picture.content-image-left > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Don't float on narrow viewports; full-width centered reads better. */
@media (max-width: 720px) {
  .content-body p:has(> picture.content-image-right),
  .content-body p:has(> picture.content-image-left) {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
  }
}

/* Default for any other body image (not floated) */
.content-body img,
.content-body picture:not(.content-image-right):not(.content-image-left) img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 6px;
}

/* GUIDES: inline screenshots read as full-width blocks between paragraphs, not
   floats. Guide sections are short and structured, so the blog's float would
   leave a screenshot stranded to one side with an empty column beside it.
   Un-float the wrapping <p> and let the image span the content column. (The
   blog keeps its left/right float rhythm; this is scoped to guide detail.) */
.content-guide-detail .content-body p:has(> picture.content-image-right),
.content-guide-detail .content-body p:has(> picture.content-image-left) {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 1.75rem 0;
}

.content-body figure {
  margin: 1.5rem 0;
}

.content-body figcaption {
  font-size: 0.875rem;
  color: var(--content-fg-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* ── FAQ accordion (rendered by markdown.py as <details>) ────────── */
.content-body .content-faq {
  clear: both;
  margin-top: 2.5rem;
  border-top: 1px solid var(--content-rule);
  padding-top: 1rem;
}

.content-body details.content-faq-item {
  background: var(--content-soft);
  border: 1px solid var(--content-rule);
  border-radius: 8px;
  margin: 0.5rem 0;
  padding: 0;
  transition: background 0.15s ease;
}

.content-body details.content-faq-item[open] {
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.content-body details.content-faq-item > summary {
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--content-fg);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  user-select: none;
}

.content-body details.content-faq-item > summary::-webkit-details-marker {
  display: none;
}

.content-body details.content-faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--content-fg-muted);
  transition: transform 0.15s ease;
}

.content-body details.content-faq-item[open] > summary::after {
  content: "−";
}

.content-body details.content-faq-item > summary:hover {
  color: var(--content-accent);
}

.content-body details.content-faq-item > div.content-faq-answer {
  padding: 0 1.1rem 1rem;
  color: var(--content-fg);
}

.content-body details.content-faq-item > div.content-faq-answer > p {
  margin: 0 0 0.6rem;
}

.content-body details.content-faq-item > div.content-faq-answer > p:last-child {
  margin-bottom: 0;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  clear: both;
}

.content-body th,
.content-body td {
  border: 1px solid var(--content-rule);
  padding: 0.55rem 0.8rem;
  text-align: left;
}

.content-body thead th {
  background: var(--content-soft);
  font-weight: 600;
}

/* ── Code ────────────────────────────────────────────────────────── */
.content-body code {
  background: var(--content-soft);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.content-body pre {
  background: var(--content-soft);
  border: 1px solid var(--content-rule);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  clear: both;
}

.content-body pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
}

/* ── Post / guide list (index pages) ─────────────────────────────── */
.post-list,
.guide-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.post-list li,
.guide-list li {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--content-rule);
}

.post-list li:last-child,
.guide-list li:last-child {
  border-bottom: none;
}

/* ── Detail meta (dates, reading time) ───────────────────────────── */
.content-meta {
  color: var(--content-fg-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.content-meta time {
  color: var(--content-fg-muted);
}

/* ── Hero image ──────────────────────────────────────────────────── */
.content-hero {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
              0 8px 24px rgba(15, 23, 42, 0.08);
}

/* ── Guide CTA box ───────────────────────────────────────────────── */
.guide-cta {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--content-rule);
  border-radius: 8px;
  background: var(--content-soft);
}

.guide-cta--entitled {
  border-color: #198754;
  background: #f0fbf4;
}

/* ── Prev/next series nav ────────────────────────────────────────── */
.guide-series-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--content-rule);
}

/* ── Related / cluster sections ──────────────────────────────────── */
.content-related,
.content-cluster-posts {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--content-rule);
}

/* ── Pexels image credits (TOS attribution) ──────────────────────── */
/* Quiet, muted block — same register as .content-meta. */
.content-pexels-credits {
  clear: both;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--content-rule);
  color: var(--content-fg-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.content-pexels-credits-intro {
  margin: 0 0 0.35rem;
}

.content-pexels-credits ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-pexels-credits li {
  margin: 0;
}

.content-pexels-credits a {
  color: var(--content-fg-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.content-pexels-credits a:hover {
  color: var(--content-fg);
}

/* ── Guide category grouping (index) ─────────────────────────────── */
.guide-category {
  margin-bottom: 2.5rem;
}

.guide-category h2 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

/* ── Sign-off paragraph (last line, casual) ──────────────────────── */
.content-body p:last-of-type {
  font-weight: 500;
}

/* ── Index layout: card system (blog + guides) ───────────────────── */
.content-index-header {
  margin-bottom: 1.75rem;
}

.content-index-eyebrow {
  color: var(--content-fg-muted);
  font-size: 0.95rem;
  margin: 0.25rem 0 0;
}

.content-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

/* Whole-card link. Reset the inherited body-link underline/color. */
.content-card,
.content-feature-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--content-rule);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--content-fg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.content-card:hover,
.content-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10);
  border-color: var(--content-accent);
  text-decoration: none;
}

/* 16:9 media slot — image OR gradient fallback tile. */
.content-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--content-soft-2);
}

.content-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--content-soft-2) 0%, #dbe4f3 100%);
}

.content-card__fallback .mdi {
  font-size: 3rem;
  color: var(--content-accent);
  opacity: 0.45;
}

.content-card__body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content-card__kicker {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--content-accent);
  margin-bottom: 0.4rem;
}

.content-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--content-fg);
}

.content-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--content-fg-muted);
  margin: 0 0 0.9rem;
  /* Clamp to 3 lines; degrades to full text where -webkit-line-clamp is absent. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-card__meta {
  margin: auto 0 0;
  font-size: 0.82rem;
  color: var(--content-fg-muted);
}

/* ── Featured (newest) blog card: horizontal on wide, stacks on mobile ── */
.content-feature-card {
  flex-direction: row;
  margin-bottom: 2.5rem;
}

.content-feature-card__media {
  position: relative;
  flex: 0 0 46%;
  background: var(--content-soft-2);
  min-height: 260px;
}

.content-feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-feature-card__media .content-card__fallback {
  position: absolute;
  inset: 0;
}

.content-feature-card__body {
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-feature-card__title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.65rem;
}

.content-feature-card__excerpt {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--content-fg-muted);
  margin: 0 0 1rem;
}

@media (max-width: 720px) {
  .content-feature-card {
    flex-direction: column;
  }
  .content-feature-card__media {
    flex-basis: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .content-feature-card__body {
    padding: 1.25rem 1.25rem 1.4rem;
  }
}

/* ── Guides index: category section header ───────────────────────── */
.content-cat-section {
  margin-bottom: 2.75rem;
}

.content-cat-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--content-rule);
}

.content-cat-header .mdi {
  color: var(--content-accent);
  font-size: 1.5rem;
}

/* ── Detail: tag chips ───────────────────────────────────────────── */
.content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.content-tags li {
  margin: 0;
}

.content-tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--content-soft-2);
  color: var(--content-fg-muted);
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.content-tag:hover {
  background: var(--content-accent);
  color: #fff;
}

/* Guide tag chips are display-only <span>s — keep them inert (no link affordance). */
span.content-tag {
  cursor: default;
}

span.content-tag:hover {
  background: var(--content-soft-2);
  color: var(--content-fg-muted);
}

/* Guide detail has no hero image between the tag chips and the body (unlike
   the blog, where the hero supplies the separation). The tag chips have no
   bottom margin, so without this the chips butt directly against the opening
   text. Add an explicit gap below the guide header to match the blog's rhythm. */
.content-guide-detail header {
  margin-bottom: 2rem;
}

/* ── Detail: related posts as compact mini-cards ─────────────────── */
.content-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.content-related-grid li {
  margin: 0;
  padding: 0;
  border: none;
}

.content-related-card {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  text-decoration: none;
  color: var(--content-fg);
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.content-related-card:hover {
  border-color: var(--content-accent);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  text-decoration: none;
}

/* ── Detail: prev/next series cards (guides) ─────────────────────── */
.content-series {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--content-rule);
}

.content-series__link {
  flex: 1;
  max-width: 48%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  text-decoration: none;
  color: var(--content-fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.content-series__link:hover {
  border-color: var(--content-accent);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  text-decoration: none;
}

.content-series__link--next {
  margin-left: auto;
  text-align: right;
}

.content-series__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-fg-muted);
  margin-bottom: 0.2rem;
}

.content-series__title {
  font-weight: 600;
  line-height: 1.3;
}