/*
 * Éclore Aesthetics — Journal (blog) templates (VISUAL-DESIGN §3, §5.5, §5.9, §9)
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles for home.php (Journal index), category.php (pillar archives),
 * single.php (article), and template-parts/post-card.php. Mirrors the editorial
 * service-card / archive system: a near-flat 3:2 media card → Familjen caps
 * category + date → Familjen H3 → Inter excerpt → text-link "Read". The single
 * article runs a narrow Inter measure with Familjen headings, and closes on the
 * one Terracotta CTA band.
 *
 * Grounds are set in markup via .section-bg--* (colour only); each section owns
 * its vertical rhythm here. Tokens only — no hardcoded hex / spacing / duration.
 * Buttons (.btn--text, .btn--inverse), the focus ring, and the .pagination
 * chrome are inherited from buttons.css / global.css / archive.css and reused.
 * Breakpoints (literal): md 768px, lg 1024px.
 */

/* ─── 1. Post grid — 1-up → 2-up md → 3-up lg ─────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 2. Post card ────────────────────────────────────────────────────────────── */
.post-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.post-card__link {
  display: block;
  text-decoration: none;
}

.post-card__thumb {
  position: relative;
  aspect-ratio: 3 / 2; /* editorial landscape; dimensions reserved for CLS */
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-stone);
}

.post-card__thumb img,
.post-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.post-card__thumb-placeholder {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-ink) 8%, var(--color-stone)),
      var(--color-stone));
}

@media (prefers-reduced-motion: no-preference) {
  .post-card__thumb img {
    transition: transform var(--dur-medium) var(--ease-reveal);
  }
  .post-card:hover .post-card__thumb img {
    transform: scale(1.03);
  }
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
}

/* Category + date row — Familjen caps, separated by a hairline-toned divider. */
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.post-card__date {
  position: relative;
  padding-left: var(--space-sm);
}

/* Hairline pip between category and date; hidden when the date leads alone. */
.post-card__category + .post-card__date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0.85em;
  transform: translateY(-50%);
  background: var(--color-hairline);
}

.post-card__title {
  margin: 0;
}

.post-card__title a {
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

.post-card:hover .post-card__title a,
.post-card:focus-within .post-card__title a {
  color: var(--color-terracotta); /* large H3 text — clears AA at this size (§4) */
}

.post-card__excerpt {
  margin: 0;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__cta {
  margin-top: var(--space-xs);
}

/* Card hover/focus reveals the text-link underline in concert with the media. */
.post-card:hover .post-card__cta::after,
.post-card:focus-within .post-card__cta::after {
  transform: scaleX(1);
}

/* ─── 3. Journal header — the section opener ───────────────────────────────────── */
.journal-header {
  padding-block: var(--section-y) var(--section-y-tight);
}

.journal-header__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.journal-header__title {
  margin: 0;
  max-width: 20ch; /* hold the display line to a poster measure */
}

.journal-header__intro {
  max-width: var(--container-narrow);
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem); /* body-large lede */
  line-height: 1.55;
  color: var(--color-text);
}

.journal-header__intro p {
  margin-bottom: var(--space-sm);
}

.journal-header__intro p:last-child {
  margin-bottom: 0;
}

/* ─── 4. Journal archive — grid section + empty state + pagination ─────────────── */
.journal-archive {
  padding-block: clamp(var(--space-2xl), 9vh, var(--space-4xl)) var(--section-y);
}

.journal-archive__empty {
  max-width: var(--container-narrow);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  color: var(--color-text-muted);
}

/* Pagination chrome (.pagination .nav-links .page-numbers) is styled in
   archive.css and shared; only the journal spacing is set here. */
.journal-archive .pagination {
  margin-top: var(--space-2xl);
}

/* ─── 5. Single article ───────────────────────────────────────────────────────── */
/* Top padding is a flat --space-xl, not the poster-scale --section-y: the
   breadcrumbs sit directly above, and the meta hairline is the opener —
   a 96-192px band between them read as a hole in the left-anchored layout. */
.journal-single__header {
  padding-block: var(--space-xl) var(--section-y-tight);
}

/* Meta row opens on a hairline rule — the §3 section-opener language at
   article scale (mirrors .section-header). */
.journal-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline);
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Hairline pips between the meta items. */
.journal-single__date,
.journal-single__byline {
  position: relative;
  padding-left: var(--space-sm);
}

