/* Baner główny na telefonie zachowuje się jak na sylveco.pl:
   - kończy się tam, gdzie zaczyna się dolna belka (59 px + strefa bezpieczna),
   - napis każdego slajdu jest w ramce na zdjęciu (tło 70% koloru papieru),
   - slajdy nie wygasają, tylko przewijają się z prawej do lewej razem z napisami; palec/mysz przeciąga je na żywo
     (pozycje ustawia main.js, tu stan wyjściowy). Desktop bez zmian. */
@media (max-width: 1020px) {
  .hero { height: calc(100svh - 59px - env(safe-area-inset-bottom, 0px)); min-height: 440px; }
  .hero-slide .hero-title { padding-bottom: 14px; }
  .hero-slide .hero-card { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 0 var(--pad) 12px; padding: 14px 18px 16px; gap: 6px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
  .hero-slide .hero-card, .hero-slide .hero-card .label, .hero-slide .hero-card-text, .hero-slide .hero-card .link { color: var(--ink); }
  .hero-slide .hero-card .label { font-size: .6875rem; letter-spacing: .12em; }
  .hero-slide .hero-card-text { font-size: .9375rem; line-height: 1.4; margin-bottom: 4px; }

  .js .hero { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .js .hero .hero-slide { opacity: 1; visibility: visible; transform: translateX(100%); transition: none; }
  .js .hero .hero-slide.is-on { transform: none; }
  .js .hero .hero-slide .hero-title, .js .hero .hero-slide .hero-card, .js .hero.is-start .hero-slide.is-on .hero-title, .js .hero.is-start .hero-slide.is-on .hero-card { opacity: 1; transform: none; transition: none; animation: none; }
  .js .hero .hero-slide a, .js .hero .hero-slide img { -webkit-user-drag: none; }
}