/**
 * Insights: the blog index and its topic pages (home.php, category.php).
 *
 * Page 1: the latest article as a lead card, then a 3 × 4 grid. Later pages
 * and topic pages: the grid alone. The navy hero above is shared with About
 * and styled in app.css.
 */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.insights-hero__eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.insights-hero__eyebrow a:hover { border-bottom-color: #fff; }
.insights-hero__count {
  margin: 26px 0 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
}

/* ── Topics ── */
.blog-topics { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.blog-topics__list {
  display: flex; gap: 8px; list-style: none; margin: 0; padding: 18px 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.blog-topics__list::-webkit-scrollbar { display: none; }
.blog-topic {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--c-navy); text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.blog-topic:hover { border-color: var(--c-navy); }
.blog-topic.is-active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.blog-topic__n { font-size: 12px; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* ── The page ── */
.blog { background: var(--c-paper); padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 9vw, 120px); }
.blog-meta { font-family: var(--font-sans); font-size: 13px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.blog-arrow { display: inline-block; transition: transform 0.2s ease; }
.blog-media--empty { background: linear-gradient(135deg, var(--c-navy), #15485a); }

/* ── Lead article ── */
.blog-lead {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  margin-bottom: clamp(56px, 6vw, 88px);
  background: #fff; border-radius: 20px; overflow: hidden;
  color: var(--c-navy); text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 46, 58, 0.06), 0 28px 60px -28px rgba(11, 46, 58, 0.32);
}
/* The photo fills its column at whatever height the text sets; a fixed
   aspect ratio here would widen it into the text column instead. */
.blog-lead__media { position: relative; display: block; min-height: 420px; overflow: hidden; background: var(--c-paper-deep); }
.blog-lead__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.blog-lead:hover .blog-lead__media img { transform: scale(1.04); }
.blog-lead__body {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(28px, 4vw, 56px);
}
.blog-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-red);
}
.blog-eyebrow__latest { padding: 5px 11px; border-radius: 999px; background: var(--c-navy); color: #fff; }
.blog-lead__title {
  margin: 18px 0 14px;
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;
  transition: color 0.2s ease;
}
.blog-lead:hover .blog-lead__title { color: var(--c-red); }
.blog-lead__excerpt { display: block; margin: 0 0 20px; font-size: clamp(16px, 1.3vw, 17.5px); line-height: 1.65; color: var(--c-muted); }
.blog-lead__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
}
.blog-lead:hover .blog-arrow { transform: translateX(5px); }

/* ── Grid ── */
.blog-section-head {
  display: flex; align-items: center; gap: 20px; margin: 0 0 clamp(28px, 3vw, 40px);
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.015em; color: var(--c-navy);
}
.blog-section-head::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); }
.blog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 4vw, 60px) clamp(24px, 2.6vw, 36px);
}
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: var(--c-navy); text-decoration: none; }
.blog-card__media {
  display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 20px;
  border-radius: 14px; background: var(--c-paper-deep);
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.blog-card__link:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__topic {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-red);
}
.blog-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin: 10px 0;
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.26; letter-spacing: -0.012em; text-wrap: balance;
  transition: color 0.2s ease;
}
.blog-card__link:hover .blog-card__title { color: var(--c-red); }
.blog-card__excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--c-muted);
}
.blog-card .blog-meta { margin-top: auto; }

.blog-lead:focus-visible,
.blog-card__link:focus-visible,
.blog-topic:focus-visible { outline: 2px solid var(--c-red); outline-offset: 5px; }
.blog-card__link:focus-visible { border-radius: 14px; }

/* ── Pages ── */
.blog .pagination { margin-top: clamp(64px, 7vw, 96px); padding-top: 32px; border-top: 1px solid var(--c-line); }
.blog .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.blog .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--c-navy); text-decoration: none;
  font-variant-numeric: tabular-nums; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.blog a.page-numbers:hover { background: rgba(11, 46, 58, 0.07); }
.blog .page-numbers.current { background: var(--c-navy); color: #fff; }
.blog .page-numbers.dots { min-width: 24px; padding: 0; color: var(--c-muted); }
.blog .page-numbers.prev,
.blog .page-numbers.next { padding: 0 20px; border: 1px solid var(--c-line-strong); background: #fff; }
.blog .page-numbers.prev { margin-right: 10px; }
.blog .page-numbers.next { margin-left: 10px; }
.blog a.page-numbers.prev:hover,
.blog a.page-numbers.next:hover { border-color: var(--c-navy); background: #fff; }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-lead { grid-template-columns: 1fr; }
  .blog-lead__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-lead { border-radius: 16px; }
  /* Newer, the current page and Older: the hero already says "Page n of N". */
  .blog a.page-numbers:not(.prev):not(.next),
  .blog .page-numbers.dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-lead__media img, .blog-card__media img, .blog-arrow { transition: none; }
  .blog-lead:hover .blog-lead__media img, .blog-card__link:hover .blog-card__media img, .blog-lead:hover .blog-arrow { transform: none; }
}