/* =============================================================================
   moto.css — repozycjonowanie na szkołę MOTOCYKLOWĄ + liquid glass.
   Ładowany jako ostatni — nadpisuje site.css. Paleta bez zmian
   (granat #15508A + baby blue #8FD3F4).
   ============================================================================= */

/* --- Więcej oddechu w nagłówkach sekcji (tytuł ↔ tekst ↔ treść) ------------- */
.sec-head { margin-bottom: var(--space-7, 48px); }
.sec-head .eyebrow { display: inline-block; margin-bottom: var(--space-3, 12px); }
.sec-head h2 { margin-bottom: var(--space-4, 16px); }
.sec-head p { margin-top: 0; }

/* --- Liquid glass: warianty ------------------------------------------------ */
.glass {
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 24px 60px rgba(21,80,138,.18), inset 0 1px 0 rgba(255,255,255,.85);
}
.glass-card {
  background: rgba(255,255,255,0.66);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-chip {
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.glass-dark {
  background: rgba(15,46,78,0.40);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 70px rgba(0,0,0,.42);
}

/* --- Przycisk akcentowy (wyróżniony, nie zlewa się z tłem) ------------------ */
.btn-accent {
  background: var(--color-accent);
  color: #0E2E4E;
  border: 1px solid var(--color-accent);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(143,211,244,.45);
}
.btn-accent:hover {
  background: #A6E0FA;
  border-color: #A6E0FA;
  box-shadow: 0 12px 32px rgba(143,211,244,.65);
}

/* Przycisk „Zadzwoń" w hero (pod H1): ciemne tło + jasnoniebieski napis */
.hero-offset__cta .btn-accent {
  background: #0E2E4E; color: #FFFFFF; border-color: #0E2E4E;
  box-shadow: 0 8px 24px rgba(14,46,78,.35);
}
.hero-offset__cta .btn-accent:hover { background: #11406E; border-color: #11406E; color: #FFFFFF; }

/* --- HERO: zdjęcie w tle + szklana karta z treścią na wierzchu ------------- */
.hero-offset {
  position: relative; background: none; overflow: hidden;
  min-height: clamp(460px, 72vh, 640px); display: grid; align-items: center;
}
.hero-offset__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('images/10.png') center / cover no-repeat;
}
.hero-offset__veil {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(17,64,110,.44) 100%);
}
.hero-offset > .container { position: relative; z-index: 1; }
.hero-offset__grid { grid-template-columns: 1fr; }
.hero-offset__card.glass { border-color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.70); }
@media (min-width: 860px) {
  .hero-offset__grid { grid-template-columns: 1fr; }
  .hero-offset__card { margin-right: 0; max-width: 560px; }
}
.hero-trust {
  margin-top: var(--space-3, 12px); padding-top: var(--space-4, 16px);
  border-top: 1px dashed var(--color-border);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  color: #E5A21C; font-weight: 700; letter-spacing: 1px;
}
.hero-trust span { color: var(--text-body); font-weight: 500; letter-spacing: 0; font-size: var(--fs-sm, 13px); }

/* Hero badge → pływająca szklana pigułka zamiast pełnego gradientu */
.hero-offset__badge.glass-chip {
  left: auto; right: 16px; bottom: 16px; width: auto;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16); color: #FFFFFF; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.34);
}

/* --- PASEK LICZB: 3 szklane kafle na granacie ------------------------------ */
.stats-band__grid--3 { grid-template-columns: 1fr; gap: var(--space-4, 16px); }
@media (min-width: 768px) { .stats-band__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.stats-band .stat.glass-chip {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-lg, 24px);
  padding: var(--space-6, 32px) var(--space-4, 16px);
}

/* --- KATEGORIE: subtelny glow na hover -------------------------------------- */
.cat-card.glass-card:hover { box-shadow: 0 18px 44px rgba(21,80,138,.20); }
.cat-card__moto { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md, 16px);
  background: color-mix(in srgb, var(--color-accent) 40%, #FFFFFF); color: var(--color-primary); margin-bottom: var(--space-1, 4px); }
.cat-card__moto svg { width: 30px; height: 30px; }

/* --- O INSTRUKTORZE: foto + tekst ------------------------------------------ */
.instructor__grid { display: grid; gap: var(--space-6, 32px); align-items: center; }
@media (min-width: 860px) { .instructor__grid { grid-template-columns: .9fr 1.1fr; } }
.instructor__media {
  margin: 0; border-radius: var(--radius-lg, 24px); overflow: hidden;
  box-shadow: 0 20px 50px rgba(21,80,138,.22);
}
.instructor__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; display: block; }
.instructor__body { display: grid; gap: var(--space-4, 16px); align-content: start; }
.instructor__body h2 { color: var(--color-primary); }
.instructor__body p { color: var(--text-body); max-width: 52ch; }
.instructor__body .btn { justify-self: start; }

/* --- BANER ze zdjęciem (widoczne trzecie zdjęcie) -------------------------- */
.showcase__media { position: relative; margin: 0; border-radius: var(--radius-lg, 24px); overflow: hidden;
  box-shadow: 0 20px 50px rgba(21,80,138,.22); }
.showcase__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 7; }
.showcase__cap {
  position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16); color: #FFFFFF; font-weight: 600; font-size: var(--fs-sm, 13px);
  border: 1px solid rgba(255,255,255,0.34);
}
@media (max-width: 640px) { .showcase__media img { aspect-ratio: 4 / 3; } }

/* --- FINALNE CTA: rozmyte zdjęcie w tle + szklana karta -------------------- */
.signup-photo { position: relative; overflow: hidden; isolation: isolate; color: #FFFFFF; text-align: center; }
.signup-photo__bg {
  position: absolute; inset: -50px; z-index: -2;
  background: url('images/9.png') center / cover no-repeat;
  filter: blur(10px) brightness(.72); transform: scale(1.08);
}
.signup-photo__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(17,64,110,.70) 0%, rgba(14,46,78,.85) 100%);
}
.signup-photo__card {
  max-width: 680px; margin-inline: auto; border-radius: var(--radius-lg, 24px);
  padding: clamp(28px, 5vw, 52px); display: grid; gap: var(--space-4, 16px); justify-items: center;
}
.signup-photo h2 { color: #FFFFFF; }
.signup-photo__card > p { color: rgba(255,255,255,.92); max-width: 48ch; }
.signup-photo__cta { justify-content: center; margin-top: var(--space-2, 8px); }
.signup-photo__nap { font-size: var(--fs-sm, 13px); color: rgba(255,255,255,.78); }

/* Bez backdrop-filter (starsze przeglądarki) — czytelny fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-card { background: #FFFFFF; }
  .glass-dark { background: rgba(15,46,78,.86); }
  .stats-band .stat.glass-chip { background: rgba(255,255,255,.12); }
  .hero-offset__badge.glass-chip { background: rgba(17,64,110,.86); }
}