/* ============================================================
   XCARcontrol — style.css
   Przetłumaczone z: src/index.css + tailwind.config.ts
   Reguły: tajne-tlumaczenie.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* === Tailwind Preflight Reset (wymagany dla parity z React) === */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

ul, ol {
    list-style: none;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg, video {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* === CSS Variables (z src/index.css :root) === */

:root {
    --background: 0 0% 4%;
    --foreground: 45 100% 95%;

    --card: 0 0% 8%;
    --card-foreground: 45 100% 95%;

    --popover: 0 0% 8%;
    --popover-foreground: 45 100% 95%;

    --primary: 48 100% 50%;
    --primary-foreground: 0 0% 4%;

    --secondary: 0 0% 14%;
    --secondary-foreground: 45 100% 95%;

    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 55%;

    --accent: 210 100% 60%;
    --accent-foreground: 0 0% 4%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 0 0% 16%;
    --input: 0 0% 16%;
    --ring: 48 100% 50%;

    --radius: 0.75rem;
}

/* === Base styles (z src/index.css @layer base) === */

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-color: hsl(48 100% 50%) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: hsl(48 100% 50%);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(48 100% 60%);
}

/* === Layout (z Layout.tsx + tailwind.config.ts container) === */

.site-layout {
    display: flex;            /* flex */
    flex-direction: column;   /* flex-col */
    min-height: 100vh;        /* min-h-screen */
}

.site-layout > main {
    flex: 1;                  /* flex-1 */
}

/* container mx-auto — z tailwind.config.ts: center:true, padding:"2rem", screens.2xl:"1400px" */
.container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;       /* px-4 = 1rem */
    padding-right: 1rem;
}

/* === Utility: text-gradient (z src/index.css @layer utilities) === */

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, hsl(var(--primary)), hsl(50, 100%, 70%));
    /* from-primary to-yellow-300 — primary=hsl(48,100%,50%), yellow-300=hsl(50,100%,70%) */
}

.text-foreground {
    color: hsl(var(--foreground));
}

.icon-primary {
    color: hsl(var(--primary));
}

.text-muted {
    color: hsl(var(--muted-foreground));
}

/* === Utility: glass / glass-strong (z src/index.css) === */

.glass {
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(24px);   /* backdrop-blur-xl = 24px */
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);  /* border-white/[0.06] */
}

.glass-strong {
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(40px);   /* backdrop-blur-2xl = 40px */
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.08);  /* border-white/[0.08] */
}

/* === Utility: glow-card (z src/index.css) === */

.glow-card {
    position: relative;
    overflow: hidden;
}

.glow-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 0.75rem;   /* rounded-xl */
    opacity: 0;
    transition: opacity 0.5s; /* duration-500 */
    background: linear-gradient(135deg, hsl(48 100% 50% / 0.3), transparent 60%);
}

.glow-card:hover::before {
    opacity: 1;
}

/* === Utility: dot-pattern (z src/index.css) === */

.dot-pattern {
    background-image: radial-gradient(circle, hsl(0 0% 100% / 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* === Utility: grid-pattern (z src/index.css) === */

.grid-pattern {
    background-image:
        linear-gradient(hsl(0 0% 100% / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, hsl(0 0% 100% / 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* === Utility: section-dark / section-darker (z src/index.css) === */

.section-dark {
    background: linear-gradient(180deg, hsl(0 0% 3%) 0%, hsl(0 0% 5%) 100%);
}

.section-darker {
    background: linear-gradient(180deg, hsl(0 0% 2%) 0%, hsl(0 0% 4%) 100%);
}

/* === Utility: speed-lines (z src/index.css) === */

.speed-lines {
    position: relative;
    overflow: hidden;
}

.speed-lines::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 8px,
        hsl(48 100% 50% / 0.04) 8px,
        hsl(48 100% 50% / 0.04) 10px
    );
    pointer-events: none;
}

/* === Utility: checkered-strip (z src/index.css) === */

.checkered-strip {
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        hsl(48 100% 50%) 0px,
        hsl(48 100% 50%) 8px,
        transparent 8px,
        transparent 16px
    );
}

/* === Utility: clip-diagonal (z src/index.css) === */

.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
}

/* === Animations (z tajne-tlumaczenie.md wzorzec Animation JS) === */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}
.fade-in.visible {
    opacity: 1;
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays (z tajne-tlumaczenie.md) */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }
.delay-6 { transition-delay: 0.48s; }
.delay-7 { transition-delay: 0.56s; }
.delay-8 { transition-delay: 0.64s; }

/* Larger stagger (i * 0.1) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Larger stagger (i * 0.15) */
.delay-150 { transition-delay: 0.15s; }
.delay-300b { transition-delay: 0.30s; }

/* === Hover effects (z tajne-tlumaczenie.md group hover → parent hover) === */

.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}

/* Card image zoom on hover (group-hover:scale-105/110) */
.card-img-wrap {
    overflow: hidden;
}
.card-img-wrap img {
    transition: transform 0.7s ease;  /* duration-700 z services cards */
}
.card-img-wrap:hover img {
    transform: scale(1.1);  /* group-hover:scale-110 */
}

/* ============================================================
   HEADER (z Header.tsx — top bar + main nav)
   ============================================================ */

/* Top bar: bg-gradient-to-r from-secondary/60 via-secondary/40 to-secondary/60 border-b border-border/50 text-sm */
.top-bar {
    background: linear-gradient(to right,
        hsl(var(--secondary) / 0.6),
        hsl(var(--secondary) / 0.4),
        hsl(var(--secondary) / 0.6)
    );
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    font-size: 0.875rem;  /* text-sm */
    line-height: 1.25rem;
}

.top-bar .container {
    display: flex;             /* flex */
    align-items: center;       /* items-center */
    justify-content: space-between;  /* justify-between */
    padding-top: 0.5rem;      /* py-2 */
    padding-bottom: 0.5rem;
}

.top-bar-left {
    display: flex;             /* flex */
    align-items: center;       /* items-center */
    gap: 1rem;                 /* gap-4 */
    color: hsl(var(--muted-foreground));
}

.top-bar-left a {
    display: flex;
    align-items: center;
    gap: 0.375rem;            /* gap-1.5 */
    transition: color 0.15s;  /* transition-colors */
}

.top-bar-left a:hover {
    color: hsl(var(--primary));
}

.top-bar-left svg {
    color: hsl(var(--primary));
}

.top-bar-right {
    color: hsl(var(--primary));
    font-weight: 600;           /* font-semibold */
    font-size: 0.75rem;         /* text-xs */
    text-transform: uppercase;  /* uppercase */
    letter-spacing: 0.1em;      /* tracking-wider */
    transition: color 0.15s;
}

.top-bar-right:hover {
    color: hsl(var(--primary) / 0.8);
}

/* Main header: sticky top-0 z-50 glass-strong shadow-lg */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 10px 15px -3px hsl(var(--background) / 0.5);
    /* glass-strong applied via class */
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;              /* h-16 */
}

