/* ==========================================================================
   ALDAR FARMA — responsive.css
   Wyłącznie nadpisania breakpointowe. Żadnych nowych komponentów.
   Ładowany jako ostatni — jego reguły wygrywają kaskadę.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 320px — iPhone SE 1. gen i starsze. Nic nie może się tu złamać.
   -------------------------------------------------------------------------- */
@media (max-width: 20.5em) {
  :root {
    --gutter: 1rem;
    --panel-pad: 1rem;
  }

  .logo {
    font-size: 1.125rem;
  }

  .btn {
    padding-inline: var(--space-4);
    font-size: var(--text-sm);
  }

  .hero__actions .btn {
    width: 100%;
  }

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

/* --------------------------------------------------------------------------
   < 40em — telefon
   -------------------------------------------------------------------------- */
@media (max-width: 39.99em) {
  /* CTA na pełną szerokość — najłatwiejszy cel dotykowy */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Pasek zaufania w hero: kolumna zamiast łamania w rzędzie */
  .hero__trust {
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Zapas u dołu strony na pływający pasek kontaktu */
  .footer {
    padding-block-end: calc(var(--space-8) + 5rem);
  }

  .card {
    min-height: 13rem;
  }

  .quote {
    padding: var(--space-6) var(--space-5);
  }

  .faq__q {
    font-size: var(--text-base);
    padding-inline: var(--space-4);
  }

  .faq__a {
    padding-inline: var(--space-4);
  }

  .footer__bottom {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   40em–62em — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 40em) and (max-width: 61.99em) {
  .footer {
    padding-block-end: calc(var(--space-8) + 5rem);
  }

  /* Slider pokazuje fragment kolejnej karty — sygnał, że można przewijać */
  .slider__item {
    width: min(72%, 24rem);
  }
}

/* --------------------------------------------------------------------------
   ≥ 62em — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 62em) {
  .slider__item {
    /* 100% liczy się od .slider__track (flex, szerokość definitywna z bloku
       nadrzędnego) — bez dwuznaczności, jaką miał grid-auto-columns. */
    width: calc((100% - 2 * var(--space-5)) / 3);
  }
}

/* --------------------------------------------------------------------------
   ≥ 96em — bardzo szerokie ekrany
   Sam kontener przestaje rosnąć; zwiększamy oddech pionowy,
   żeby proporcje nie spłaszczyły się na monitorze 4K.
   -------------------------------------------------------------------------- */
@media (min-width: 96em) {
  :root {
    --section-y: 9.5rem;
  }

  .hero__content {
    max-width: 52rem;
  }
}

/* --------------------------------------------------------------------------
   Ekrany niskie i szerokie (laptop 13" w poziomie, telefon w landscape)
   Hero na 100svh byłoby tu ścianą tekstu bez miejsca na obraz.
   -------------------------------------------------------------------------- */
@media (max-height: 34em) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--header-h, 5rem) + var(--space-10)) var(--space-10);
  }

  .hero__trust {
    display: none;
  }

  .hero__scroll {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Urządzenia bez precyzyjnego wskaźnika (dotyk)
   Efekty hover nie mają sensu i powodują „przyklejony hover" po tapnięciu.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover,
  .brand-card:hover,
  .feature:hover,
  .partner:hover,
  .btn:hover {
    transform: none;
  }

  .card:hover .card__media img,
  .brand-card:hover .brand-card__media img,
  .zoom-on-hover:hover img,
  .gallery__item:hover img {
    transform: none;
  }

  /* Rekompensata: wyraźna reakcja na dotknięcie */
  .card:active,
  .brand-card:active,
  .feature:active,
  .partner:active {
    transform: scale(0.985);
    transition-duration: var(--dur-fast);
  }
}