/* ==========================================================================
   Blog index (/blog/). Built on the shared page kit (page.css: .pg-hero, .pg-section,
   .pg-wrap, .pg-head, .pg-dots, .pg-note, eyebrow…). This file adds:
   .blog-hero__*  tilted framed café photo + monogram + hand note (hero media);
                  the hero carries no sales CTA — one editorial link only (review 2026-09-29)
   .blog-topics   JS-free topic-filter chips
   .blog-featured .blog-card--featured  the "01 / Latest" card
   .blog-cover*   honest editorial cover (tone wash + icon + texture + words) —
                  replaces the dashboard-illustration photo on every card
   .blog-grid .blog-card  the shared post-card (duplicated verbatim in blog-post.css
                           and blog-latest.css — three self-contained page bundles)
   .blog-news     newsletter teaser band — a "Signups open soon" pill, not a live form
   Plan: design-runs/2026-09-28-site-v3/pages/00-plan.md §3
   Review: design-runs/2026-09-28-site-v3/review/blog/{chatgpt,triage}.md (2026-09-29)
   ========================================================================== */

/* ---- Hero: tightened ~25-30% (review item 1) — no sales CTA, smaller photo,
   chips closer to the intro. Not a person cut-out, so the shared .pg-hero__media
   panel (built for a standing portrait) is neutralised on phones/tablets; from
   1200px it is already transparent (page.css), so nothing to undo there. ------- */

.blog .pg-hero { padding-bottom: 8px; }
.blog .pg-hero__lede { max-width: 33.75rem; } /* ≤540px */

@media (max-width: 1199.98px) {
  .blog .pg-hero {
    padding-top: 24px; /* was page.css's clamp(28px,4vw,64px) — round 3: less slack before the article */
  }

  .blog .pg-hero__media {
    padding-top: 0;
    border: 0;
    border-radius: 0;
    background: none;
    min-height: 220px;
  }

  /* page.css's .pg-hero__grid gap (36px) applies between every stacked mobile
     element (crumbs/H1/lede/media/chips/read-link) — round 3: -32 to -48px total
     asked for across the whole hero, most of it lived here. */
  .blog .pg-hero__grid { gap: 18px; }
}

/* Owner 2026-09-29: the café photo read as a small card in an empty half. It now fills its
   half (~90% of the column, up to 600px), centred on a soft disc + dashed ring (the service
   stages' language), with the note and monogram on its corners. */
@media (min-width: 1200px) {
  .blog .pg-hero__media {
    display: grid;
    place-items: center;
    min-height: clamp(480px, 28vw + 80px, 600px);
  }

  .blog .pg-hero__media::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 86%; /* fits inside the hero, so neither the header nor the next section cuts it */
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-600) 13%, var(--paper)) 0%, color-mix(in srgb, var(--blue-600) 5%, var(--paper)) 62%, transparent 100%);
    outline: 1px dashed color-mix(in srgb, var(--blue-600) 26%, transparent);
    outline-offset: 22px;
    translate: -50% -50%;
  }
}

.blog-hero__frame {
  position: relative;
  z-index: 1;
  width: min(70%, 310px);
  margin: 22px auto 0; /* was 40px — round 3 mobile tightening */
  padding: 8px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
  transform: rotate(-2.5deg);
}

.blog-hero__frame picture,
.blog-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-xl) - 6px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blog-hero__note {
  position: absolute;
  top: 4px;
  right: 6%;
  z-index: 2;
  font-size: 1rem;
}

/* Round 3: the frame's top margin was tightened (40px→22px) to shorten the hero,
   which leaves the 2-line note no room to clear the photo below it — they now
   overlap. Same call the shared kit makes for .pg-note--head: a decorative aside
   is not worth a screenful of overlap on phones. Tablet+ (own margin, more room)
   is unaffected. */
@media (max-width: 639.98px) {
  .blog-hero__note { display: none; }
}