/* Logo: h-8 w-auto */
.site-header .logo-img {
    height: 2rem;              /* h-8 */
    width: auto;
}

/* Desktop nav: hidden lg:flex items-center gap-0.5 */
.desktop-nav {
    display: none;             /* hidden */
    align-items: center;
    gap: 0.125rem;             /* gap-0.5 */
}

/* Nav link default: px-3 py-2 rounded-lg text-sm font-medium */
.nav-link {
    padding: 0.5rem 0.75rem;   /* py-2 px-3 */
    border-radius: 0.5rem;     /* rounded-lg */
    font-size: 0.875rem;       /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;          /* font-medium */
    transition: all 0.2s;      /* transition-all duration-200 */
    color: hsl(var(--muted-foreground));
}

.nav-link:hover {
    color: hsl(var(--foreground));
    background-color: hsl(var(--secondary) / 0.5);
}

.nav-link.active {
    color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.1);
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* Dropdown: relative group */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;             /* gap-1 */
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    transition: all 0.15s;
}

.nav-dropdown-btn:hover {
    color: hsl(var(--foreground));
    background-color: hsl(var(--secondary) / 0.5);
}

.nav-dropdown-btn svg {
    width: 1rem;               /* w-4 */
    height: 1rem;              /* h-4 */
    transition: transform 0.3s;
}

.nav-dropdown:hover .nav-dropdown-btn svg {
    transform: rotate(180deg);
}

/* Dropdown menu: absolute top-full right-0 pt-2 */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    transform: translateY(0.25rem);
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* glass-strong rounded-xl shadow-2xl py-2 min-w-[240px] */
.nav-dropdown-content {
    border-radius: 0.75rem;    /* rounded-xl */
    box-shadow: 0 25px 50px -12px hsl(var(--background) / 0.8);  /* shadow-2xl */
    padding: 0.5rem 0;         /* py-2 */
    min-width: 240px;
}

/* block px-4 py-2.5 text-sm */
.nav-dropdown-link {
    display: block;
    padding: 0.625rem 1rem;   /* py-2.5 px-4 */
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s, background-color 0.15s;
}

.nav-dropdown-link:hover {
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--foreground));
}

.nav-dropdown-link.active {
    color: hsl(var(--primary));
    font-weight: 500;
}

/* Mobile hamburger: lg:hidden p-2 */
.hamburger-btn {
    display: block;            /* visible on mobile */
    padding: 0.5rem;
    color: hsl(var(--foreground));
    transition: color 0.15s;
}

.hamburger-btn:hover {
    color: hsl(var(--primary));
}

.hamburger-btn svg {
    width: 1.5rem;             /* w-6 */
    height: 1.5rem;            /* h-6 */
}

/* Prawa strona nagłówka: szybkie akcje + hamburger */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Telefon i trasa w nagłówku — dopóki nie widać dolnego paska CTA */
.header-quick-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    max-width: 6rem;
    transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
}

.header-quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
    border: 1px solid hsl(var(--primary) / 0.2);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.header-quick-action:hover {
    background: hsl(var(--primary) / 0.18);
    border-color: hsl(var(--primary) / 0.45);
}

.header-quick-action:active {
    transform: scale(0.94);
}

/* Dolny pasek przejął rolę — ikony chowają się, hamburger wraca na krawędź */
body.cta-bar-visible .header-quick-actions {
    max-width: 0;
    opacity: 0;
    margin-left: -0.25rem;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .header-quick-actions {
        display: none;        /* desktop ma pełne menu i stopkę */
    }
}

/* Mobile menu: lg:hidden overflow-hidden border-t glass */
/* Animated slide-down: React uses height:0→auto, opacity:0→1 */
.mobile-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;   /* drops below the header */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top: 1px solid hsl(var(--border) / 0.5);
    transition: max-height 0.3s ease-out, opacity 0.25s ease-out;
    background: hsl(var(--background) / 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mobile-menu.open {
    max-height: 600px;  /* large enough to fit all items */
    opacity: 1;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;             /* gap-1 */
    padding: 1rem;            /* py-4 px-4 */
}

/* Mobile nav link: px-3 py-3 rounded-lg text-base font-medium */
.mobile-nav-link {
    padding: 0.75rem;         /* py-3 px-3 */
    border-radius: 0.5rem;
    font-size: 1rem;           /* text-base */
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s, background-color 0.15s;
}

.mobile-nav-link:hover {
    color: hsl(var(--foreground));
    background-color: hsl(var(--secondary) / 0.3);
}

.mobile-nav-link.active {
    color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.1);
}

/* Mobile dropdown button: flex items-center justify-between w-full */
.mobile-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    transition: background-color 0.15s;
}

.mobile-dropdown-btn:hover {
    background-color: hsl(var(--secondary) / 0.3);
}

.mobile-dropdown-btn svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s;
}

.mobile-dropdown-btn.open svg {
    transform: rotate(180deg);
}

/* Mobile dropdown content: pl-4 */
.mobile-dropdown-content {
    padding-left: 1rem;
    display: none;
}

.mobile-dropdown-content.open {
    display: block;
}

/* block px-3 py-2.5 text-sm */
.mobile-dropdown-link {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s;
}

.mobile-dropdown-link:hover {
    color: hsl(var(--primary));
}

/* ============================================================
   FOOTER (z Footer.tsx)
   ============================================================ */

.site-footer {
    position: relative;
    margin-top: auto;
    overflow: hidden;
}

/* Gradient top border: h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent */
.footer-top-border {
    height: 1px;
    background: linear-gradient(to right, transparent, hsl(var(--primary) / 0.5), transparent);
}

.footer-inner {
    padding: 3.5rem 0;  /* py-14 */
    position: relative;
    z-index: 10;
}

.footer-inner .container {
    position: relative;
    z-index: 10;
}

/* CTA Banner: mb-14 rounded-2xl bg-gradient-to-br from-primary/15 via-primary/5 to-accent/10 border border-primary/20 p-8 */
.footer-cta {
    margin-bottom: 3.5rem;     /* mb-14 */
    border-radius: 1rem;       /* rounded-2xl */
    background: linear-gradient(to bottom right,
        hsl(var(--primary) / 0.15),
        hsl(var(--primary) / 0.05),
        hsl(var(--accent) / 0.1)
    );
    border: 1px solid hsl(var(--primary) / 0.2);
    padding: 2rem;             /* p-8 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;               /* gap-6 */
}

