@charset "UTF-8";
/* =============================================================================
   site.css — Moto Akademia Rafał Świętoń | nadpisania wizualne nad tokens.css + styles.css
   Paleta: ciemna (#0D0A0A), primary #E63946, aksent okrągły — electric-pop
   Archetyp hero: gallery-hero-grid
   Fonty: Poppins (display) + Work Sans (body) — seed ciepły-przyjazny
   ============================================================================= */

/* --- Fonty Google ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2★family=Poppins:wght@700;800&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
}

/* --- Ogólne ciemne tło ------------------------------------------------------ */
body {
  background-color: var(--color-bg);
  color: var(--text-body);
}

/* --- Header: ciemny, czerwona linia na dole --------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom: 1px solid var(--color-primary);
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.brand-name span.l-letter {
  color: var(--color-primary);
}

/* --- Przycisk główny CTA — czerwony ---------------------------------------- */
.btn-cta {
  background: var(--color-primary600);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 48px;
  padding: 0 var(--space-6);
  transition: background var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease);
}
.btn-cta:hover { background: var(--color-primary); transform: translateY(-2px); }
.btn-cta:active { transform: translateY(0); }

/* --- Eyebrow czerwony -------------------------------------------------------- */
.eyebrow-red {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* ============================================================================
   HERO — gallery-hero-grid
   Siatka: [text-col | grid-mozaika], poniżej 768px → stack
   ============================================================================ */
.hero-gallery {
  min-height: clamp(520px, 88svh, 900px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: var(--space-8);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-gallery { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

.hero-gallery__text {
  display: grid;
  gap: var(--space-4);
  z-index: 2;
}

.hero-gallery__h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, var(--fs-4xl));
  line-height: 1.05;
  color: var(--text-strong);
  letter-spacing: -.03em;
  margin: 0;
  overflow-wrap: break-word;
}

.hero-gallery__h1 .accent {
  color: var(--color-primary);
}

.hero-gallery__lead {
  font-size: var(--fs-lg);
  color: var(--text-body);
  max-width: 46ch;
}

.hero-gallery__trust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.hero-gallery__trust .stars-val {
  font-weight: 700;
  color: #E5B45A;
  font-size: var(--fs-lg);
}

.hero-gallery__trust .trust-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Siatka miniatur — mozaika 2×2 + jeden kafel szeroki */
.hero-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px;
  z-index: 1;
}

.hero-grid-cell {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-surface);
  position: relative;
}

.hero-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-grid-cell--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16/6;
}

/* Placeholder w komĂłrkach */
.hero-grid-cell .ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: inherit;
}

.hero-grid-cell .ph::before {
  font-size: 1.8rem;
  opacity: .6;
}

.hero-grid-cell--auto { content: "zdjęcie do dosłania"; }
.hero-grid-cell--car .ph::before { content: ""; }
.hero-grid-cell--plac .ph::before { content: ""; }
.hero-grid-cell--sala .ph::before { content: ""; }

/* ============================================================================
   PASEK LICZB COUNT-UP
   ============================================================================ */
.stats-bar {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  text-align: center;
}

@media (min-width: 600px) {
  .stats-bar__grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-item__value {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-item__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ============================================================================
   SEKCJA DLACZEGO MY — kafle
   ============================================================================ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
}

.why-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  transition: transform var(--motion-dur) var(--motion-ease), border-color var(--motion-dur) var(--motion-ease);
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
}

.why-card__icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  display: block;
}

.why-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}

.why-card__desc {
  color: var(--text-body);
  font-size: var(--fs-base);
}

/* ============================================================================
   KARTY KATEGORII — kursy
   ============================================================================ */
.courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .courses-grid { grid-template-columns: repeat(3, 1fr); }
}

.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease);
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(230, 57, 70, .18);
}

.course-card__badge {
  background: var(--color-primary600);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  padding: var(--space-5);
  text-align: center;
  letter-spacing: -.04em;
}

.course-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.course-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-strong);
}

.course-card__desc {
  color: var(--text-body);
  font-size: var(--fs-base);
  flex: 1;
}

.course-card__price {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-3);
  margin-top: auto;
}

.course-card__price strong {
  color: var(--color-primary);
}

/* ============================================================================
   KROKI KURSU
   ============================================================================ */
.steps-list {
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
}

.step-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.step-item__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary600);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.step-item__content h3 {
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}

.step-item__content p {
  color: var(--text-body);
  font-size: var(--fs-base);
}