.journal-single__date::before,
.journal-single__byline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0.85em;
  transform: translateY(-50%);
  background: var(--color-hairline);
}

/* Drop the leading pip when the category is absent and the date leads. */
.journal-single__meta > .journal-single__date:first-child {
  padding-left: 0;
}

.journal-single__meta > .journal-single__date:first-child::before {
  content: none;
}

/* Article titles are long SEO sentences, not posters — step below the global
   H1 poster clamp and hold a reading measure so long titles set in 2–3 calm
   lines. Header + body share the standard --container-max frame; the title
   and prose anchor to its left edge (editorial asymmetry). */
.journal-single__title {
  margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem); /* 36–60px */
  line-height: 1.06;
  max-width: 22ch;
}

/* Featured image — LCP band; the wide container lets the media breathe past the
   narrow prose measure while dimensions stay reserved for CLS. */
.journal-single__media {
  padding-block: 0 var(--section-y-tight);
}

.journal-single__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

.journal-single__body {
  padding-block: 0 var(--section-y);
}

/* ─── 6. Long-form prose (the_content) — Inter body, Familjen headings ─────────── */
.journal-single__content {
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px — desktop long-form reading size */
  line-height: 1.75;
}

/* Reading measure: children cap at ~75ch (~740px at 18px) and share the
   title's left edge inside the --container-max frame — the open right side
   is the editorial asymmetry, not a bug. Figures keep the full width. */
.journal-single__content > * {
  max-width: 75ch;
}

.journal-single__content > figure {
  max-width: none;
}

/* In-article FAQ — booking-cta.js rebuilds the plain H3/answer block into
   the house .faq-accordion; anchor it to the measure's left edge (faq.css
   centers it inside treatment pages). */
.journal-single__content > .faq-accordion {
  margin-inline: 0;
}

.journal-single__content p {
  margin-bottom: var(--space-md);
}

.journal-single__content > :first-child {
  margin-top: 0;
}

/* Lede — the opening paragraph steps clearly above the 18px reading size,
   then the article settles in. */
.journal-single__content > p:first-child {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem); /* 20–24px */
  line-height: 1.55;
  margin-bottom: var(--space-lg);
}

.journal-single__content h2 {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-hairline);
  margin-bottom: var(--space-md);
  font-size: clamp(1.5rem, 2.6vw, 2rem); /* 24–32px — prose heading, not a band opener */
  line-height: 1.1;
}

.journal-single__content h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.journal-single__content ul,
.journal-single__content ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.journal-single__content ul { list-style: disc; }
.journal-single__content ol { list-style: decimal; }

.journal-single__content li {
  margin-bottom: var(--space-2xs);
}

.journal-single__content li::marker {
  color: var(--color-text-muted);
}

.journal-single__content blockquote {
  margin: var(--space-xl) 0;
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-terracotta);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.journal-single__content blockquote p {
  margin-bottom: var(--space-sm);
}

.journal-single__content figure {
  margin: var(--space-xl) 0;
}

.journal-single__content img {
  border-radius: var(--radius-md);
}

.journal-single__content figcaption {
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ─── 7. Related reading ──────────────────────────────────────────────────────── */
.journal-related {
  padding-block: var(--section-y);
}

/* Related heading joins the §3 opener language (hairline + rhythm). */
.journal-related__heading {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline);
  margin-bottom: var(--space-xl);
}

/* ─── 8. Closing CTA band (Terracotta — one per page) ─────────────────────────── */
.journal-cta {
  padding-block: var(--section-y);
}

.journal-cta__inner {
  text-align: center;
}

.journal-cta__heading {
  margin: 0;
  color: var(--color-text-inverse); /* Bone on Terracotta (§4) */
}

.journal-cta__body {
  margin: var(--space-md) auto var(--space-lg);
  max-width: 52ch;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--color-text-inverse);
}