/*
 * Akademia DDD — style uzupełniające motywu blokowego.
 * Większość wyglądu (kolory, typografia, przyciski, odstępy) pochodzi z theme.json.
 * Ten plik zawiera wyłącznie to, czego nie da się jeszcze w pełni wyrazić
 * przez ustawienia bloków: siatki kart, warianty wizualne sekcji,
 * nakładkę menu mobilnego, akordeon FAQ (core/details) i makietę formularza.
 * Brak odwołań do zewnętrznych zasobów (CDN) — plik jest w całości lokalny.
 */

/* ===== Ogólne ===== */
img { max-width: 100%; height: auto; display: block; }
/* Zabezpieczenie przed poziomym przewijaniem na wąskich ekranach (TEST 11.3) —
   dodatkowa siatka bezpieczeństwa, niezależna od poprawek poszczególnych
   sekcji poniżej. */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

.ddd-eyebrow {
  color: var(--wp--preset--color--blue);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ddd-breadcrumbs { font-size: 13px; color: var(--wp--preset--color--text-muted); }
.ddd-breadcrumbs a { color: var(--wp--preset--color--blue); font-weight: 600; }

.ddd-section-label {
  color: var(--wp--preset--color--blue);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ===== Hero strony głównej ===== */
/* patterns/hero.php używał surowego bloku core/columns BEZ własnej klasy,
   licząc wyłącznie na domyślne, wbudowane w WordPressa łamanie kolumn na
   urządzeniach mobilnych (reguła rdzenia WP, aktywna poniżej 781px). To
   mogło zadziałać poprawnie dopiero po naprawieniu brakującego znacznika
   viewport (patrz functions.php) — ale dla pewności i spójności z resztą
   motywu sekcja hero dostała w TEST 11.3 własną klasę i jawną regułę
   łamania, tak jak wszystkie pozostałe siatki w tym pliku, niezależnie od
   zachowania wbudowanego w rdzeń WordPressa. */
.ddd-hero-columns { display: grid !important; grid-template-columns: 1fr !important; gap: 28px; }
.ddd-hero-columns > .wp-block-column { width: 100% !important; flex-basis: 100% !important; min-width: 0; }

/* ===== Nagłówek / nawigacja (core/navigation) ===== */
.ddd-header-row { align-items: center; }
.ddd-logo img { height: 36px; width: auto; }

.wp-block-navigation { font-size: 15px; }
.wp-block-navigation a { font-weight: 600; }

/* TEST 11.3: poprawka numeru telefonu w nagłówku.
   Reguła poniżej ustawiała na elemencie z WIDOCZNYM TEKSTEM numeru
   ("📞 +48 505 502 749") sztywny, okrągły kontener 44×44 px — rozmiar
   pomyślany pierwotnie dla samej ikony. Tekst numeru był więc wciskany w
   kwadrat o boku 44px, co przy wąskim ekranie telefonu (a dodatkowo bez
   znacznika viewport, patrz functions.php) łamało go na pojedyncze
   fragmenty. Naprawione: domyślnie (tablet/desktop) to teraz pigułka o
   szerokości dopasowanej do treści, z pełnym numerem w jednym, nieprzerwanym
   ciągu; poniżej 480px numer tekstowy jest ukrywany (pozostaje dostępny dla
   czytników ekranu przez aria-label na linku), a przycisk zwija się do
   schludnego, w pełni dotykalnego (44×44 px) okrągłego przycisku-ikony do
   dzwonienia — zgodnie z wymaganiem "jeden czytelny ciąg albo prawidłowy
   mobilny przycisk kontaktowy". Wymaga drobnej zmiany znacznika w
   parts/header.html (owinięcie numeru w <span class="ddd-phone-number">). */
.ddd-phone-icon { display: inline-block; }
.ddd-phone-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--wp--preset--color--bg-tint);
  color: var(--wp--preset--color--navy);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
}
@media (max-width: 479px) {
  .ddd-phone-icon a { width: 44px; height: 44px; padding: 0; }
  .ddd-phone-number { display: none; }
}

