/*
Theme Name:   Bezpieczna Droga do Domu
Theme URI:    https://bezpiecznadrogadodomu.pl
Description:  Motyw potomny Twenty Twenty-Five dla landing page'a „Bezpieczna Droga do Domu" — Piknik Bezpieczeństwa dla Kół Gospodyń Wiejskich. Projekt Safety Logic.
Author:       Safety Logic
Author URI:   https://safetylogic.pl
Template:     twentytwentyfive
Version:      1.3.2
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bezpieczna-droga-do-domu
Tags:         one-column, block-patterns, full-site-editing
*/

/* ==========================================================================
   Uwaga o architekturze
   Tokeny (kolory, skala tekstu, odstępy) siedzą w theme.json i są tu używane
   wyłącznie jako zmienne --wp--preset--*. Tutaj są tylko te komponenty,
   których theme.json wyrazić nie potrafi.
   Wzorzec nie zawiera ani jednego @media (poza print) — responsywność stoi
   na clamp() i auto-fit. Jedyny media query poniżej dotyczy paska mobilnego,
   który jest wymogiem briefu, a nie elementem wzorca.
   ========================================================================== */

:root {
  --bdd-promien:        6px;
  --bdd-promien-sredni: 3px;
  --bdd-promien-maly:   2px;
  --bdd-pasek-wys:      76px; /* zmierzona wysokość paska (73 px) + zapas; patrz pkt 11 */
}

/* --------------------------------------------------------------------------
   1. Nagłówek przyklejony u góry (jest we wzorcu)
   -------------------------------------------------------------------------- */
.bdd-naglowek {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 241, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--wp--preset--color--obramowanie);
}

/* --------------------------------------------------------------------------
   2. Plakietka / nadtytuł
   -------------------------------------------------------------------------- */
/* Plakietka hero: granatowy blok ze złotą krawędzią z lewej, dwa wiersze.
   Wartości zdjęte z pliku wzorcowego, nie ze specyfikacji — specyfikacja
   opisuje pod hasłem „plakietka" nadtytuł sekcji, który jest czymś innym. */
.bdd-plakietka-hero {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 12px 18px;
  background: var(--wp--preset--color--granat);
  border-left: 8px solid var(--wp--preset--color--zloto);
  border-radius: 4px;
}
.bdd-plakietka-hero p { margin: 0; }
.bdd-plakietka-hero__glowna {
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wp--preset--color--zloto);
}
.bdd-plakietka-hero__druga {
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Nadtytuł sekcji. Odstęp liter 0,1 em wg wzorca (specyfikacja podaje 0,08 em). */
.bdd-nadtytul {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--zloto-tekst);
}
/* na ciemnym tle nadtytuł musi być złoty jasny, bo #8C6A05 na granacie nie ma kontrastu */
.bdd-sekcja--ciemna .bdd-nadtytul { color: var(--wp--preset--color--zloto); }

/* --------------------------------------------------------------------------
   2b. Pasek informacyjny pod hero — granatowa listwa z trzema faktami.
       Trzy osobne akapity zamiast jednego zdania z „•”, żeby na telefonie
       złamały się w kolumnę, a redakcja mogła edytować każdy fragment osobno.
       Separatory rysuje CSS, więc nie ma ich w treści i nie zostają w kolumnie.
   -------------------------------------------------------------------------- */
.bdd-pasek-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 16px clamp(18px, 2.5vw, 30px);
  background: var(--wp--preset--color--granat);
  border-left: 8px solid var(--wp--preset--color--zloto);
  border-radius: var(--bdd-promien);
  text-align: center;
}
.bdd-pasek-info p {
  position: relative;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.4;
  color: var(--wp--preset--color--tekst-na-granacie);
}
/* Kwota to najważniejsza informacja w pasku — złota i pogrubiona. */
.bdd-pasek-info .bdd-pasek-info__kwota {
  font-weight: 700;
  color: var(--wp--preset--color--zloto);
}
/* Złota kropka między pozycjami. Rysowana na ::before, więc znika razem
   z rzędem, gdy pasek złamie się w kolumnę (patrz reguła poniżej). */
.bdd-pasek-info p + p::before {
  content: "•";
  position: absolute;
  left: -13px;
  color: var(--wp--preset--color--zloto);
}
@media (max-width: 781px) {
  .bdd-pasek-info {
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
  }
  .bdd-pasek-info p + p::before { display: none; }
}

/* --------------------------------------------------------------------------
   3. Sekcje i naprzemienne tła
   -------------------------------------------------------------------------- */
