@charset "UTF-8";
/* =============================================================================
   site.css — PEKALA Swidnicki (szkola jazdy Swidnica)
   Charakter: electric-pop / playful-pop / cieplo-przyjazny
   Seed: sidebar-sticky hero, tilt-card, magnetic-cta, card-flow
   Fonty: Poppins (display) + Work Sans (body) — Google Fonts dodane w HTML
   Tokeny: tokens.css (primary #1B998B, accent #25203A, bg biel)
   ZAKAZ emoji w CSS — ikony przez CSS/SVG
   ============================================================================= */

/* --- Globalne nadpisania fontu (Poppins/Work Sans z prep) ------------------- */
:root {
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
}

/* --- Akcent marki: primary = #1B998B (zielen), accent dark = #25203A --------- */
/* Bazowy tekst na jasnym tle: --text-strong #0E1110 kontrast 16.65 OK */

/* --- Header brandowy -------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom: 1px solid var(--color-border);
}
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.brand-tagline {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.header-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  flex: none;
}

/* --- HERO: split-screen (archetyp zmieniany z sidebar-sticky — L-039) ------- */
/* Układ: lewa kolumna = tekst/CTA (desktop), prawa = grafika/akcentowy panel */
.hero-split {
  display: grid;
  min-height: clamp(480px, 88svh, 900px);
  position: relative;
  overflow: hidden;
  background: var(--color-accent); /* ciemne tlo #25203A */
  color: #fff;
}
@media (min-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr 420px;
  }
}

/* --- HERO: sidebar-sticky (zachowany dla CSS compat, nie uzywany) ----------- */
.hero-sidebar {
  display: grid;
  min-height: clamp(480px, 88svh, 900px);
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  color: #fff;
}
@media (min-width: 768px) {
  .hero-sidebar {
    grid-template-columns: 220px 1fr;
  }
}

/* --- split-screen: lewa kolumna tresc, prawa panel akcentowy --------------- */
.hero-split__main {
  padding: var(--space-7) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  position: relative;
}
@media (min-width: 768px) {
  .hero-split__main {
    padding: var(--space-8) var(--space-8);
  }
}
.hero-split__panel {
  display: none;
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-accent));
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero-split__panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-8) var(--space-7);
  }
}
.hero-split__panel-inner {
  position: relative;
  z-index: 1;
}
.hero-split__panel-accent {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(27,153,139,0.08),
    rgba(27,153,139,0.08) 1px,
    transparent 1px,
    transparent 32px
  );
  pointer-events: none;
}
.hero-split__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-split__stat:first-child { border-top: none; }
.hero-split__stat-val {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.hero-split__stat-label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- sidebar-compat classes (nie uzywane jako glowny hero) ------------------ */
.hero-sidebar__side {
  display: none;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  border-right: 1px solid rgba(255,255,255,0.12);
  position: relative;
}
@media (min-width: 768px) {
  .hero-sidebar__side {
    display: flex;
    position: sticky;
    top: 64px;
    align-self: start;
    max-height: calc(100svh - 64px);
  }
}

.hero-sidebar__side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero-sidebar__side-nav a {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding: var(--space-2) 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
  transition: color 0.2s, border-color 0.2s;
}
.hero-sidebar__side-nav a:hover,
.hero-sidebar__side-nav a.active {
  color: #fff;
  border-left-color: var(--color-primary);
}

.hero-sidebar__main {
  padding: var(--space-7) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  position: relative;
}
@media (min-width: 768px) {
  .hero-sidebar__main {
    padding: var(--space-8) var(--space-7);
  }
}
/* split: main wewnatrz hero-split */
.hero-split [data-reveal] { opacity: 1 !important; transform: none !important; }
.hero-split__main > * { position: relative; z-index: 1; }

/* --- Eyebrow kursywny (zamiast koloru emoji) --------------------------------- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* --- H1 hero — ZAWSZE widoczny, zero opacity:0 ----------------------------- */
.hero-h1 {
  font-family: var(--font-heading);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* ZERO ukrywania — widoczny od klatki 0 (L-040) */
  opacity: 1;
  transform: none;
}
/* tylko sekcje PONIZEJ foldu dostaja reveal */
.hero-sidebar [data-reveal] { opacity: 1 !important; transform: none !important; }

/* --- Lead / subtitle hero -------------------------------------------------- */
.hero-lead {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.85);
  max-width: 52ch;
  line-height: 1.55;
}

/* --- Linia zaufania hero (badge z ocena) ------------------------------------ */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.9);
}
.trust-badge__stars {
  color: #E5B45A;
  letter-spacing: 2px;
}

/* --- CTA hero: telefon-first ---------------------------------------------- */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-6);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, transform 0.18s;
}
.btn-call:hover { background: var(--color-primary600); transform: translateY(-2px); }
.btn-call:active { transform: translateY(0); }
/* ikona telefonu CSS-only */
.btn-call__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.01L6.6 10.8z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.01L6.6 10.8z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

/* --- Ozdobny element hero (tlo geometryczne) -------------------------------- */
.hero-bg-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-sidebar__main > * { position: relative; z-index: 1; }