/* nakładka menu mobilnego — dopasowanie do granatowej identyfikacji */
.wp-block-navigation__responsive-dialog {
  background: var(--wp--preset--color--navy) !important;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a {
  color: #ffffff !important;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  width: 24px;
  height: 24px;
}

/* ===== USP / wyróżniki ===== */
/* Od WordPressa 6.1 blok core/columns (i wiele innych) otrzymuje automatycznie
   wygenerowaną, przyporządkowaną per-instancja klasę obsługi układu
   ("is-layout-flex"/"is-layout-grid" + unikalny kontener), wraz z własną,
   wstrzykiwaną regułą CSS. Na rzeczywistej instalacji WordPress swoistość
   (specificity) tej automatycznej reguły okazała się dorównywać lub
   przewyższać naszą pojedynczą klasę komponentu, więc mogła wygrywać z
   naszym układem jednokolumnowym na wąskich ekranach — DOKŁADNIE ten sam
   mechanizm (remis/przegrana swoistości z globalnymi stylami WordPressa),
   który naprawiliśmy już w TEST 11.2 dla kolorów nagłówków. Naprawione w
   TEST 11.3: `!important` na `display` i `grid-template-columns` w każdym
   miejscu odpowiadającym za łamanie siatek na urządzeniach mobilnych —
   zarówno w wariancie jednokolumnowym (mobile), jak i w wariantach
   wielokolumnowych pod @media (żeby nie przegrywać również na tablecie/
   desktopie). To jedyny cel `!important` w tych regułach — nie zmienia
   kolorów, odstępów ani wyglądu zatwierdzonego w TEST 11.1/11.2. */
.ddd-usp-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 16px; }
.ddd-usp-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--wp--preset--color--bg-tint);
  border-radius: 14px;
}

/* ===== Trzy ścieżki edukacyjne ===== */
.ddd-paths-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px; }
.ddd-path-card {
  background: var(--wp--preset--color--bg-tint);
  border: 1px solid #E3ECF7;
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}
.ddd-path-visual {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--wp--preset--color--light-blue) 0 16px, #BEDFF8 16px 32px);
}
.ddd-path-visual span {
  background: rgba(11,45,91,.75);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}

