/* ==========================================================================
   Vincent Signup Card — na wyrazna prosbe (2026-08-17): natywna karta
   Ghosta "Email signup" (wstawiana w dowolnym poscie/stronie przez "+"
   albo "/signup" w edytorze) ma wygladac tak samo jak formularz zapisu na
   stronie glownej (partials/components/site-newsletter-section.hbs +
   assets/css/vincent-newsletter-section.css).

   WAZNE ROZROZNIENIE (wyjasnione tez userowi w rozmowie): to NIE jest ten
   sam komponent, tylko dwa OSOBNE mechanizmy Ghosta:
   - strona glowna: TRESC (tytul/opis/zdjecie) pobierana automatycznie ze
     stalej strony Ghost oznaczonej #site-newsletter — ten sam tekst i
     zdjecie zawsze, bez ingerencji przy kazdym uzyciu.
   - karta w postach: TRESC wpisywana RECZNIE przez autora za kazdym razem,
     gdy wstawia karte w nowym poscie (Ghost nie ma mechanizmu, zeby
     automatycznie wypelnic ja stala trescia z motywu) — jesli Pawel chce
     identyczny tekst/zdjecie za kazdym razem, najlatwiej zapisac raz
     skonfigurowana karte jako "Snippet" w edytorze Ghost i wstawiac go
     jednym kliknieciem w kolejnych postach.

   Ten plik odpowiada WYLACZNIE za WIZUALNE dopasowanie — dziala
   automatycznie, bez zadnej konfiguracji, na KAZDEJ wstawionej karcie.
   Kilka rund poprawek (wszystkie 2026-08-17, ta sama strona testowa:
   longevitypremium.pl/magdalena-horochowik-2/), skrocona historia ponizej
   przy kazdej regule — pelna historia w historii zmian pliku. --- */

/* Domyslne (bez wybranego w edytorze koloru tla/obrazka) tlo karty —
   ten sam cieply, przycmiony odcien akcentu i obramowanie co karta
   formularza na stronie glownej, zamiast plaskiego, natywnego szarego.
   !important konieczne: Ghost zapisuje domyslny szary jako STYL LINIOWY
   wprost w tresci kazdej karty (nie w arkuszu stylow) — bije kazdy zwykly
   selektor niezaleznie od specyficznosci. */
.kg-signup-card:not(.kg-style-accent):not(.kg-style-image) {
    background-color: var(--color-background-accent-soft) !important;
    border: 1px solid var(--color-background-accent-soft-border);
}

/* Podtytul karty ("Dolacz bezplatnie. Odbierz dostep..." itd.) natywnie
   dziedziczy czcionke NAGLOWKA (Bricolage Grotesque) zamiast czcionki
   tresci (Geist) — zmierzone na zywo, potwierdzone. Reszta motywu (w tym
   formularz na stronie glownej) uzywa Geist dla kazdego tekstu, ktory nie
   jest naglowkiem. !important — jakas bardziej specyficzna natywna regula
   (np. warianty .kg-width-*) wygrywala bez tego, sprawdzone na zywo. --- */
.kg-signup-card-subheading {
    font-family: var(--gh-font-body, 'Geist', sans-serif) !important;
}

/* Drobny druk pod formularzem — ten sam przycmiony odcien co
   .c-site-newsletter-section__fine na stronie glownej, zamiast pelnej
   czerni. */
