/* ===== PROspace — BRAND THEME (niebieski/czerwony/żółty), premium sport feel ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* --- Token overrides --- */
:root {
  --brand-primary: #145d9a;
  --brand-primary-dark: #0e4370;
  --brand-primary-light: rgba(20,93,154,.08);
  --brand-red: #e61341;
  --brand-yellow: #f7de10;
  --border: #dfe7ef;
  --border-focus: #145d9a;
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f5f8fb;
  --text-main: #0f172a;
  --text-muted: #5b6b7d;
  --text-light: #94a3b8;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 20px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 48px rgba(15,23,42,.10);
}

* { font-family: 'Space Grotesk', sans-serif !important; }

/* Nagłówek i submenu MUSZĄ wyglądać identycznie na wszystkich podstronach — gwiazdka powyżej
   nadpisywała im font razem z całą stroną, przez co menu na PROspace było innym krojem niż
   na Trenerowo, blogu czy kontakcie. Przywracamy krój z main.css. */
.navbar, .navbar *,
.navbar-subnav, .navbar-subnav * { font-family: var(--font-body), 'Outfit', sans-serif !important; }

body { background: #fff; color: #0f172a; }

/* --- Navbar --- */
.navbar {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--brand-yellow);
}
.navbar__logo { color: #0f172a; }
.navbar__logo-mark { background: var(--brand-primary); color: #fff; }
/* kolor pozycji menu bierzemy z main.css, żeby był wszędzie ten sam */

.navbar__hamburger span { background: #0f172a; }

/* --- Subnav (drugi poziom menu) --- */
.navbar-subnav--prospace {
  background: #f5f9fd;
  border-bottom: 1px solid #dfe7ef;
}
.navbar-subnav--prospace .navbar-subnav__current {
  background: var(--brand-primary); color: #fff;
}
.navbar-subnav--prospace a { color: #6b6b6b; }
.navbar-subnav--prospace a:hover { color: var(--brand-primary); background: rgba(20,93,154,.08); }

/* --- Utility text --- */
.section-label { background: var(--brand-yellow); color: #0f172a; border: none; font-weight: 700; }
.section-title { color: #0f172a; }
.section-sub { color: #5b6b7d; }

/* --- Buttons --- */
.btn--primary { background: var(--brand-primary); color: #fff; box-shadow: none; }
.btn--primary:hover { background: var(--brand-primary-dark); box-shadow: 0 4px 20px rgba(20,93,154,.25); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn--secondary:hover { background: rgba(20,93,154,.08); }
.btn--ghost { color: #5b6b7d; border-color: #dfe7ef; }
.btn--ghost:hover { background: #f5f9fd; color: var(--brand-primary); border-color: #c3d4e5; }

/* ============================================================
   HERO — ciemnoniebieski, brandowe akcenty
   ============================================================ */
.hero--prospace {
  background: #0a2540;
  border-bottom: 1px solid #123a5e;
  position: relative;
  overflow: hidden;
}

/* Animated gradient — odcienie granatu i niebieskiego */
.hero--prospace .hero__gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -45deg,
    #061a2e,
    #0a2540,
    #0e3a63,
    #0a2f52,
    #071e35,
    #123a5e,
    #0a2540
  );
  background-size: 400% 400%;
  animation: prospace-flow 32s ease infinite;
  opacity: 1;
}

@keyframes prospace-flow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

/* .hero-video-bg — przeniesione do main.css (generyczne, wspólne dla wszystkich stron/sekcji). */
/* Ciemny, brandowy overlay nad wideo dla czytelności tekstu — mocniejszy niż zwykły .hero__overlay.
   Selektor łączy obie klasy na jednym elemencie (wyższa specyficzność), żeby wygrać niezależnie
   od kolejności deklaracji z bazowym `.hero--prospace .hero__overlay` niżej w tym pliku. */
.hero--prospace.hero--prospace-video .hero__overlay {
  background: linear-gradient(180deg, rgba(10,37,64,.55) 0%, rgba(10,37,64,.75) 100%);
  z-index: 1;
}
.hero--prospace-video .orb { z-index: 1; }
.hero--prospace-video .container { z-index: 2; }

/* Orby — brandowe poświaty na granatowym tle */
.hero--prospace .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.hero--prospace .orb--ps-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(20,93,154,.55) 0%, transparent 70%);
  top: -180px; left: -120px;
  opacity: .85;
  animation: orb-drift-1 18s ease-in-out infinite alternate;
}
.hero--prospace .orb--ps-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(247,222,16,.28) 0%, transparent 70%);
  top: 15%; right: -80px;
  opacity: .6;
  animation: orb-drift-2 22s ease-in-out infinite alternate;
}
.hero--prospace .orb--ps-3 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(230,19,65,.35) 0%, transparent 70%);
  bottom: -120px; left: 40%;
  opacity: .7;
  animation: orb-drift-3 26s ease-in-out infinite alternate;
}

/* Overlay — subtelny gradient od góry dla głębi */
.hero--prospace .hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 40%);
}

/* Tekst */
.hero--prospace .hero__label         { color: #a8c5e0; }
.hero--prospace .hero__label::before { background: var(--brand-yellow); }
.hero--prospace .hero__title         { color: #ffffff; font-family: var(--font-space, 'Space Grotesk', sans-serif); }
.hero--prospace .hero__title em      { color: var(--brand-yellow); font-style: normal; font-weight: 300; }
.hero--prospace .hero__sub           { color: rgba(255,255,255,.6); }
.hero--prospace .hero__stats         { border-top-color: rgba(255,255,255,.1); }
.hero--prospace .hero__stat-num      { color: #ffffff; }
.hero--prospace .hero__stat-label    { color: rgba(255,255,255,.4); }

/* Hero — trzy przyciski akcji w jednym rzędzie na desktopie (zawijają się dopiero na mobile) */
.hero--prospace .hero__content { max-width: 920px; }
.hero--prospace .hero__actions { flex-wrap: nowrap; }
@media (max-width: 900px) {
  .hero--prospace .hero__actions { flex-wrap: wrap; }
}

/* Buttony w hero — akcent żółty na ciemnym tle */
.hero--prospace .btn--primary {
  background: var(--brand-yellow);
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(247,222,16,.2);
}
.hero--prospace .btn--primary:hover {
  background: #ffe94d;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(247,222,16,.3);
}
.hero--prospace .btn--secondary {
  background: transparent;
  color: #cfe0f0;
  border-color: rgba(255,255,255,.25);
}
.hero--prospace .btn--secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.ps-feature {
  border-top: 1px solid #dfe7ef;
  padding: 2.5rem 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 3rem;
  align-items: start;
}
.ps-feature__num {
  font-size: 3rem;
  font-weight: 700;
  color: rgba(20,93,154,.18);
  line-height: 1;
  letter-spacing: -.03em;
}
.ps-feature__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .6rem;
  line-height: 1.2;
}
.ps-feature__desc { color: #5b6b7d; line-height: 1.8; }

/* ============================================================
   STATS BAR — brand-tinted bg, blue numbers
   ============================================================ */
.ps-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #dfe7ef;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #f5f9fd;
}
.ps-stat {
  padding: 2.5rem 2rem;
  text-align: center;
  border-right: 1px solid #dfe7ef;
}
.ps-stat:last-child { border-right: none; }
.ps-stat__num {
  font-size: 3rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: .5rem;
  letter-spacing: -.03em;
}
.ps-stat__label { font-size: .85rem; color: #7a8ba0; }

/* ============================================================
   PROGRAM CARDS — white, brand gradient accent on hover
   ============================================================ */
.ps-program {
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: var(--r-xl);
  padding: 2.5rem;
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}
.ps-program::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-red), var(--brand-yellow));
  opacity: 0;
  transition: opacity var(--t);
}
.ps-program:hover { border-color: #b8cee3; box-shadow: 0 8px 32px rgba(20,93,154,.12); transform: translateY(-2px); }
.ps-program:hover::before { opacity: 1; }

.ps-program__label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Karty programów wyrównane w poziomie: tytuł ma stałą wysokość 2 linii, więc akapity opisu
   zaczynają się na tej samej wysokości mimo że "Trening indywidualny" łamie się na dwie linie.
   Karta jest kolumną flex, a linia z tagami/CTA jest dociskana do dołu (margin-top:auto),
   dzięki czemu dolne krawędzie też się zgadzają przy różnej długości opisów. */
.ps-program { display: flex; flex-direction: column; }
.ps-program__title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .75rem;
  line-height: 1.25;
  min-height: calc(2 * 1.7rem * 1.25); /* zawsze miejsce na 2 linie */
}
.ps-program__desc { color: #5b6b7d; line-height: 1.7; margin-bottom: 1rem; }
.ps-program__tags-line {
  font-size: .82rem;
  color: #7a8ba0;
  padding-top: .85rem;
  border-top: 1px solid #eef2f6;
  margin-top: auto; /* dociśnięcie do dołu karty */
}
/* Na wąskich ekranach karty i tak są jedna pod drugą — rezerwowanie 2 linii tylko marnuje miejsce. */
@media (max-width: 700px) {
  .ps-program__title { min-height: 0; }
}
.ps-program__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1.25rem;
  padding: .6rem 1.1rem;
  border-radius: var(--r-full);
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}

/* Kolorowe warianty kart "Programy" — żeby sekcja nie była zdominowana bielą. */
.ps-program--yellow { background: #fffbe8; border-color: #ecdd8f; }
.ps-program--yellow::before { opacity: 1; background: var(--brand-yellow); }
.ps-program--yellow .ps-program__label { color: #8a7400; }
.ps-program--yellow:hover { border-color: #ecdd8f; box-shadow: 0 8px 32px rgba(247,222,16,.18); }

.ps-program--red { background: #fef1f4; border-color: #f0bfca; }
.ps-program--red::before { opacity: 1; background: var(--brand-red); }
.ps-program--red .ps-program__label { color: var(--brand-red); }
.ps-program--red:hover { border-color: #f0bfca; box-shadow: 0 8px 32px rgba(230,19,65,.14); }

.ps-program--blue { background: #eef6fc; border-color: #b8cee3; }
.ps-program--blue::before { opacity: 1; background: var(--brand-primary); }

.ps-program--dark {
  background: linear-gradient(150deg, #0e2d52 0%, #145d9a 100%);
  border-color: transparent;
}
.ps-program--dark .ps-program__label { color: var(--brand-yellow); }
.ps-program--dark .ps-program__title { color: #fff; }
.ps-program--dark .ps-program__desc { color: rgba(255,255,255,.78); }
.ps-program--dark .ps-program__tags-line { color: rgba(255,255,255,.55); border-top-color: rgba(255,255,255,.15); }
.ps-program--dark .ps-program__cta { background: var(--brand-yellow); color: #0f172a; }
.ps-program--dark:hover { border-color: transparent; box-shadow: 0 8px 32px rgba(14,45,82,.35); }

/* Galeria przeniesiona do main.css jako .site-gallery-* (wspolna dla PROspace/PROkid/Trenerowo). */

/* ============================================================
   CONTACT / INFO CARDS — light
   ============================================================ */
.ps-info-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #f5f9fd;
  border-radius: var(--r-md);
  border: 1px solid #dfe7ef;
}
.ps-info-card .icon { font-size: 1.5rem; }
.ps-info-card-title { font-weight: 600; font-size: .95rem; color: #0f172a; }
.ps-info-card-sub { font-size: .82rem; color: #7a8ba0; }

/* Form card */
.ps-form-card {
  background: #f5f9fd;
  border-radius: var(--r-xl);
  padding: 2.5rem;
  border: 1px solid #dfe7ef;
}

/* Inputs */
input, select, textarea {
  background: #fff;
  border-color: #dfe7ef;
  color: #0f172a;
}
input::placeholder, textarea::placeholder { color: #b0bfd0; }
input:focus, select:focus, textarea:focus { background: #fff; border-color: var(--brand-primary); }

/* Filter buttons */
.filter-btn { background: #f5f9fd; border-color: #dfe7ef; color: #5b6b7d; }
.filter-btn:hover, .filter-btn.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .ps-stats { grid-template-columns: repeat(2, 1fr); }
  .ps-stats .ps-stat:nth-child(2) { border-right: none; }
  .ps-feature { grid-template-columns: 1fr; gap: 1rem; }
  .ps-feature__num { font-size: 2rem; }
}
@media (max-width: 480px) {
  .ps-stats { grid-template-columns: 1fr 1fr; }
}