/* ============================================================
   responsive.css — Media queries: 1024px, 768px, 480px
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   LARGE TABLET — 1024px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

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


/* ══════════════════════════════════════════════════════════════
   TABLET — 768px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Nav: hide links, show burger */
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  /* Hero */
  .hero__stats {
    gap: var(--space-6);
  }

  .hero__stat-divider {
    display: none;
  }

  /* Problem grid: 2 cols */
  .problem__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Education bento inner: 2 cols on tablet */
  .bento--inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Wide cards still span 2 on tablet */
  .bento-card--wide {
    grid-column: span 2;
  }

  .bento-card--wide .bento-card__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Cases: 2-column grid on tablet */
  .cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Team */
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Paths: 1 col on tablet */
  .paths__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Pricing: 1 col on tablet */
  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }

  /* Testimonials: 2 cols on tablet */
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process: 2 cols on tablet */
  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Directions: 2 col on tablet */
  .directions__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Corporate: stack on tablet */
  .corporate__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .corporate__stats {
    justify-content: center;
  }

  /* Contact paths: stack */
  .contact__paths {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

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

  .footer__brand {
    grid-column: span 2;
  }

  /* Form rows */
  .form__row {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE — 480px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Tighten section padding */
  :root {
    --section-pad-y: 3.5rem;
    --container-pad: 1.25rem;
  }

  /* Hero title: no max-width constraint, no hyphenation on small screens */
  .hero__title {
    max-width: none;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }

  /* Hero */
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__stats {
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
  }

  /* Problem: 1 col + fix long word overflow */
  .problem__grid {
    grid-template-columns: 1fr;
  }

  .problem__title,
  .problem__title .accent {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Services bento: 1 col */
  .bento {
    grid-template-columns: 1fr;
  }

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

  .bento-card--wide {
    grid-column: span 1;
  }

  /* Cases: 1 col on mobile */
  .cases__grid {
    grid-template-columns: 1fr;
  }

  /* Testimonials: 1 col on mobile */
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  /* Process: 1 col on mobile */
  .process__grid {
    grid-template-columns: 1fr;
  }

  /* Directions: 1 col on mobile */
  .directions__grid {
    grid-template-columns: 1fr;
  }

  /* Corporate stats: wrap on narrow screens */
  .corporate__stats {
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  /* Team: 1 col on very small screens */
  .team__grid {
    grid-template-columns: 1fr;
  }

  /* Marquee slightly smaller */
  :root {
    --text-marquee: 2rem;
  }

  /* Modal */
  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal__panel {
    max-height: 90dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-8) var(--container-pad);
  }

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

  .footer__brand {
    grid-column: span 1;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer__legal-links {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__scroll-dot {
    animation: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════════ */
@media print {
  .nav,
  .marquee-section,
  .modal,
  .hero__scroll-indicator {
    display: none !important;
  }
}