.footer-cta-title {
    font-size: 1.5rem;         /* text-2xl */
    line-height: 2rem;
    font-weight: 700;          /* font-bold */
    color: hsl(var(--foreground));
}

.footer-cta-sub {
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;       /* mt-1 */
}

.footer-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;              /* gap-3 */
}

/* Primary CTA button: inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3 rounded-xl font-semibold */
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-cta-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
    box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.2);
}

/* Outlined CTA button: border border-primary/30 text-primary px-6 py-3 rounded-xl font-semibold */
.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid hsl(var(--primary) / 0.3);
    color: hsl(var(--primary));
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-cta-outline:hover {
    background-color: hsl(var(--primary) / 0.1);
}

/* Footer grid: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;                 /* gap-8 */
}

/* Footer brand logo: h-8 w-auto mb-4 */
.footer-logo {
    height: 2rem;
    width: auto;
    margin-bottom: 1rem;
}

/* Footer brand text: text-muted-foreground text-sm leading-relaxed */
.footer-brand-text {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.625;        /* leading-relaxed */
}

/* Station heading: font-semibold text-foreground mb-3 flex items-center gap-2 */
.footer-station-heading {
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-station-heading .dot {
    width: 0.5rem;             /* w-2 */
    height: 0.5rem;            /* h-2 */
    border-radius: 9999px;     /* rounded-full */
}

.footer-station-heading .dot-primary {
    background-color: hsl(var(--primary));
}

.footer-station-heading .dot-accent {
    background-color: hsl(var(--accent));
}

/* space-y-2 text-sm text-muted-foreground */
.footer-station-info {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.footer-station-info > * + * {
    margin-top: 0.5rem;        /* space-y-2 */
}

.footer-station-info a {
    display: flex;
    align-items: center;
    gap: 0.5rem;               /* gap-2 */
    transition: color 0.15s;
}

.footer-station-info a:hover {
    color: hsl(var(--primary));
}

.footer-station-info svg {
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.footer-hours {
    padding-top: 0.25rem;      /* pt-1 */
    color: hsl(var(--foreground) / 0.7);
}

/* Navigation heading: font-semibold text-foreground mb-3 */
.footer-nav-heading {
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}

.footer-nav-links {
    font-size: 0.875rem;
}

.footer-nav-links > * + * {
    margin-top: 0.5rem;        /* space-y-2 */
}

.footer-nav-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;              /* gap-1 */
    color: hsl(var(--muted-foreground));
    transition: all 0.15s;
}

.footer-nav-link:hover {
    color: hsl(var(--primary));
    gap: 0.5rem;               /* hover:gap-2 */
}

.footer-nav-link svg {
    width: 0.75rem;            /* w-3 */
    height: 0.75rem;           /* h-3 */
}

.footer-xcarwash {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: hsl(var(--primary));
    font-weight: 500;
    margin-top: 0.75rem;       /* mt-3 */
    transition: color 0.15s;
}

.footer-xcarwash:hover {
    color: hsl(var(--primary) / 0.8);
}

/* Footer bottom: border-t border-border/50 mt-12 pt-6 text-center text-xs text-muted-foreground */
.footer-bottom {
    border-top: 1px solid hsl(var(--border) / 0.5);
    margin-top: 3rem;          /* mt-12 */
    padding-top: 1.5rem;       /* pt-6 */
    text-align: center;
    font-size: 0.75rem;        /* text-xs */
    color: hsl(var(--muted-foreground));
}

/* ============================================================
   PAGE HERO (z PageHero.tsx)
   ============================================================ */

/* py-28 lg:py-40 overflow-hidden clip-diagonal relative */
.page-hero {
    position: relative;
    padding: 3.5rem 0 4.5rem; /* mobile — py-28 zjadało pół ekranu */
    overflow: hidden;
}

/* Mniejszy odstęp = mniejsze cięcie, inaczej dekoracja wchodzi na podtytuł */
.page-hero.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 0 100%);
}

.page-hero-checkered {
    bottom: 32px;
}

@media (min-width: 768px) {
    .page-hero {
        padding: 7rem 0;      /* py-28 */
    }
    .page-hero.clip-diagonal {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
    }
    .page-hero-checkered {
        bottom: 60px;
    }
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0.6)
    );
}

.page-hero-speed-lines {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    opacity: 0.6;
}

.page-hero-speed-lines > div {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(-55deg, transparent, transparent 12px, hsl(48 100% 50% / 0.05) 12px, hsl(48 100% 50% / 0.05) 14px);
}

.page-hero-glow {
    position: absolute;
    top: -5rem;
    left: -5rem;
    width: 24rem;
    height: 24rem;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.08);
    filter: blur(120px);
    pointer-events: none;
}

/* Checkered strip at bottom: absolute bottom-[60px] */
.page-hero-checkered {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0.4;
}

.page-hero .container {
    position: relative;
    z-index: 10;
}

/* text-4xl md:text-5xl lg:text-6xl font-black tracking-tight */
.page-hero-title {
    font-size: 2.25rem;        /* text-4xl */
    line-height: 2.5rem;
    font-weight: 900;          /* font-black */
    letter-spacing: -0.025em;  /* tracking-tight */
}

/* w-20 h-1 bg-primary rounded-full mt-4 */
.page-hero-bar {
    width: 5rem;
    height: 0.25rem;
    background-color: hsl(var(--primary));
    border-radius: 9999px;
    margin-top: 1rem;
}

/* mt-4 text-lg lg:text-xl text-muted-foreground max-w-2xl */
.page-hero-subtitle {
    margin-top: 1rem;
    font-size: 1.125rem;       /* text-lg */
    line-height: 1.75rem;
    color: hsl(var(--muted-foreground));
    max-width: 42rem;          /* max-w-2xl */
}

/* ============================================================
   GLOW EFFECT (z GlowEffect.tsx)
   ============================================================ */

.glow-effect {
    position: absolute;
    border-radius: 9999px;
    filter: blur(120px);
    pointer-events: none;
}

.glow-effect-primary { background: hsl(var(--primary) / 0.08); }
.glow-effect-accent { background: hsl(var(--accent) / 0.08); }

.glow-effect-sm { width: 16rem; height: 16rem; }             /* w-64 h-64 */
.glow-effect-md { width: 24rem; height: 24rem; }             /* w-96 h-96 */
.glow-effect-lg { width: 500px; height: 500px; }

