/* =========================================================================
   Zwinnie - Hero  (07-hero.css)
   -------------------------------------------------------------------------
   Hero stoi POZA <main id="start">, więc nie bierze udziału w zebrze sekcji
   (patrz 02-base.css) i ma własne tło. Wariant .hero-has-cal to układ
   2-kolumnowy z kalendarzem nad zgięciem.

   Stylowanie wyłącznie tokenami --zwinnie-* (01-design-tokens.css).
   Inwentarz klas: docs/CSS_INVENTORY.md · podgląd na żywo: /styleguide
   ========================================================================= */

body.modular .zwinnie-hero, body.modular main#start > section {
    margin-block: 0;
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: var(--zwinnie-ls-wide);
    font-size: var(--zwinnie-fs-sm);
    font-weight: var(--zwinnie-fw-semibold);
    color: var(--zwinnie-accent);
    margin: 0 0 var(--zwinnie-space-4);
}

.zwinnie-hero h1 {
    font-size: var(--zwinnie-fs-display);
    line-height: var(--zwinnie-lh-tight);
    letter-spacing: var(--zwinnie-ls-tight);
    color: var(--zwinnie-text);
    margin: 0 0 var(--zwinnie-space-5);
}

.hero-actions {
    display: flex;
    gap: var(--zwinnie-space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.hero-rotate-line {
    margin: var(--zwinnie-space-4) 0 var(--zwinnie-space-5);
    font-size: var(--zwinnie-fs-lead);
    font-weight: var(--zwinnie-fw-semibold);
    line-height: var(--zwinnie-lh-heading);
    min-height: 1.5em;
}

.hero-rotate {
    display: inline-block;
    color: var(--zwinnie-accent);
}

.hero-rotate-item {
    display: none;
}

.tw-text {
    color: var(--zwinnie-accent);
}

.tw-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--zwinnie-accent);
    animation: twBlink 1s steps(1) infinite;
}

.zwinnie-hero .container {
    max-width: 1160px;
}

.hero-col-main {
    text-align: left;
}

.zwinnie-hero #to-start {
    display: none;
}

.zwinnie-hero > .container {
    max-width: var(--zwinnie-container);
    padding: 0 var(--zwinnie-gutter);
    text-align: left !important;
}

.hero-editorial {
    text-align: left;
}