/* ===== Karty szkoleń ===== */
.ddd-courses-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px; }
.ddd-course-card {
  background: var(--wp--preset--color--white);
  border: 1px solid #E3ECF7;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(11,45,91,.05);
  min-width: 0;
}
.ddd-course-level {
  display: inline-block;
  max-width: 100%;
  background: var(--wp--preset--color--light-blue);
  color: var(--wp--preset--color--navy);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.ddd-course-level.is-specjalistyczny { background: var(--wp--preset--color--navy); color: #fff; }
.ddd-course-price { font-size: 21px; font-weight: 800; color: var(--wp--preset--color--navy); }
.ddd-course-price small { display: block; font-size: 12px; font-weight: 600; color: var(--wp--preset--color--text-muted); }

/* ===== Sekcja korzyści (Dlaczego Akademia DDD) ===== */
.ddd-advantages-section { background: var(--wp--preset--color--navy); padding: 36px 0 44px; }
/* Etykieta sekcji (.ddd-section-label) domyślnie używa koloru "blue", który na
   granatowym tle tej sekcji ma niewystarczający kontrast (ciemny na ciemnym).
   Nadpisanie tylko w tym kontekście, kolorem z palety "light-blue" — kontrast
   ok. 6,9:1 wobec tła navy, zgodnie z WCAG AA (naprawione w TEST 11.1). */
.ddd-advantages-section .ddd-section-label { color: var(--wp--preset--color--light-blue); }
/* Nagłówek sekcji i nagłówki kart mają ustawiony kolor "white" na poziomie
   bloku (klasa has-white-color), ale na rzeczywistej instalacji WordPress
   globalny styl elementu nagłówka z theme.json (styles.elements.h2/h3 —
   kolor "navy") okazał się mieć taką samą swoistość (specificity) selektora
   i renderować się PO arkuszu motywu, więc wygrywał w remisie — stąd
   granatowy, nieczytelny tekst na granatowym tle, mimo poprawnej klasy w
   znaczniku bloku. Naprawione w TEST 11.2: podbicie swoistości selektora
   (klasa sekcji + element) połączone z !important, wyłącznie w obrębie tej
   jednej, granatowej sekcji — nie zmienia globalnego wyglądu nagłówków na
   żadnej innej, jasnej sekcji witryny. */
.ddd-advantages-section h2,
.ddd-advantages-section h3 { color: #fff !important; }
/* TEST 11.3: !important z tego samego powodu co .ddd-usp-grid wyżej —
   bez niego na realnej instalacji trzy karty nadal układały się obok
   siebie na telefonie, mimo grid-template-columns:1fr ustawionego w
   TEST 11.2 (patrz wyjaśnienie przy .ddd-usp-grid). */
.ddd-advantages-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 16px; }
.ddd-advantage-card {
  display: flex;
  /* Bez flex-direction:column karta rozkładała nagłówek i akapit OBOK siebie
     (domyślny kierunek flex to "row"), więc oba elementy dzieliły wąską
     szerokość karty — stąd ciasny nagłówek i nienaturalne łamanie wyrazów.
     Naprawione w TEST 11.2. */
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  min-width: 0;
}
.ddd-advantage-card h3, .ddd-advantage-card p { color: #fff; overflow-wrap: break-word; }
.ddd-advantage-card p { color: #CBDCF2; }

/* ===== Jak wygląda szkolenie (kroki) ===== */
.ddd-process-steps { display: grid; grid-template-columns: 1fr; gap: 0; }
.ddd-step-card { display: flex; gap: 12px; padding: 18px 0; border-top: 1px solid #E7EEF6; }
.ddd-step-card:first-child { border-top: none; }
/* Ten sam błąd układu co w .ddd-advantage-card: bez wydzielenia nagłówka i
   akapitu we wspólnym kontenerze, były one osobnymi elementami flex OBOK
   numeru kroku, więc dzieliły między sobą pozostałą, wąską szerokość.
   Naprawione w TEST 11.2: nagłówek i akapit są teraz owinięte w jeden
   kontener .ddd-step-content (patterns/process-section.php), który dostaje
   pełną pozostałą szerokość, a jego zawartość układa się normalnie, jedna
   pod drugą. */
.ddd-step-content { flex: 1 1 auto; min-width: 0; }
.ddd-step-number {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--wp--preset--color--bg-tint);
  border: 2px solid var(--wp--preset--color--blue);
  color: var(--wp--preset--color--navy);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ddd-process-note {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--wp--preset--color--bg-tint);
  border-left: 4px solid var(--wp--preset--color--blue);
  border-radius: 8px;
  color: var(--wp--preset--color--text-muted);
  font-size: 13.5px;
}

/* ===== Poznaj prowadzącego ===== */
/* TEST 11.3: !important z tego samego powodu co .ddd-usp-grid wyżej. */
.ddd-instructor-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 28px; align-items: center; }
.ddd-instructor-visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(160deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--blue) 100%);
  border-radius: 14px; padding: 36px 20px; color: #fff;
}
.ddd-instructor-initials {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; margin-bottom: 14px;
}

/* ===== FAQ (core/details) ===== */
.wp-block-details {
  background: var(--wp--preset--color--bg-tint);
  border: 1px solid #E3ECF7;
  border-radius: 12px;
  margin-bottom: 10px;
}
.wp-block-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--wp--preset--color--navy);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 700;
  color: var(--wp--preset--color--blue);
  margin-left: 12px;
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details summary:focus-visible { outline: 3px solid var(--wp--preset--color--blue); outline-offset: 2px; }