.glow-effect-left { left: -8rem; top: 50%; transform: translateY(-50%); }
.glow-effect-right { right: -8rem; top: 50%; transform: translateY(-50%); }
.glow-effect-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ============================================================
   COMMON ELEMENTS
   ============================================================ */

/* Badge: inline-flex items-center gap-1.5 bg-primary/15 text-primary text-xs font-semibold px-3 py-1.5 rounded-full border border-primary/20 */
.badge-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: hsl(var(--primary) / 0.15);
    color: hsl(var(--primary));
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--primary) / 0.2);
}

/* Section heading bar: w-16 h-1 bg-primary rounded-full mt-4 mx-auto */
.heading-bar {
    width: 4rem;
    height: 0.25rem;
    background-color: hsl(var(--primary));
    border-radius: 9999px;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
}

/* Icon box: w-N h-N rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center border border-primary/20 */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--primary) / 0.2);
    background: linear-gradient(to bottom right, hsl(var(--primary) / 0.2), hsl(var(--primary) / 0.05));
}

.icon-box-accent {
    border-color: hsl(var(--accent) / 0.2);
    background: linear-gradient(to bottom right, hsl(var(--accent) / 0.2), hsl(var(--accent) / 0.05));
}

/* Icon mini-box (w-8 h-8 used in footer-station icons): w-8 h-8 rounded-lg bg-secondary/50 */
.icon-minibox {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: hsl(var(--secondary) / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Lightbox overlay */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: hsl(var(--background) / 0.95);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* iOS GPU layer isolation — prevent fixed element glitch */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* iOS touch behavior */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.lightbox-overlay.hidden {
    display: none;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    color: hsl(var(--foreground));
    transition: color 0.15s;
    border-radius: 9999px;
    z-index: 101;
    /* iOS GPU layer fix for fixed-positioned child */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.lightbox-close:hover {
    color: hsl(var(--primary));
}

.lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh; /* iOS dynamic viewport fix */
    border-radius: 1rem;
    object-fit: contain;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Popular badge: centered on mobile, right-aligned on md+ */
.popular-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 768px) {
    .popular-badge {
        left: auto;
        transform: none;
        right: 1.5rem;
    }
}

/* Hero slider arrows: hidden on mobile, visible on md+ */
.hero-arrow-prev,
.hero-arrow-next {
    display: none !important;
}

@media (min-width: 768px) {
    .hero-arrow-prev,
    .hero-arrow-next {
        display: flex !important;
    }
}

/* ============================================================
   RESPONSIVE (z Header.tsx — breakpoints z tailwind.config.ts)
   sm: 640px, md: 768px, lg: 1024px
   ============================================================ */

/* sm: hidden sm:inline for email text */
.sm-only {
    display: none;
}

@media (min-width: 640px) {
    .sm-only {
        display: table-cell;
    }
}

/* md: tablet adjustments */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero-title {
        font-size: 3rem;       /* md:text-5xl */
        line-height: 1;
    }
}

/* lg: desktop nav visible, hamburger hidden */
@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
    }

    .hamburger-btn {
        display: none;
    }

    .mobile-menu {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden;
        pointer-events: none;
    }

    .site-header .container {
        height: 5rem;          /* lg:h-20 */
    }

    .site-header .logo-img {
        height: 2.5rem;        /* lg:h-10 */
    }

    .footer-cta {
        flex-direction: row;
        padding: 2.5rem;       /* lg:p-10 */
    }

    .footer-inner {
        padding: 5rem 0;       /* lg:py-20 */
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;             /* lg:gap-12 */
    }

    .page-hero {
        padding: 10rem 0;      /* lg:py-40 */
    }

    .page-hero-title {
        font-size: 3.75rem;   /* lg:text-6xl */
        line-height: 1;
    }

    .page-hero-subtitle {
        font-size: 1.25rem;   /* lg:text-xl */
        line-height: 1.75rem;
    }
}

/* ============================================================
   HOME PAGE (z Index.tsx)
   ============================================================ */

/* Hero title: text-4xl md:text-5xl lg:text-7xl font-black tracking-tight leading-[1.1] */
.hero-title {
    font-size: 2.25rem;        /* text-4xl */
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.025em;
}

/* Hero CTA primary: group inline-flex items-center gap-2 bg-primary text-primary-foreground px-7 py-3.5 rounded-xl font-bold */
.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 0.875rem 1.75rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: all 0.15s;
}
.hero-cta-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
    box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.2);
    gap: 0.75rem;
}

/* Hero CTA secondary: inline-flex items-center gap-2 glass text-foreground px-7 py-3.5 rounded-xl font-bold */
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--foreground));
    padding: 0.875rem 1.75rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: all 0.15s;
}
.hero-cta-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

/* Hero arrows glass style */
.hero-arrow-prev, .hero-arrow-next {
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-arrow-prev:hover, .hero-arrow-next:hover {
    color: hsl(var(--primary));
    border-color: hsl(var(--primary) / 0.3);
    opacity: 1 !important;
}

/* --- Hero section (refactored from inline) --- */
#hero-slider {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: opacity 1s;
}

.hero-overlay-lr {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.6), rgba(0,0,0,0.1));
}

.hero-overlay-bt {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent, transparent);
}

.hero-speed-lines {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 100%;
    opacity: 0.5;
    pointer-events: none;
    background: repeating-linear-gradient(-55deg, transparent, transparent 14px, hsl(48 100% 50% / 0.04) 14px, hsl(48 100% 50% / 0.04) 16px);
}

.hero-glow {
    position: absolute;
    top: 5rem;
    right: 5rem;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.05);
    filter: blur(100px);
}

.hero-content {
    position: relative;
    z-index: 10;
    padding-top: 5rem;
    padding-bottom: 7rem;
}

.hero-slide-content {
    max-width: 42rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: hsl(var(--primary) / 0.1);
    border: 1px solid hsl(var(--primary) / 0.2);
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

/* Plakietka jest klikalna — otwiera wybór stacji do wyznaczenia trasy.
   Dzięki temu hero nie potrzebuje trzeciego przycisku. */
.hero-badge-action {
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.hero-badge-action:hover {
    background: hsl(var(--primary) / 0.18);
    border-color: hsl(var(--primary) / 0.45);
}

.hero-badge-action:active {
    transform: scale(0.97);
}

.hero-badge-chevron {
    opacity: 0.7;
    transition: transform 0.15s;
}

.hero-badge-action:hover .hero-badge-chevron {
    transform: translateX(2px);
    opacity: 1;
}

.hero-title span[style] { /* fallback — foreground span */
    color: hsl(var(--foreground));
}

.hero-bar {
    width: 5rem;
    height: 0.25rem;
    background: hsl(var(--primary));
    border-radius: 9999px;
    margin-top: 1.5rem;
}

.hero-desc {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.625;
    max-width: 36rem;
}

.hero-buttons {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-arrow-prev {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--foreground));
    opacity: 0.6;
    transition: all 0.15s;
}

.hero-arrow-next {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--foreground));
    opacity: 0.6;
    transition: all 0.15s;
}

