/* ==========================================================================
   Home section 10 -- "From the blog" (<x-blog.latest />, inserted by main after
   <x-why.section />). Styled like the other home sections: numbered eyebrow, serif
   H2, cards, "All articles" link. Follows home 09 (why, warm), so this is paper.
   .blog-grid/.blog-card/.blog-cover duplicated from public/css/blog.css — see its
   header note (2026-09-29: cards now show an honest editorial cover, not a photo).
   ========================================================================== */

.blog-latest { padding-block: clamp(48px, 5.5vw, 88px); background: var(--paper); border-top: 1px solid var(--color-border); }

.blog-latest__wrap {
  max-width: var(--hdr-max);
  margin-inline: auto;
  padding-inline: var(--pg-pad, calc(var(--hdr-inset) + var(--hdr-pad)));
}

.blog-latest__head {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}

.blog-latest__title {
  margin: 12px 0 0;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.blog-latest__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.blog-latest__all svg { transition: transform var(--t-base) var(--ease-out); }
.blog-latest__all:hover { color: var(--blue-800); }
.blog-latest__all:hover svg { transform: translateX(3px); }
.blog-latest__all:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 900px) {
  .blog-latest__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 24px;
  }

  .blog-latest__head .eyebrow,
  .blog-latest__head .blog-latest__title { grid-column: 1; }
  .blog-latest__all { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
}

/* ---- Shared post card (duplicated from blog.css: see its header note) -------------- */

.blog-grid {
  display: grid;
  gap: 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)); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 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(--warm-50);
  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 (duplicated — see blog.css's header note) ---------------- */

.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;
}

/* 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; }
}