/* responsive.css — media queries (desktop-first, max-width). Zob. design.md §7. */

/* ≤ 980px — tablet */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-visual{ display:none; }                 /* orbitujące logo + karty tylko desktop */
  .services-grid,.steps,.port-grid{ grid-template-columns:1fr 1fr; }
  .why-grid,.contact-grid{ grid-template-columns:1fr; gap:34px; }
  .feats{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .step .conn{ display:none; }                  /* łączniki między krokami */
}

/* ≤ 680px — mobile */
@media (max-width:680px){
  nav.links{                                    /* menu jako prawy drawer */
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
    background:#fff; flex-direction:column; justify-content:center; gap:26px;
    padding:40px; transform:translateX(100%); transition:transform .35s ease;
    box-shadow:var(--shadow); z-index:120;
  }
  nav.links.open{ transform:none; }
  nav.links a{ font-size:19px; color:var(--navy); }
  .burger{ display:flex; }                       /* hamburger widoczny */
  .services-grid,.steps,.port-grid,.foot-grid,.feats,.field.row{ grid-template-columns:1fr; }
  .hero-actions{ gap:12px; }
  .nav-cta-desktop{ display:none; }             /* CTA w nav chowamy na mobile */
  nav.links .nav-cta-mobile{ display:inline-flex; }  /* CTA w drawerze widoczne */
  .foot-bottom{ justify-content:flex-start; }
}

/* ≤ 560px — small */
@media (max-width:560px){
  .pshot{ width:230px; height:150px; }          /* kafelki paska zdjęć */
  .btn{ width:100%; }
  .hero-actions .btn{ width:100%; }
}

/* Redukcja ruchu — twardy wymóg (design.md §9.5) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .strip-track{ animation:none!important; }
  .orbit, .cloud-core, .float-card{ animation:none!important; }
  .reveal{ opacity:1!important; transform:none!important; }
}