.hero-dots {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 0.625rem;
}

.hero-dot {
    height: 0.5rem;
    border-radius: 9999px;
    transition: all 0.5s;
}

/* --- Reusable section utilities --- */
.section-padding {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.section-padding-sm {
    padding: 3rem 0;
    position: relative;
}

/* Sekcja zaraz pod nagłówkiem podstrony — na telefonie bez zbędnej przerwy */
.page-hero + .section-padding-sm {
    padding-top: 1.75rem;
}

@media (min-width: 768px) {
    .page-hero + .section-padding-sm {
        padding-top: 3rem;
    }
}

.section-z {
    position: relative;
    z-index: 10;
}

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 900;
}

/* --- Checkered strip utility --- */
.checkered-divider {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.checkered-strip-faded {
    opacity: 0.2;
    border-radius: 9999px;
}

/* --- Card component (shared: home-card, service-card, location-card) --- */
.card-link {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.5s;
}

.card-img-area {
    aspect-ratio: 4/3;
    background: linear-gradient(to bottom right, hsl(var(--secondary) / 0.5), hsl(var(--secondary) / 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.card-img-area--wide {
    aspect-ratio: 16/9;
    position: relative;
}

.card-img-area--wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-img-area img {
    max-height: 100%;
    object-fit: contain;
}

.card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2), transparent);
}

.card-icon-float {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
}

.card-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: hsl(var(--primary) / 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--primary) / 0.3);
}

.card-icon-box svg {
    color: hsl(var(--primary));
}

.card-body {
    padding: 1.5rem;
}

.card-body--sm {
    padding: 1.25rem;
}

.card-title {
    font-weight: 700;
    color: hsl(var(--foreground));
    transition: color 0.15s;
}

.card-title--lg {
    font-size: 1.125rem;
}

.card-subtitle {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
}

/* --- Why us card --- */
.why-card {
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.5s;
    text-align: center;
}

.why-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}

.why-card-desc {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.625;
}

.icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    margin: 0 auto 1.25rem;
    transition: transform 0.3s;
}

/* --- Location card (shared) --- */
.loc-card {
    display: block;
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
}

.loc-glow {
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    filter: blur(80px);
    transition: transform 0.7s;
}

.loc-glow--primary {
    background: hsl(var(--primary) / 0.1);
}

.loc-glow--accent {
    background: hsl(var(--accent) / 0.1);
}

.loc-inner {
    position: relative;
    z-index: 10;
}

.loc-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
    transition: color 0.15s;
    line-height: 1.4;
}
.loc-name-address {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--primary));
}

.loc-info {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.loc-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.loc-row:last-child {
    margin-bottom: 0;
}

.loc-cta-row {
    margin-top: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.loc-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--primary));
    font-weight: 600;
    font-size: 0.875rem;
    transition: gap 0.15s;
}

.loc-route-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border) / 0.4);
    background: hsl(var(--secondary) / 0.3);
    transition: all 0.2s;
}
.loc-route-btn:hover {
    color: hsl(var(--primary));
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--primary) / 0.1);
}

/* Stats section: relative -mt-16 z-20 */
.stats-section {
    position: relative;
    margin-top: -4rem;         /* -mt-16 */
    z-index: 20;
}

/* Stats grid: grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;              /* gap-3 */
}

/* glass-strong rounded-xl p-5 lg:p-6 text-center hover:border-primary/30 transition-all group */
.stat-card {
    border-radius: 0.75rem;    /* rounded-xl */
    padding: 1.25rem;          /* p-5 */
    text-align: center;
    transition: all 0.15s;
}

.stat-card:hover {
    border-color: hsl(var(--primary) / 0.3);
}

/* w-6 h-6 text-primary mx-auto mb-2 group-hover:scale-110 transition-transform */
.stat-icon {
    width: 1.5rem;             /* w-6 */
    height: 1.5rem;            /* h-6 */
    color: hsl(var(--primary));
    margin: 0 auto 0.5rem;     /* mx-auto mb-2 */
}

.stat-card:hover .stat-icon {
    transform: scale(1.1);     /* group-hover:scale-110 */
}

/* text-2xl lg:text-3xl font-black text-foreground */
.stat-value {
    font-size: 1.5rem;         /* text-2xl */
    line-height: 2rem;
    font-weight: 900;          /* font-black */
    color: hsl(var(--foreground));
}

/* text-xs lg:text-sm text-muted-foreground mt-1 */
.stat-label {
    font-size: 0.75rem;        /* text-xs */
    line-height: 1rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;       /* mt-1 */
}

/* Three cards grid: grid-cols-1 md:grid-cols-3 gap-5 */
.three-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Services grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Why us grid: grid-cols-1 md:grid-cols-3 gap-5 */
.why-us-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* O nas key points grid: grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 */
.onas-keypoints-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;                 /* gap-8 */
}

/* text-xl lg:text-2xl font-bold italic max-w-2xl mx-auto */
.onas-quote {
    font-size: 1.25rem;        /* text-xl */
    line-height: 1.75rem;
    font-weight: 700;          /* font-bold */
    font-style: italic;
    max-width: 42rem;          /* max-w-2xl */
    margin: 0 auto;
}

/* O nas values grid: grid-cols-2 lg:grid-cols-4 gap-4 */
.onas-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* grid-cols-2 */
    gap: 1rem;                              /* gap-4 */
}

/* Locations grid: grid-cols-1 md:grid-cols-2 gap-6 */
.locations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Hover effects for home cards */
.home-card:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: 0 20px 25px -5px hsl(var(--primary) / 0.05); }
.home-card:hover h3 { color: hsl(var(--primary)); }
.service-card:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: 0 20px 25px -5px hsl(var(--primary) / 0.05); }
.service-card:hover h3 { color: hsl(var(--primary)); }
.location-card:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: 0 20px 25px -5px hsl(var(--primary) / 0.05); }
.location-card:hover h3 { color: hsl(var(--primary)); }
.location-card:hover > div:first-child { transform: scale(1.5); }

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

