/* ==========================================================================
   iDARIS — Responsywność (mobile-first refinements + duże ekrany)
   ========================================================================== */

/* --- Duże monitory 4K: ogranicz nadmierne rozciąganie --- */
@media (min-width: 1800px) {
  :root {
    --container-w: 1480px;
  }
  .hero h1 {
    max-width: 18ch;
  }
}

/* --- Tablet --- */
@media (max-width: 1024px) {
  .split {
    gap: var(--sp-5);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .variant-panel.is-active {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  :root {
    --section-pad-y: 3.5rem;
  }

  .section-head {
    margin-bottom: var(--sp-4);
  }

  .variant-panel.is-active {
    grid-template-columns: 1fr;
  }

  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band__actions .btn {
    width: 100%;
  }

  .timeline-step__index {
    width: 44px;
    height: 44px;
    font-size: 0.75rem;
  }

  .grid { gap: var(--sp-3); }

  .site-header__actions .btn {
    padding: 0.7rem 1.1rem;
    font-size: 0.72rem;
  }
}

/* --- Bardzo małe ekrany --- */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 2.35rem;
  }
  .btn {
    padding: 0.85rem 1.4rem;
    font-size: 0.78rem;
  }
}

/* --- Print (przydatne dla specyfikacji) --- */
@media print {
  .site-header,
  .back-to-top,
  .hero__scroll-cue,
  .lightbox {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}