/* ==========================================================================
   Blog — "Our recent thoughts": four post rows between 2px rules + Read More.
   Figma "Home Page": y 11912 → 12839 (desktop). "Mobile Home": y 8330 → 8892.

   Desktop row anatomy (all x at 1920): title 100→683 (583), excerpt 818→1557
   (739), arrow pill 1754→1820 (66×46). Row pitch is 153px rule-to-rule
   (2px rule + 23px + 3 excerpt lines of 28/1.24 + 24px).

   Shared from base.css: .container, .eyebrow, .display, .h1, .btn,
   --fs-item (40 → 26), --fs-lead (28), --accent. No images: the arrows are
   inline SVG (Figma "Arrow 5" / "Arrow 8") filled with currentColor.
   ========================================================================== */

.section--blog {
  /* (11912 − team bottom 11742) / 2 ≈ 85; (cta top 13048 − 12839) / 2 ≈ 104 */
  padding-top: 85px;
  padding-bottom: 104px;
}

/* ---- Heading block ---------------------------------------------------------- */
.section--blog .blog__heading {
  max-width: 1516px;
  margin-top: 45px;      /* eyebrow bottom 11937 → heading 11982 */
  margin-left: -7px;     /* Figma text box sits at x=93: optical alignment of the "O" */
}

/* ---- Post list ---------------------------------------------------------------- */
.section--blog .blog__list {
  margin-top: 72px;      /* heading bottom 12058 → first rule (top edge) 12130 */
  border-bottom: 2px solid var(--fg);   /* Line 61 */
}
.section--blog .blog__row {
  border-top: 2px solid var(--fg);      /* Lines 15 / 14 / 16 / 17 */
}
.section--blog .blog__post {
  display: grid;
  /* title 583 | gap 135 | excerpt 739 | gap 197 | pill 66 = 1720. The gaps are
     spacer columns so they shrink in proportion below 1920 and the excerpt
     never runs into the pill. */
  grid-template-columns: 583fr 135fr 739fr 197fr auto;
  align-items: start;
  padding: 23px 0 24px;  /* rule 12132 → excerpt 12156; excerpt bottom 12261 → rule 12283 */
}
/* FIGMA-FIDELITY (order-dependent, safe to drop on the CMS): the Figma rows are
   153 / 153 / 153 / 166px tall. Row 3's three-line title is taller than its
   excerpt, so it carries less bottom padding (19px under the title); row 4 is
   166px with its title 43px below the rule. Extra CMS rows use the 23 / 24 above. */
.section--blog .blog__row:nth-child(3) .blog__post { padding-bottom: 14px; }
.section--blog .blog__row:nth-child(4) .blog__post { padding: 34px 0 25px; }

.section--blog .blog__title {
  grid-column: 1;
  /* Figma places the title box vertically centred in the row, nudged up 7px:
     2-line titles land 7px below the excerpt top (12163 vs 12156) and the
     3-line title in row 3 (114px, taller than the excerpt) lands 4px above
     it (12457 vs 12461). Centring + a −7px nudge reproduces both. */
  align-self: center;
  position: relative;
  top: -7px;
  max-width: 583px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-item);
  line-height: var(--lh-display);
  text-transform: capitalize;
}
.section--blog .blog__title a { transition: color .25s ease; }
.section--blog .blog__title a:hover { color: var(--accent); }