@media (min-width: 768px) {
    .hero-title { font-size: 3rem; }
    .three-cards-grid { grid-template-columns: repeat(3, 1fr); }
    .why-us-grid { grid-template-columns: repeat(3, 1fr); }
    .locations-grid { grid-template-columns: repeat(2, 1fr); }
    .onas-keypoints-grid { grid-template-columns: repeat(2, 1fr); }  /* md:grid-cols-2 */
}

@media (min-width: 1024px) {
    .hero-title { font-size: 4.5rem; }  /* lg:text-7xl */
    .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }  /* lg:grid-cols-4 gap-4 */
    .stat-card { padding: 1.5rem; }                                    /* lg:p-6 */
    .stat-value { font-size: 1.875rem; line-height: 2.25rem; }         /* lg:text-3xl */
    .stat-label { font-size: 0.875rem; line-height: 1.25rem; }         /* lg:text-sm */
    .services-grid { grid-template-columns: repeat(4, 1fr); }
    .home-cards-section { padding: 5rem 0; }  /* lg:py-20 */
    #hero-slider { min-height: 82vh; }  /* lg:min-h-[82vh] */
    .onas-keypoints-grid { gap: 3rem; }  /* lg:gap-12 */
    .onas-quote { font-size: 1.5rem; line-height: 2rem; }  /* lg:text-2xl */
    .onas-values-grid { grid-template-columns: repeat(4, 1fr); }  /* lg:grid-cols-4 */
}

/* ============================================================
   GALLERY (z Galeria.tsx)
   ============================================================ */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 0.75rem;
}

.gallery-item {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    border: 1px solid hsl(var(--border) / 0.3);
    transition: all 0.15s;
    padding: 0;
}

.gallery-item:hover { border-color: hsl(var(--primary) / 0.3); }

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.gallery-item:hover img { transform: scale(1.1); }

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, hsl(var(--background) / 0.8), hsl(var(--background) / 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-zoom-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--primary) / 0.3);
}

/* Masonry span classes */
.col-span-2 { grid-column: span 2; }
.row-span-2 { grid-row: span 2; }

/* Key points grid responsive */
@media (min-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .promocje-steps-grid { grid-template-columns: repeat(3, 1fr); }
    .gifts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 200px;
        gap: 1rem;
    }
}

/* ============================================================
   OFERTA / CENNIK PAGES
   ============================================================ */

/* --- Price table component (reusable) --- */
.price-table-wrap {
    border-radius: 1rem;
    overflow: hidden;
}

.price-table-scroll {
    overflow-x: auto;
}

.price-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.price-table thead tr {
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--secondary) / 0.2);
}

.price-table th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.price-table th.text-right {
    text-align: right;
}

.price-table tbody tr {
    border-bottom: 1px solid hsl(var(--border) / 0.3);
    transition: background 0.15s;
}

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

.price-table tbody tr:hover {
    background: hsl(var(--secondary) / 0.1);
}

.price-table td {
    padding: 1rem 1.25rem;
    color: hsl(var(--foreground));
}

.price-table td.text-muted {
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
}

.price-table td.text-right {
    text-align: right;
}

.price-value {
    font-weight: 700;
    color: hsl(var(--primary));
    white-space: nowrap;
    font-size: 1rem;
}

.price-note {
    display: block;
    font-size: 0.75rem;
    color: hsl(var(--primary));
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Cennik section heading */
.cennik-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 1.25rem;
}

.cennik-heading-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Cennik highlight card */
.cennik-highlight {
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
}

@media (min-width: 768px) {
    .cennik-highlight {
        padding: 2rem;
        margin-bottom: 2.5rem;
    }
}

.cennik-highlight-label {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.5rem;
}

.cennik-highlight-price {
    font-size: 2.25rem;
    font-weight: 900;
}

@media (min-width: 768px) {
    .cennik-highlight-price {
        font-size: 3rem;
    }
}

.cennik-highlight-price span {
    font-size: 1.5rem;
}

/* Popular badge pill */
.popular-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);
    white-space: nowrap;
}

/* Cennik tab buttons container */
.cennik-tabs {
    display: grid;                   /* mobile: wszystkie zakładki widoczne naraz */
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* Ostatnia (nieparzysta) zakładka na całą szerokość */
.cennik-tabs > .cennik-tab-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .cennik-tabs {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }
}

/* Cennik table cells: vertically center text in all columns */
[data-tab-panel] table td,
[data-tab-panel] table th {
    vertical-align: middle;
}

/* Opis column: match React text-xs line-height so it doesn't appear shifted up */
[data-tab-panel] table td.sm-only {
    line-height: 1.5rem;
}

/* Cennik tab button */
.cennik-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    font-weight: 500;
    text-align: left;
    transition: all 0.15s;
}

/* Ikona nie może się ścisnąć przy zawijanym podpisie */
.cennik-tab-btn svg {
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .cennik-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
}

/* Service bento grid */
.service-bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 3.5rem;
}

/* Pricing cards grid */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Oferta 2-col grid */
.oferta-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

/* Oferta lights+klima grid */
.oferta-lights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .oferta-lights-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Promocje: "Jak to działa" steps grid — grid-cols-1 md:grid-cols-3 */
.promo-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Promocje: gifts grid — grid-cols-1 sm:grid-cols-2 */
.promo-gifts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

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

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

@media (min-width: 1024px) {
    .service-bento { grid-template-columns: repeat(3, 1fr); }
    .oferta-two-col { grid-template-columns: repeat(2, 1fr); }
}

/* Station detail page: lg:grid-cols-3 (1 sidebar + 2 main) */
.station-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Station price cells: prevent wrapping */
.station-detail-grid table td:last-child {
    white-space: nowrap;
}

/* Mobile CTA: fixed bottom button — lg:hidden */
.station-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 50;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: 0 25px 50px -12px hsl(var(--primary) / 0.3);
    text-decoration: none;
}

@media (min-width: 1024px) {
    .station-detail-grid {
        grid-template-columns: 1fr 2fr;
    }
    .station-mobile-cta {
        display: none;
    }
}

/* ============================================================
   OFERTA PAGE COMPONENTS (refactored from inline)
   ============================================================ */

/* Bento service cards */
.bento-card {
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.15s;
}

.bento-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    transition: transform 0.3s;
}

