/* ==========================================================================
   Vincent Newsletter Section — dodatki do natywnego site-newsletter-section
   Hanoi (assets/sass/components/_site-newsletter-section.scss, wbudowany
   w hanoi.core.min.css — TEGO pliku nie ruszamy, tylko dokladamy wlasne
   reguly nad nim, jak przy kazdym innym komponencie Vincenta w tym motywie).

   Na wyrazna prosbe (2026-08-16): maly kicker nad tytulem, drobny druk pod
   formularzem. Pole wyboru newslettera zostalo calkowicie usuniete z
   markupu w site-newsletter-section.hbs (nie tylko ukryte tu przez CSS) —
   jeden aktywny newsletter nie potrzebuje wyboru.

   NAPRAWIONE (2026-08-16, ten sam dzien): pierwsza wersja tego pliku miala
   tez wysrodkowany uklad i wiekszy tytul — user tego NIE prosil, to byla
   moja wlasna, niepotwierdzona decyzja przy okazji innej prosby. Cofniete.
   Uklad zostaje w 100% natywny — lewostronny, dokladnie taki, jak w
   pierwotnej (obecnej na zywo) wersji tej sekcji. Ten plik dodaje TYLKO
   nowe elementy (kicker, drobny druk), ktorych w ogole nie bylo wczesniej
   w tym komponencie — nic z ukladu/rozmiarow istniejacych elementow. --- */

.c-site-newsletter-section__eyebrow {
    font-family: var(--gh-font-body, 'Geist', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ghost-accent-color, var(--color-accent));
    margin: 0 0 8px;
}

.c-site-newsletter-section__fine {
    font-family: var(--gh-font-body, 'Geist', sans-serif);
    font-size: 14px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text, #000) 70%, transparent);
    margin: 12px 0 0;
}

/* --- Odstep miedzy naglowkiem a tekstem pod nim (2026-08-16, zgloszenie
   "brakuje odstepu") — natywny __content to CSS grid z JEDNYM, stalym
   gap:16px miedzy KAZDA para sasiadujacych elementow (kicker->tytul,
   tytul->opis, opis->formularz jednakowo). Przy duzym, 40px tytule ten
   sam plaski 16px wyglada zbyt ciasno pod spodem — doklada wiec dodatkowy
   margines TYLKO nad opisem (sumuje sie z gap grida: 16+16=32px), nie
   ruszajac pozostalych dwoch odstepow, ktore juz wygladaly dobrze. --- */
.c-site-newsletter-section__excerpt {
    margin-top: 16px;
}

/* ==========================================================================
   Zdjecie w sekcji newslettera — OSMA runda (2026-08-17). Zgloszenie: "za
   szybko/nagle przeskakuje z ukladu obok siebie na uklad jeden-nad-drugim,
   zdjecie w ogole nie zwęza sie po bokach stopniowo tak jak wczesniej".

   Runda 7 wprowadzila TRZECI, posredni zakres (61.25-99.99em) wylacznie po
   to, zeby uniknac katastrofalnego (58-65%) przeciecia bokow tuz przy 980px.
   Skutek uboczny, ktorego wtedy nie doceniłem: to dodalo DRUGIE, calkiem
   nowe, twarde przejscie przy 100em (1600px) — z "zero przeciecia, jedna
   kolumna" na "~22% przeciecia, dwie kolumny" SKOKIEM, w jednym pikselu.
   Dokladnie to zglaszasz jako "dziwny przeskok". Runda 6 (jeszcze wczesniej)
   miala tylko JEDNO takie przejscie (przy 980px, nieuniknione przy jakim-
   kolwiek ukladzie obok-siebie) i za to bylo odbierane jako plynne — mimo
   swojego wlasnego, niewykrytego wtedy bledu (58-65% tuz po 980px).

   Naprawa: wracam do DWOCH zakresow (mobile / desktop), bez posredniego —
   ALE tym razem z poprawnie zmierzonymi (nie zgadywanymi) parametrami, zeby
   przeciecie przy starcie zakresu desktopowego bylo mniejsze niz w rundzie 6
   (choc wciaz nie "delikatne" — patrz nizej, to fizyczna granica przy tym
   zdjeciu). W ramach TEGO zakresu (61.25em+) przeciecie boczne zmienia sie
   teraz w 100% plynnie/ciaglo wraz z szerokoscia ekranu — bez zadnego
   dodatkowego progu w srodku.

   Dwie konkretne poprawki wzgledem rundy 6:
   1) kolumna tekstu: minmax(0, min(720px, 46%)) zamiast minmax(560px,...).
      Usuniete sztywne minimum 560px — ono powodowalo, ze kolumna tekstu
      SKOKIEM "ladowala" na 560px zaraz po 980px (bo 46% szerokosci wiersza
      w tej okolicy to i tak mniej niz 560), co dawalo NIEPLYNNY start.
      Bez minimum kolumna rosnie w 100% ciaglo od malej wartosci w gore
      (a rzad pole+przycisk i tak bezpiecznie zawinie sie ponizej, gdy
      zrobi sie za waski — patrz regula __email/__input/__button nizej).
   2) wysokosc zdjecia: clamp(690px, 42vw, 800px) zamiast clamp(630px,...).
      630px bylo za malo — zmierzone poprawnie (z pilnowaniem, ze zadana i
      faktyczna szerokosc okna faktycznie sie zgadzaja — we wczesniejszych
      pomiarach czasem nie), prawdziwa najwyzsza wysokosc kolumny tekstu tuz
      po 980px (bez minimum 560px, wiec tekst zawija sie jeszcze mocniej) to
      667px. 690px daje bezpieczny margines - formularz NIGDY nie jest
      wyzszy niz zdjecie, na kazdej sprawdzonej szerokosci.

   Efekt uboczny (fizyczny, nie do obejscia bez zmiany zdjecia lub tekstu):
   przy samym starcie zakresu desktopowego (tuz po 980px) przeciecie bokow
   wynosi teraz ok. 55% (zamiast poprzednich 58-65% — troche lepiej, ale
   wciaz nie "delikatnie"), i maleje W 100% PLYNNIE, bez zadnego skoku, w
   miare poszerzania okna: ~55% (981px) -> ~49% (1100px) -> ~39% (1300px)
   -> ~29% (1500px) -> ~20% (1728px) -> ~13% (1920px). "Fits" (tekst
   miesci sie pod wysokoscia zdjecia) potwierdzone na zywo na kazdym z tych
   punktow. Jesli to poczatkowe ~55% dalej przeszkadza, jedyne dalsze
   dzwignie to: krotszy opis w formularzu (mniejsza wymagana wysokosc
   kolumny tekstu) albo zdjecie o mniej poziomej proporcji — obie wymagaja
   Twojej decyzji, nie sa czyms, co mozna dalej "wykrecic" samym CSS bez
   naruszenia ktoregos z Twoich dwoch twardych wymogow (zero przeciecia
   gory/dolu, formularz nigdy wyzszy niz zdjecie). --- */
