/**
 * Dodatkowe dostrojenia responsywności, których nie obsługują media queries
 * osadzone bezpośrednio w komponentach. Ładowany jako ostatni, aby móc
 * bezpiecznie nadpisywać wcześniejsze reguły na wąskich ekranach.
 */

/* Bardzo małe ekrany (360-390px) */
@media (max-width: 420px) {
  :root {
    --container-padding: 1.1rem;
  }

  .hero__title {
    font-size: var(--fs-3xl);
  }

  .hero {
    min-height: 100vh;
  }

  .quote-block__text {
    font-size: var(--fs-xl);
  }

  .quick-facts {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-md);
  }

  .nav-dropdown {
    min-width: unset;
  }
}

/* Telefony i małe tablety */
@media (max-width: 767px) {
  .section {
    padding-block: var(--space-xl);
  }

  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-xl); }

  .hero__title {
    max-width: 100%;
  }

  .newsletter {
    padding: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tablety */
@media (min-width: 768px) and (max-width: 1023px) {
  .editorial-grid__feature,
  .editorial-grid__secondary {
    grid-column: span 6;
  }

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

/* Desktop szeroki */
@media (min-width: 1441px) {
  .container {
    max-width: 1400px;
  }
}

/* Zapewnienie braku poziomego scrolla */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}