.bento-title {
    font-weight: 700;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

/* Oferta panels (glass card with content) */
.oferta-panel {
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.15s;
}

.oferta-panel--premium {
    border-color: hsl(var(--primary) / 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
}

.oferta-panel-heading {
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}

/* Check list (used in oferta, station pages) */
.check-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.check-list--compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.check-item--highlight {
    color: hsl(var(--foreground));
    font-weight: 500;
}

.check-icon {
    color: hsl(var(--primary));
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.check-icon--accent {
    color: hsl(var(--accent));
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.icon-accent {
    color: hsl(var(--accent));
}

/* Numbered list (geometry symptoms) */
.numbered-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.numbered-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.numbered-circle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
    border: 1px solid hsl(var(--primary) / 0.2);
}

.numbered-circle span {
    color: hsl(var(--primary));
    font-size: 0.75rem;
    font-weight: 700;
}

/* Pricing cards */
.pricing-card-heading {
    font-weight: 700;
    color: hsl(var(--primary));
    font-size: 1.125rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-amount {
    font-size: 1.875rem;
    font-weight: 900;
    color: hsl(var(--foreground));
    margin-bottom: 1.25rem;
}

.pricing-currency {
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    font-weight: 400;
}

.pricing-recommend-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Oferta typography */
.oferta-intro-heading {
    font-size: 1.5rem;
    font-weight: 700;
}

.oferta-intro-desc {
    margin-top: 1rem;
    color: hsl(var(--muted-foreground));
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625;
}

.oferta-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.oferta-body-text {
    color: hsl(var(--muted-foreground));
    line-height: 1.625;
}

.oferta-body-text--mt {
    margin-top: 0.75rem;
}

.oferta-body-text--sm {
    font-size: 0.875rem;
}

.oferta-body-text--semi {
    font-weight: 600;
}

/* Oferta images */
.oferta-img-frame {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.5);
    box-shadow: 0 20px 25px -5px hsl(var(--background) / 0.5);
}

.oferta-img {
    width: 100%;
    object-fit: cover;
}

.oferta-logo-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.oferta-partner-logo {
    height: 3rem;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* Oferta feature cards (światła/klima) */
.oferta-feature-card {
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.oferta-feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.oferta-feature-img {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.5);
}

.oferta-feature-placeholder {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--secondary) / 0.3);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    color: hsl(var(--muted-foreground) / 0.3);
}

/* ============================================================
   SECTION UTILITIES (shared across pages)
   ============================================================ */
.section-padding {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.section-padding-sm {
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.section-z {
    position: relative;
    z-index: 10;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 900;
}

/* ============================================================
   PROMOCJE PAGE
   ============================================================ */
.promo-highlight-card {
    border-radius: 1rem;
    background: linear-gradient(to bottom right, hsl(var(--primary) / 0.2), hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.1));
    border: 1px solid hsl(var(--primary) / 0.3);
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 3.5rem;
}

.promo-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
}

.promo-glow--tr {
    top: -2.5rem;
    right: -2.5rem;
    width: 10rem;
    height: 10rem;
    background: hsl(var(--primary) / 0.1);
}

.promo-glow--bl {
    bottom: -2.5rem;
    left: -2.5rem;
    width: 8rem;
    height: 8rem;
    background: hsl(var(--accent) / 0.1);
}

.promo-highlight-inner {
    position: relative;
    z-index: 10;
}

.promo-highlight-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: hsl(var(--primary) / 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    border: 1px solid hsl(var(--primary) / 0.3);
}

.promo-highlight-text {
    font-size: 1.125rem;
    color: hsl(var(--foreground));
    line-height: 1.625;
    max-width: 42rem;
    margin: 0 auto;
}

.promo-highlight-amount {
    font-size: 1.5rem;
}

/* Bony image frame */
.promo-bony-frame {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--secondary) / 0.2);
    padding: 1.5rem;
    margin-bottom: 3.5rem;
}

.promo-bony-img {
    width: 100%;
    object-fit: contain;
    max-height: 16rem;
    margin: 0 auto;
    display: block;
}

.promo-section-mb {
    margin-bottom: 3.5rem;
}

.promo-steps-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    text-align: center;
    margin-bottom: 2rem;
}

/* Promo step cards */
.promo-step-card {
    border-radius: 1rem;
    padding: 1.75rem;
    text-align: center;
    position: relative;
    transition: all 0.15s;
}

.promo-step-number {
    position: absolute;
    top: -0.75rem;
    left: -0.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-step-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    margin: 0 auto 1rem;
    transition: transform 0.3s;
}

.promo-step-title {
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}

.promo-step-desc {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Promo gift items */
.promo-gift-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    transition: all 0.15s;
}

.promo-gift-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: hsl(var(--primary) / 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid hsl(var(--primary) / 0.2);
    transition: transform 0.3s;
}

.promo-gift-label {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

/* ============================================================
   O NAS PAGE
   ============================================================ */
.onas-banner-section {
    position: relative;
    overflow: hidden;
}

.onas-banner-wrap {
    position: relative;
    height: 50vh;
}

.onas-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onas-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, black, rgba(0,0,0,0.7), transparent);
}

.onas-banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
}

.onas-banner-heading {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    font-weight: 900;
    margin-bottom: 0.75rem;
    color: hsl(var(--foreground));
}

.onas-banner-desc {
    color: hsl(var(--foreground) / 0.8);
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    max-width: 42rem;
    line-height: 1.625;
}

/* Keypoint cards */
.onas-keypoint-card {
    border-radius: 1rem;
    padding: 2rem;
}

.onas-keypoint-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}

.onas-quote-wrap {
    margin-top: 3rem;
    text-align: center;
}

/* Value cards */
.onas-value-card {
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
}

.onas-value-checkered {
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    opacity: 0.2;
    background: repeating-conic-gradient(hsl(48 100% 50%) 0% 25%, transparent 0% 50%) 0 0/8px 8px;
}

.onas-value-title {
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}

.onas-invite {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-top: 3rem;
}

/* ============================================================
   STATION DETAIL PAGES (11-listopada, kwiatkowskiego)
   ============================================================ */

/* Station hero section */
.station-hero {
    position: relative;
    padding: 5rem 0 7rem;
    overflow: hidden;
}

.station-hero-map-wrap {
    position: absolute;
    inset: 0;
}

.station-hero-map-wrap iframe {
    border: 0;
    filter: brightness(0.3) saturate(0.5);
}

.station-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, hsl(var(--background) / 0.8), hsl(var(--background) / 0.6), hsl(var(--background)));
}

.station-hero-glow {
    position: absolute;
    top: -5rem;
    left: -5rem;
    width: 24rem;
    height: 24rem;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.1);
    filter: blur(120px);
    pointer-events: none;
}