.bdd-sekcja {
  padding-block: clamp(52px, 6vw, 96px);
  padding-inline: 20px;
}
.bdd-sekcja--jasna    { background: var(--wp--preset--color--tlo-jasne); }
.bdd-sekcja--przeplot {
  background: var(--wp--preset--color--tlo-przeplot);
  border-top: 1px solid var(--wp--preset--color--obramowanie);
  border-bottom: 1px solid var(--wp--preset--color--obramowanie);
}
.bdd-sekcja--ciemna { background: var(--wp--preset--color--granat); }
.bdd-sekcja--ciemna :is(h1, h2, h3) { color: #FFFFFF; }
.bdd-sekcja--ciemna p,
.bdd-sekcja--ciemna li { color: var(--wp--preset--color--tekst-na-granacie); }
.bdd-sekcja--stopka { background: var(--wp--preset--color--granat-ciemny); }

/* --------------------------------------------------------------------------
   4. Zaślepki zdjęć.
      Ukośne paski, opis kadru w ramce przy DOLNEJ krawędzi (align-items: flex-end),
      monospace. Obramowanie #DCD3C2, nie #E4DCCB. Wartości z pliku wzorcowego.
   -------------------------------------------------------------------------- */
.bdd-zaslepka {
  display: flex;
  align-items: flex-end;
  padding: 16px;
  border: 1px solid var(--wp--preset--color--obramowanie-ciemne);
  border-radius: var(--bdd-promien);
  background: repeating-linear-gradient(
    135deg,
    var(--wp--preset--color--zaslepka-tlo-2) 0px,
    var(--wp--preset--color--zaslepka-tlo-2) 10px,
    var(--wp--preset--color--zaslepka-tlo) 10px,
    var(--wp--preset--color--zaslepka-tlo) 20px
  );
}
.bdd-zaslepka--hero { padding: 18px; }

.bdd-zaslepka p,
.bdd-zaslepka__opis {
  margin: 0;
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--wp--preset--color--tekst-wyciszony);
  background: var(--wp--preset--color--tlo-jasne);
  border: 1px solid var(--wp--preset--color--obramowanie-ciemne);
  border-radius: var(--bdd-promien-sredni);
  padding: 7px 9px;
}

/* proporcje kadrów wg tabeli ze specyfikacji */
.bdd-kadr--4-3   { aspect-ratio: 4 / 3;   }
.bdd-kadr--3-4   { aspect-ratio: 3 / 4;   }
.bdd-kadr--16-10 { aspect-ratio: 16 / 10; }
.bdd-kadr--16-9  { aspect-ratio: 16 / 9;  }
.bdd-kadr--2-1   { aspect-ratio: 2 / 1;   }
.bdd-kadr--9-16  { aspect-ratio: 9 / 16;  }   /* film pionowy z telefonu */

.bdd-kadr--4-3 img, .bdd-kadr--3-4 img, .bdd-kadr--16-10 img,
.bdd-kadr--16-9 img, .bdd-kadr--2-1 img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--bdd-promien);
}

/* --------------------------------------------------------------------------
   5. Karta strefy i siatki
   -------------------------------------------------------------------------- */
.bdd-karta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wp--preset--color--karta-biala);
  border: 1px solid var(--wp--preset--color--obramowanie);
  border-radius: var(--bdd-promien);
}
.bdd-karta__tresc { padding: 22px; }
.bdd-karta__tresc h3 { margin: 0; }
.bdd-karta__tresc p  { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--wp--preset--color--tekst-poboczny); }

/* karta wydarzenia — złota krawędź u góry 6 px */
.bdd-karta--wydarzenie {
  border-top: 6px solid var(--wp--preset--color--zloto);
  border-radius: var(--bdd-promien);
}
/* karta realizacji — większy oddech */
.bdd-karta--realizacja .bdd-karta__tresc { padding: clamp(20px, 2.5vw, 32px); }
/* karta „Kto to robi?" w hero — granatowa, nie biała */
.bdd-karta--hero {
  padding: 18px 20px;
  background: var(--wp--preset--color--granat);
  border: 0;
  border-radius: var(--bdd-promien);
}
.bdd-karta--hero .bdd-nadtytul {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--zloto);
}

.bdd-karta .bdd-zaslepka { border: 0; border-bottom: 1px solid var(--wp--preset--color--obramowanie); border-radius: 0; }

/* Prawdziwe zdjęcie w karcie zajmuje miejsce zaślepki, więc musi mieć te same
   krawędzie: bez zaokrągleń (kartę domyka `overflow: hidden`) i z kreską
   oddzielającą od treści. Blok obrazka wnosi własne marginesy `figure`,
   które w kolumnie flex zrobiłyby szparę nad zdjęciem. */
/* width: 100% jest konieczne. Karta to grupa z layoutem constrained, przez co
   figura obrazka dostaje szerokość z reguł rdzenia, a nie z karty — zmierzone
   357 px przy karcie 335 px, czyli 24 px wycieku przycinanego przez overflow. */
.bdd-karta > .wp-block-image { display: block; width: 100%; margin: 0; min-height: 0; }
/* min-height: 0 jest konieczne. Figura jest elementem flexa (karta to kolumna
   flex), a domyślne min-height: auto ustawia jej wysokość na wysokość treści.
   Zdjęcie w proporcji 3:2 jest wyższe niż kadr 16:10, więc rozpychało figurę
   i aspect-ratio przestawało obowiązywać — zmierzone 1,49 zamiast 1,60. */