.section--blog .blog__excerpt {
  grid-column: 3;
  max-width: 739px;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* Rectangle 72–74 / 193: 66×46 green-outline pill, arrow centred */
.section--blog .blog__arrow {
  grid-column: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 46px;
  margin-top: 2px;       /* pill 12158 vs excerpt 12156 */
  border-radius: var(--radius-pill);
  color: var(--accent);
  --wipe-fill: var(--accent);
  --wipe-edge: var(--accent);
  --wipe-txt: var(--black);
}
.section--blog .blog__arrow svg { width: 36px; height: 15px; }

/* ---- Read More (Rectangle 75: 213×46 at x=1607, text white, arrow green) ---- */
.section--blog .blog__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 36px;      /* last rule bottom edge 12757 → pill 12793 */
}
.section--blog .blog__more {
  min-width: 213px;
  padding: 0 19px 0 25px;  /* text at 1632 (+25); arrow ends 1801 (+19 to 1820) */
  gap: 9px;
  justify-content: space-between;
  background: transparent;
  color: var(--fg);
  --wipe-fill: var(--accent);
  --wipe-edge: var(--accent);
  --wipe-txt: var(--black);
}
.section--blog .blog__more .btn__arrow { flex: 0 0 auto; width: 34px; height: 15px; color: var(--accent); }
.section--blog .blog__more:hover { color: var(--black); }
.section--blog .blog__more:hover .btn__arrow { color: var(--black); }

/* ---- Tablet ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section--blog { padding-top: 64px; padding-bottom: 72px; }
  .section--blog .blog__heading { margin-top: 28px; margin-left: 0; }
  .section--blog .blog__list { margin-top: 48px; }
  .section--blog .blog__post {
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    padding: 22px 0;
  }
  .section--blog .blog__row:nth-child(n) .blog__post { padding: 22px 0; }   /* undo the desktop per-row nudges */
  .section--blog .blog__title { grid-column: 1; align-self: start; top: 0; max-width: none; }
  .section--blog .blog__excerpt { grid-column: 1; max-width: none; margin-top: 14px; }
  .section--blog .blog__arrow { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .section--blog .blog__footer { margin-top: 28px; }
}

/* ---- Mobile (Figma "Mobile Home", 402 wide): titles + rules only ------------- */
@media (max-width: 640px) {
  .section--blog {
    padding-top: 46px;   /* (8330 − team bottom 8238) / 2 */
    padding-bottom: 50px;/* (cta top 8994 − 8892) / 2, less the rule's 1px */
  }
  .section--blog .eyebrow { gap: 16px; }        /* dot x=20, text x=42 */
  .section--blog .blog__heading {
    max-width: 362px;
    margin-top: 15px;    /* eyebrow bottom 8350 → heading 8365 */
  }
  .section--blog .blog__list { margin-top: 34px; }  /* heading bottom 8457 → rule 8489 (+2: 48px/0.95 line boxes round short) */
  .section--blog .blog__post {
    display: block;
    /* Figma title offsets from the rule: 18.5 / 16.5 / 16.5 / 21.5 above, 26.5 / 23.5 / 21.5 / 24.5 below;
       18 + 25 keeps the rule pitch at ~95px (Figma 97 / 92 / 115 / 98) and the last rule at 8892. */
    padding: 18px 0 25px;
  }
  .section--blog .blog__row:nth-child(n) .blog__post { padding: 18px 0 25px; }
  .section--blog .blog__excerpt,
  .section--blog .blog__arrow,
  .section--blog .blog__footer { display: none; }
}

/* ---- Row hover: the arrow pill swipes green + pushes right, the title goes green -- */
.section--blog .blog__arrow { transition: transform .3s cubic-bezier(.22, .61, .36, 1), color .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .section--blog .blog__row:hover .blog__title a,
  .section--blog .blog__row:focus-within .blog__title a { color: var(--accent); }
  /* hovering anywhere in the row (the words) pushes the pill right AND swipes the fill in */
  .section--blog .blog__row:hover .blog__arrow,
  .section--blog .blog__row:focus-within .blog__arrow { transform: translateX(8px); }
  .section--blog .blog__row:hover .blog__arrow::before,
  .section--blog .blog__row:focus-within .blog__arrow::before { clip-path: inset(0 0 0 0 round var(--radius-pill)); }
}
/* Black arrow whenever the pill is filled (row hover or the pill's own hover);
   needs the .section--blog prefix to outrank the green base rule's specificity. */
.section--blog .blog__row:hover .blog__arrow,
.section--blog .blog__row:focus-within .blog__arrow,
.section--blog .blog__arrow:hover,
.section--blog .blog__arrow:focus-visible { color: var(--black); }