/* ============================================================
   mobile.css — spójny layer mobile-first (telefony ≤640px).
   Ładowany JAKO OSTATNI, więc wygrywa kaskadę nad main/site/pages.
   Zasada: NIE dotyka desktopu (wszystko w @media max-width:640).
   Metodyka:
   - kompaktowy rytm pionowy (mniej scrolla),
   - responsywna typografia + brak łamania słów w połowie,
   - touch targety ≥44px,
   - progressive disclosure dla długich list (opinie: „pokaż więcej”),
   - kompaktowe karty zamiast okrojonej kopii desktopu.
   ============================================================ */

/* Element „Pokaż więcej opinii” domyślnie ukryty (desktop go nie pokazuje);
   mobilny media query poniżej włącza go dla telefonów. */
.opinions-more { display: none; }

@media (max-width: 640px) {
  /* ── 1. Rytm pionowy: mniej pustej przestrzeni między sekcjami ── */
  :root { --pad-section: 44px; --topbar-h: 76px; }
  /* Pasek odliczania na wąskim ekranie zawija się do dwóch linii (krótszy
     tekst + czas + CTA nie mieszczą się w jednej) — stąd wyższy --topbar-h. */
  .topbar-countdown__inner { padding: 8px 16px; }
  .topbar-countdown__text, .topbar-countdown__cta { font-size: 12px; }
  .section-header { margin-bottom: 26px; }
  .section-cta { margin-top: 24px; gap: 12px; }
  .section-cta__line { margin-bottom: 4px; }

  /* ── 2. Typografia: skala + bezpieczne zawijanie (bez łamania słów) ── */
  h1, h2, h3, p, li, a, span, blockquote,
  .section-heading, .hero__title, .leadband__title, .page-head__title {
    overflow-wrap: break-word; word-break: normal; hyphens: manual;
  }
  .section-heading, .hero__title, .page-head__title, .leadband__title { text-wrap: balance; }
  .section-sub, .hero__desc, p { text-wrap: pretty; }
  .section-heading { font-size: clamp(23px, 6.2vw, 30px); line-height: 1.18; }
  .section-sub { font-size: 14.5px; line-height: 1.55; }
  /* page-head__title dziedziczył desktopowy min. 30px — przy długim,
     pojedynczym słowie (np. "średniozaawansowanych") to za dużo na wąskim
     ekranie i overflow-wrap łamie słowo w połowie. Mniejsza skala naprawia to,
     bez łamania słów (patrz word-break: normal wyżej). */
  .page-head__title { font-size: clamp(24px, 6.4vw, 32px); line-height: 1.22; }
  .page-head__badges { gap: 6px; margin-bottom: 16px; }
  .page-head__badges .sec-label { font-size: 9px; padding: 5px 11px; }

  /* ── Hero: odsuń treść od przyklejonego paska (było za blisko) ── */
  .hero__content { padding-top: calc(112px + var(--topbar-h)); }

  /* ── Modal otwarty: chowamy górne menu (kolidowało z popupem na małym ekranie),
        modal bliżej góry (mniejszy zewnętrzny padding). ── */
  body.modal-open .site-nav,
  body.modal-open .topbar-countdown { display: none; }
  .modal { padding: 20px 14px; }

  /* ── 3. Touch targety ≥44px ── */
  .btn { min-height: 46px; }
  /* Czysty cień zamiast złotej poświaty, która na czarnym tle mobile
     renderuje się jako brudna brązowa plama („dziwny cień”). */
  .btn--gold { box-shadow: 0 2px 12px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .3) inset; }
  .btn--gold:hover { box-shadow: 0 3px 16px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .3) inset; }
  .speaker-social { width: 42px; height: 42px; border-radius: 10px; }
  /* Karty prelegentów w sliderze (85% szerokości ekranu, patrz site.css): prelegent
     z komplem socialek (5 ikon, np. Dominik) robił kartę wyraźnie wyższą niż sąsiednie,
     co przy poziomym sliderze wygląda na "rozjechane". Ograniczamy do 3 na karcie
     (pełna lista zostaje na stronie szczegółów prelegenta – tam ta reguła nie działa,
     bo .speaker-detail__socials nie ma klasy .speaker-card). */
  .speaker-card .speaker-card__socials .speaker-social:nth-child(n + 4) { display: none; }
  .session-more, .agenda-pill.day-tab, .level-tab { min-height: 44px; }
  .slider-arrow { width: 48px; height: 48px; }

  /* ── 4. ProofStrip: 3 kompaktowe kafelki w rzędzie zamiast 3 wielkich ── */
  .proof-strip__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .proof-strip__card { max-width: none; width: auto; padding: 18px 8px; min-width: 0; }
  .proof-strip__num, .proof-num { font-size: clamp(26px, 8vw, 36px); }
  .proof-strip__label { font-size: 11px; line-height: 1.3; }

  /* ── 5. Agenda: zwięźlej ── */
  /* Segmentowy przełącznik dnia nad agendą (warsztaty / prelekcje) – dwa segmenty
     obok siebie w jednym rzędzie (jak .price-tab), nie stos pełnowymiarowych .btn. */
  .agenda-toggle { display: flex; gap: 10px; margin-bottom: 26px; }
  .agenda-days { max-width: 100%; }
  .workshop-card { padding: 22px 20px; gap: 10px; }
  .workshop-card__desc { font-size: 13px; }
  .day-panel > .agenda-day__meta { margin-bottom: 14px; }
  /* Sesje: 2-kolumnowy grid (82px na godzinę + auto-wiersz) z main.css wypychał
     przycisk "Dowiedz się więcej" w wąską 82px kolumnę, gdzie justify-self:end
     + white-space:nowrap renderowały go poza ekranem, ucięty przez overflow:hidden
     na .sessions-wrap. Godzina jako osobny wiersz nad treścią + pełna szerokość
     na resztę rozwiązuje oba problemy (mniej zajętej przestrzeni, widoczny przycisk).
     Dotyczy też wierszy równoległych (--parallel) – tam godzina wciskała się
     w tę samą linijkę co "ŚCIEŻKA A", zamiast być osobną etykietą nad ścieżkami. */
  .session-row:not(.session-row--break) {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .session-row:not(.session-row--break) > .session-time {
    font-size: 11.5px;
  }
  .session-row--parallel > .session-time { margin-bottom: 2px; }
  .session-row:not(.session-row--break) .session-more:not(.session-more--track) {
    justify-self: start; white-space: normal;
  }
  /* Szerokość harmonogramu na mobile: .wrap (28px) + .sessions-teaser (24px z main.css)
     + .session-row (16px) dawały się sumować do 68px pustego marginesu z każdej strony
     – karta z sesjami wyglądała na wąską mimo dużo miejsca na ekranie. Karta-kontener
     zostaje (obwódka, tło), ale jej wewnętrzny padding i padding wiersza są przycięte,
     żeby odzyskać realną szerokość na treść. */
  .sessions-teaser { padding: 24px 12px; }
  .session-row { padding: 12px 6px; }
  .session-row--break { padding: 10px 6px; }
  /* Sesje równoległe: przełącznik u góry już mówi, którą ścieżkę widać — etykieta
     „Ścieżka A/B" przy każdej sesji tylko się dubluje (i wypychała poziom do drugiej
     linii). Usuwamy ją; poziom mieści się wtedy w linii godziny. */
  .session-track-tag { display: none; }
  /* Blok ścieżek A/B: szerokość jak wiersze sesji (6px po bokach), wyraźnie oddzielony
     od poprzednich sekcji — więcej przestrzeni góra/dół + mocniejsza pozioma kreska. */
  .track-intro { margin: 26px 0 22px; padding: 24px 6px; border-top: 2px solid rgba(255, 211, 107, .3); }

  /* ── 6. Cennik: kompaktowe karty (ceny zawsze widoczne, nie chowamy ich) ── */
  /* Przełącznik ofert: jedna cena pod drugą (zamiast dwóch segmentów obok siebie,
     gdzie robiło się ciasno) – zamiast tłumaczącego zdania pod spodem (usunięte),
     obie oferty z cenami są od razu porównywalne w pionie. */
  .pricing-switch { flex-direction: column; gap: 8px; }
  .pricing-card { padding: 24px 20px; }
  .pricing-card__price { font-size: 46px; }
  .pricing-card__includes { gap: 8px; }
  .pricing-card__includes li { font-size: 13.5px; line-height: 1.45; }
  /* Przyciski wyboru pakietu: tytuł i cena w jednej linii (cena po prawej w mini
     zaokrąglonej ramce na delikatnym tle). Kompaktowe, ale tap-target ≥44px. */
  .price-tab { min-height: 44px; padding: 10px 14px; }
  .price-tab__body { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 auto; }
  .price-tab__name { font-size: 13px; }
  .price-tab__price {
    font-size: 14px; padding: 4px 12px; border-radius: 999px;
    background: rgba(255, 211, 107, .08); border: 1px solid rgba(255, 211, 107, .3);
  }
  .price-table__summary { min-height: 44px; padding: 16px 18px; font-size: 13px; }
  .price-table__body { padding-left: 18px; padding-right: 18px; }
  .price-table th, .price-table td { padding: 9px 10px; font-size: 12.5px; }
  /* Tabela ze scrollem w bok jest niewygodna w kciuku — na mobile pionowa lista progów. */
  .price-table__scroll { display: none; }
  .price-list { display: flex; flex-direction: column; gap: 4px; }
  .price-list__tier { padding: 12px 0; }
  .price-list__tier + .price-list__tier { border-top: 1px solid var(--glass-border); }
  .price-list__tier-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: rgba(255, 211, 107, .72); margin-bottom: 8px;
  }
  .price-list__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 6px 0; font-size: 13.5px;
  }
  .price-list__row span:first-child { color: var(--text-mid); }
  .price-list__row span:last-child { color: var(--text-bright); font-weight: 700; white-space: nowrap; }
  /* Countdown: pełnowymiarowy prostokątny kafel + 4 tile w gridzie
     (zamiast rozciągniętego owalu z width:max-content + border-radius:pill). */
  .price-countdown {
    width: 100%; flex-direction: column; gap: 14px;
    padding: 18px 16px; margin-bottom: 30px; border-radius: var(--radius);
  }
  .price-countdown__label { font-size: 12px; letter-spacing: 1px; text-align: center; }
  .price-countdown__clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
  .pc-cell { min-width: 0; padding: 12px 4px; }
  .pc-cell b { font-size: 26px; }
  .pc-cell i { font-size: 10px; }

  /* ── 7. Opinie: progressive disclosure (pokaż 2, reszta na klik) ── */
  /* Wideo-opinie: jedno pod drugim (2 obok siebie były za małe na telefonie). */
  .vid-testimonials { grid-template-columns: 1fr; max-width: 340px; gap: 24px; }
  .opinions-grid:not(.is-expanded) .opinion-card:nth-child(n + 3) { display: none; }
  .opinion-card { padding: 22px 20px; }
  .opinion-card__text { font-size: 14.5px; line-height: 1.6; }
  .opinions-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: 22px auto 0; min-height: 48px; padding: 0 26px;
    border-radius: var(--radius-pill); cursor: pointer;
    font-size: 14px; font-weight: 700; letter-spacing: .3px;
    color: var(--gold-2); background: rgba(255, 211, 107, .07);
    border: 1px solid rgba(255, 211, 107, .3);
  }
  .opinions-grid.is-expanded + .opinions-more { display: none; }

  /* ── 8. LeadMagnet: tylko esencja na mobile ──
     Chowamy generyczny podtytuł (sub); konkretną korzyść (hook) zostawiamy
     — to najmocniejszy dowód wartości nagrania, szkoda go chować. */
  .leadband__sub { display: none; }
  .leadband__hook { margin-top: 6px; padding: 10px 13px; font-size: 13.5px; }
  .leadband--media .leadband__inner { gap: 16px; }
  .leadband--media .leadband__media { max-width: 100%; }
  .leadband__text { gap: 12px; }
  .leadband__bullets { margin-top: 4px; gap: 8px; }
  .leadband__bullets li { font-size: 13.5px; line-height: 1.45; }
  .leadband--media .leadband__cta { padding-top: 6px; }

  /* ── 9. Tło z gwiazdami: na wąskim, wysokim ekranie sprite skalował się
     w brzydką, rozmytą plamę (item 5). Usuwamy dekoracyjną warstwę gwiazd
     na mobile — zostaje sam gradient / kolor tła. */
  .sec { background-image: linear-gradient(180deg, #05070F 0%, #060a12 50%, #05070F 100%); }
  .sec--alt { background-image: linear-gradient(180deg, #05070F 0%, #080d18 50%, #05070F 100%); }
  .sec-prev { background-image: linear-gradient(180deg, var(--dark-2) 0%, #080d18 50%, var(--dark-2) 100%); }
  .sec-agenda { background-image: linear-gradient(180deg, #05070F 0%, #060a12 50%, #05070F 100%); }
  .sec-form { background-image: linear-gradient(180deg, var(--dark-2) 0%, #080d18 100%); }
  .site-footer { background-image: none; }

  /* Stopka na mobile: bez logo (item C9) — zostaje organizator, kontakt (z tel.) i socjale. */
  .footer__logo-link { display: none; }
  .footer__inner { gap: 28px; margin-bottom: 32px; }
}

/* Bardzo wąskie ekrany — dodatkowe dokręcenie */
@media (max-width: 380px) {
  :root { --pad-section: 38px; }
  .proof-strip__cards { gap: 7px; }
  .proof-strip__card { padding: 16px 6px; }
}

/* ============================================================
   /bezplatna-lekcja-dax i /podziekowanie-dax — dopiski mobile.
   Osobny blok (nie wpięty w sekcję główną wyżej), bo te strony nie
   istniały jeszcze przy ostatniej przebudowie mobile.css — zakres
   ograniczony do klas unikalnych dla tych dwóch stron.
   ============================================================ */
@media (max-width: 640px) {
  /* Hero /bezplatna-lekcja-dax: większy kontrast nagłówek/podtytuł niż
     domyślna skala wyżej — H1 wyraźnie większy (przyciąga uwagę jako
     pierwsze), podtytuł mniejszy (drugoplanowy, nie konkuruje o wzrok). */
  .form-layout__intro .section-heading { font-size: clamp(28px, 8.6vw, 36px); }
  .form-layout__intro .form-layout__sub { font-size: 13.5px; line-height: 1.55; }

  /* ── Formularz natywny (.pbiday-form / .form-layout): karta kompaktowa
     zamiast desktopowego paddingu, i pole ≥16px, żeby Safari na iOS nie
     przybliżał widoku przy fokusie (domyślne przeglądarkowe zachowanie
     dla inputów z font-size < 16px). ── */
  .form-layout { gap: 32px; }
  .form-wrap { padding: 32px 22px; }
  .form-input, .form-textarea { font-size: 16px; }
  /* .form-wrap .section-heading (pages.css) ma fixed 26px o wyższej specyficzności
     niż samo .section-heading tutaj — bez tej reguły nie skalowałby się w dół. */
  .form-wrap .section-heading { font-size: 22px; }
  /* Formularz MailerLite (patrz pages.css #mlb2-44424714) — te same 16px z tego
     samego powodu, selektor musi powtarzać ID żeby przebić !important z ML. */
  .form-wrap #mlb2-44424714.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input { font-size: 16px !important; }

  /* Zgoda marketingowa (6 linii) na mobile domyślnie zwinięta do 2 linii + przycisk
     "Czytaj więcej" (JS w MailerLiteFormDax.astro) — bez tego długi tekst zgody
     dominował nad resztą formularza tuż przed przyciskiem wysyłki. */
  .form-wrap #mlb2-44424714.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p.consent-text {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .form-wrap #mlb2-44424714.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p.consent-text.is-expanded {
    display: block !important; overflow: visible;
  }
  .form-wrap #mlb2-44424714.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .consent-toggle {
    display: inline-block !important; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important;
    background: none !important; font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12.5px !important; font-weight: 600 !important; color: rgba(255, 211, 107, .8) !important;
    text-decoration: underline !important; cursor: pointer;
  }
}