.station-hero-title {
    font-size: clamp(1.1rem, 3.5vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

@media (max-width: 480px) {
    .station-hero-title {
        font-size: 1.15rem;
        line-height: 1.35;
    }
}

.station-hero-bar {
    width: 5rem;
    height: 0.25rem;
    background: hsl(var(--primary));
    border-radius: 9999px;
    margin-top: 1rem;
}

.station-hero-subtitle {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
}

/* Station content section */
.station-content-section {
    padding: 3rem 0 5rem;
    position: relative;
    overflow: hidden;
}

/* Station cards */
.station-card {
    border-radius: 1rem;
    padding: 1.5rem;
}

.station-card-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}

.station-card-heading-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Station left column */
.station-left-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Station right column */
.station-right-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Contact info */
.station-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.station-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.station-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s;
}

.station-contact-text {
    color: hsl(var(--muted-foreground));
}

.station-contact-name {
    font-weight: 500;
    color: hsl(var(--foreground));
}

/* Hours table */
.station-hours-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.875rem;
}

.station-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border-bottom: 1px solid hsl(var(--border) / 0.2);
}

.station-hours-row:last-child {
    border-bottom: none;
}

.station-hours-day {
    color: hsl(var(--muted-foreground));
}

.station-hours-badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.125rem 0.625rem;
    border-radius: 0.375rem;
    color: hsl(var(--foreground));
    background: hsl(var(--secondary) / 0.5);
}

.station-hours-badge--closed {
    color: hsl(var(--destructive));
    background: hsl(var(--destructive) / 0.1);
}

/* Service tags */
.station-services-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.station-service-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--secondary) / 0.4);
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border) / 0.3);
}

/* Station map frame */
.station-map-frame {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.5);
    aspect-ratio: 16 / 9;
    box-shadow: 0 25px 50px -12px hsl(var(--background) / 0.5);
}

.station-map-frame iframe {
    border: 0;
}

/* Station route btn */
.station-route-btn {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: all 0.15s;
    font-size: 0.875rem;
}

/* Station price list */
.station-price-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}

.station-price-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.station-price-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.station-price-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
}

/* Station compact price table */
.station-price-table {
    width: 100%;
    font-size: 0.875rem;
}

.station-price-table tbody tr {
    border-bottom: 1px solid hsl(var(--border) / 0.2);
    transition: background 0.15s;
}

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

.station-price-table td {
    padding: 0.875rem 1.25rem;
}

.station-price-table td:first-child {
    color: hsl(var(--muted-foreground));
}

.station-price-table td:last-child {
    text-align: right;
    font-weight: 700;
    color: hsl(var(--primary));
    white-space: nowrap;
}

/* Station price inline note */
.station-price-inline-note {
    font-size: 0.75rem;
    color: hsl(var(--primary));
    margin-left: 0.5rem;
    font-weight: 500;
}

/* ============================================================
   MOBILNY PASEK CTA (sticky dół ekranu) + wybór stacji
   Widoczny tylko < 1024px (jak .station-mobile-cta)
   ============================================================ */

.mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border-top: 1px solid hsl(var(--border) / 0.8);
    transform: translateY(120%);          /* domyślnie schowany */
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Widoczny dopiero gdy hero zniknie z ekranu (klasa z components.js) */
.mobile-cta-bar.visible {
    transform: translateY(0);
}

.mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s;
}

.mobile-cta-btn:active {
    transform: scale(0.97);
}

.mobile-cta-btn svg {
    flex-shrink: 0;
}

.mobile-cta-btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 10px 25px -8px hsl(var(--primary) / 0.5);
}

.mobile-cta-btn-outline {
    background: hsl(var(--secondary) / 0.6);
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--primary) / 0.35);
}

/* Chowanie paska gdy otwarte menu mobilne */
body:has(#mobile-menu.open) .mobile-cta-bar {
    transform: translateY(120%);
}

/* Miejsce na pasek, żeby nie zasłaniał stopki */
.site-layout {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

/* Stary pływający przycisk na stronach stacji — zastąpiony paskiem */
.station-mobile-cta {
    display: none;
}

/* --- Arkusz wyboru stacji (bottom sheet) --- */

.station-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    background: hsl(var(--background) / 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.station-sheet-overlay.open {
    opacity: 1;
}

.station-sheet-overlay.hidden {
    display: none;
}

.station-sheet {
    width: 100%;
    border-radius: 1.25rem 1.25rem 0 0;
    border-bottom: none;
    padding: 0.75rem 1rem 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    touch-action: none;          /* gest w dół = przeciąganie arkusza */
}

/* W trakcie przeciągania arkusz ma iść dokładnie za palcem — bez opóźnienia */
.station-sheet.dragging {
    transition: none;
}

.station-sheet-overlay.open .station-sheet {
    transform: translateY(0);
}

.station-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.75rem;             /* pole dotyku — sama kreska to za mało */
    margin: -0.25rem 0 0.5rem;
    cursor: grab;
    touch-action: none;
}

.station-sheet-handle::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 999px;
    background: hsl(var(--foreground) / 0.25);
    transition: background 0.15s, width 0.15s;
}

.station-sheet-handle:active::before,
.station-sheet.dragging .station-sheet-handle::before {
    background: hsl(var(--primary) / 0.7);
    width: 3rem;
}

.station-sheet.dragging .station-sheet-handle {
    cursor: grabbing;
}

.station-sheet-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsl(var(--primary));
    text-align: center;
    margin-bottom: 0.875rem;
}

.station-sheet-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.station-sheet-option {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    background: hsl(var(--secondary) / 0.55);
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.station-sheet-option:active {
    transform: scale(0.98);
    border-color: hsl(var(--primary) / 0.5);
}

.station-sheet-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.station-sheet-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.station-sheet-option-name {
    font-weight: 700;
    font-size: 0.9375rem;
}

.station-sheet-option-meta {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.station-sheet-option-arrow {
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.station-sheet-cancel {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.8125rem;
    border-radius: 0.75rem;
    background: hsl(var(--muted) / 0.6);
    color: hsl(var(--muted-foreground));
    font-weight: 600;
    font-size: 0.9375rem;
}

@media (min-width: 1024px) {
    .mobile-cta-bar {
        display: none;
    }
    .site-layout {
        padding-bottom: 0;
    }
    /* Na desktopie arkusz działa jak zwykłe okno modalne (z plakietki w hero) */
    .station-sheet-overlay {
        align-items: center;
        justify-content: center;
    }
    .station-sheet {
        max-width: 26rem;
        border-radius: 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 1rem;
        transform: translateY(2rem);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .station-sheet-overlay.open .station-sheet {
        transform: translateY(0);
        opacity: 1;
    }
    .station-sheet-handle {
        display: none;               /* uchwyt ma sens tylko przy dotyku */
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-cta-bar,
    .station-sheet,
    .station-sheet-overlay {
        transition: none;
    }
}