.kg-signup-card-disclaimer {
    color: color-mix(in srgb, var(--color-text, #000) 70%, transparent);
}

/* Bezpieczne kadrowanie zdjecia — kazde zdjecie wgrane tu przez autora
   bedzie kadrowane od gory (nie od SRODKA jak natywnie), wiec nie traci
   glowy przy przycinaniu bokow (patrz regula nizej — teraz to jedyne
   mozliwe przypiecie, gdy zdjecie i tekst wyjda na inna szerokosc kolumny
   niz zdjecie by chcialo, choc przy tym ukladzie to i tak sie nie zdarza).
   !important, bo natywna regula obiektowa na desktopie ma wyzsza
   specyficznosc niz sam ten selektor. --- */
.kg-signup-card-image {
    object-position: top !important;
}

/* Ponizej 1280px zdjecie i tekst NIE dziela tego samego rzedu grida (kazde
   jest w osobnym rzedzie, jedno pod drugim — patrz media query nizej, ktora
   ponizej 1280px wymusza jedna kolumne) — wiec zdjecie nie ma tu do czego
   "dopasowac" wysokosci i musi miec zawsze WLASNA, naturalna proporcje
   wzgledem swojej szerokosci kolumny (height:auto). Bez tego zastrzezenia
   zdjecie w ogole znikalo (natywny mechanizm height:0;min-height:100%
   potrzebuje sasiada w tym samym rzedzie, ktorego tu nie ma — sprawdzone
   na zywo, blad znaleziony w jednej z wczesniejszych rund). --- */
@media (max-width: 79.99em) {
    .kg-signup-card.kg-layout-split:not(.kg-content-wide) .kg-signup-card-image {
        height: auto;
        min-height: 0;
    }
}

/* Od 1280px w gore (uklad obok siebie — zdjecie i tekst DZIELA ten sam rzad
   grida) — DZIESIATA runda (2026-08-17). Zgloszenie: "przy przejsciu z
   ukladu jeden-nad-drugim na uklad obok siebie pojawia sie moment, w ktorym
   nad i pod zdjeciem sa puste marginesy — zdjecie ma zawsze byc poczatkiem
   i koncem boksu gora/dol". Przyczyna: gdy w tym zakresie (zdjecie i tekst
   obok siebie) tekst byl WYZSZY niz naturalna wysokosc zdjecia przy danej
   szerokosci kolumny (np. wąska kolumna zaraz po 1280px, dlugi tekst), to
   poprzednia regula wyzej (height:auto — dawniej bez zastrzezenia szerokosci
   ekranu) trzymala zdjecie przy jego wlasnej, KROTSZEJ wysokosci, a
   align-items:center (patrz regula nizej) centrowalo je w PIONIE w wyzszym
   rzedzie — zostawiajac rowne puste pasy tla nad i pod zdjeciem.

   Naprawa: w tym zakresie zdjecie ZAWSZE wypelnia caly rzad od gory do dolu
   (height:100%, align-self:stretch — nadpisuje align-items:center z rodzica
   TYLKO dla zdjecia, tekst zostaje wysrodkowany jak wyzej). Native
   object-fit:cover + nasze object-position:top (patrz regula wyzej)
   gwarantuja przy tym, ze NIGDY nie tracimy gory/dolu zdjecia — nadmiar
   zawsze jest przycinany WYLACZNIE z bokow. To dziala bezpiecznie w OBIE
   strony, bo szerokosc kolumny (a wiec i wlasna, naturalna wysokosc
   zdjecia przy tej szerokosci) nadal poprawnie wchodzi do wyliczenia
   wysokosci calego rzedu grida (przegladarka uwzglednia natywna proporcje
   <img> przy auto-sizingu rzedu, nawet gdy sam element ma potem
   height:100% — sprawdzone na zywo w obu kierunkach: gdy tekst jest wyzszy
   NIZ zdjecie [ten blad] i gdy zdjecie jest wyzsze NIZ tekst [poprzedni,
   juz dzialajacy przypadek] — w obu wysokosc rzedu = wieksza z dwoch, a
   przyciecie zdjecia, jesli w ogole wystapi, jest zawsze tylko boczne). --- */
@media (min-width: 80em) {
    /* <picture> (rodzic <img>, i to ON jest faktycznym elementem grida, nie
       sam <img>) tez potrzebuje jawnego stretch+height:100% — bez tego
       height:100% na samym <img> nie ma sie do czego odniesc (<picture> bez
       wlasnej, jawnej wysokosci ma domyslnie wysokosc "dopasuj do <img>",
       czyli KOLKO zaleznosci — sprawdzone na zywo, bez tej linijki obraz
       zostawal przy swojej starej, naturalnej wysokosci mimo reguly na
       samym <img> ponizej). --- */
    .kg-signup-card.kg-layout-split:not(.kg-content-wide) .kg-signup-card-content > picture,
    .kg-signup-card.kg-layout-split:not(.kg-content-wide) .kg-signup-card-image {
        height: 100%;
        min-height: 100%;
        align-self: stretch;
    }
}

/* Caly blok tekstu (naglowek/opis/formularz/drobny druk) wysrodkowany w
   pionie wzgledem wysokosci calego rzedu (czyli wzgledem zdjecia), zamiast
   przyklejony do gornej krawedzi — zgloszenie: "tekst wyrownywany jest do
   gornej krawedzi, chcialbym zeby byl wysrodkowany, tak jak w formularzu
   na stronie glownej". Natywnie .kg-signup-card-content nie ma wlasnego
   align-items (dziedziczy domyslne "stretch" z grida), wiec kolumna tekstu
   rozciagala sie na cala wysokosc rzedu, a jej TRESC zostawala u gory,
   zostawiajac puste miejsce pod spodem. center dziala w obie strony: gdy
   zdjecie jest wyzsze niz tekst (typowe), tekst siedzi na srodku wysokosci
   zdjecia; gdy tekst jest wyzszy (dlugi opis, waska kolumna), zdjecie
   siedzi na srodku wysokosci tekstu. --- */
.kg-signup-card.kg-layout-split .kg-signup-card-content {
    align-items: center;
}

/* Pole tekstu i kolumna tekstu — min-width:0 zeby dlugi, niezawijajacy sie
   tekst (np. przycisku) nie "przebijal" sie w gore przez hierarchie
   grida/flexow i nie wymuszal szerokosci calej karty (pierwotna przyczyna
   przewijania w poziomie na mobile, znaleziona i naprawiona wczesniej). */
.kg-signup-card-content,
.kg-signup-card-text {
    min-width: 0;
}

/* Staly, umiarkowany padding tekstu (48px/40px) zamiast natywnego,
   plynnego --space-responsive-160, ktory rosnie wraz z szerokoscia CALEGO
   EKRANU (nie kolumny) — przy szerokim ekranie potrafil zabierac ponad
   300px z 600-700px szerokiej kolumny tekstu, zostawiajac tekst "zbity do
   srodka" i za malo miejsca na formularz. Ten sam zabieg, co przy
   analogicznym problemie w formularzu na stronie glownej. --- */
.kg-signup-card-text {
    padding: 48px 40px !important;
}

/* Pole e-mail i przycisk sa TERAZ ZAWSZE jedno pod drugim (na wyrazna
   prosbe), a nie czasem obok siebie/czasem zawiniete — prostsze i bardziej
   przewidywalne niz wczesniejszy mechanizm oparty na zawijaniu wiersza
   (ktory i tak dobrze dzialal tylko dzieki wczesniejszym poprawkom
   ponizej). Kazdy element ma WLASNE tlo/ksztalt (pelna "pigulka",
   dokladnie jak w formularzu na stronie glownej — patrz komentarz przy
   border-radius nizej co do dokladnej wartosci), z odstepem miedzy nimi,
   zeby bylo widac dwa oddzielne elementy. --- */
.kg-signup-card-fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    /* max-width:480px — DZIEWIATA runda (2026-08-17, ta sama strona testowa).
       Zgloszenie: "pole i przycisk sa zbyt dlugie, zwlaszcza na pelnym
       ekranie (i nie tylko)". Kolumna tekstu karty (.kg-signup-card-text)
       nie ma wlasnego ograniczenia szerokosci — przy szerokim ekranie albo
       w trybie jednokolumnowym (980-1280px, patrz media query nizej) potrafi
       byc ponad 1000px szeroka, a pole+przycisk (width:100% ponizej)
       rozciagaly sie na cala ta szerokosc, co nie wygladalo elegancko. Na
       stronie glownej ten sam efekt jest ograniczony POSREDNIO — kolumna
       tekstu formularza ma tam wlasny twardy limit 720px
       (assets/css/vincent-newsletter-section.css, grid-template-columns:
       ...minmax(0, min(720px, 46%))). Tutaj prostszy, bezposredni limit
       wprost na samym polu formularza (nie na calej kolumnie tekstu, zeby
       nie ograniczac tez naglowka/opisu) daje ten sam efekt koncowy. --- */
    max-width: 480px;
    gap: 8px;
    padding: 0;
    background-color: transparent;
}

.kg-signup-card-input {
    /* flex:0 0 auto jawnie (z !important) — bez tego formularz dziedziczy
       z wczesniejszej (juz nieaktualnej) rundy poprawek flex:1 1 200px,
       ktore w kolumnowym ukladzie (flex-direction:column) oznacza
       "rosnij w PIONIE", nie w poziomie jak wczesniej — pole robilo sie
       wtedy karykaturalnie wysokie (~200px). !important konieczne,
       sprawdzone na zywo — bez niego stara regula wygrywala mimo
       identycznej specyficznosci selektora. */
    flex: 0 0 auto !important;
    min-height: 56px;
    background-color: var(--color-background);
    border: var(--border-width-default, 1px) var(--border-style-default, solid) var(--color-border);
    /* 999px (pelna "pigulka") — DZIEWIATA runda: zmierzone na zywo na
       zywej stronie glownej (longevitypremium.pl), .c-site-newsletter-
       section__input/__button maja OBA computed border-radius:999px, nie
       var(--border-radius-small)=4px, jak zalozylem w poprzedniej rundzie
       (bledny pomiar/nieaktualny stan wtedy). Poprawione na literalna
       wartosc 999px (dokladnie tak samo, jak natywny mechanizm "pill" na
       stronie glownej — wartosc wieksza niz polowa wysokosci elementu
       zawsze daje pelna, symetryczna pigulke, niezaleznie od faktycznej
       wysokosci pola). --- */
    border-radius: 999px;
}

.kg-signup-card-button {
    flex: 0 0 auto;
    /* width:100% jawnie — natywnie przycisk ma width:fit-content (z
       button-base mixin), co ignoruje align-items:stretch rodzica i
       zostaje przy naturalnej szerokosci tekstu zamiast rozciagnac sie
       na cala szerokosc kolumny (sprawdzone na zywo: bez tego pole i
       przycisk mialy rozna szerokosc, mimo bycia jedno pod drugim). */
    width: 100%;
    /* white-space:normal (zamiast natywnego nowrap) — zabezpieczenie:
       przy pelnej szerokosci kolumny przycisk i tak prawie zawsze miesci
       tekst w jednej linii, ale na bardzo waskich telefonach tekst moze
       sie zawinac na 2 linie zamiast wychodzic poza przycisk. */
    white-space: normal;
    /* 999px — patrz komentarz przy .kg-signup-card-input wyzej, ten sam
       powod i to samo zrodlo pomiaru. --- */
    border-radius: 999px;
}

/* Ponizej 1280px kolumna tekstu w natywnym podziale 50/50 robi sie zbyt
   waska (tekst zawija sie na 6-7 linii) — w tym zakresie zdjecie zostaje
   jeszcze na pelnej szerokosci nad tekstem (jak na mobile), a uklad obok
   siebie wlacza sie dopiero od 1280px, gdzie kazda kolumna ma wygodne
   600px+. --- */
@media (min-width: 61.25em) and (max-width: 79.99em) {
    .kg-signup-card.kg-layout-split .kg-signup-card-content {
        grid-template-columns: 1fr;
    }
}