/* ─────────────────────────────────────────────────────────────────────────────
   ExamPrepIQ marketing site.

   Colours are lifted from the app's `day` (light) and `night` (dark) palettes
   in lib/core/theme/app_color_palette.dart so the homepage and the practice
   apps read as one product. Every foreground/background pair here is checked
   to at least WCAG AA (4.5:1 body text, 3:1 large text and UI borders), and no
   meaning is carried by hue alone — each exam tile is distinguished by its
   name, its icon and its accent's lightness, not by colour vision.
   ───────────────────────────────────────────────────────────────────────────*/

@font-face {
  font-family: 'Inter';
  src: url('/site/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/site/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/site/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #fafafa;
  --surface: #ffffff;
  --surface-alt: #f4f5f6;
  --text: #101828;
  --text-2: #4a4d5c;
  --text-3: #6b6e7b;
  --accent: #4f46e5;
  --accent-strong: #3730a3;
  --accent-soft: rgba(79, 70, 229, 0.09);
  --border: rgba(16, 24, 40, 0.12);
  --border-strong: rgba(16, 24, 40, 0.22);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -14px rgba(16, 24, 40, 0.18);
  --shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.05), 0 26px 48px -20px rgba(16, 24, 40, 0.28);
  --on-accent: #ffffff;

  /* Per-exam accents. Chosen so the four stay separable under protanopia,
     deuteranopia and tritanopia (worst-case ΔE ≈ 24 light / 21 dark) while
     each still clears 4.5:1 on its card. Colour is never the only cue anyway —
     every tile is named and iconed. */
  --ielts: #4338ca;
  --lnat: #0f766e;
  --tara: #b45309;
  --tmua: #9d174d;

  --radius: 16px;
  --radius-sm: 10px;
  --wrap: 1140px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13111c;
    --surface: #1c1930;
    --surface-alt: #191630;
    --text: #f2eefb;
    --text-2: #b9b0d8;
    --text-3: #9a90bd;
    --accent: #a5b4fc;
    --accent-strong: #c7d2fe;
    --accent-soft: rgba(129, 140, 248, 0.14);
    --border: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.26);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px -16px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 30px 54px -22px rgba(0, 0, 0, 0.85);
    --on-accent: #11102a;

    --ielts: #a5b4fc;
    --lnat: #5eead4;
    --tara: #fcd34d;
    --tmua: #f472b6;
  }
}

/* ── Reset ────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--narrow {
  max-width: 780px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.grad-text {
  background: linear-gradient(100deg, var(--accent) 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* min-height, not padding alone: 44px is the comfortable touch target, and a
     button that only *looks* tappable is a mobile bug you cannot see. */
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-sm {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: var(--accent-strong);
  box-shadow: var(--shadow-lift);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-alt);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
}

/* The logo files carry ~38px of empty padding above and below the artwork
   inside their viewBox, so `height` on the raw asset renders glyphs at 46% of
   the number you asked for. The copies in site/ are cropped to their ink
   (viewBox="14 38 420 64"), which is why these heights read true. */
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.brand-logo--dark {
  display: none;
}

/* Square mark: the fallback where the 223px-wide lockup will not fit. It is a
   gradient tile that carries its own contrast, so it needs no dark variant. */
.brand-mark {
  display: none;
  width: 40px;
  height: 40px;
}

@media (prefers-color-scheme: dark) {
  .brand-logo--light {
    display: none;
  }

  .brand-logo--dark {
    display: block;
  }
}

.site-nav {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
}

.site-nav a:hover {
  color: var(--text);
  background: var(--surface-alt);
  text-decoration: none;
}

.header-cta {
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }

  .header-cta {
    margin-left: auto;
  }
}

/* Keep the name for as long as it fits: shrink the lockup first, and only fall
   back to the square mark once even the small one plus the CTA would overflow
   (they did, at 320px: 329px of content in a 320px window). */
@media (max-width: 640px) {
  .header-inner {
    gap: 12px;
  }

  .site-header .brand-logo {
    height: 28px;
  }
}

@media (max-width: 480px) {
  .brand-logo {
    display: none !important;
  }

  .brand-mark {
    display: block;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 116px) 0 clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--border);
}