/* ===== Strona wewnętrzna (page-hero, content-section) ===== */
.ddd-page-hero { background: linear-gradient(180deg, var(--wp--preset--color--bg-tint) 0%, var(--wp--preset--color--white) 70%); }

.ddd-admin-table .ddd-admin-row {
  display: flex; flex-direction: column;
  padding: 13px 16px;
  border-top: 1px solid #E3ECF7;
  font-size: 14px;
}
.ddd-admin-table { border: 1px solid #E3ECF7; border-radius: 14px; overflow: hidden; }
.ddd-admin-row:first-child { border-top: none; }
.ddd-to-verify {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  color: var(--wp--preset--color--navy); background: var(--wp--preset--color--light-blue);
  padding: 2px 8px; border-radius: 999px;
}

.ddd-certificate-frame {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, var(--wp--preset--color--bg-tint) 0 16px, #E3ECF7 16px 32px);
  border: 2px dashed #AFC6E6;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.ddd-certificate-watermark {
  position: absolute; font-size: 15vw; font-weight: 800; color: rgba(11,45,91,.08); pointer-events: none;
}
.ddd-cert-badge {
  background: rgba(11,45,91,.85); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px;
}

/* ===== Listy tematów programu / quick-facts ===== */
.ddd-topics-list { display: grid; gap: 14px; }
.ddd-topic-item { padding: 16px 18px; background: var(--wp--preset--color--white); border: 1px solid #E3ECF7; border-radius: 12px; }

.ddd-quick-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.ddd-quick-facts .ddd-fact {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wp--preset--color--bg-tint); border: 1px solid #E3ECF7; border-radius: 999px;
  padding: 8px 16px; min-height: 38px; font-size: 13.5px; font-weight: 700; color: var(--wp--preset--color--navy);
}
.ddd-quick-facts .ddd-fact.is-price { background: var(--wp--preset--color--navy); color: #fff; border-color: var(--wp--preset--color--navy); }

/* ===== Końcowe CTA ===== */
.ddd-final-cta { background: linear-gradient(135deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--blue) 100%); text-align: center; }
.ddd-final-cta h2 { color: #fff; }
.ddd-final-cta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--navy); }
.ddd-final-cta .wp-block-button__link:hover { background: var(--wp--preset--color--bg-tint); }
.ddd-final-cta-links { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 0; margin: 20px 0 0; }
.ddd-final-cta-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 600;
}