.c-site-newsletter-section__image {
    object-position: top;
}

@media (max-width: 61.24em) {
    /* width:100%/height:auto — bez tego aspect-ratio na itemie siatki
       potrafi NIE rozciagnac sie na cala szerokosc kolumny. Znalezione i
       potwierdzone na zywo (2026-08-17). */
    .c-site-newsletter-section:not(.c-site-newsletter-section--no-media) .c-site-newsletter-section__media {
        aspect-ratio: 3569 / 2382;
        width: 100%;
        height: auto;
    }

    .c-site-newsletter-section:not(.c-site-newsletter-section--no-media) .c-site-newsletter-section__media:before {
        display: none;
    }
}

@media (min-width: 61.25em) {
    .c-site-newsletter-section:not(.c-site-newsletter-section--no-media) .c-site-newsletter-section__inner {
        grid-template-columns: 1fr minmax(0, min(720px, 46%));
        align-items: center;
    }

    .c-site-newsletter-section:not(.c-site-newsletter-section--no-media) .c-site-newsletter-section__media {
        grid-column: auto;
        width: 100%;
        height: clamp(690px, 42vw, 800px);
        align-self: center;
    }

    .c-site-newsletter-section:not(.c-site-newsletter-section--no-media) .c-site-newsletter-section__content {
        grid-column: auto;
    }
}

.c-site-newsletter-section__email {
    flex-wrap: wrap;
}

.c-site-newsletter-section__input {
    min-width: 220px;
}

/* --- Zgloszenie (2026-08-17): "pole e-mail za dlugie albo przycisk za
   krotkie, nie wyglada to dobrze" — gdy powyzszy wrap sie juz uruchomi
   (za malo miejsca w rzedzie), pole samo z siebie rozciaga sie na cala
   szerokosc swojej linii (ma natywnie width:100%), ale przycisk NIE mial
   zadnej reguly wzrostu — zostawal male, tresciowej szerokosci, osobno
   pod spodem. Efekt: szeroki pasek pola, a pod nim maly, "obcięty"
   przycisk — niesymetrycznie. Naprawa: przycisk dostaje flex-grow:1, wiec
   gdy jest sam w swojej linii (po zawinieciu), rozciaga sie na 100% tak
   samo jak pole. W NORMALNYM ukladzie w rzedzie (gdy oba mieszcza sie
   obok siebie) ta regula nic nie zmienia — pole i tak zawsze "chce" byc
   szersze niz caly rzad (ma width:100%), wiec to zawsze pole jest sciskane
   (flex-shrink), a nie przycisk (ktory ma flex-shrink:0 natywnie) —
   flex-grow włacza sie tylko wtedy, gdy w linii zostaje wolne miejsce do
   rozdzielenia, czyli wylacznie gdy przycisk jest sam. --- */
.c-site-newsletter-section__button {
    flex-grow: 1;
}