.bdd-karta > .wp-block-image img {
  display: block;
  border-radius: 0;
  border-bottom: 1px solid var(--wp--preset--color--obramowanie);
}

/* --------------------------------------------------------------------------
   Odstępy w kontenerach, którym przerwy daje `gap`.

   Grupy bloków mają layout: default, czyli układ przepływowy, a rdzeń
   WordPressa dokłada wtedy każdemu dziecku poza pierwszym margin-block-start
   równy blockGap (20 px). W kontenerze, który jest gridem, ten margines nie
   tworzy odstępu — spycha kartę w dół WEWNĄTRZ jej komórki. Skutki na żywej
   stronie: karty 2..N w rzędzie zaczynały się 20 px niżej niż pierwsza, więc
   górne krawędzie kart i zdjęć w rzędzie się nie schodziły (oferta, kto,
   wydarzenia, realizacje), a w FAQ zaprojektowana przerwa 12 px rosła do 32 px.

   Selektor z dwiema klasami bije regułę rdzenia (.is-layout-flow > *),
   niezależnie od kolejności arkuszy.
   -------------------------------------------------------------------------- */
.wp-block-group.bdd-siatka > *,
.wp-block-group.bdd-faq > *,
.wp-block-group.bdd-pasek-info > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Siatki. Każda sekcja ma we wzorcu własne minmax, gap i odstęp górny. */
.bdd-siatka {
  display: grid;
  gap: 20px;
  margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.bdd-siatka--oferta {           /* strefy */
  margin-top: 36px; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.bdd-siatka--waska {            /* kadry TV */
  margin-top: 32px; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bdd-siatka--szeroka {          /* realizacje */
  margin-top: 28px; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.bdd-karta--pelna    { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   6. Listy — PIĘĆ wariantów. We wzorcu każda sekcja ma własny.
      Wspólne: siatka zamiast list-style, złoty punktor jako ::before.
      Punktor jest KWADRATOWY (promień 2 px) wszędzie poza hero, gdzie jest
      okrągły i mniejszy.
   -------------------------------------------------------------------------- */
.bdd-lista {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.bdd-lista li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bdd-lista li::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 9px;
  border-radius: var(--bdd-promien-maly);
  background: var(--wp--preset--color--zloto);
}

/* 6a. hero — bez karty, punktor okrągły 8 px, tekst biały */
.bdd-lista--hero { margin-top: 0; gap: 10px; }
.bdd-lista--hero li {
  gap: 10px;
  font-size: 17px;
  line-height: 1.4;
  color: #FFFFFF;
}
.bdd-lista--hero li::before {
  width: 8px; height: 8px; margin-top: 8px;
  border-radius: 50%;
}

/* 6b. problem — każdy punkt jest białą kartą */
.bdd-lista--karty li {
  background: var(--wp--preset--color--karta-biala);
  border: 1px solid var(--wp--preset--color--obramowanie);
  border-radius: var(--bdd-promien);
  padding: 18px 20px;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.45;
}

/* 6c. dlaczego — karty na ciemnym tle */
.bdd-lista--karty-ciemne li {
  gap: 12px;
  background: var(--wp--preset--color--granat-ciemny);
  border: 1px solid var(--wp--preset--color--granat-jasny);
  border-radius: var(--bdd-promien);
  padding: 18px;
}
.bdd-lista--karty-ciemne li::before { margin-top: 8px; }

/* 6d. korzysc — bez karty, sam punktor */
.bdd-lista--proste li {
  gap: 12px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--wp--preset--color--tekst-poboczny);
}
.bdd-lista--proste li::before { margin-top: 8px; }

/* 6e. finansowanie — biała karta z grubą granatową krawędzią, bez punktora */
.bdd-lista--zrodla li {
  display: block;
  background: var(--wp--preset--color--karta-biala);
  border: 1px solid var(--wp--preset--color--obramowanie);
  border-left: 6px solid var(--wp--preset--color--granat);
  border-radius: var(--bdd-promien);
  padding: 20px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--wp--preset--color--tekst-poboczny);
}
.bdd-lista--zrodla li::before { display: none; }
.bdd-lista--zrodla strong { color: var(--wp--preset--color--granat); }

/* --------------------------------------------------------------------------
   7. Cytaty — TRZY warianty, każdy z innej sekcji wzorca.
   -------------------------------------------------------------------------- */
.bdd-cytat { margin: 32px 0 0; padding: 24px 26px; border-radius: var(--bdd-promien); }
.bdd-cytat p { margin: 0; }

/* 7a. problem — tło złote, bez krawędzi */
.bdd-cytat--zloty { background: var(--wp--preset--color--zloto); }
.bdd-cytat--zloty p {
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.35;
  color: var(--wp--preset--color--granat);
}

/* 7b. korzysc — tło granatowe, złota krawędź 8 px, tekst biały */
.bdd-cytat--granatowy {
  margin: 0;
  background: var(--wp--preset--color--granat);
  border-left: 8px solid var(--wp--preset--color--zloto);
}
.bdd-cytat--granatowy p {
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.32;
  color: #FFFFFF;
}

/* 7c. realizacje — biała karta ze złotą krawędzią, mniejszy promień */
.bdd-cytat--realizacja {
  margin: 0;
  padding: 18px 20px;
  background: var(--wp--preset--color--karta-biala);
  border: 1px solid var(--wp--preset--color--obramowanie);
  border-left: 6px solid var(--wp--preset--color--zloto);
  border-radius: 4px;
}
.bdd-cytat--realizacja p { font-size: 18px; line-height: 1.5; }
.bdd-cytat cite,
.bdd-cytat footer {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  font-style: normal;
  color: var(--wp--preset--color--tekst-podpis);
}

/* --------------------------------------------------------------------------
   8. Kroki „Jak to wygląda” — biała karta, granatowe kółko 46 px ze złotą cyfrą.
   -------------------------------------------------------------------------- */
.bdd-kroki {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  counter-reset: krok;
}
.bdd-kroki li {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--wp--preset--color--karta-biala);
  border: 1px solid var(--wp--preset--color--obramowanie);
  border-radius: var(--bdd-promien);
  padding: 18px 20px;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.4;
  color: var(--wp--preset--color--tekst-glowny);
}
.bdd-kroki li::before {
  counter-increment: krok;
  content: counter(krok);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--wp--preset--color--granat);
  color: var(--wp--preset--color--zloto);
  font-weight: 700;
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   8b. Karta „Ile to kosztuje” — złote tło, granatowa ramka 3 px, kwoty w granacie.
   -------------------------------------------------------------------------- */
.bdd-karta-cena {
  margin-top: 32px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--wp--preset--color--zloto);
  border: 3px solid var(--wp--preset--color--granat);
  border-radius: 8px;
}
.bdd-karta-cena h3 { margin: 0 0 8px; color: var(--wp--preset--color--granat); }
.bdd-karta-cena > p { color: var(--wp--preset--color--granat); }
.bdd-karta-cena .wp-block-buttons { margin-top: 24px; }
/* Przycisk wewnątrz złotej karty musi być granatowy. Domyślny jest złoty,
   czyli w tym miejscu złoty na złotym — praktycznie niewidoczny. */
.bdd-karta-cena .wp-block-button__link {
  background: var(--wp--preset--color--granat);
  color: var(--wp--preset--color--zloto);
}
/* Przycisk pod złotą kartą. Bez tego odstępu złoty przycisk przykleja się
   do dolnej krawędzi złotej karty (zmierzone 0 px) i oba czyta się jako jedną
   bryłę. Sam przycisk jest tu drugorzędny — obrys zamiast wypełnienia — bo
   akcja główna („Sprawdź termin i wstępną wycenę") stoi już w karcie. */
.bdd-przyciski-po-cenie { margin-top: 36px; }

.bdd-karta-cena .wp-block-button__link:hover,
.bdd-karta-cena .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--granat-ciemny);
  color: #FFFFFF;
}
/* Kolumna jako flex, kafel z flex:1 — inaczej oba kafle maja wysokosc wlasnego
   opisu (zmierzone 142 vs 163 px), bo procentowa wysokosc nie rozwiazuje sie
   wzgledem elementu flexa o wysokosci wynikajacej z rozciagniecia. */