/* --- Pasek liczb count-up --------------------------------------------------- */
.stats-bar {
  background: var(--color-surface);
  border-top: 3px solid var(--color-primary);
  padding: var(--space-6) 0;
}
.stats-bar .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5);
  text-align: center;
}
.stat-item__value {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  display: block;
}
.stat-item__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Sekcja "Dlaczego my" — kafle fx-tilt ---------------------------------- */
.why-us-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.why-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease-out, box-shadow 0.18s;
}
.why-card:hover {
  box-shadow: var(--shadow-md);
}
.why-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.why-card__icon svg {
  width: 24px;
  height: 24px;
  fill: var(--color-primary);
}
.why-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
  color: var(--text-strong);
}
.why-card p {
  font-size: var(--fs-base);
  color: var(--text-body);
}

/* --- Karty kursow (kategorie) ----------------------------------------------- */
.course-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.course-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.course-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
}
.course-card h3 {
  font-size: var(--fs-xl);
  color: var(--text-strong);
}
.course-card p {
  color: var(--text-body);
  flex: 1;
}
.course-card__price {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary);
}
.course-card__price small {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
  display: block;
}
.course-card__raty {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary100);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  display: inline-block;
}

/* --- Kroki kursu (jak wyglada szkolenie) ------------------------------------ */
.steps-list {
  counter-reset: steps;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.step-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  counter-increment: steps;
}
.step-item::before {
  content: counter(steps);
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-primary100);
  line-height: 1;
}
.step-item__num {
  display: none; /* CSS counter juz liczy */
}
.step-item h3 {
  font-size: var(--fs-lg);
  color: var(--text-strong);
}
.step-item p {
  font-size: var(--fs-base);
  color: var(--text-body);
}

/* --- Opinie Google ---------------------------------------------------------- */
.review-badge-big {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.review-badge-big__score {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}
.review-badge-big__stars {
  color: #E5B45A;
  font-size: var(--fs-xl);
  letter-spacing: 2px;
  display: block;
}
.review-badge-big__count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --- CTA telefon-first (sekcja zapisu) -------------------------------------- */
.cta-section {
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  padding-block: var(--space-9);
}
.cta-section h2 {
  color: #fff;
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  margin-bottom: var(--space-4);
}
.cta-section p {
  color: rgba(255,255,255,0.8);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.cta-number {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl));
  font-weight: 800;
  /* #fff na #25203A = kontrast 14.1 >= 4.5 (WCAG AA OK, L-028) */
  color: #fff;
  text-decoration: none;
  transition: color 0.18s;
}
.cta-number:hover { color: var(--color-primary); }

/* --- Sekcja "Nasza zdawalnosc" (uczciwa) ------------------------------------ */
.zdawalnosc-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--space-3);
}

/* --- Tabela cennikowa ------------------------------------------------------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.price-table th,
.price-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.price-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-base);
}
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--color-surface); }
.price-table .price-val {
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-heading);
  white-space: nowrap;
}
.price-table .price-placeholder {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: block;
}
@media (max-width: 599px) {
  .price-table { font-size: var(--fs-sm); }
  .price-table th, .price-table td { padding: var(--space-3) var(--space-3); }
}

/* --- Info-box placeholder --------------------------------------------------- */
.info-box {
  background: color-mix(in srgb, var(--warning) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-strong);
}
.info-box strong {
  display: block;
  margin-bottom: var(--space-1);
}

/* --- Stopka ---------------------------------------------------------------- */
.site-footer {
  background: var(--color-accent);
  color: rgba(255,255,255,0.8);
}
.site-footer .container {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-8);
}
@media (min-width: 768px) {
  .site-footer .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.footer-brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: var(--fs-xl);
  display: block;
  margin-bottom: var(--space-2);
}
.footer-tagline {
  font-size: var(--fs-sm);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.footer-nap p {
  color: rgba(255,255,255,0.75);
  margin: var(--space-2) 0;
  max-width: none;
}
.footer-nap a {
  color: var(--color-primary);
  font-weight: 600;
}
.footer-nav-col h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-4);
}
.footer-nav-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-nav-list a {
  color: rgba(255,255,255,0.75);
  font-size: var(--fs-sm);
  transition: color 0.18s;
}
.footer-nav-list a:hover { color: var(--color-primary); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-4) 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.4);
}

/* --- Nawigacja aktywna ------------------------------------------------------ */
.site-header nav a.nav-active:not(.btn) {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Breadcrumb ------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--space-4) 0;
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb__sep::before { content: "/"; margin: 0 2px; }

/* --- Page-hero (podstrony) -------------------------------------------------- */
.page-hero {
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-8) 0 var(--space-7);
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  font-family: var(--font-heading);
}
.page-hero .eyebrow { color: var(--color-primary); }

/* --- Formularz kontaktowy --------------------------------------------------- */
.contact-form {
  display: grid;
  gap: var(--space-5);
}
.rodo-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Galeria realizacje ----------------------------------------------------- */
.realizacje-note {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  padding: var(--space-7);
  text-align: center;
  color: var(--text-muted);
}

/* --- Sekcja z opinia-historia (o-nas) --------------------------------------- */
.history-block {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 768px) {
  .history-block { grid-template-columns: 1fr 1fr; }
}

/* --- Ikona L-plank SVG (inline, symbol niszy) ------------------------------ */
.l-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  color: var(--color-primary);
  line-height: 1;
}

/* --- Overflow guard na mobile ---------------------------------------------- */
@media (max-width: 390px) {
  .hero-h1 { font-size: clamp(28px, 9vw, 48px); }
  .course-grid { grid-template-columns: 1fr; }
  .why-us-grid { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: 1fr; }
}

/* --- prefers-reduced-motion guard (hero widoczny) -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-call, .course-card, .why-card { transition: none; }
}