.hero-glow {
  position: absolute;
  inset: -40% 0 auto -10%;
  height: 640px;
  background:
    radial-gradient(48% 55% at 22% 30%, rgba(79, 70, 229, 0.18) 0%, transparent 70%),
    radial-gradient(42% 50% at 78% 20%, rgba(34, 211, 238, 0.16) 0%, transparent 72%);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .hero-glow {
    background:
      radial-gradient(48% 55% at 22% 30%, rgba(129, 140, 248, 0.22) 0%, transparent 70%),
      radial-gradient(42% 50% at 78% 20%, rgba(34, 211, 238, 0.14) 0%, transparent 72%);
  }
}

.hero-inner {
  position: relative;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(34px, 6.2vw, 68px);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .hero-break {
    display: none;
  }
}

.lede {
  max-width: 640px;
  margin: 22px auto 0;
  color: var(--text-2);
  font-size: clamp(17px, 1.5vw, 20px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* A grid, not a wrapping flex row: three equal columns hold together at every
   width. As flex they broke 2 + 1 on a phone, orphaning "Free" on its own row. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: clamp(12px, 4vw, 56px);
  max-width: 620px;
  margin: 52px auto 0;
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-stats strong {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero-stats span {
  color: var(--text-3);
  font-size: clamp(13px, 3vw, 14px);
  line-height: 1.4;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section {
  padding: clamp(64px, 8vw, 104px) 0;
}

.section--alt {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  text-align: center;
}

.section-sub {
  max-width: 620px;
  margin: 14px auto 0;
  text-align: center;
  color: var(--text-2);
}

/* ── Exam tiles ───────────────────────────────────────────────────────────── */

.exam-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 52px;
}

@media (max-width: 1040px) {
  .exam-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .exam-grid {
    grid-template-columns: 1fr;
  }
}

.exam-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.exam-card:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--exam, var(--accent));
}

.exam-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  margin-bottom: 18px;
  color: var(--exam, var(--accent));
  background: color-mix(in srgb, var(--exam, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--exam, var(--accent)) 26%, transparent);
}

.exam-icon svg {
  width: 24px;
  height: 24px;
}

.exam-card h3 {
  font-size: 24px;
}

.exam-blurb {
  margin-top: 10px;
  /* Keeps the shortest blurb off the (now bottom-anchored) rule. */
  margin-bottom: 16px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}

/* margin-top:auto lives here, not on .exam-go: the blurbs are different lengths,
   so anchoring only the CTA left the dashed rules at four different heights
   across the row. Pinning the rule aligns both it and everything under it. */
.exam-sections {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}

.exam-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  color: var(--exam, var(--accent));
  font-weight: 600;
  font-size: 15px;
}

.exam-go .arrow {
  transition: transform 0.18s ease;
}

.exam-card:hover .exam-go .arrow {
  transform: translateX(4px);
}

.exam-card--ielts {
  --exam: var(--ielts);
}

.exam-card--lnat {
  --exam: var(--lnat);
}

.exam-card--tara {
  --exam: var(--tara);
}

.exam-card--tmua {
  --exam: var(--tmua);
}

/* ── Steps ────────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 52px;
  counter-reset: step;
}

.steps li {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}

.steps h3 {
  font-size: 20px;
}

.steps p {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 15px;
}

/* ── Features ─────────────────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 32px;
  margin-top: 52px;
}

.feature {
  padding: 24px 0 24px 22px;
  /* accent-soft (9% alpha) was all but invisible as a 3px rule. */
  border-left: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.feature h3 {
  font-size: 19px;
}

.feature p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 15px;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq {
  margin-top: 44px;
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding: 0 4px 22px;
  color: var(--text-2);
  font-size: 16px;
}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */

.cta {
  padding: clamp(60px, 7vw, 92px) 0;
}

.cta-inner {
  text-align: center;
}

.cta h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}

.cta p {
  margin-top: 12px;
  color: var(--text-2);
}

.cta-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.footer-brand .brand-logo {
  height: 34px;
}

.footer-brand p {
  margin-top: 14px;
  max-width: 320px;
  color: var(--text-3);
  font-size: 14px;
}

.footer-col h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 700;
}

