/* Globalne dostrojenia dla mniejszych ekranów — reguły specyficzne dla
   komponentów znajdują się przy komponentach; tu tylko przekrojowe zmiany. */

@media (max-width: 1180px) {
  :root {
    --container-padding: 20px;
  }
}

@media (max-width: 980px) {
  :root {
    --space-xl: 60px;
    --space-xxl: 80px;
    --header-height: 72px;
  }
}

@media (max-width: 640px) {
  :root {
    --space-xl: 48px;
    --space-xxl: 64px;
    --space-lg: 36px;
  }

  .section {
    padding-block: var(--space-xl);
  }

  body {
    font-size: 0.96rem;
  }
}

/* Tabele ze scrollem poziomym zamiast łamania layoutu */
@media (max-width: 480px) {
  .contact-card,
  .cta-banner,
  .card {
    padding: var(--space-sm);
  }
}