.blog-hero__avatar {
  position: absolute;
  left: 8%;
  bottom: 6%;
  z-index: 2;
  display: block;
  transform: rotate(3deg);
}

.blog-hero__avatar .pg-mono { box-shadow: 0 10px 22px -10px rgb(15 23 42 / 0.5); }

/* The one editorial hero action (no "Book a Call" / "WhatsApp" here — review item 5). */
.blog-hero__read {
  margin-top: 16px !important; /* beats .pg-link's own margin-top; was 22px */
}

@media (max-width: 639.98px) {
  .blog-hero__frame { width: min(100% - 24px, 460px); }
}

@media (min-width: 640px) and (max-width: 1199.98px) {
  .blog-hero__frame { width: min(72%, 500px); margin-top: 52px; }
}

@media (min-width: 1200px) {
  .blog-hero__frame { width: min(94%, 640px); margin: 56px 0 0; padding: 10px; transform: rotate(-2deg); }
  .blog-hero__note { top: 1%; right: 2%; font-size: 1.125rem; }
  .blog-hero__avatar { left: 1%; bottom: 12%; }
}

/* ---- Topic chips: closer to the intro (16-20px, was 24px) --------------------- */

.blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.blog-topics__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-inline: 14px;
  border: 1.5px solid var(--slate-300);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.blog-topics__chip:hover { border-color: var(--ink-900); }

.blog-topics__chip.is-active {
  border-color: var(--tone-edge, var(--ink-900));
  background: var(--tone-bg, var(--warm-50));
  color: var(--tone-ink, var(--ink-900));
}

/* ---- Featured (latest) post: "01 / Latest" eyebrow directly above it ---------- */

.blog-featured { background: var(--paper); padding-block: clamp(32px, 4vw, 48px) 0; }

/* An <h2> styled exactly like <x-eyebrow> (page.css's .eyebrow) — kept a real
   heading (not <x-eyebrow>'s <p>) so H1 → H2 → H3 stays sequential; no separate
   serif title here on purpose — the review asked to keep this module lean. */
.blog-featured__eyebrow.eyebrow { margin: 0 0 18px; }

.blog-card.blog-card--featured { /* beats the base .blog-card { display:flex } defined later */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.blog-card--featured .blog-card__media { aspect-ratio: 16 / 9; }
.blog-card--featured .blog-card__title { font-family: var(--font-serif); font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 600; } /* 32-36px desktop */
.blog-card--featured .blog-card__excerpt { -webkit-line-clamp: 3; font-size: 1rem; line-height: 1.65; } /* 16px, more air (round 3) */

.blog-card__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--blue-700);
  font-weight: 600;
  font-size: 0.9375rem;
}

.blog-card__read svg { transition: transform var(--t-base) var(--ease-out); }
.blog-card:hover .blog-card__read svg { transform: translateX(3px); }
.blog-card:hover .blog-card__read { color: var(--blue-800); }

@media (min-width: 768px) {
  .blog-card.blog-card--featured { grid-template-columns: 45fr 55fr; align-items: stretch; min-height: 380px; }
  /* width:100% is load-bearing: aspect-ratio + height:100% alone computes an
     auto WIDTH from the ratio (here ~760px), which is wider than the 45fr grid
     track (~611px) and overflows into the text column, clipping it — this must
     fill the grid cell exactly, not the other way round. */
  .blog-card--featured .blog-card__media { width: 100%; height: 100%; }
  .blog-card--featured .blog-card__body { justify-content: center; padding: clamp(32px, 4vw, 64px); }
}

@media (min-width: 1200px) {
  .blog-card.blog-card--featured { min-height: 420px; }
}

/* Featured card: meta follows the excerpt (not pinned to the bottom of a tall column). */
@media (min-width: 768px) {
  .blog-card--featured .blog-card__meta { margin-top: 18px; }
  .blog-card--featured .blog-card__excerpt { flex: 0 0 auto; } /* no stretch: title, excerpt and meta sit together, centred */
}

/* ---- Grid section: a real editorial section head (review item 3) -------------- */

