/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — RESPONSIVE BREAKPOINTS
   Mobile-first adjustments: 480 / 768 / 1024 / 1280
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   SMALL PHONES (≤ 480px)
   ══════════════════════════════ */

@media (max-width: 480px) {
  :root {
    --container-padding: var(--space-4);
    --section-padding-y: var(--space-12);
  }

  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }

  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
    grid-template-columns: 1fr;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .bento-span-2, .bento-span-3 {
    grid-column: span 1;
  }

  .split, .split--60-40, .split--40-60 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split--reverse > *:first-child { order: 1; }
  .split--reverse > *:last-child { order: 2; }

  .kpi__value { font-size: var(--font-size-2xl); }

  .section-header__desc { font-size: var(--font-size-base); }
}


/* ══════════════════════════════
   TABLETS (≤ 768px)
   ══════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --container-padding: var(--space-5);
    --section-padding-y: var(--space-16);
  }

  /* (Nav → hamburger switch now happens at 992px above; phone at 1228px.) */

  /* Footer grid collapse */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Grid fallbacks */
  .grid-3, .grid-4, .grid-5, .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-span-3 { grid-column: span 2; }

  .split, .split--60-40, .split--40-60 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split--reverse > *:first-child { order: 1; }
  .split--reverse > *:last-child { order: 2; }

  /* KPI grid */
  .grid-4.kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reduce section header size */
  .section-header { margin-bottom: var(--space-8); }

  /* Marquee fade edges smaller on mobile */
  .magic-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  }

  /* Orbit — shrink */
  .magic-orbit {
    width: 280px;
    height: 280px;
  }

  .magic-orbit__item {
    width: 36px;
    height: 36px;
  }
}


/* ══════════════════════════════
   SMALL DESKTOPS (≤ 1024px)
   ══════════════════════════════ */

@media (max-width: 1024px) {
  .grid-5, .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 3;
  }
}


/* ══════════════════════════════
   LARGE DESKTOPS (≤ 1280px)
   ══════════════════════════════ */

@media (max-width: 1280px) {
  .container--wide {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Hide the header phone before the nav gets cramped (still desktop layout at this width). */
@media (max-width: 1228px) {
  .header-phone { display: none; }
}

/* Switch to the mobile hamburger nav at 1090px (was 768px). Region switcher stays visible. */
@media (max-width: 1090px) {
  .site-nav { display: none; }
  .mobile-toggle { display: flex; }
  .header-cta { display: none; }
  .mega-overlay { display: none; }
}


/* ══════════════════════════════
   RESPONSIVE DISPLAY UTILITIES
   ══════════════════════════════ */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}


/* ══════════════════════════════
   RESPONSIVE TYPOGRAPHY
   ══════════════════════════════ */

@media (max-width: 768px) {
  .lead {
    font-size: var(--font-size-base);
  }
}


/* ══════════════════════════════
   HEADER SPACER RESPONSIVE
   ══════════════════════════════ */

@media (max-width: 768px) {
  .header-spacer { height: 64px; }
}