/* ============================================================================
   OPINIE
   ============================================================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.review-card__stars {
  color: #E5B45A;
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: var(--space-3);
}

.review-card__text {
  color: var(--text-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.review-card__author {
  font-weight: 600;
  color: var(--text-strong);
  font-size: var(--fs-sm);
}

.review-card__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================================
   CTA SEKCJA — zapis
   ============================================================================ */
.cta-section {
  background: var(--color-primary600);
  padding-block: var(--space-9);
  text-align: center;
}

.cta-section h2 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl));
}

.cta-section p {
  color: rgba(255,255,255,.88);
  font-size: var(--fs-lg);
  margin-inline: auto;
  max-width: 52ch;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.btn-cta-inv {
  background: #fff;
  color: var(--color-primary600);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  border-radius: var(--radius-pill);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 56px;
  padding: 0 var(--space-8);
  cursor: pointer;
  transition: transform var(--motion-dur) var(--motion-ease);
}

.btn-cta-inv:hover { transform: translateY(-2px) scale(1.03); }

/* ============================================================================
   STOPKA
   ============================================================================ */
.site-footer {
  background: var(--color-neutral900);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--text-strong);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}

.footer-brand-name span {
  color: var(--color-primary);
}

.footer-nap p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.footer-nap a {
  color: var(--color-primary);
  font-weight: 600;
}

.footer-nav-col h4 {
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--space-3);
}

.footer-nav-col a {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding-block: 4px;
  transition: color var(--motion-dur);
}

.footer-nav-col a:hover { color: var(--color-primary); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ============================================================================
   MOBILE STICKY CTA — telefon-first
   ============================================================================ */
.mobile-cta {
  background: var(--color-bg);
  border-top: 1px solid var(--color-primary);
  gap: var(--space-2);
}

.mobile-cta a.btn-cta {
  font-size: var(--fs-sm);
  min-height: 44px;
  padding: 0 var(--space-4);
}

/* ============================================================================
   SEKCJA AUTO / FLOTA
   ============================================================================ */
.fleet-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-surface);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, transparent);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-muted);
  gap: var(--space-2);
}

.fleet-frame::before {
  content: "";
  font-size: 3rem;
  display: block;
}

.fleet-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ============================================================================
   SECTION HELPERS
   ============================================================================ */
.section-dark {
  background: var(--color-bg);
}

.section-surface {
  background: var(--color-surface);
}

.sec-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  font-weight: 800;
  color: var(--text-strong);
  text-align: center;
  margin-bottom: var(--space-2);
}

.sec-lead {
  text-align: center;
  color: var(--text-body);
  font-size: var(--fs-lg);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}

/* ============================================================================
   CENNIK PAGE — tabela
   ============================================================================ */
.price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.price-table th,
.price-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--fs-base);
}

.price-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-strong);
  background: var(--color-surface);
}

.price-table td { color: var(--text-body); }

.price-table td.price-val {
  font-weight: 700;
  color: var(--color-primary);
}

.price-table tr:last-child td { border-bottom: none; }

/* ============================================================================
   KONTAKT — formularz
   ============================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-form .field label {
  color: var(--text-strong);
}

.contact-form .field input,
.contact-form .field textarea,
.contact-form .field select {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--text-body);
}

.contact-form .field input:focus,
.contact-form .field textarea:focus {
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.rodo-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* ============================================================================
   FAQ PAGE
   ============================================================================ */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
}

/* ============================================================================
   OKRUSZKI BREADCRUMB
   ============================================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding-block: var(--space-4);
}

.breadcrumb a { color: var(--text-muted); transition: color var(--motion-dur); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep { color: var(--color-border); }
.breadcrumb .current { color: var(--text-body); }

/* ============================================================================
   SUBPAGE HERO (mały pasek nagłówkowy)
   ============================================================================ */
.subpage-hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7) var(--space-6);
}

.subpage-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  font-weight: 800;
  color: var(--text-strong);
  margin: 0;
}

.subpage-hero .lead {
  color: var(--text-body);
  font-size: var(--fs-lg);
  margin-top: var(--space-3);
  max-width: 55ch;
}

/* ============================================================================
   REALIZACJE — galeria
   ============================================================================ */
.gallery-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.gallery-item-ph {
  aspect-ratio: 4/3;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ============================================================================
   NAV ACTIVE STATE
   ============================================================================ */
nav[aria-label="GĹ‚Ăłwna"] a.active,
nav[aria-label="GĹ‚Ăłwna"] a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================================
   PREFERS-REDUCED-MOTION (dodatkowe override niszy)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .course-card, .why-card, .btn-cta, .btn-cta-inv { transition: none; transform: none !important; }
}