.footer-col ul {
  margin-top: 8px;
  display: grid;
  gap: 2px;
}

/* These were 19px-tall hit areas — under even the 24px WCAG 2.5.8 minimum, and
   the hardest links on the page to hit on a phone. */
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  font-size: 15px;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 13px;
  display: grid;
  gap: 12px;
}

.footer-legal a {
  color: var(--text-2);
  text-decoration: underline;
}

.footer-legal a:hover {
  color: var(--accent);
}

.disclaimer {
  max-width: 900px;
  line-height: 1.6;
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Blog & Articles ──────────────────────────────────────────────────────── */

.blog-hero {
  padding: 56px 0 36px;
  background: radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 70%);
  text-align: center;
}

.blog-hero-inner h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin: 12px 0 16px;
  line-height: 1.15;
}

.blog-hero .hero-sub {
  max-width: 680px;
  margin: 0 auto;
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.6;
}

.blog-grid-section {
  padding: 48px 0 80px;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent);
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.blog-card-category {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
}

.blog-card-title {
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 12px;
  font-weight: 700;
}

.blog-card-title a {
  color: var(--text);
  text-decoration: none;
}

.blog-card-title a:hover {
  color: var(--accent);
}

.blog-card-excerpt {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 20px;
  flex-grow: 1;
}

.blog-card-footer {
  margin-top: auto;
}

.blog-card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.blog-card-link:hover {
  text-decoration: underline;
}

/* Individual Post Layout */
.blog-post {
  padding: 40px 0 80px;
}

.blog-post-header {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}

.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 14px;
}

.blog-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.blog-category-badge {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
}

.blog-post-header h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.2;
  margin: 0 0 16px;
  max-width: 860px;
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-3);
}

.meta-dot {
  color: var(--text-3);
  opacity: 0.6;
}

.blog-post-container {
  max-width: 820px;
  margin: 0 auto;
}

.blog-post-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-2);
}

.blog-post-body h2 {
  font-size: 24px;
  line-height: 1.3;
  color: var(--text);
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.blog-post-body h3 {
  font-size: 20px;
  line-height: 1.35;
  color: var(--text);
  margin: 32px 0 12px;
}

.blog-post-body p {
  margin: 0 0 20px;
}

.blog-post-body ul, .blog-post-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.blog-post-body li {
  margin-bottom: 8px;
}

.blog-post-body blockquote {
  border-left: 4px solid var(--accent);
  padding: 12px 20px;
  margin: 24px 0;
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}

.blog-post-body blockquote p {
  margin: 0;
  color: var(--text);
}

.blog-post-body .table-wrap {
  overflow-x: auto;
  margin: 24px 0;
}

.blog-post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

.blog-post-body th, .blog-post-body td {
  padding: 12px 16px;
  border: 1px solid var(--border);
}

.blog-post-body th {
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 600;
}

.blog-post-body code {
  background: var(--surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.blog-post-body pre {
  background: var(--surface-alt);
  padding: 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 24px 0;
}

.blog-post-body a {
  color: var(--accent);
  text-decoration: underline;
}

.blog-post-body a:hover {
  color: var(--accent-strong);
}

/* ── Blog Category Filter ───────────────────────────────────────────────────── */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

.filter-btn {
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
  font-family: inherit;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.filter-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.blog-no-results {
  text-align: center;
  padding: 60px 0;
  color: var(--text-3);
  font-size: 16px;
}

/* ── Blog Card Cover Image ──────────────────────────────────────────────────── */
.blog-card-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: 16px;
  display: block;
}

/* ── Blog Post Cover Image (article page) ───────────────────────────────────── */
.blog-post-cover {
  margin-bottom: 40px;
}

.blog-cover-img {
  width: 100%;
  /* Match the listing card's 16:9 frame (.blog-card-cover) so the article hero
     shows the cover the same way the card does. The old `max-height: 480px` with
     no fixed aspect meant that at the 1140px `.wrap` width a ~16:9 cover rendered
     ~614px tall, got clamped to 480px, and `object-fit: cover` cropped ~67px off
     the top and bottom — the "dropped" hero. A 16:9 source now shows uncropped;
     any other aspect crops identically to the card. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}