/* ==========================================================================
   Aurora Terminal — responsive.css
   Mobile-first overrides, breakpoints, accessibility & motion preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breakpoints
   -------------------------------------------------------------------------- */

/* --- ≤ 1180px : tighten the 3-up grids ------------------------------- */
@media (max-width: 1180px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.7fr));
  }
  .footer__col--last { grid-column: 2 / -1; }
}

/* --- ≤ 1024px : collapse two-column sections --------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .hero__visual { max-width: 560px; width: 100%; }
  .terminal { transform: none; }
  .terminal:hover { transform: none; }

  .about__grid,
  .skills__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .about__portrait {
    max-width: 420px;
    aspect-ratio: 1 / 1;
  }
  .portrait__monogram { font-size: clamp(4.5rem, 16vw, 7rem); }

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

  .pricing__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .plan--featured { order: -1; }

  .float-chip--1 { left: 0; }
  .float-chip--2 { right: 0; }
}

/* --- ≤ 900px : swap nav for drawer ------------------------------------ */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__actions .btn { display: none; }
  .header__actions { gap: 8px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .work__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* --- ≤ 760px : stack everything --------------------------------------- */
@media (max-width: 760px) {
  .wrap,
  .wrap-narrow,
  .header__inner {
    width: calc(100% - 2rem);
  }

  .hero {
    padding-top: calc(var(--header-h) + 36px);
  }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__meta { gap: var(--sp-4) var(--sp-5); }
  .hero__meta-item b { font-size: 1.15rem; }

  .process__grid { grid-template-columns: 1fr; }
  .step { gap: var(--sp-2); }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
  .footer__col--last { grid-column: auto; }

  .form__row { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
  .form__fine { flex-basis: 100%; }

  .testimonials__grid,
  .services__grid { grid-template-columns: 1fr; }

  /* Straddle the card edges so the chips never sit on top of the code */
  .float-chip--1 { top: -15px; left: 14px; right: auto; }
  .float-chip--2 { top: auto; bottom: -15px; right: 14px; }
  .float-chip--3 { display: none; }
  .float-chip { font-size: 0.7rem; padding: 7px 12px; }

  .terminal__body { font-size: 0.68rem; min-height: 0; }
  .terminal__title { font-size: 0.62rem; }
}

/* --- ≤ 560px : phones -------------------------------------------------- */
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 18px 12px; }
  .stat__num { font-size: 1.75rem; }
  .stat__label { font-size: 0.62rem; letter-spacing: 0.06em; }

  .work__grid { grid-template-columns: 1fr; }
  .work__filters { gap: 6px; }
  .filter-btn { padding: 8px 14px; font-size: 0.7rem; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; text-align: center; }

  .quote__text { padding-left: 0; }
  .quote__text::before { display: none; }

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

  .cta-band { padding: 36px 20px; border-radius: var(--r-xl); }
  .cta-band .row { flex-direction: column; }
  .cta-band .btn { width: 100%; }

  .marquee__item { font-size: 0.95rem; }
  .to-top { width: 42px; height: 42px; }
  .logo__text small { display: none; }
}

/* --- ≤ 380px : small phones -------------------------------------------- */
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .about__facts { grid-template-columns: 1fr; }
  .skills__stack { grid-template-columns: 1fr 1fr; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   2. Wide screens — keep line lengths sane
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --wrap: 1320px; }
  .bg-grid { background-size: 80px 80px; }
}

/* --------------------------------------------------------------------------
   3. Pointer / hover capabilities
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card--hover:hover { transform: none; }
  .project:hover { transform: none; }
  .method:hover { transform: none; }
  .step:hover { transform: none; }
  .plan:hover { transform: none; }
  .btn:hover { transform: none; }
  .card--spot::before { opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. Reduced motion — honour the user
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero__title .line > span { transform: none !important; }
  .drawer.is-open .drawer__link,
  .drawer__foot { opacity: 1 !important; animation: none !important; }
  .blob { animation: none !important; }
  .marquee__track { animation: none !important; }
  .bg-aurora { filter: blur(80px); }
  .float-chip,
  .portrait__monogram { animation: none !important; }
  .avail__dot::after { animation: none !important; }
  .heart { animation: none !important; }
  .terminal__caret { animation: none !important; }
  .scroll-cue__thumb { animation: none !important; }
  .role-swap__item.is-active { animation: none !important; }

  /* JS will set this class when motion is off, but guard anyway */
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* --------------------------------------------------------------------------
   5. Print
   -------------------------------------------------------------------------- */
@media print {
  .bg-aurora, .bg-grid, .bg-grain, .cursor-dot, .cursor-ring,
  .header, .drawer, .to-top, .scroll-progress, .preloader,
  .scroll-cue, .float-chip, .work__filters, .form {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .card, .plan, .step, .stat { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .section { padding-block: 24px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #555; }
}

/* --------------------------------------------------------------------------
   6. Forced colors (Windows high contrast)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .card, .plan, .step, .stat, .faq__item, .form { border: 1px solid CanvasText; }
  .grad-text, .stat__num, .role-swap__item, .portrait__monogram {
    forced-color-adjust: none;
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .btn--primary, .filter-btn.is-active, .plan__flag {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}