/* ===== Stopka ===== */
.ddd-footer { background: var(--wp--preset--color--footer-navy); color: #C7D6EA; padding: 32px 0; }
.ddd-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.ddd-footer a { color: #C7D6EA; }
.ddd-footer-note { font-size: 11.5px; color: #8FA6C4; background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; display: inline-block; }
.ddd-logo-badge { display: inline-block; background: #fff; border-radius: 10px; padding: 10px 14px; }
.ddd-logo-badge img { height: 26px; }
.ddd-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; font-size: 12px; color: #8FA6C4; }
/* parts/footer.html opiera 4 kolumny stopki (.ddd-footer-grid) na surowym
   bloku core/columns bez żadnej reguły łamania w tym pliku — na wąskim
   ekranie 4 kolumny były ściskane obok siebie w jednym rzędzie (stąd
   "stopka jest zbyt ciasna"). Naprawione w TEST 11.3, tą samą metodą co
   pozostałe siatki w tym pliku: jawna siatka CSS z !important, jedna
   kolumna na telefonie, dwie na tablecie, cztery od szerokości desktopowej. */
.ddd-footer-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 28px; }
.ddd-footer-grid > .wp-block-column { width: 100% !important; flex-basis: 100% !important; min-width: 0; }

/* ===== Makieta formularza (strony Kontakt / Ustal termin) ===== */
.ddd-form-demo-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--wp--preset--color--navy); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.ddd-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ddd-form-field label { font-size: 13.5px; font-weight: 700; color: var(--wp--preset--color--navy); }
.ddd-form-field input, .ddd-form-field select, .ddd-form-field textarea {
  border: 1.5px solid #D7E3F3; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; font-family: inherit;
  color: var(--wp--preset--color--text); background: var(--wp--preset--color--bg-tint); min-height: 44px; width: 100%;
}
.ddd-form-field textarea { min-height: 120px; resize: vertical; }
.ddd-form-field input:disabled, .ddd-form-field select:disabled, .ddd-form-field textarea:disabled { opacity: .65; cursor: not-allowed; }
.ddd-form-row-two { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ddd-form-privacy-note { margin: 18px 0 20px; padding: 14px 16px; background: var(--wp--preset--color--bg-tint); border-radius: 10px; font-size: 12.5px; color: var(--wp--preset--color--text-muted); }
.ddd-btn-demo-disabled {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: #AEB9C7; color: #fff; font-weight: 700; font-size: 15px; padding: 15px 26px;
  min-height: 44px; border-radius: 999px; border: none; cursor: not-allowed;
}
.ddd-btn-demo-caption { display: block; text-align: center; margin-top: 10px; font-size: 12px; color: var(--wp--preset--color--text-muted); }
.ddd-contact-info-list { list-style: none; padding: 0; display: grid; gap: 14px; font-size: 14px; }

/* ===== Interaktywna makieta „Ustal termin szkolenia" ===== */
.ddd-course-picker { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ddd-course-pick {
  position: relative; display: block; border: 1.5px solid #D7E3F3; border-radius: 12px; padding: 14px 16px;
  cursor: pointer; background: var(--wp--preset--color--bg-tint);
}
.ddd-course-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ddd-course-pick:has(input:checked) { border-color: var(--wp--preset--color--blue); background: #E9F2FD; box-shadow: 0 0 0 2px rgba(30,99,216,.15); }
.ddd-course-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ddd-course-pick-name { font-weight: 700; color: var(--wp--preset--color--navy); font-size: 14.5px; }
.ddd-course-pick-level { display: block; font-weight: 500; color: var(--wp--preset--color--text-muted); font-size: 12px; }
.ddd-course-pick-meta { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--navy); white-space: nowrap; }

.ddd-choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ddd-choice-pill { position: relative; display: inline-flex; }
.ddd-choice-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ddd-choice-pill label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 20px;
  border: 1.5px solid #D7E3F3; border-radius: 999px; font-size: 14px; font-weight: 700;
  color: var(--wp--preset--color--navy); background: var(--wp--preset--color--bg-tint); cursor: pointer;
}
.ddd-choice-pill input:checked + label { border-color: var(--wp--preset--color--blue); background: var(--wp--preset--color--blue); color: #fff; }

/* TEST 11.3: formularz „Ustal termin szkolenia” (patterns/booking-form.php)
   to blok wp:columns z dwiema kolumnami o stałej szerokości (62%/38%,
   ustawionej przez inline style="flex-basis:..."). Tak jak przy innych
   siatkach w tym pliku, blok columns w WordPressie 6.1+ generuje własne,
   automatyczne klasy "is-layout-flex" ze swoimi regułami CSS, które mogą
   przebić prosty selektor klasy — dlatego, analogicznie do .ddd-usp-grid
   itd., wymuszamy układ jednokolumnowy na mobile przez !important, a nie
   polegamy wyłącznie na domyślnym, wbudowanym w WordPressa łamaniu kolumn. */
.ddd-booking-layout { display: flex !important; flex-direction: column !important; gap: 28px; }
.ddd-booking-layout > .wp-block-column { width: 100% !important; flex-basis: 100% !important; min-width: 0; }

.ddd-conditional-block { margin-top: 18px; padding: 16px 16px 4px; background: var(--wp--preset--color--bg-tint); border: 1px dashed #AFC6E6; border-radius: 12px; }
.ddd-conditional-block[hidden] { display: none; }

.ddd-info-box {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px;
  background: var(--wp--preset--color--bg-tint); border-left: 4px solid var(--wp--preset--color--blue);
  border-radius: 8px; font-size: 13.5px;
}
.ddd-confirm-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; font-size: 13.5px; }
.ddd-confirm-checkbox input { margin-top: 3px; width: 18px; height: 18px; }

.ddd-validation-summary {
  display: none; margin: 0 0 20px; padding: 14px 16px; background: #FBEAE9; border: 1px solid #F1BDB9;
  border-radius: 10px; color: #8C1D15; font-size: 13.5px;
}
.ddd-validation-summary.show { display: block; }
.ddd-form-field.has-error input, .ddd-form-field.has-error select, .ddd-form-field.has-error textarea { border-color: #B3261E; }

.ddd-booking-summary { background: var(--wp--preset--color--navy); border-radius: 14px; padding: 22px; color: #fff; }
.ddd-booking-summary h3 { color: #fff; }
.ddd-summary-placeholder { color: #9FB6D6; font-size: 13.5px; }
.ddd-summary-content { display: none; }
.ddd-summary-content.show { display: block; }
.ddd-summary-group h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--light-blue); }
.ddd-summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; }
.ddd-summary-note { margin-top: 16px; padding: 12px 14px; background: rgba(255,255,255,.08); border-radius: 8px; font-size: 12.5px; color: #D7E6FA; }

.ddd-btn-preview {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--wp--preset--color--blue); color: #fff; font-weight: 700; font-size: 15.5px;
  padding: 15px 26px; min-height: 44px; border-radius: 999px; border: none; cursor: pointer;
}
.ddd-btn-preview:hover { background: var(--wp--preset--color--navy); }

.ddd-inactive-badge {
  display: inline-flex; align-items: center; gap: 6px; background: #B3261E; color: #fff; font-size: 11px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  margin-bottom: 14px;
}

/* ===== Breakpointy =====
   UWAGA (TEST 11.3): kilka reguł bazowych wyżej w tym pliku (siatki kart,
   hero, stopka) dostało !important, żeby wygrywać z automatycznymi stylami
   układu generowanymi przez WordPress/Gutenberg na realnej instalacji
   (patrz komentarz przy .ddd-usp-grid). !important ZAWSZE wygrywa z regułą
   bez !important, niezależnie od kolejności czy swoistości selektora —
   dlatego poniższe reguły dla tabletu/desktopu MUSZĄ również mieć
   !important, inaczej poprawka mobilna trwale zablokowałaby układ
   wielokolumnowy na większych ekranach. To jedyny powód !important poniżej. */
@media (min-width: 700px) {
  .ddd-form-row-two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .ddd-footer-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width: 900px) {
  .ddd-usp-grid { grid-template-columns: repeat(3,1fr) !important; }
  .ddd-paths-grid { grid-template-columns: repeat(3,1fr) !important; }
  .ddd-advantages-grid { grid-template-columns: repeat(3,1fr) !important; }
  .ddd-instructor-grid { grid-template-columns: 260px 1fr !important; }
  .ddd-course-picker { grid-template-columns: 1fr 1fr; }
  .ddd-hero-columns { grid-template-columns: 1fr 1fr !important; align-items: center; }
  .ddd-hero-columns > .wp-block-column { width: auto !important; flex-basis: 0 !important; }
  .ddd-footer-grid { grid-template-columns: repeat(4,1fr) !important; }
  .ddd-booking-layout { flex-direction: row !important; align-items: flex-start !important; }
  .ddd-booking-layout > .ddd-booking-form-wrap { width: 62% !important; flex-basis: 62% !important; }
  .ddd-booking-layout > .ddd-booking-sidebar { width: 38% !important; flex-basis: 38% !important; }
}
@media (min-width: 700px) and (max-width: 1149px) {
  .ddd-courses-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width: 1150px) {
  .ddd-courses-grid { grid-template-columns: repeat(4,1fr) !important; }
}