/* =====================================================================
   Nadpisania stylów szablonu SK
   =====================================================================

   Ten plik jest pisany ręcznie i NIE jest generowany z mockupu.

   `style-camel-2.css` powstaje w całości z eksportu projektu graficznego,
   więc każda zmiana wprowadzona bezpośrednio w nim przepada przy najbliższym
   imporcie nowego CSS-a. Poprawki, które mają przetrwać regenerację,
   trafiają tutaj.

   Wczytywany PO `style-camel-2.css` (patrz templates/sk/index.php), dlatego
   przy równej specyficzności selektorów wygrywają reguły z tego pliku —
   nie trzeba sztucznie podbijać selektorów ani używać !important.

   Każdą sekcję opisuj: czego dotyczy i dlaczego nie może wrócić do mockupu.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Konkurs one2one — sekcja z kartami inspiracji
   --------------------------------------------------------------------- */

/* Po wybraniu karty podpowiedź „Kliknij wybraną kartę…" traci sens, więc
   znika. `inspiration-flip.js` dokłada wtedy klasę `has-selection` na grid,
   a podpowiedź jest jego bezpośrednim sąsiadem w DOM.

   Ujemny margines kasuje `gap` flexowego kontenera `.contest-inspiration` —
   bez tego po zwiniętym akapicie zostałaby pusta przerwa. */
.page-konkurs-one2one .contest-inspiration__grid.has-selection + .contest-inspiration__note {
  opacity: 0;
  height: 0;
  margin-top: -1.875rem;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, height 0.4s ease, margin-top 0.4s ease;
}

@media (max-width: 1023px) {
  .page-konkurs-one2one .contest-inspiration__grid.has-selection + .contest-inspiration__note {
    margin-top: -1.25rem;
  }
}


/* ---------------------------------------------------------------------
   Konkurs one2one — odstęp między kartami a formularzem
   --------------------------------------------------------------------- */

/* Wspólna reguła `.contest-form` daje 6.25rem/3.75rem górnego paddingu na
   wszystkich stronach konkursowych. Tu zawężamy odstęp wyłącznie dla one2one;
   bittersweet, own-it-cover i strona wyników zostają bez zmian. */
.page-konkurs-one2one .contest-form {
  padding-top: 3.125rem;
}

@media (max-width: 1023px) {
  .page-konkurs-one2one .contest-form {
    padding-top: 2.5rem;
  }
}


/* ---------------------------------------------------------------------
   Strona główna — baner hero na wąskich ekranach
   --------------------------------------------------------------------- */

/* Do 924px kolumna treści hero ma `max-width: 14.8125rem` (237px). Na ekranie
   375px zostawia to 138px niewykorzystanej szerokości i zmusza tytuły do
   łamania się w innych miejscach niż wymuszone znacznikami <br /> w artykule:
   drugi tytuł rozjeżdżał się z 4 do 8 linii.

   Elementy flexa mogą się kurczyć, więc pudełka <h2> były ściskane poniżej
   wysokości tekstu, a ten wylewał się poza nie i zachodził na logo
   „WANT IT MORE? OWN IT" (.hero-slider__winpoints).

   Poszerzenie kolumny do 20rem, z zapasem 1.25rem marginesu po każdej stronie,
   przywraca łamanie zgodne z zamysłem projektanta. Zmierzone na 375x667:
   drugi tytuł spada ze 288px do 144px, logo odzyskuje pełne 66px wysokości,
   a przycisk kończy się na 615px z 667px dostępnych — również przy
   dwuczłonowym imieniu i przy slajdzie z packshotem. */
@media (max-width: 480px) {
  .hero-slider__content {
    max-width: min(20rem, calc(100vw - 2.5rem));
  }

  /* Zabezpieczenie na wypadek wyjątkowo długiego imienia: tytuły i logo nie
     kurczą się poniżej własnej wysokości, więc tekst nigdy nie nachodzi.
     Packshot i CTA zostają elastyczne — packshot opiera się na margin-top: auto. */
  .hero-slider__title,
  .hero-slider__winpoints {
    flex-shrink: 0;
  }
}


/* ---------------------------------------------------------------------
   Strona główna — slajd „Kto powiedział…" na niskich ekranach
   --------------------------------------------------------------------- */

/* Ten slajd ma o jeden element więcej niż pozostałe — packshot z paczkami —
   i na ekranie 375x667 cała kolumna potrzebuje 744px przy 667px dostępnych.
   Nadmiar wypycha przycisk „Zobacz nowe paczki" w dół, na pager zmieniający
   banery (.hero-slider__bottom jest pozycjonowany absolutnie przy dolnej
   krawędzi), przez co kafelków nie dało się kliknąć.

   Ograniczenie wysokości packshotu i zmniejszenie odstępów mieści treść
   w ekranie. Gdy przestaje być za ciasno, `margin-top: auto` na przycisku
   znów działa i samo ustawia go 52px nad dołem — dlatego marginesu przycisku
   celowo nie ruszamy.

   Zmierzone na 375x667: przycisk kończy się na 615px, pager zaczyna na 639px,
   czyli 24px odstępu; dzielnik i logo zachowują pełną wysokość. Na 390x844
   reguła nie obowiązuje i packshot zostaje w pełnym rozmiarze (191px). */
@media (max-width: 480px) and (max-height: 720px) {
  .hero-slider__content {
    gap: 0.25rem;
  }

  .hero-slider__packshoots {
    margin-top: 0;
  }

  .hero-slider__packshoots img {
    max-height: 6rem;
    width: auto;
    margin: 0 auto;
    display: block;
  }
}


/* ---------------------------------------------------------------------
   Konkurs one2one — kadrowanie wideo w banerze na mobile
   --------------------------------------------------------------------- */

/* Wideo hero ma proporcje 1280x720, a na pionowym ekranie 375x667 mieści się
   w kadrze tylko około 29% jego szerokości. Przy domyślnym `object-position:
   center` wielbłąd — główny motyw ujęcia — wypada częściowo poza kadrem.

   Przesunięcie punktu zaczepienia w prawo pokazuje dalszą część ujęcia, czyli
   wizualnie przesuwa obraz w lewo. 70% pokazuje sylwetkę i szyję na spokojnym
   tle pod tekstem; 80% mieści również głowę, ale ląduje ona tuż za podtytułem.

   Reguła dotyczy wyłącznie strony konkursu — baner na stronie głównej
   korzysta z innego materiału i zostaje bez zmian. */
@media (max-width: 924px) {
  .page-konkurs-one2one .hero-slider__bg-video {
    -o-object-position: 80% 50%;
    object-position: 80% 50%;
  }
}