.hero-editorial .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--zwinnie-rule);
    color: var(--zwinnie-text);
    font-family: var(--zwinnie-font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-editorial .hero-eyebrow strong {
    color: var(--zwinnie-accent);
}

.hero-editorial .hero-title {
    max-width: 16ch;
    margin: 30px 0 0;
    color: var(--zwinnie-text);
    font-family: var(--zwinnie-font-display);
    font-size: clamp(38px, 7.2vw, 104px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.035em;
}

.hero-editorial .hero-title em {
    color: var(--zwinnie-accent);
    font-style: normal;
}

.hero-editorial .hero-rotate-line {
    min-height: 1.5em;
    margin: 0;
    color: var(--zwinnie-text);
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 400;
    line-height: 1.5;
}

.hero-editorial .hero-actions {
    justify-content: flex-start;
    gap: 12px;
    margin-top: 28px;
}

.hero-editorial .btn {
    padding: 15px 26px;
    border-radius: 0;
    font-family: var(--zwinnie-font-mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Wariant obrysowany jest teraz globalny (04-buttons.css, `.btn.btn-outline`)
   o tych samych wartościach - hero nie potrzebuje już własnego override'u. */

/* Pasek etapów pod hero. Liczba kolumn MUSI zgadzać się z liczbą pozycji
   w hero.md - dziś cztery etapy cyklu (pokaż się / przyciągnij / obsłuż /
   usprawnij) plus kolumna z etykietą. Dołożysz etap - popraw tu i w obu
   media queries niżej. */
.hero-process {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    margin: 0 calc(-1 * var(--zwinnie-gutter));
    border-top: 1px solid var(--zwinnie-rule);
}

.hero-process > div:last-child {
    border-right: 0;
}

.hero-process .hero-process-label {
    display: flex;
    align-items: center;
    padding-inline: 24px;
    color: var(--zwinnie-text-muted);
    font-family: var(--zwinnie-font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-process span {
    display: block;
    margin-bottom: 8px;
    color: var(--zwinnie-accent);
    font-family: var(--zwinnie-font-mono);
    font-size: 12px;
}

.zwinnie-hero {
    padding: 70px 0 0;
    border-bottom: 1px solid var(--zwinnie-rule);
    background: var(--zwinnie-bg);
    border-color: var(--zwinnie-rule);
}

.hero-editorial .hero-title, .hero-editorial .hero-eyebrow, .hero-process > div {
    color: var(--zwinnie-ink);
}

.hero-editorial .hero-eyebrow, .hero-process {
    border-color: var(--zwinnie-rule);
}

/* Bez własnego `color` - kolor przyjeżdża z reguły grupowej wyżej
   (--zwinnie-ink, wspólny z .hero-title i .hero-eyebrow). W poprzednim,
   jednoplikowym custom.css ta reguła deklarowała `color: var(--zwinnie-text)`,
   ale przegrywała z regułą grupową stojącą dalej w pliku. Po scaleniu
   duplikatów kolejność się odwróciła i kolumny procesu zrobiły się jaśniejsze.
   Nie dopisuj tu `color` - zmieniaj regułę grupową. */
.hero-process > div {
    padding: 18px 20px;
    border-right: 1px solid var(--zwinnie-border);
    font-size: 14px;
    line-height: 1.4;
    border-color: var(--zwinnie-line);
}

.hero-editorial.hero-has-cal {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0 var(--zwinnie-space-10);
    /* Kolumny wyrównane DO GÓRY, nie wyśrodkowane. Kalendarz TidyCal ma
       sztywną wysokość (~840px, iframe-resizer nie odpowiada), więc przy
       `align-items: center` krótsza kolumna z hasłem zjeżdżała na środek
       i nad nagłówkiem zostawała wielka pusta dziura. */
    align-items: start;

    /* Kalendarz jest dużo wyższy od hasła z przyciskami, więc pod nimi
       zostawała pusta kolumna na kilkaset pikseli. Zamiast jej zasypywać,
       wpuszczamy tam pasek etapów - wcześniej wisiał POD całym hero, przez
       co pierwszy ekran niósł pustkę zamiast treści.
       Kalendarz rozpina się na oba wiersze. */
    grid-template-areas:
        "haslo  kalendarz"
        "etapy  kalendarz";
    grid-template-rows: auto 1fr;
}

.hero-editorial.hero-has-cal .hero-col-main { grid-area: haslo; }
.hero-editorial.hero-has-cal .hero-col-cal  { grid-area: kalendarz; }
.hero-editorial.hero-has-cal .hero-process  { grid-area: etapy; }

/* Etapy jedna pod drugą, nie 2x2. Kalendarz obok jest bardzo wysoki, więc
   układ pionowy wypełnia kolumnę zamiast zostawiać pod nią kilkaset pikseli
   pustki - a przy okazji czyta się jak lista kroków, czyli tak, jak działa
   sama oferta. Rozdzielone poziomymi kreskami; pionowej nie ma, bo nie ma
   już drugiej kolumny. */
.hero-editorial.hero-has-cal .hero-process {
    grid-template-columns: 1fr;
    margin: var(--zwinnie-space-8) 0 0;
    border-top: 1px solid var(--zwinnie-rule);

    /* Lista rozciąga się, ale z SUFITEM na wiersz. Pełne `1fr` robiło
       z czterech krótkich linii rozstrzelony spis z dziurami po 160 px;
       sztywna wysokość zostawiała 400 px pustki pod spodem. Sufit 96 px
       domyka różnicę wobec kalendarza, nie rozwlekając treści. */
    align-self: stretch;
    grid-template-rows: auto repeat(4, minmax(64px, 96px));

    /* Bez tego wiersz `auto` z etykietą łapie całe wolne miejsce rozciągniętej
       siatki i puchnie do 130 px, odklejając podpis od pierwszego kroku.
       `start` upycha wiersze przy górnej krawędzi, a reszta zostaje pod listą. */
    align-content: start;
}

.hero-editorial.hero-has-cal .hero-process .hero-process-label {
    padding: 14px 0;
    border-bottom: 1px solid var(--zwinnie-line);
}

.hero-editorial.hero-has-cal .hero-process > div {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--zwinnie-line);
    /* To etykiety etapów, nie tekst ciągły - dzielenie ich myślnikiem
       ("zapyta-nia") wygląda na usterkę składu. */
    hyphens: manual;
}

/* Ostatni krok zamyka listę - bez kreski wiszącej nad pustką. */
.hero-editorial.hero-has-cal .hero-process > div:last-child {
    border-bottom: 0;
}

/* Numer kroku obok tekstu, nie nad nim - przy jednej kolumnie jest na to
   miejsce, a lista robi się zwarta zamiast rozstrzelonej. */
.hero-editorial.hero-has-cal .hero-process > div:not(.hero-process-label) {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--zwinnie-space-2);
}

.hero-editorial.hero-has-cal .hero-process > div span {
    margin-bottom: 0;
}

.hero-editorial.hero-has-cal .hero-col-main {
    text-align: left;
    max-width: none;
}

.hero-editorial.hero-has-cal .hero-title {
    font-size: var(--zwinnie-fs-h1);
}

.hero-editorial.hero-has-cal .hero-actions {
    justify-content: flex-start;
}

@keyframes twBlink { 50% { opacity: 0; } }

@media (max-width: 980px) {
    .hero-process,
    .hero-editorial.hero-has-cal .hero-process {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-process .hero-process-label {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--zwinnie-border);
    }
}

@media (max-width: 640px) {
    .zwinnie-hero {
        padding-top: 48px;
    }
    /* Selektor musi być TAK SAMO szczegółowy jak reguła bazowa
       `.hero-editorial.hero-has-cal .hero-process`, inaczej media query
       przegrywa na specyficzności i etapy zostają w dwóch kolumnach
       na telefonie. */
    .hero-process,
    .hero-editorial.hero-has-cal .hero-process {
        grid-template-columns: 1fr;
    }
    .hero-editorial.hero-has-cal .hero-process > div:nth-child(odd) {
        border-right: 0;
    }
    .hero-process > div {
        border-right: 0;
        border-bottom: 1px solid var(--zwinnie-border);
    }
    .hero-process > div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 960px) {
    /* Jedna kolumna - wracamy do układu liniowego: hasło, kalendarz, etapy. */
    .hero-editorial.hero-has-cal {
        grid-template-columns: 1fr;
        grid-template-areas: "haslo" "kalendarz" "etapy";
        grid-template-rows: auto;
        gap: var(--zwinnie-space-8);
    }
    .hero-editorial.hero-has-cal .hero-process {
        margin-top: 0;
    }
    .hero-editorial.hero-has-cal .hero-title {
        font-size: var(--zwinnie-fs-display);
    }
}