.bdd-karta-cena .wp-block-column { display: flex; }
.bdd-kwota {
  flex: 1;
  padding: 22px 24px;
  background: var(--wp--preset--color--granat);
  border-radius: var(--bdd-promien);
}
.bdd-kwota p { margin: 0; }
.bdd-kwota .bdd-kwota__wartosc {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--cena);
  line-height: 1.05;
  color: var(--wp--preset--color--zloto);
}
.bdd-kwota .bdd-kwota__opis {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wp--preset--color--tekst-na-granacie);
}
/* Druga kwota to slowo, nie liczba — bez wielkosci ceny rozjechalaby sie z pierwsza,
   wiec zostaje ta sama skala, tylko krotszy tekst. Wysokosc 100% wyrownuje oba kafle,
   bo opisy maja rozna dlugosc. */


/* --------------------------------------------------------------------------
   8c. Kolumna-stos: zaślepka, cytat i przycisk jeden pod drugim, równy odstęp.
       Rodzic jest flex-column, więc przycisk rozciąga się na szerokość kolumny
       — tak jak we wzorcu.
   -------------------------------------------------------------------------- */
.bdd-stos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bdd-stos .wp-block-buttons,
.bdd-stos .wp-block-button { margin: 0; width: 100%; }
.bdd-stos .wp-block-button__link { width: 100%; text-align: center; }