.blog-grid-section { background: var(--warm-50); }

.blog-grid__empty {
  padding: 32px 0;
  color: var(--slate-700);
  font-size: 1.0625rem;
}

.blog-grid__empty a { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Shared post card (also in blog-post.css + blog-latest.css) -------------- */

.blog-grid {
  display: grid;
  gap: clamp(24px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); }

.blog-card__media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--slate-100); } /* -10-15% shorter than 16:9 (round 3): ~160-180px on phones, more room for title/excerpt */

.blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.6vw, 32px); flex: 1; }

.blog-card__title { margin: 0; font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); font-weight: 700; line-height: 1.28; }

.blog-card__link {
  color: var(--ink-900);
  text-decoration: none;
}

.blog-card__link::after { content: ""; position: absolute; inset: 0; }
.blog-card__link:hover { color: var(--blue-700); }
.blog-card__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

.blog-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--slate-700);
  font-size: 0.9375rem;
  line-height: 1.55;
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--slate-500);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---- Editorial cover (replaces the photo — review item 4): tone wash + icon +
   texture + the category and a few words of the title. No numbers, no fake UI. --- */

.blog-cover {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--tone-bg, var(--warm-50));
  display: flex;
  align-items: flex-end;
}

/* Article-specific line art (round 3: replaces the generic dot-grid — the same
   texture behind every cover read as "one component with different labels").
   Fills the cover, so it reads as illustration, not a decorative corner accent. */
.blog-cover__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 9%;
  color: var(--tone-ink, var(--slate-400));
  opacity: 0.34;
}

/* 15-20% smaller than before (was 40%), so the line art carries the composition. */
.blog-cover__icon {
  position: absolute !important;
  top: 9%;
  right: 7%;
  width: 32% !important;
  height: auto !important;
  color: var(--tone-ink, var(--blue-600));
  opacity: 0.22;
}

.blog-cover__text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  padding: clamp(16px, 3vw, 26px);
  width: 100%;
}

.blog-cover__cat {
  color: var(--tone-ink, var(--ink-900));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-cover__words {
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.75rem);
  line-height: 1.15;
}

.blog-card--featured .blog-cover__text { padding: clamp(20px, 3vw, 32px); }
.blog-card--featured .blog-cover__words { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }

/* ---- Newsletter: a teaser, not a live form. Mobile was a `flex-direction:column`
   stack — title top, pill bottom, ~300px of dead air between them (review r2 item 1).
   Now a tight 2-line block (icon+title row, pill right under) ~100-130px total; $live
   keeps a real form ready for when a provider is wired. --------------------------- */

.blog-news { padding-block: clamp(24px, 3.2vw, 38px); background: var(--paper); }

.blog-news__panel {
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--warm-50);
}

.blog-news__row { display: flex; align-items: center; gap: 12px; }

.blog-news__icon { flex-shrink: 0; color: var(--blue-600); }

.blog-news__title { margin: 0; color: var(--ink-900); font-size: 1.0625rem; font-weight: 700; }

.blog-news__pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 10px;
  padding-inline: 14px;
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Kept for when config('site.newsletter.endpoint') is set: a real, functional form. */
.blog-news__form { display: flex; gap: 10px; margin-top: 12px; }

.blog-news__input {
  flex: 1;
  min-height: 44px;
  padding-inline: 16px;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font-size: 1rem;
}

.blog-news__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.blog-news__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: var(--paper);
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 640px) {
  .blog-news__panel { display: flex; align-items: center; gap: 16px; }
  .blog-news__row { flex: 1 1 auto; }
  .blog-news__pill { margin-top: 0; margin-left: auto; }
  .blog-news__form { flex: 1 1 320px; margin-top: 0; }
}

/* Gate: body copy ≥16px on phones (final sweep 2026-09-29). */
@media (max-width: 639.98px) {
  .blog-card__excerpt, .blog-inline-cta__text, .blog-author__bio { font-size: 1rem; }
}