/* =============================================================
   BOARD OF DIRECTORS — responsive overrides
   Breakpoints: 1200 · 1024 · 768 · 600 · 480 · 360
   ============================================================= */

/* ── Laptop / small desktop ── */
@media (max-width: 1200px) {
  .bod-grid { gap: 24px; }
  .bod-stat__items { gap: 26px clamp(24px, 3.5vw, 56px); }
}

/* ── Tablet landscape ── */
@media (max-width: 1024px) {
  .bod-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .bod-secnav__grid { grid-template-columns: repeat(2, 1fr); }
  .bod-banner-text__main { font-size: 32px; }

  /* SMT cards → 3 across */
  .smt-grid { grid-template-columns: repeat(3, 1fr); }

  /* Diversity stat panels: fewer columns so numbers don't crowd */
  .bod-stat__items { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .bod-stat__body  { padding: 24px 32px 50px 30px; }
}

/* ── Tablet portrait ── */
@media (max-width: 768px) {
  /* On mobile the utility bar is hidden → header ≈ nav bar only */
  .bod-breadcrumb { top: 84px; }
  .bod-breadcrumb__inner { padding: 0 20px; }
  .bod-breadcrumb__item { font-size: 10px; }
  .bod-breadcrumb__sep  { padding: 0 6px; }

  /* Hero stacks: headline → image → takeaway */
  .bod-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "headline"
      "image"
      "takeaway";
    padding: 150px 20px 32px;
    gap: 28px;
  }
  .bod-hero__img-wrap { min-height: 240px; }

  .bod-grid-wrap { padding: 40px 20px 56px; }
  .bod-secnav    { padding: 0 20px; }

  .bod-banner-text__top    { font-size: 26px; }
  .bod-banner-text__eyebrow{ font-size: 22px; }
  .bod-banner-text__main   { font-size: 30px; }
  .bod-takeaway            { padding: 24px 22px; }

  /* ── Board Diversity ── */
  .bod-div__inner { padding: 48px 20px 80px; }
  .bod-div__art   { max-width: 260px; }
  /* 2×2 grid collapses to a single column on small screens */
  .bod-div__rows  { grid-template-columns: 1fr; gap: 28px; }
  /* Average-tenure feature: full width when stacked on small screens */
  .bod-feature    { max-width: 100%; margin-left: 0; aspect-ratio: 16 / 10; }
  .bod-stat__body { padding: 22px 26px 46px 24px; }
  .bod-stat__items { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }

  /* Row items (Board Composition / Gender): icon BESIDE the text on small screens */
  .bod-stat__item--row { flex-direction: row; align-items: center; gap: 12px; }

  /* SMT cards → 2 across; modal stacks photo over bio */
  .smt-grid { grid-template-columns: repeat(2, 1fr); }
  .smt-wrap { padding: 44px 20px 64px; }
  .smt-modal__card { grid-template-columns: 1fr; max-height: 90vh; }
  .smt-modal__photo { min-height: 240px; max-height: 300px; }
  .smt-modal__body  { padding: 26px 24px 30px; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .bod-grid { grid-template-columns: 1fr; gap: 20px; }
  .bod-secnav__grid { grid-template-columns: 1fr; }
  .bod-legend { grid-template-columns: 1fr; row-gap: 12px; }

  /* SMT cards → 1 across */
  .smt-grid { grid-template-columns: 1fr; }

  /* Diversity stats: single column so each reads clearly */
  .bod-stat__items { grid-template-columns: 1fr; gap: 18px; }
  .bod-stat__head-row::after { width: 120px; }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
  .bod-hero__inner { padding: 130px 16px 28px; }
  .bod-grid-wrap   { padding: 32px 16px 48px; }
  .bod-secnav      { padding: 0 16px; }

  .bod-banner-text__top    { font-size: 24px; }
  .bod-banner-text__eyebrow{ font-size: 20px; }
  .bod-banner-text__main   { font-size: 26px; }
  .bod-banner-icon         { width: 46px; height: 46px; }
  .bod-takeaway            { padding: 20px 18px; }

  /* ── Board Diversity ── */
  .bod-div__inner  { padding: 40px 16px 64px; }
  .bod-div__title  { font-size: 16px; }
  .bod-stat__body  { padding: 20px 20px 42px 20px; }
  .bod-stat__head  { font-size: 16px; }
  .bod-stat__icon  { width: 46px; height: 42px; }
  .bod-stat__icon--sm { width: 34px; height: 34px; }
  .bod-stat__num   { font-size: 34px; }
  .bod-stat__label { font-size: 13px; }

  /* Director cards a touch tighter */
  .bod-card { padding: 18px 18px 22px; }
}

/* ── Very small ── */
@media (max-width: 360px) {
  .bod-banner-text__top  { font-size: 22px; }
  .bod-banner-text__main { font-size: 23px; }
  .bod-div__art          { max-width: 220px; }
  .bod-stat__body        { padding: 18px 16px 38px 16px; }
}