/* --------------------------------------------------------------------------
   8e. Rekomendacja wideo w sekcji realizacji.

   Film jest PIONOWY (9:16). Na całą szerokość treści miałby blisko 2000 px
   wysokości, więc kolumna z filmem jest ograniczona do 360 px, a tekst stoi
   obok i jest wyrównany do środka w pionie. Poniżej 782 px kolumny składają
   się same, a film dostaje pełną szerokość karty.
   -------------------------------------------------------------------------- */
.bdd-rekomendacja { margin-top: clamp(32px, 4vw, 52px); }
.bdd-wideo {
  max-width: 360px;
  /* Do lewej, nie na środek kolumny: inaczej film zaczyna się 29 px na prawo
     od nadtytułu i nagłówka, i blok traci wspólną lewą krawędź. */
  margin-right: auto;
  border-radius: var(--bdd-promien);
}
.bdd-rekomendacja .bdd-cytat--realizacja { margin-top: 20px; }
.bdd-cta-rekomendacja { margin-top: 24px; }

/* Drugi film jest POZIOMY (16:9) i idzie na pełną szerokość treści — dostaje
   wagę, na którą zasługuje ujęcie z dachowania, i kontrastuje z wąskim
   pionowym filmem powyżej. Etykieta nad nim wiąże oba nagrania w jedną myśl,
   więc nie jest nagłówkiem: cały blok rekomendacji zostaje pod jednym H3. */
.bdd-etykieta--wideo { margin-top: clamp(32px, 4vw, 48px); }
.bdd-wideo--poziome { margin-top: 0; }
.bdd-wideo--poziome + p { margin-top: 12px; }
.bdd-rekomendacja h3 { margin: 0 0 clamp(20px, 2.5vw, 28px); }
@media (max-width: 781px) {
  .bdd-wideo { max-width: 100%; }
}

/* Etykieta nad listą („Po takim dniu:”) — pogrubiona, granatowa. */
.bdd-etykieta {
  margin: 20px 0 12px;
  font-weight: 700;
  font-size: 18px;
  color: var(--wp--preset--color--granat);
}

/* --------------------------------------------------------------------------
   8d. Hero na telefonie — zdjęcie zaraz pod plakietką.
       Bez tego pierwszy ekran to sam tekst, bo zdjęcie siedzi w drugiej
       kolumnie i przy stackowaniu ląduje dopiero pod przyciskami.

       Kolumny dostają display: contents, więc ich dzieci stają się
       bezpośrednimi elementami flexa i można im nadać kolejność. Struktura
       bloków zostaje nietknięta — w edytorze nadal są to zwykłe kolumny,
       a na desktopie układ się nie zmienia.

       Próg 781 px, bo dokładnie tam WordPress stackuje kolumny.

       DEGRADACJA. Gdy silnik nie wspiera display: contents, reguły order
       przestają działać na wnukach i układ wraca do kolejności DOM: zdjęcie
       ląduje pod przyciskami. To stan sprzed tej poprawki — gorszy, ale nie
       zepsuty, bez utraty treści. Świadomie nie zastępujemy tego przebudową
       hero na pojedynczą grupę ani zdublowanym blokiem obrazka, bo obie
       alternatywy psują edytowalność, która jest wymogiem twardszym.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
  :is(#hero, #hero-wariant-b) .wp-block-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  :is(#hero, #hero-wariant-b) .wp-block-column { display: contents; }

  :is(#hero, #hero-wariant-b) .bdd-plakietka-hero        { order: 1; }
  :is(#hero, #hero-wariant-b) .bdd-zaslepka              { order: 2; margin-bottom: 20px; }
  :is(#hero, #hero-wariant-b) h1                         { order: 3; }
  :is(#hero, #hero-wariant-b) .has-prowadzacy-font-size  { order: 4; }
  :is(#hero, #hero-wariant-b) .wp-block-buttons          { order: 5; }
  :is(#hero, #hero-wariant-b) .has-maly-font-size        { order: 6; }
  :is(#hero, #hero-wariant-b) .bdd-karta--hero           { order: 7; margin-top: 6px; }

  /* przyciski hero na całą szerokość — łatwiej trafić kciukiem */
  :is(#hero, #hero-wariant-b) .wp-block-button { width: 100%; }
  :is(#hero, #hero-wariant-b) .wp-block-button__link { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   8f. Odtwarzacz filmu — PODMIANKA, nie ramka.

   Zamiast osadzać ramkę Vimeo od razu, pokazujemy plakat hostowany LOKALNIE
   i przycisk odtwarzania. Ramka wstawia się dopiero po kliknięciu (skrypt
   w functions.php). Do tego momentu strona nie wysyła ani jednego żądania do
   obcego serwera i nie zakłada żadnych ciasteczek — a to jedyna właściwość
   tej witryny, którą zwykły embed odbiera bezpowrotnie. Przy okazji: ramka
   Vimeo waży ok. 0,5 MB, których nie pobiera nikt, kto filmu nie ogląda.

   Po kliknięciu ramka dostaje dnt=1, czyli tryb Vimeo „Do Not Track".
   -------------------------------------------------------------------------- */
.bdd-odtwarzacz {
  position: relative;
  overflow: hidden;
  border-radius: var(--bdd-promien);
  background: var(--wp--preset--color--granat);
}
.bdd-odtwarzacz__plakat {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bdd-odtwarzacz iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.bdd-odtwarzacz__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  background: rgba(30, 34, 48, 0.22);
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bdd-odtwarzacz__play:hover,
.bdd-odtwarzacz__play:focus-visible { background: rgba(30, 34, 48, 0.38); }

/* Trójkąt odtwarzania w złotym kole — bez pliku graficznego. */
.bdd-odtwarzacz__ikona {
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wp--preset--color--zloto);
  box-shadow: 0 3px 0 var(--wp--preset--color--zloto-hover);
  position: relative;
}
.bdd-odtwarzacz__ikona::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.6em 0 0.6em 1em;
  border-color: transparent transparent transparent var(--wp--preset--color--granat);
  font-size: clamp(14px, 1.5vw, 19px);
}
/* Zamknięcie filmu. Po LEWEJ, bo prawy górny róg zajmuje własne menu Vimeo. */
.bdd-odtwarzacz__zamknij {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--wp--preset--color--granat);
  background: var(--wp--preset--color--zloto);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--wp--preset--color--zloto-hover);
  cursor: pointer;
}
.bdd-odtwarzacz__zamknij:hover,
.bdd-odtwarzacz__zamknij:focus-visible { background: var(--wp--preset--color--zloto-hover); }

.bdd-odtwarzacz__zapas {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px;
  text-align: center;
  background: var(--wp--preset--color--granat);
  color: var(--wp--preset--color--zloto);
  font-weight: 700;
}

/* Tekst wyłącznie dla czytników ekranu. */
.bdd-tylko-dla-czytnika {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   9. FAQ — rozwijane bez JavaScriptu (natywne <details>)
      Treść odpowiedzi jest w kodzie strony, nie doładowywana skryptem.
   -------------------------------------------------------------------------- */
.bdd-faq { display: grid; gap: 12px; margin-top: 28px; }
.bdd-faq details {
  background: var(--wp--preset--color--karta-biala);
  border: 1px solid var(--wp--preset--color--obramowanie);
  border-radius: var(--bdd-promien);
}
.bdd-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}
.bdd-faq summary::-webkit-details-marker { display: none; }
.bdd-faq summary h3 {
  margin: 0;
  font-size: var(--wp--preset--font-size--h3-faq);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--granat);
}
.bdd-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--zloto);
  color: var(--wp--preset--color--granat);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.bdd-faq details[open] summary::after { content: "\2212"; } /* minus */
.bdd-faq details > :not(summary) {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--wp--preset--color--tekst-poboczny);
}
.bdd-faq summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--zloto);
  outline-offset: 2px;
  border-radius: var(--bdd-promien);
}

/* --------------------------------------------------------------------------
   10. Przyciski.
       Główny ma pełny cień 0 3px 0 #C99B0A — to element wzorca, nie ozdobnik.
       Nagłówkowy jest mniejszy i ma cień 2 px.
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.bdd-formularz .hs-button,
.bdd-formularz button[type="submit"] {
  box-shadow: 0 3px 0 var(--wp--preset--color--zloto-hover);
}
.wp-block-button__link {
  font-size: clamp(17px, 1.3vw, 20px);
  padding: 20px 28px;
}

/* drugorzędny — obrys, bez tła i bez cienia */
.bdd-przycisk--drugi .wp-block-button__link,
a.bdd-przycisk--drugi {
  background: transparent;
  color: var(--wp--preset--color--granat);
  border: 2px solid var(--wp--preset--color--granat);
  padding: 18px 26px;
  box-shadow: none;
}
.bdd-przycisk--drugi .wp-block-button__link:hover,
a.bdd-przycisk--drugi:hover {
  background: var(--wp--preset--color--granat);
  color: #FFFFFF;
}
/* na ciemnym tle: biały obrys i biały tekst */
.bdd-sekcja--ciemna .bdd-przycisk--drugi .wp-block-button__link {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.bdd-sekcja--ciemna .bdd-przycisk--drugi .wp-block-button__link:hover {
  background: #FFFFFF;
  color: var(--wp--preset--color--granat);
}

/* CTA w nagłówku — mniejszy wariant */
.bdd-naglowek__cta .wp-block-button__link {
  font-size: clamp(14px, 3.2vw, 16px);
  padding: 13px clamp(12px, 3vw, 20px);
  box-shadow: 0 2px 0 var(--wp--preset--color--zloto-hover);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. Pasek przyklejony na telefonie
       UWAGA: tego elementu NIE MA we wzorcu statycznym — to wymóg briefu.
       Widoczny wyłącznie poniżej 768 px, pojawia się po przewinięciu hero.
   -------------------------------------------------------------------------- */
.bdd-pasek-mobilny { display: none; }

@media (max-width: 767px) {
  .bdd-pasek-mobilny {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(250, 247, 241, 0.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--wp--preset--color--obramowanie);
    /* Domyślnie widoczny. Skrypt chowa go tylko dopóki hero jest na ekranie.
       Dzięki temu przy wyłączonym JS użytkownik nadal ma CTA, zamiast
       paska, który nigdy się nie pojawi. */
    transform: translateY(0);
    transition: transform 0.25s ease;
  }
  .bdd-pasek-mobilny.jest-ukryty { transform: translateY(110%); }

  .bdd-pasek-mobilny a {
    flex: 1;
    padding: 13px 16px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    border-radius: var(--bdd-promien);
    background: var(--wp--preset--color--zloto);
    color: var(--wp--preset--color--granat);
  }

  /* Zapas na dole strony, żeby pasek niczego nie przykrywał. */
  body { padding-bottom: calc(var(--bdd-pasek-wys) + env(safe-area-inset-bottom)); }

  /* Kluczowe: scroll-padding na elemencie przewijanym. Sam padding wewnątrz
     formularza NIE wystarcza — przeglądarka i tak przewinie przycisk pod
     pasek przy skoku do kotwicy albo przy fokusie na polu. Dopiero to
     sprawia, że przycisk wysyłania zawsze zatrzymuje się nad paskiem.
     Wymóg z briefu: pasek nie może zasłaniać pól ani przycisku. */
  html {
    scroll-padding-bottom: calc(var(--bdd-pasek-wys) + 16px + env(safe-area-inset-bottom));
  }

  #kontakt { scroll-margin-bottom: calc(var(--bdd-pasek-wys) + 16px); }
  #kontakt .bdd-formularz { padding-bottom: calc(var(--bdd-pasek-wys) + 8px); }
}

/* kotwice nie chowają się pod przyklejonym nagłówkiem */
:where(#hero, #problem, #oferta, #dlaczego, #korzysc, #kto, #jak,
       #wydarzenia, #finansowanie, #realizacje, #faq, #kontakt) {
  scroll-margin-top: 76px;
}

/* --------------------------------------------------------------------------
   12. Kontener formularza + style dla domyślnej struktury HubSpot
       Formularz wkleja zespół Safety Logic w bloku „Własny kod HTML".
       Poniższe klasy to domyślne wyjście HubSpota — bez nich pola wkleją się
       nieostylowane i sekcja się rozjedzie.
   -------------------------------------------------------------------------- */
/* Kontener formularza: jasne tło #FAF7F1, promień 8 px, bez obramowania. */
.bdd-formularz {
  margin-top: 30px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--wp--preset--color--tlo-jasne);
  border-radius: 8px;
}

/* wspólne reguły dla atrapy i dla prawdziwego HubSpota */
.bdd-formularz .hs-form-field,
.bdd-formularz .bdd-pole { margin-bottom: 16px; }

.bdd-formularz label,
.bdd-formularz .hs-form-field > label {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--wp--preset--color--granat);
}
.bdd-formularz .hs-form-required { color: #B3261E; margin-left: 2px; }

.bdd-formularz input[type="text"],
.bdd-formularz input[type="email"],
.bdd-formularz input[type="tel"],
.bdd-formularz input[type="number"],
.bdd-formularz input[type="date"],
.bdd-formularz select,
.bdd-formularz textarea,
.bdd-formularz .hs-input {
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.4;
  color: var(--wp--preset--color--tekst-glowny);
  background: #FFFFFF;
  border: 2px solid var(--wp--preset--color--zaslepka-obramowanie);
  border-radius: var(--bdd-promien);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bdd-formularz textarea,
.bdd-formularz textarea.hs-input { min-height: 120px; resize: vertical; }

.bdd-formularz input:focus,
.bdd-formularz select:focus,
.bdd-formularz textarea:focus,
.bdd-formularz .hs-input:focus {
  outline: none;
  border-color: var(--wp--preset--color--granat);
  box-shadow: 0 0 0 3px rgba(242, 193, 25, 0.45);
}

/* przycisk wysyłania */
.bdd-formularz .hs-button,
.bdd-formularz input[type="submit"],
.bdd-formularz button[type="submit"] {
  display: inline-block;
  width: 100%;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--granat);
  background: var(--wp--preset--color--zloto);
  border: none;
  border-radius: var(--bdd-promien);
  cursor: pointer;
  transition: background 0.15s ease;
}
.bdd-formularz .hs-button:hover,
.bdd-formularz input[type="submit"]:hover,
.bdd-formularz button[type="submit"]:hover {
  background: var(--wp--preset--color--zloto-hover);
}

/* komunikaty błędów HubSpota */
.bdd-formularz .hs-error-msg,
.bdd-formularz .hs-error-msgs label {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  color: #B3261E;
}
.bdd-formularz .hs-error-msgs { list-style: none; margin: 0; padding: 0; }
.bdd-formularz .hs-form-field.hs-error input,
.bdd-formularz .hs-form-field.hs-error textarea,
.bdd-formularz .invalid.error { border-color: #B3261E; }

/* komunikat po wysłaniu */
.bdd-formularz .submitted-message {
  padding: 16px;
  background: var(--wp--preset--color--tlo-przeplot);
  border-radius: var(--bdd-promien);
  color: var(--wp--preset--color--granat);
  font-weight: 700;
}

/* HubSpot lubi wstawiać własne szerokości — zerujemy */
.bdd-formularz .hs-form-field > .input { margin-right: 0; }
.bdd-formularz .hs-fieldtype-textarea .hs-input { width: 100%; }
.bdd-formularz form { margin: 0; }

/* mikrokopia pod przyciskiem */
.bdd-formularz .bdd-mikrokopia {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--wp--preset--color--tekst-wyciszony);
  text-align: center;
}

/* --------------------------------------------------------------------------
   13. Dostępność i drobiazgi
   -------------------------------------------------------------------------- */
:is(h1, h2, h3, p) { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .bdd-pasek-mobilny { transition: none; }
}

.bdd-tylko-dla-czytnika {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   14. Atrapa formularza — widoczna do czasu wklejenia kodu z HubSpota.
       Znika sama, bo zespół zastępuje zawartość bloku „Własny kod HTML".
   -------------------------------------------------------------------------- */
.bdd-atrapa__info {
  margin: 0 0 18px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wp--preset--color--tekst-wyciszony);
  background: var(--wp--preset--color--tlo-przeplot);
  border: 1px dashed var(--wp--preset--color--obramowanie-ciemne);
  border-radius: var(--bdd-promien-sredni);
}
.bdd-atrapa input:disabled,
.bdd-atrapa textarea:disabled {
  background: #FCFAF6;
  color: var(--wp--preset--color--tekst-wyciszony);
  cursor: not-allowed;
}
.bdd-atrapa button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.bdd-opcjonalnie {
  font-weight: 400;
  color: var(--wp--preset--color--tekst-wyciszony);
}

/* --------------------------------------------------------------------------
   15. Hero wariant B — układ do testu A/B.
       Treść identyczna z wariantem A, różni się wyłącznie układ.
   -------------------------------------------------------------------------- */
.bdd-sekcja--wariant-b { border-top-style: solid; }
.bdd-wyrozniki {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: 18px;
  border-top: 1px solid var(--wp--preset--color--obramowanie);
  gap: 0;
}
.bdd-wyrozniki p {
  margin: 0;
  padding: 0 18px;
  font-weight: 700;
  color: var(--wp--preset--color--granat);
  border-left: 1px solid var(--wp--preset--color--obramowanie-ciemne);
}
.bdd-wyrozniki p:first-child { border-left: 0; padding-left: 0; }

/* --------------------------------------------------------------------------
   16. Nagłówek — logo i układ
   -------------------------------------------------------------------------- */
.bdd-naglowek__wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin-inline: auto;
  padding: 12px 20px;
  gap: 16px;
}
.bdd-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.bdd-logo svg { width: 34px; height: 34px; flex: 0 0 auto; }
.bdd-logo__tekst { display: flex; flex-direction: column; line-height: 1.2; }
.bdd-logo__tekst strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--wp--preset--color--granat);
}
.bdd-logo__tekst > span {
  font-size: 12.5px;
  color: var(--wp--preset--color--tekst-wyciszony);
}

/* na wąskich ekranach podpis pod logo tylko zaśmieca pasek */
@media (max-width: 480px) {
  .bdd-logo__tekst > span { display: none; }
  .bdd-naglowek__cta { display: none; } /* CTA i tak jest w pasku na dole */
}

/* --------------------------------------------------------------------------
   17. Stopka i akapity na ciemnym tle — wartości z wzorca.
   -------------------------------------------------------------------------- */
.bdd-sekcja--stopka .bdd-stopka__nazwa {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
}
.bdd-sekcja--stopka p:not(.bdd-stopka__nazwa) {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--wp--preset--color--tekst-na-granacie-jasny, #C3CCE4);
  max-width: 70ch;
}
.bdd-sekcja--stopka .bdd-stopka__linki { color: #FFFFFF; max-width: none; }
.bdd-sekcja--stopka a,
.bdd-sekcja--ciemna a {
  color: var(--wp--preset--color--zloto);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bdd-sekcja--stopka a:hover,
.bdd-sekcja--ciemna a:hover { color: #FFFFFF; }

/* akapit prowadzący w sekcji kontaktu ma inny, jaśniejszy odcień niż listy */
#kontakt > .has-prowadzacy-font-size { color: #C3CCE4; max-width: 70ch; }