/* =========================================================================
   📦 MODUŁ: src/css/variables.css
   ========================================================================= */

/* Usunięto @import w celu optymalizacji Core Web Vitals (wymóg audytu P1). Zobacz sekcję HEAD w HTML. */

/* Brak lokalnych fontów - korzystamy z zewnętrznych (Google Fonts / Fontshare) */

/* ----------------------------------------- */
/* 1. VARIABLES & TOKENS                     */
/*                                           */
/* Architektura 3-warstwowa (Design System 2.0, Faza 1):     */
/*   WARSTWA 1: PRIMITIVES  - surowe wartosci (kolory, skale) */
/*   WARSTWA 2: SEMANTIC    - aliasy rol (surface/text/accent) */
/*   WARSTWA 3: COMPONENT   - tokeny komponentow (btn/card/form) */
/* Mapowanie 1:1 - zadna wartosc nie zostala zmieniona.       */
/* ----------------------------------------- */

/* ==========================================================
   WARSTWA 1: PRIMITIVES (surowe wartosci)
   ========================================================== */
:root {
    /* Colors — paleta „bepta": grafit (tekst/UI) + bursztyn (akcent). Re-skin 2026-06-08 */
    --color-primary: #2E2F3A;
    --color-primary-light: #3C3D4A;
    --color-primary-dark: #1E1F27;

    /* Akcent marki — WRZOS (Faza 4, decyzja klienta; jak w nazwie obiektu).
       Rodzina przygaszonych fioletow wrzosu: bazowy #8E6C9E, gleboki #6B4E7D.
       CTA = gleboki wrzos + kremowy tekst (kontrast 6.5:1, zweryfikowane
       contrast-checkiem). Bursztyn zostal wylacznie jako drobny akcent
       drugorzedny (gwiazdki ocen: --color-star). */
    --color-heather: #8E6C9E;
    --color-heather-deep: #6B4E7D;
    --color-heather-bloom: #7B5C8D;
    --color-accent: var(--color-heather-deep);
    --color-accent-hover: var(--color-heather-bloom);
    --color-accent-text: #FFF9F1;
    --color-accent-rgb: 107, 78, 125;

    --color-bg-cream: #FFF9F1;
    --color-bg-input: #F5F1EA;
    --color-bg-green: #FFFCF7;
    /* Pastelowy wrzos (dawny bursztynowy tint bordero-badge'owy);
       nazwa historyczna, rola: subtelne obrysy i tinty */
    --color-accent-green: #E5DBEE;
    --color-bg-light-purple: #EFE9F5;

    /* Ciepłe pastele (Faza 4, kotwice briefu) — mocno zlamane biela,
       graja z wrzosem: lawenda #EFE9F5, piasek #F5EBDD, puder #F3E4E1 */
    --color-bg-lavender: #EFE9F5;
    --color-bg-mint: #E9F0E7;
    --color-bg-peach: #F5EBDD;
    --color-bg-slate: #ECEBF2;
    --color-bg-rose: #F3E4E1;

    /* Bardzo wyblakłe wersje (mix z białym) — do gradientu tła strony */
    --color-bg-lavender-faded: #F7F4FB;
    --color-bg-peach-faded: #FBF5EC;
    --color-white: #FFFFFF;
    --color-text-main: #2E2F3A;
    --color-text-body: #525252;
    --color-text-muted: #595961;
    --color-text: var(--color-text-body);
    /* Gwiazdki ocen: ciemniejszy, miodowy bursztyn (>=3.0:1 na bieli) */
    --color-star: #C77414;
    --color-transparent: transparent;
    --color-bg-alt: var(--color-bg-cream);

    /* Grayscale */
    --color-black: #000000;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-300: #D4D4D4;
    --color-gray-500: #737373;
    --color-gray-700: #404040;
    --color-gray-900: #1A1A1A;

    /* Alerts (Faza 4: przyciemnione do progow WCAG na swoich tlach) */
    --color-success: #1E7A46;
    --color-success-bg: #EAF9F0;
    --color-success-border: #D1F4E0;
    --color-warning: #FFB800;
    --color-warning-bg: #FFF9E6;
    --color-warning-border: #FFF2C2;
    --color-error: #C0392B;
    --color-error-bg: #FFF1F0;
    --color-error-border: #FFCCC7;

    /* Opacity */
    --opacity-muted: 0.7;
    --opacity-disabled: 0.5;

    /* Scrollbar (natywna warstwa, FAZA 2) */
    --color-scrollbar-thumb: rgba(46, 47, 58, 0.35);

    /* Typography */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

    --fs-display-lg: clamp(2.5rem, 8vw, 6rem);
    /* 40px - 96px */
    /* Skala display o stalym ratio 1.333 (Faza 4): 96 / 72 / 54 px */
    --fs-display-md: clamp(2.25rem, 6vw, 4.5rem);
    /* 36px - 72px */
    --fs-display-sm: clamp(2rem, 5vw, 3.375rem);
    /* 32px - 54px */

    /* Headings */
    --fs-h1: clamp(2rem, 4vw, 2.5rem);
    /* 32px - 40px */
    --fs-h2: clamp(1.75rem, 3.5vw, 2.25rem);
    /* 28px - 36px */
    --fs-h3: clamp(1.5rem, 3vw, 2rem);
    /* 24px - 32px */
    --fs-h4: clamp(1.25rem, 2.5vw, 1.75rem);
    /* 20px - 28px */
    --fs-h5: clamp(1.125rem, 2vw, 1.5rem);
    /* 18px - 24px */
    --fs-h6: clamp(1rem, 1.5vw, 1.25rem);
    /* 16px - 20px */

    /* Body & UI */
    --fs-body: 1.0625rem;
    /* 17px */
    --fs-body-small: var(--fs-small);
    --fs-body-large: 1.25rem;
    --fs-btn: 1rem;
    /* 16px */
    --fs-small: 0.875rem;
    /* 14px */
    --fs-caption: 0.75rem;
    /* 12px */
    --fs-label: 0.6875rem;
    /* 11px */
    --fs-tiny: 0.625rem;
    /* 10px */
    --fs-ui: 0.8125rem;
    /* 13px */

    /* Subpage / Lightbox Font Sizes (hero podstron = display-sm; jeden
       stopien hero na wszystkich podstronach - Faza 4) */
    --fs-hero-text-h1: var(--fs-display-sm);
    --fs-subpage-lead: clamp(var(--space-sm), 1.5vw, 1.125rem);
    --fs-xl: 1.5rem;
    --fs-lightbox-caption: 0.95rem;
    --fs-lightbox-desc: 0.8rem;
    --fs-badge-icon: 1.125rem;

    /* Catering / Component Font Sizes */
    --fs-catering-hero: var(--fs-display-sm);
    --fs-catering-mobile-h1: 2.15rem;
    --fs-catering-mobile-subtitle: 1.1rem;

    /* Logistics / Misc Component Font Sizes */
    --fs-logistics-lead: clamp(0.95rem, 1.1vw, 1.05rem);
    --fs-logistics-title: clamp(1rem, 1.2vw, 1.1rem);
    --fs-icon-md: 1.25rem;
    --fs-lg: 1.1rem;
    --fs-emoji-lg: 2.2rem;
    --fs-emoji-xl: 2.5rem;
    --fs-premium-quote: clamp(1.25rem, 2.5vw, 1.875rem);
    --fs-menu-item-name: clamp(14px, 1.25vw, 16px);
    --fs-menu-item-desc: clamp(12px, 1vw, 13px);
    --fs-menu-item-price: clamp(12px, 1.1vw, 13.5px);
    --fs-list-item: 14.5px;

    /* Map / Tooltip Font Sizes */
    --fs-map-logo: 26px;
    --fs-11: 11px;
    --fs-9: 9px;

    /* Events Font Sizes */
    --fs-events-desc: clamp(0.95rem, 1.1vw, 1.1rem);
    --fs-tab-icon: 1.2rem;

    /* Business Premium Font Sizes */
    --fs-premium-hero-title: var(--fs-display-sm);
    --fs-stats-value: clamp(1.75rem, 4vw, 3rem);
    --fs-2xl: 2rem;
    --fs-premium-testimonial-quote: clamp(1.35rem, 3.5vw, 2.15rem);
    --fs-contact-value: clamp(1.25rem, 2vw, 1.5rem);

    /* Letter Spacing */
    --ls-wide: 0.1em;
    --ls-wider: 0.08em;
    --ls-widest: 0.12em;

    /* Letter Spacing Absolute (decorative / UI labels) */
    --ls-px-half: 0.5px;
    --ls-px-1: 1px;
    --ls-px-1-5: 1.5px;
    --ls-px-2: 2px;

    /* Font Weights */
    --fw-regular: 400;
    --fw-normal: var(--fw-regular);
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing */
    --space-none: 0;
    --space-3xs: 0.125rem;
    /* 2px */
    --space-xxs: 0.25rem;
    /* 4px */
    --space-xs: 0.5rem;
    /* 8px */
    --space-sm-minus: 0.75rem;
    /* 12px */
    --space-sm: 1rem;
    /* 16px */
    --space-md: 1.5rem;
    /* 24px */
    --space-ml: 2rem;
    /* 32px */
    --space-lg: 2.5rem;
    /* 40px */
    --space-xl: 5rem;
    /* 80px */
    --space-xxl: 7.5rem;
    /* 120px */

    /* Specific Component Spacing (Strictly Token Based) */
    --padding-btn: 0.75rem 2rem;
    --padding-input: var(--space-xs) var(--space-sm);
    --padding-badge: 0.375rem 0.875rem;
    --gap-btn: var(--space-xs);
    --space-10: 0.625rem;
    /* 10px */
    --space-14: 0.875rem;
    /* 14px */
    --space-18: 1.125rem;
    /* 18px */
    --space-20: 1.25rem;
    /* 20px */
    --space-px-2: 2px;
    --space-px-3: 3px;
    --space-px-6: 6px;

    /* Shapes & Borders */
    --radius-2xs: 0.5px;
    --radius-xs: 4px;
    --radius-badge: 10px;
    --radius-sm: 8px;
    --radius-card: 12px;
    --radius-md: 16px;
    --radius-ml: 32px;
    --radius-lg: 48px;
    --radius-xl: 60px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    --border-thin: 1px;
    --border-base: 1.5px;
    --border-thick: 2px;
    --border-2-5: 2.5px;
    --border-3: 3px;
    --border-xl: 4px;
    --border-heavy: 6px;

    /* Border Styles & Directions */
    --border-style-solid: solid;
    --border-style-dashed: dashed;

    /* Border Colors */
    --border-color-subtle: rgba(46, 47, 58, 0.05);
    --border-color-default: rgba(46, 47, 58, 0.08);
    --border-color-medium: rgba(46, 47, 58, 0.1);
    --border-color-hover: rgba(46, 47, 58, 0.55); /* Faza 4: >=3.0:1 na bieli (WCAG 1.4.11) */
    --border-color-active: var(--color-primary);
    --border-color-glass: rgba(255, 255, 255, 0.15);
    --border-color-testimonial: rgba(255, 255, 255, 0.08);
    --border-color-summary-dashed: rgba(46, 47, 58, 0.15);
    --border-color-mobile-divider: rgba(46, 47, 58, 0.04);
    --border-color-lavender: rgba(245, 240, 250, 0.12);
    --border-color-dark-06: rgba(46, 47, 58, 0.06);

    /* Gotowe kompozycje obramowan przeniesione do WARSTWY 2 (SEMANTIC) ponizej */

    /* Component Sizes */
    --size-btn-height: 44px;
    --size-theme-toggle: 40px;
    --size-icon-box: 34px;
    --size-icon-svg: 18px;
    --size-textarea-min: 120px;
    --size-form-max-w: 800px;
    --size-checkbox-icon: 14px;
    --size-checkbox-lg: 20px;
    --size-checkbox-dot: 5px;
    --size-checkbox-input: 17px;
    --size-checkmark-h: 9px;
    --size-checkmark-h-sm: 10px;
    --translate-px-neg-1: -1px;
    --size-radio-dot: 10px;
    --size-toggle-w: 52px;
    --size-toggle-h: 32px;
    --size-toggle-knob: 28px;
    --size-range-thumb-lg: 24px;
    --size-range-thumb-sm: 16px;
    --size-range-bubble-offset: -34px;
    --size-avatar-md: 3rem;
    /* 48px */
    --size-avatar-lg: 6rem;
    /* 96px */
    --size-icon-nav: 2rem;
    /* 32px */
    --size-icon-nav-sm: 1.75rem;
    /* 28px */

    /* Subpage / Lightbox Layout Sizes */
    --size-hero-img-h: 500px;
    --size-feature-img-h: 400px;
    --size-blog-card-img-h: 250px;
    --size-masonry-col: 320px;
    --size-lightbox-cursor: 56px;
    --blur-xs: 4px;

    /* Logistics / Glass / Cart Component Sizes */
    --size-accordion-max-h: 500px;
    --size-infra-image-h: 520px;
    --size-glass-card-max-w: 300px;
    --size-avatar-sm: 4rem;
    /* 64px */
    --size-price-min-w: 75px;
    --blur-glass: 20px;
    --translate-hover-up: -4px;
    --translate-px-neg-2: -2px;

    /* Events Layout Sizes */
    --size-float-card-max-w: 320px;
    --size-float-card-img-h: 240px;
    --perspective-card: 1200px;
    --blur-md: 16px;
    --translate-px-neg-10: -10px;
    --border-color-black-05: rgba(0, 0, 0, 0.05);

    /* Business Premium Layout Sizes */
    --size-hero-img-max-w: 480px;
    --size-hero-premium-max-w: 900px;
    --size-panoramic-max-w: 780px;
    --size-panoramic-mobile-min-h: 360px;
    --size-floating-media-mobile-min-h: 380px;
    --size-accordion-expanded-max-h: 600px;
    --size-contact-card-min-h: 190px;
    --size-contact-icon: 42px;

    /* Regional Map Sizes */
    --size-map-h: 400px;
    --size-ring-10km: 120px;
    --size-ring-20km: 220px;
    --size-ring-30km: 320px;
    --size-ring-40km: 420px;
    --size-regional-list-col-min: 140px;

    /* Regional Map Backgrounds */
    --bg-map-dots: radial-gradient(rgba(46, 47, 58, 0.05) 1.5px, transparent 1.5px), radial-gradient(rgba(46, 47, 58, 0.02) 2px, transparent 2px);
    --bg-map-dots-size: 30px 30px, 90px 90px;
    --bg-map-dots-position: 0 0, 15px 15px;

    /* Catering Configurator Component Sizes */
    --size-menu-item-price-col: 100px;
    --size-qty-selector-active-h: 40px;
    --size-qty-selector-mobile-h: 56px;
    --size-menu-img: 120px;
    --size-qty-input-mobile-w: 40px;
    --size-sustainability-img-min-h: 480px;
    --size-sustainability-subgrid-img-h: 220px;

    /* Catering Component Sizes */
    --size-hero-catering-min-h: 540px;
    --size-chef-rec-max-w: 360px;
    --size-plate-wrapper: 350px;
    --size-plate-wrapper-sm: 320px;
    --size-plate: 290px;
    --size-plate-sm: 250px;
    --size-floating-tomato: 55px;
    --size-floating-leaf-1: 45px;
    --size-floating-leaf-2: 50px;
    --size-floating-tomato-sm: 48px;
    --size-floating-leaf-1-sm: 38px;
    --size-floating-leaf-2-sm: 42px;
    --size-carousel-max-w: 380px;
    --size-carousel-body-min-h: 110px;
    --size-widget-max-w: 540px;
    --size-widget-translate-initial: 150px;

    /* ZERO CIENI (Faza 4, twarda decyzja klienta): tokeny cieni USUNIETE.
       Glebia = ton powierzchni (page/card/elevated) + obrysy --border-*.
       Tekst na zdjeciach lezy na scrimach gradientowych (ponizej). */

    /* Scrimy na zdjeciach (stopy zdefiniowane jako tokeny koloru,
       weryfikowane w macierzy contrast-check: bialy tekst >=4.5:1) */
    --color-scrim-strong: rgba(30, 31, 39, 0.68);
    --color-scrim-heavy: rgba(30, 31, 39, 0.82);
    --color-scrim-soft: rgba(30, 31, 39, 0.42);
    --color-scrim-faint: rgba(30, 31, 39, 0.12);
    --scrim-hero: linear-gradient(to top, var(--color-scrim-heavy) 0%, var(--color-scrim-soft) 45%, var(--color-transparent) 80%);
    --scrim-stats: linear-gradient(to bottom, var(--color-scrim-strong) 0%, var(--color-scrim-faint) 48%, var(--color-scrim-soft) 100%);

    /* Fotografia (Faza 4): jednolity delikatny grade - cieply krem
       w swietlach, przygaszone nasycenie; wspolne promienie zdjec */
    --img-grade: saturate(0.94) sepia(0.06);
    --radius-img: var(--radius-md);
    --radius-img-lg: var(--radius-ml);

    /* Presentation Specific */
    --size-ds-color-box: 120px;
    --size-ds-spacing-bar: 20px;

    /* Layout */
    --container-max: 1400px;
    --container-narrow: 1200px;

    /* Footer Dark Theme Tokens (Faza 4: akcent stopki na wrzos) */
    --color-footer-bg: #2E2F3A;
    --color-footer-bg-rgb: 46, 47, 58;
    --color-footer-text: #F4F4F4;
    --color-footer-accent: #C9B3D8;
    --color-footer-gradient-start: #D3BEE0;
    --color-footer-gradient-end: #A9ACE0;
    --color-footer-border: rgba(244, 244, 244, 0.12);
    --color-footer-glow: rgba(183, 156, 199, 0.30);

    /* Menu Widget Tokens */
    --color-menu-widget-bg-start: #23242D;
    --color-menu-widget-bg-end: #2E2F3A;
    --color-widget-glow: rgba(22, 4, 42, 0.22);

    /* RGB do przezroczystości (Design System) */
    --color-primary-rgb: 46, 47, 58;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;
    --color-success-rgb: 30, 122, 70;
    --color-bg-input-rgb: 245, 241, 234;
    --color-accent-green-rgb: 229, 219, 238;

    /* Tokeny przezroczystości dla Primary (czysty fiolet) */
    --color-primary-opacity-05: rgba(46, 47, 58, 0.005);
    --color-primary-opacity-1:  rgba(46, 47, 58, 0.01);
    --color-primary-opacity-2:  rgba(46, 47, 58, 0.02);
    --color-primary-opacity-3:  rgba(46, 47, 58, 0.03);
    --color-primary-opacity-5:  rgba(46, 47, 58, 0.05);
    --color-primary-opacity-6:  rgba(46, 47, 58, 0.06);
    --color-primary-opacity-8:  rgba(46, 47, 58, 0.08);
    --color-primary-opacity-10: rgba(46, 47, 58, 0.1);
    --color-primary-opacity-12: rgba(46, 47, 58, 0.12);
    --color-primary-opacity-15: rgba(46, 47, 58, 0.15);
    --color-primary-opacity-25: rgba(46, 47, 58, 0.25);
    --color-primary-opacity-35: rgba(46, 47, 58, 0.35);
    --color-primary-opacity-40: rgba(46, 47, 58, 0.4);
    --color-primary-opacity-50: rgba(46, 47, 58, 0.5);
    --color-primary-opacity-80: rgba(46, 47, 58, 0.8);

    /* Tokeny przezroczystości dla White */
    --color-white-opacity-5:  rgba(255, 255, 255, 0.05);
    --color-white-opacity-8:  rgba(255, 255, 255, 0.08);
    --color-white-opacity-10: rgba(255, 255, 255, 0.1);
    --color-white-opacity-15: rgba(255, 255, 255, 0.15);
    --color-white-opacity-18: rgba(255, 255, 255, 0.18);
    --color-white-opacity-25: rgba(255, 255, 255, 0.25);
    --color-white-opacity-40: rgba(255, 255, 255, 0.4);
    --color-white-opacity-45: rgba(255, 255, 255, 0.45);
    --color-white-opacity-60: rgba(255, 255, 255, 0.6);
    --color-white-opacity-65: rgba(255, 255, 255, 0.65);
    --color-white-opacity-70: rgba(255, 255, 255, 0.7);
    --color-white-opacity-75: rgba(255, 255, 255, 0.75);
    --color-white-opacity-80: rgba(255, 255, 255, 0.8);
    --color-white-opacity-82: rgba(255, 255, 255, 0.82);
    --color-white-opacity-85: rgba(255, 255, 255, 0.85);
    --color-white-opacity-90: rgba(255, 255, 255, 0.9);

    /* Tokeny przezroczystości dla Black */
    --color-black-opacity-1:  rgba(0, 0, 0, 0.01);
    --color-black-opacity-05: rgba(0, 0, 0, 0.005);
    --color-black-opacity-3:  rgba(0, 0, 0, 0.03);
    --color-black-opacity-4:  rgba(0, 0, 0, 0.04);
    --color-black-opacity-5:  rgba(0, 0, 0, 0.05);
    --color-black-opacity-8:  rgba(0, 0, 0, 0.08);
    --color-black-opacity-10: rgba(0, 0, 0, 0.1);
    --color-black-opacity-12: rgba(0, 0, 0, 0.12);
    --color-black-opacity-15: rgba(0, 0, 0, 0.15);
    --color-black-opacity-20: rgba(0, 0, 0, 0.2);
    --color-black-opacity-25: rgba(0, 0, 0, 0.25);
    --color-black-opacity-30: rgba(0, 0, 0, 0.3);
    --color-black-opacity-40: rgba(0, 0, 0, 0.4);
    --color-black-opacity-50: rgba(0, 0, 0, 0.5);
    --color-black-opacity-55: rgba(0, 0, 0, 0.55);
    --color-black-opacity-92: rgba(0, 0, 0, 0.92);

    /* Specyficzne Półprzezroczyste Tokeny */
    --color-success-opacity-20:       rgba(30, 122, 70, 0.2);
    --color-accent-green-opacity-20:  rgba(229, 219, 238, 0.2);
    --color-bg-input-opacity-50:      rgba(245, 241, 234, 0.5);

    /* Ciemny fiolet (tło prezentacji / stopek) */
    --color-dark-purple-opacity-85:   rgba(30, 31, 39, 0.85);
    --color-dark-purple-opacity-90:   rgba(30, 31, 39, 0.9);
    --color-dark-purple-opacity-70:   rgba(30, 31, 39, 0.7);

    /* FAZA 3 - dopełnienie palety (tokenizacja surowych wartości; wartości zachowane 1:1) */
    --color-white-opacity-6:  rgba(255, 255, 255, 0.06);
    --color-white-opacity-20: rgba(255, 255, 255, 0.2);
    --color-error-opacity-5:  rgba(220, 53, 69, 0.05);
    --color-sage-opacity-20:  rgba(200, 217, 188, 0.2);
    --color-lavender-opacity-85: rgba(245, 240, 250, 0.85);
    --color-lavender-opacity-50: rgba(240, 232, 248, 0.5);
    /* Legacy deep-purple (#1F083D) - overlay ciemnych sekcji; KANDYDAT do scalenia z paletą bepta (decyzja projektowa) */
    --color-deep-purple-opacity-65: rgba(31, 8, 61, 0.65);
    --color-deep-purple-opacity-50: rgba(31, 8, 61, 0.5);
    /* Ciemne tła/gradienty sekcji (overlay) */
    --color-overlay-indigo: #180d47;
    --color-overlay-teal:   #002620;
    --color-overlay-rust:   #4a1505;
    --color-overlay-ink:    #12181c;
    --color-overlay-plum:   #420726;
    --color-bg-lavender-soft: #f5f0fa;

    /* Opinie */
    --fs-xs: 0.75rem;
    --fs-xl-plus: 1.75rem;
    --fs-opinie-total: clamp(2rem, 5vw, 3.5rem);

    /* Footer */
    --size-footer-map-h: 400px;
    --size-footer-logo-lg: 128px;
    --size-footer-logo-sm: 112px;
    --size-social-icon: 20px;
    --fs-social-label: 10px;

    /* Responsive index */
    --size-min-h-banner: 180px;

    /* Navigation */
    --size-nav-dropdown-min-w: 220px;
    --size-nav-triangle: 12px;
    --translate-nav-neg-12: -12px;
    --space-px-4: 4px;

    /* Story */
    --gap-eyebrow: 0.4em;
    --fs-eyebrow-icon: 0.6em;
    --size-story-img-h: 200px;

    /* Mobile Menu */
    --size-mobile-overlay-max-w: 768px;
    --size-nav-item-min-h: 3rem;
    --size-gallery-marquee-lg-h: 700px;

    /* Cards */
    --size-icon-circle-sm: 28px;
    --size-dot: 10px;
    --size-blog-img-h: 240px;
    --ls-medium: 0.05em;

    /* Footer CapCut */
    --size-footer-deco-circle: 600px;
    --size-footer-arrow: clamp(56px, 8vw, 88px);
    --fs-footer-arrow-icon: clamp(var(--space-md), 3vw, 2.25rem);
    --fs-footer-phone: clamp(1.75rem, 3vw, var(--space-lg));
    --ls-narrow: 0.02em;

    /* Utilities module */
    --size-util-col-200: 200px;
    --size-util-col-300: 300px;
    --size-util-form-max-w: 600px;
    --fs-hero-title-mobile: clamp(var(--space-ml), 7vw, 2.75rem);

    /* Parallax USP Module */
    --size-parallax-min-h: 600px;
    --size-parallax-box-max-w: 560px;
    --fs-parallax-stat: clamp(var(--space-lg), 5vw, 3.25rem);
    --ls-tight: -0.01em;
    --ls-tighter: -0.02em;
    --translate-px-neg-6: -6px;

    /* Token techniczny */
    --space-technical-pixel: 1px;

    /* Sitemap */
    --size-sitemap-col: 210px;
    --radius-sitemap-card: 14px;
    --fs-sitemap-heading: 1.35rem;

    /* Gallery Marquee */
    --size-gallery-marquee-h: 500px;

    /* Utilities Helpers */
    --blur-sm: 12px;
    --underline-offset-xs: 0.2em;

    /* Transitions */
    --transition-base: 0.25s ease;
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Motion & Timings (Uber Base Web/Material) - przeniesione z animations.css (Faza 1) */
    --ease-decelerate: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-decelerate: 500ms;

    --ease-accelerate: cubic-bezier(0.64, 0, 0.78, 0);
    --duration-accelerate: 400ms;

    --ease-responsive: cubic-bezier(0.11, 0, 0.5, 0);
    --duration-responsive: 200ms;

    --ease-linear: cubic-bezier(0, 0, 1, 1);
    --duration-linear: 200ms;

    --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
    --duration-in-out: 500ms;

    /* Keyword ease (historyczne przejscia "all 200ms ease") */
    --ease-standard: ease;

    /* Active / Press States */
    --scale-active: 0.95;
    --duration-snap: 50ms;

    /* Composite Animations (keyframes zdefiniowane w animations.css) */
    --animation-float-plate: floatPlate 8s var(--ease-in-out) infinite;
    --animation-float-tomato: floatTomato 7s var(--ease-in-out) infinite;
    --animation-float-leaf-1: floatLeaf1 6s var(--ease-in-out) infinite;
    --animation-float-leaf-2: floatLeaf2 8s var(--ease-in-out) infinite;
    --animation-marquee: scroll-marquee 40s var(--ease-linear) infinite;
    --animation-pulse: cc-pulse 2s var(--ease-in-out) infinite;
    --animation-spin: spin 1s var(--ease-linear) infinite;
    --animation-spin-slow: spin 15s var(--ease-linear) infinite;
    --animation-fade-in-x: fadeInX 0.3s var(--ease-linear) forwards;
    --animation-fade-in-y: fadeInY var(--duration-decelerate) var(--ease-decelerate) forwards;
    --animation-carousel-fade-in: carouselFadeIn 0.4s var(--ease-in-out) forwards;

    /* Line-height scale (Faza 1: 1:1 dla kazdej faktycznie uzywanej wartosci; konsolidacja pozniej) */
    --lh-100: 1;
    --lh-105: 1.05;
    --lh-110: 1.1;
    --lh-115: 1.15;
    --lh-120: 1.2;
    --lh-125: 1.25;
    --lh-130: 1.3;
    --lh-140: 1.4;
    --lh-145: 1.45;
    --lh-150: 1.5;
    --lh-155: 1.55;
    --lh-160: 1.6;
    --lh-170: 1.7;
    --lh-180: 1.8;

    /* Z-index scale (Faza 1: 1:1 dla kazdej faktycznie uzywanej wartosci) */
    --z-0: 0;
    --z-1: 1;
    --z-2: 2;
    --z-3: 3;
    --z-5: 5;
    --z-10: 10;
    --z-15: 15;
    --z-20: 20;
    --z-100: 100;
    /* Warstwy nazwane */
    --z-tabbar: 980;            /* mobilny dolny tabbar (pod nawigacja) */
    --z-nav: 999;               /* sticky header */
    --z-dropdown: 1000;         /* dropdown nawigacji (ten sam plan co modal - rozdzial w pozniejszych fazach) */
    --z-modal: 1000;            /* overlay lightboxa galerii */
    --z-lightbox-content: 1002; /* zdjecie + opis wewnatrz lightboxa */
    --z-lightbox: 1010;         /* kursory zamkniecia/strzalek lightboxa */
    --z-max: 9999;              /* toast, cookie banner, mobile overlay, skip-link */
}

/* ==========================================================
   WARSTWA 2: SEMANTIC (aliasy rol - mapowanie 1:1 na obecne wartosci)
   ========================================================== */
:root {
    /* Powierzchnie */
    --surface-page: var(--color-white);          /* tlo strony (body) */
    --surface-card: var(--color-white);          /* tlo kart */
    --surface-elevated: var(--color-white);      /* dropdowny / elementy plywajace */
    --surface-section: var(--color-bg-cream);    /* pastelowe tla sekcji alt (krem) */

    /* Powierzchnie atramentowe (FAZA 2: chipy/sekcje w kolorze tuszu -
       w dark zostaja ciemne, choc tusz-jako-tekst sie rozjasnia) */
    --surface-ink: var(--color-primary);            /* ciemne sekcje/chipy (cta-banner, skip-link, aktywna paginacja) */
    --surface-ink-hover: var(--color-primary-light);/* hover ciemnych sekcji/chipow */
    --surface-ink-strong: var(--color-primary-dark);/* najciemniejsze tlo (events hero) */

    /* Tekst */
    --text-primary: var(--color-text-main);     /* naglowki, tekst glowny */
    --text-body: var(--color-text-body);        /* tekst akapitow */
    --text-muted: var(--color-text-muted);      /* tekst przygaszony */
    --text-inverse: var(--color-white);         /* tekst na ciemnych powierzchniach */
    --text-on-light: var(--color-primary);      /* tekst tuszem na powierzchniach, ktore ZAWSZE zostaja jasne (btn-white) */

    /* Scrollbar (natywna warstwa) */
    --scrollbar-thumb: var(--color-scrollbar-thumb);

    /* Akcent */
    --accent: var(--color-accent);              /* #FFC46A */
    --accent-hover: var(--color-accent-hover);  /* #F2AE4C */
    --accent-contrast: var(--color-accent-text);/* kolor tekstu na akcencie */

    /* Focus */
    --focus-ring: var(--border-thick) var(--border-style-solid) var(--color-primary);

    /* Obramowania - gotowe kompozycje (przeniesione z warstwy primitives) */
    --border-subtle: var(--border-thin) var(--border-style-solid) var(--border-color-subtle);
    --border-default: var(--border-thin) var(--border-style-solid) var(--border-color-default);
    --border-medium: var(--border-thin) var(--border-style-solid) var(--border-color-medium);
    --border-glass: var(--border-thin) var(--border-style-solid) var(--border-color-glass);
    --border-testimonial: var(--border-thin) var(--border-style-solid) var(--border-color-testimonial);
}

/* ==========================================================
   WARSTWA 3: COMPONENT (tokeny komponentow - tylko tam, gdzie porzadkuja)
   ========================================================== */
:root {
    /* Buttony */
    --btn-bg: var(--accent);
    --btn-text: var(--accent-contrast);
    --btn-bg-hover: var(--accent-hover);
    --btn-radius: var(--radius-pill);

    /* Karty */
    --card-bg: var(--surface-card);
    --card-radius: var(--radius-ml);

    /* Formularze (skonsolidowana baza .form-control / .form-label) */
    --form-label-color: var(--color-primary);
    --form-control-bg: var(--color-bg-cream);
    --form-control-bg-focus: var(--color-white);
    --form-control-border-color: var(--color-accent-green);
    --form-control-radius: var(--space-sm-minus); /* 12px - historycznie promien z tokenu spacingu */
    --form-control-text: var(--color-text-body);
}

@media (max-width: 767px) {
    :root {
        --space-xl: 3.5rem;
        /* 56px */
        --space-xxl: 5rem;
        /* 80px */
    }
}

/* ==========================================================
   DARK MODE "wieczor na wrzosowisku" (FAZA 2)
   Rampa: page #1D1A24 -> card #262230 -> elevated #2E2938;
   tekst kremowy #F3EDE9; akcent wrzosowy #B79CC7.
   KONTRAKT SELEKTOROW (3 stany, auto = brak atrybutu):
   blok zdefiniowany DWA razy - [data-theme="dark"] ORAZ
   @media (prefers-color-scheme: dark) z :root:not([data-theme="light"]).
   LUSTRO - edytuj OBA bloki (najlepiej generuj raz i wklej dwa razy).
   @media screen => wydruk zawsze jasny.
   ========================================================== */
@media screen {
    :root[data-theme="dark"] {
    /* --- SEMANTIC: powierzchnie i tekst --- */
    --surface-page: #1D1A24;
    --surface-card: #262230;
    --surface-elevated: #2E2938;
    --surface-section: #211E2A;
    --surface-ink: #3A3448;
    --surface-ink-hover: #443D52;
    --surface-ink-strong: #322C3E;
    --text-inverse: #241E2C;
    --text-on-light: #241E2C;
    --scrollbar-thumb: rgba(243, 237, 233, 0.30);

    /* --- PRIMITIVES: tusz jako tekst (rozjasniony krem/wrzos) --- */
    --color-primary: #EFE9F4;
    --color-primary-light: #D6CFDA;
    --color-primary-dark: #F7F2F4;
    --color-primary-rgb: 243, 237, 233;
    --color-text-main: #F3EDE9;
    --color-text-body: #CFC7C2;
    --color-text-muted: #A79FAD;
    --color-white: #F5EFEA;

    /* --- Akcent: wrzos rozjasniony --- */
    --color-accent: #B79CC7;
    --color-accent-hover: #C7B1D6;
    --color-accent-text: #241E2C;
    --color-accent-rgb: 183, 156, 199;

    /* --- Gwiazdki ocen: w dark zostaje jasny bursztyn (kontrast na kartach OK) --- */
    --color-star: #FBBF24;

    /* --- Fotografia w dark: przyciemnienie + lekko obnizony kontrast --- */
    --img-grade: saturate(0.9) sepia(0.05) brightness(0.92) contrast(0.97);

    /* --- Tla sekcji / formularzy / pasteli (przygaszone, fioletowa nuta) --- */
    --color-bg-cream: #211E2A;
    --color-bg-input: #1F1B26;
    --color-bg-input-rgb: 31, 27, 38;
    --color-bg-green: #201D28;
    --color-bg-light-purple: #211E2A;
    --color-accent-green: #3A3345;
    --color-accent-green-rgb: 58, 51, 69;
    --color-bg-lavender: #2E2839;
    --color-bg-mint: #24302A;
    --color-bg-peach: #342A28;
    --color-bg-slate: #272B36;
    --color-bg-rose: #33262E;
    --color-bg-lavender-faded: #221F2C;
    --color-bg-peach-faded: #262028;

    /* --- Grayscale (odwrocona skala) --- */
    --color-gray-50: #24202C;
    --color-gray-100: #282434;
    --color-gray-300: #4A4454;
    --color-gray-500: #9A93A2;
    --color-gray-700: #D8D2DC;
    --color-gray-900: #F1EBED;

    /* --- Alerty / statusy --- */
    --color-error: #FF8A8C;
    --color-error-bg: #3A2326;
    --color-error-border: #5A3136;
    --color-error-opacity-5: rgba(255, 138, 140, 0.08);
    --color-success: #7FD8A3;
    --color-success-bg: #22322A;
    --color-success-border: #35543F;
    --color-success-rgb: 127, 216, 163;
    --color-success-opacity-20: rgba(127, 216, 163, 0.2);
    --color-warning: #FFCE6B;
    --color-warning-bg: #3A3223;
    --color-warning-border: #574A2E;

    /* --- Obramowania: rozjasnienia (rgba kremu o niskiej alfie) --- */
    --border-color-subtle: rgba(243, 237, 233, 0.07);
    --border-color-default: rgba(243, 237, 233, 0.10);
    --border-color-medium: rgba(243, 237, 233, 0.14);
    --border-color-hover: rgba(243, 237, 233, 0.42);
    --border-color-summary-dashed: rgba(243, 237, 233, 0.22);
    --border-color-mobile-divider: rgba(243, 237, 233, 0.06);
    --border-color-dark-06: rgba(243, 237, 233, 0.06);
    --border-color-black-05: rgba(243, 237, 233, 0.05);

    /* --- Tinty primary (subtelne hovery/tla) - jasne alfy na ciemnym --- */
    --color-primary-opacity-05: rgba(243, 237, 233, 0.005);
    --color-primary-opacity-1: rgba(243, 237, 233, 0.01);
    --color-primary-opacity-2: rgba(243, 237, 233, 0.02);
    --color-primary-opacity-3: rgba(243, 237, 233, 0.03);
    --color-primary-opacity-5: rgba(243, 237, 233, 0.05);
    --color-primary-opacity-6: rgba(243, 237, 233, 0.06);
    --color-primary-opacity-8: rgba(243, 237, 233, 0.08);
    --color-primary-opacity-10: rgba(243, 237, 233, 0.1);
    --color-primary-opacity-12: rgba(243, 237, 233, 0.12);
    --color-primary-opacity-15: rgba(243, 237, 233, 0.15);
    /* opacity-25+ zostaja ciemne (scrimy/overlaye na zdjeciach) */

    /* --- Polprzezroczyste tla --- */
    --color-bg-input-opacity-50: rgba(31, 27, 38, 0.5);
    --color-accent-green-opacity-20: rgba(58, 51, 69, 0.2);

    /* --- Stopka / widget menu (zharmonizowane z rampa) --- */
    --color-footer-bg: #26212F;
    --color-footer-bg-rgb: 38, 33, 47;
    --color-footer-text: #F3EDE9;
    --color-footer-accent: #C9B3D8;
    --color-footer-gradient-start: #D3BEE0;
    --color-footer-gradient-end: #A9ACE0;
    --color-footer-glow: rgba(183, 156, 199, 0.30);
    --color-menu-widget-bg-start: #211D2B;
    --color-menu-widget-bg-end: #2A2536;

    /* --- Mapa regionalna (kropki z rozjasnien) --- */
    --bg-map-dots: radial-gradient(rgba(243, 237, 233, 0.07) 1.5px, transparent 1.5px), radial-gradient(rgba(243, 237, 233, 0.04) 2px, transparent 2px);

    /* --- COMPONENT --- */
    --form-control-bg-focus: #2A2536;
    }
}

/* LUSTRO powyzszego bloku - edytuj OBA bloki */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    /* --- SEMANTIC: powierzchnie i tekst --- */
    --surface-page: #1D1A24;
    --surface-card: #262230;
    --surface-elevated: #2E2938;
    --surface-section: #211E2A;
    --surface-ink: #3A3448;
    --surface-ink-hover: #443D52;
    --surface-ink-strong: #322C3E;
    --text-inverse: #241E2C;
    --text-on-light: #241E2C;
    --scrollbar-thumb: rgba(243, 237, 233, 0.30);

    /* --- PRIMITIVES: tusz jako tekst (rozjasniony krem/wrzos) --- */
    --color-primary: #EFE9F4;
    --color-primary-light: #D6CFDA;
    --color-primary-dark: #F7F2F4;
    --color-primary-rgb: 243, 237, 233;
    --color-text-main: #F3EDE9;
    --color-text-body: #CFC7C2;
    --color-text-muted: #A79FAD;
    --color-white: #F5EFEA;

    /* --- Akcent: wrzos rozjasniony --- */
    --color-accent: #B79CC7;
    --color-accent-hover: #C7B1D6;
    --color-accent-text: #241E2C;
    --color-accent-rgb: 183, 156, 199;

    /* --- Gwiazdki ocen: w dark zostaje jasny bursztyn (kontrast na kartach OK) --- */
    --color-star: #FBBF24;

    /* --- Fotografia w dark: przyciemnienie + lekko obnizony kontrast --- */
    --img-grade: saturate(0.9) sepia(0.05) brightness(0.92) contrast(0.97);

    /* --- Tla sekcji / formularzy / pasteli (przygaszone, fioletowa nuta) --- */
    --color-bg-cream: #211E2A;
    --color-bg-input: #1F1B26;
    --color-bg-input-rgb: 31, 27, 38;
    --color-bg-green: #201D28;
    --color-bg-light-purple: #211E2A;
    --color-accent-green: #3A3345;
    --color-accent-green-rgb: 58, 51, 69;
    --color-bg-lavender: #2E2839;
    --color-bg-mint: #24302A;
    --color-bg-peach: #342A28;
    --color-bg-slate: #272B36;
    --color-bg-rose: #33262E;
    --color-bg-lavender-faded: #221F2C;
    --color-bg-peach-faded: #262028;

    /* --- Grayscale (odwrocona skala) --- */
    --color-gray-50: #24202C;
    --color-gray-100: #282434;
    --color-gray-300: #4A4454;
    --color-gray-500: #9A93A2;
    --color-gray-700: #D8D2DC;
    --color-gray-900: #F1EBED;

    /* --- Alerty / statusy --- */
    --color-error: #FF8A8C;
    --color-error-bg: #3A2326;
    --color-error-border: #5A3136;
    --color-error-opacity-5: rgba(255, 138, 140, 0.08);
    --color-success: #7FD8A3;
    --color-success-bg: #22322A;
    --color-success-border: #35543F;
    --color-success-rgb: 127, 216, 163;
    --color-success-opacity-20: rgba(127, 216, 163, 0.2);
    --color-warning: #FFCE6B;
    --color-warning-bg: #3A3223;
    --color-warning-border: #574A2E;

    /* --- Obramowania: rozjasnienia (rgba kremu o niskiej alfie) --- */
    --border-color-subtle: rgba(243, 237, 233, 0.07);
    --border-color-default: rgba(243, 237, 233, 0.10);
    --border-color-medium: rgba(243, 237, 233, 0.14);
    --border-color-hover: rgba(243, 237, 233, 0.42);
    --border-color-summary-dashed: rgba(243, 237, 233, 0.22);
    --border-color-mobile-divider: rgba(243, 237, 233, 0.06);
    --border-color-dark-06: rgba(243, 237, 233, 0.06);
    --border-color-black-05: rgba(243, 237, 233, 0.05);

    /* --- Tinty primary (subtelne hovery/tla) - jasne alfy na ciemnym --- */
    --color-primary-opacity-05: rgba(243, 237, 233, 0.005);
    --color-primary-opacity-1: rgba(243, 237, 233, 0.01);
    --color-primary-opacity-2: rgba(243, 237, 233, 0.02);
    --color-primary-opacity-3: rgba(243, 237, 233, 0.03);
    --color-primary-opacity-5: rgba(243, 237, 233, 0.05);
    --color-primary-opacity-6: rgba(243, 237, 233, 0.06);
    --color-primary-opacity-8: rgba(243, 237, 233, 0.08);
    --color-primary-opacity-10: rgba(243, 237, 233, 0.1);
    --color-primary-opacity-12: rgba(243, 237, 233, 0.12);
    --color-primary-opacity-15: rgba(243, 237, 233, 0.15);
    /* opacity-25+ zostaja ciemne (scrimy/overlaye na zdjeciach) */

    /* --- Polprzezroczyste tla --- */
    --color-bg-input-opacity-50: rgba(31, 27, 38, 0.5);
    --color-accent-green-opacity-20: rgba(58, 51, 69, 0.2);

    /* --- Stopka / widget menu (zharmonizowane z rampa) --- */
    --color-footer-bg: #26212F;
    --color-footer-bg-rgb: 38, 33, 47;
    --color-footer-text: #F3EDE9;
    --color-footer-accent: #C9B3D8;
    --color-footer-gradient-start: #D3BEE0;
    --color-footer-gradient-end: #A9ACE0;
    --color-footer-glow: rgba(183, 156, 199, 0.30);
    --color-menu-widget-bg-start: #211D2B;
    --color-menu-widget-bg-end: #2A2536;

    /* --- Mapa regionalna (kropki z rozjasnien) --- */
    --bg-map-dots: radial-gradient(rgba(243, 237, 233, 0.07) 1.5px, transparent 1.5px), radial-gradient(rgba(243, 237, 233, 0.04) 2px, transparent 2px);

    /* --- COMPONENT --- */
    --form-control-bg-focus: #2A2536;
    }
}


/* =========================================================================
   📦 MODUŁ: src/css/reset.css
   ========================================================================= */

/* ----------------------------------------- */
/* 2. BASE STYLES & RESET                    */
/* ----------------------------------------- */
* {
    margin: var(--space-none);
    padding: var(--space-none);
    box-sizing: border-box;
}

/* --- NATYWNA WARSTWA MOTYWU (FAZA 2) --- */
/* color-scheme steruje natywnym renderowaniem kontrolek/scrollbarow.  */
/* Bloki dark sa LUSTRZANE (patrz kontrakt selektorow w variables.css) */
/* i ograniczone do @media screen - wydruk zawsze jasny.               */
:root {
    color-scheme: light;
}

@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

html {
    /* Natywne kontrolki (checkbox/radio/range/progress) w kolorze akcentu */
    accent-color: var(--accent);
    /* Scrollbar podazajacy za motywem (token flipuje w dark) */
    scrollbar-color: var(--scrollbar-thumb) var(--color-transparent);
}

/* Autofill: bez tego pola formularzy swieca bielą na ciemnym motywie.       */
/* UWAGA: inset box-shadow to JEDYNE dozwolone uzycie box-shadow w serwisie  */
/* - techniczny trick (nie da sie nadpisac tla autofill inaczej).            */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--form-control-bg) inset;
    box-shadow: 0 0 0 1000px var(--form-control-bg) inset;
    -webkit-text-fill-color: var(--form-control-text);
    caret-color: var(--form-control-text);
}

/* Zdjecia w tresci delikatnie przygaszone w dark (logo to maska SVG        */
/* na currentColor, wiec nie jest obejmowane ta regula). LUSTRO x2.         */
@media screen {
    :root[data-theme="dark"] main img {
        filter: brightness(.92);
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) main img {
        filter: brightness(.92);
    }
}

html,
body {
    overflow-x: clip;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--color-text-body);
    background-color: var(--surface-page);
    line-height: var(--lh-160);
}

/* Kontrolki formularza dziedziczą krój (bez tego button/input spadają do domyślnego Arial) */
button,
input,
select,
textarea {
    font-family: inherit;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    color: var(--color-text-main);
    line-height: var(--lh-120);
    font-weight: var(--fw-medium);
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
}

h5 {
    font-size: var(--fs-h5);
}

h6 {
    font-size: var(--fs-h6);
}

/* Display Classes (Uber Base Web Scale) */
.display-lg {
    font-family: var(--font-serif);
    font-size: var(--fs-display-lg);
    line-height: var(--lh-110);
}

.display-md {
    font-family: var(--font-serif);
    font-size: var(--fs-display-md);
    line-height: var(--lh-110);
}

.display-sm {
    font-family: var(--font-serif);
    font-size: var(--fs-display-sm);
    line-height: var(--lh-110);
}

p {
    margin-bottom: var(--space-sm);
}


.bg-white {
    /* Semantycznie: powierzchnia strony (w dark flipuje na rampe, w light = biel 1:1) */
    background-color: var(--surface-page);
}


/* =========================================================================
   📦 MODUŁ: src/css/typography.css
   ========================================================================= */

/* ----------------------------------------- */
/* 3. EXTENDED TYPOGRAPHY                    */
/* ----------------------------------------- */

/*
 * Linki w tekście bieżącym: ten sam kolor co akapit + tylko podkreślenie
 * (bez domyślnego niebieskiego przeglądarki i bez primary na inline linkach).
 * Nie dotyczy .btn, nawigacji, footerów, kart z własnymi klasami.
 */
.text-link,
main p a:not([class]),
main li a:not([class]),
main dd a:not([class]),
main td a:not([class]),
main .faq-answer a:not([class]),
main .accordion-content a:not([class]),
main .story-card a:not([class]),
main .section-content a:not([class]) {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: var(--border-thin);
    text-underline-offset: var(--space-3xs);
    text-decoration-color: currentColor;
    font-weight: inherit;
}

.text-link:hover,
main p a:not([class]):hover,
main li a:not([class]):hover,
main dd a:not([class]):hover,
main td a:not([class]):hover,
main .faq-answer a:not([class]):hover,
main .accordion-content a:not([class]):hover,
main .story-card a:not([class]):hover,
main .section-content a:not([class]):hover {
    color: inherit;
    text-decoration-thickness: var(--border-thick);
    text-decoration-color: currentColor;
}

/* Cytaty emocjonalne (Faza 4): kursywa Playfair + wrzosowa linia akcentu */
blockquote {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-style: italic;
    color: var(--color-primary);
    line-height: var(--lh-140);
    padding-left: var(--space-md);
    border-left: var(--border-3) solid var(--color-accent);
    margin: var(--space-md) var(--space-none);
}

/* Wyroznienie emocjonalne w tekscie (Wielka Idea, zwroty par) */
.text-emotive {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-primary);
}

.custom-list {
    list-style: none;
    padding-left: var(--space-none);
}

.custom-list li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
}

.custom-list li::before {
    content: '•';
    color: var(--color-accent);
    font-size: var(--fs-h3);
    position: absolute;
    left: var(--space-none);
    top: calc(var(--space-xxs) * -1);
}


/* =========================================================================
   📦 MODUŁ: src/css/layout.css
   ========================================================================= */

/* ----------------------------------------- */
/* 4. LAYOUT & GRIDS                         */
/* ----------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: var(--space-none) auto;
    padding: var(--space-none) var(--space-sm-minus);
}

.section {
    padding: var(--space-xl) var(--space-none);
}

.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.grid-2-cols-always {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.grid-3-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.grid-30-70 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.grid-4-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .container {
        padding: var(--space-none) var(--space-md);
    }

    .col-span-2 {
        grid-column: span 2;
    }

    .grid-2-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3-cols {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-30-70 {
        grid-template-columns: 30% 1fr;
    }

    .grid-4-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

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


/* =========================================================================
   📦 MODUŁ: src/css/buttons.css
   ========================================================================= */

/* ----------------------------------------- */
/* 5. COMPONENTS: BUTTONS                    */
/* ----------------------------------------- */

/* No state */
.btn,
.btn-ico {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    height: var(--size-btn-height);
    padding: var(--padding-btn);
    background-color: var(--btn-bg);
    color: var(--btn-text);
    text-decoration: none;
    border-radius: var(--btn-radius);
    font-family: inherit;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-btn);
    letter-spacing: var(--ls-tight);
    border: var(--border-base) solid var(--btn-bg);
    cursor: pointer;
    gap: var(--gap-btn);
    white-space: nowrap;
    outline: none;
    transition: background-color var(--duration-linear) var(--ease-linear), border-color var(--duration-linear) var(--ease-linear), color var(--duration-linear) var(--ease-linear), transform var(--duration-accelerate) var(--ease-accelerate);
}

.btn:hover:not(.btn-outline):not(.btn-ghost):not(:disabled):not(.is-disabled),
.btn-ico:hover:not(.btn-outline):not(.btn-ghost):not(:disabled):not(.is-disabled) {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
}

.btn:active:not(:disabled):not(.is-disabled),
.btn-ico:active:not(:disabled):not(.is-disabled) {
    transform: scale(var(--scale-active));
    transition: transform var(--duration-snap) var(--ease-linear);
}

/* Selected state */
.btn:focus-visible,
.btn-ico:focus-visible,
.btn.is-selected,
.btn-ico.is-selected {
    outline: calc(var(--border-base) * 2) solid var(--color-primary);
    outline-offset: var(--border-base);
}

/* Disabled state */
.btn:disabled,
.btn-ico:disabled,
.btn.is-disabled,
.btn-ico.is-disabled {
    background-color: var(--color-bg-input);
    color: var(--color-text-muted);
    border-color: var(--color-bg-input);
    cursor: not-allowed;
    padding-right: var(--space-sm);
}

.btn:disabled:not(.btn-icon)>i,
.btn-ico:disabled>i,
.btn.is-disabled:not(.btn-icon)>i,
.btn-ico.is-disabled>i {
    display: none;
}

/* Loading state */
.btn.is-loading,
.btn-ico.is-loading {
    cursor: wait;
}

.btn.is-loading>i,
.btn-ico.is-loading>i {
    width: var(--space-md);
    height: var(--space-md);
    background-color: var(--color-transparent);
    border-radius: var(--radius-circle);
    border: var(--border-thick) solid var(--color-bg-cream);
    border-top-color: var(--color-white);
    animation: var(--animation-spin);
    font-size: var(--space-none);
}

/* Secondary (Outline & Ghost) */
.btn-outline,
.btn-ghost {
    background-color: var(--color-transparent);
    color: var(--color-primary);
}

.btn-outline {
    background-color: var(--color-bg-cream);
    border: var(--border-base) solid var(--color-accent-green);
}

.btn-outline:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--color-bg-input);
    color: var(--color-primary);
    border-color: var(--color-accent-green);
}

.btn-ghost {
    border: var(--border-base) solid var(--color-transparent);
}

.btn-ghost:hover {
    border-color: var(--color-primary);
}

/* With icon */
.btn-ico {
    padding-left: var(--space-sm);
    padding-right: var(--space-xxs);
}

.btn-ico>i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-box);
    height: var(--size-icon-box);
    background-color: var(--color-white);
    border-radius: var(--radius-circle);
    color: var(--text-on-light);
    font-size: var(--size-icon-svg);
    flex-shrink: 0;
}

.btn-ghost.btn-ico {
    padding-right: var(--space-sm);
}

.btn-ghost.btn-ico>i {
    background-color: var(--color-transparent);
    width: auto;
    height: auto;
    font-size: var(--space-md);
}

/* Icon only */
.btn-icon {
    width: var(--size-btn-height);
    padding: var(--space-none);
    border-radius: var(--radius-lg);
    justify-content: center;
}

.btn-icon>i {
    font-size: var(--size-icon-svg);
}


/* ----------------------------------------- */
/* ROZKWIT WRZOSU (sygnatura hover CTA, Faza 5)                */
/* Surface bloom robi juz --btn-bg-hover wyzej; tu dochodzi    */
/* cienka linia 2px rysowana scaleX od lewej pod etykieta.     */
/* BEZ cienia i BEZ glow (ZERO CIENI). Na primary (tlo wrzos)  */
/* linia = currentColor (krem), na secondary linia = wrzos.    */
/* Focus ring pozostaje nietkniety (outline wyzej).            */
/* ----------------------------------------- */
.btn,
.btn-ico {
    position: relative;
}

.btn::after,
.btn-ico::after {
    content: "";
    position: absolute;
    left: var(--space-ml);
    right: var(--space-ml);
    bottom: var(--space-px-6);
    height: var(--border-thick);
    border-radius: var(--radius-xs);
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-responsive) var(--ease-decelerate);
    pointer-events: none;
}

/* Etykieta w .btn-ico zaczyna sie blizej krawedzi, a po prawej
   siedzi kolko ikony - linia konczy sie przed nim. */
.btn-ico::after {
    left: var(--space-sm);
    right: calc(var(--size-icon-box) + var(--space-xxs) + var(--gap-btn));
}

/* Secondary: linia w kolorze wrzosu (akcent marki) */
.btn-outline::after,
.btn-ghost::after {
    background-color: var(--accent);
}

/* Rysowanie linii: hover / press (touch) / focus klawiatury */
.btn:hover:not(:disabled):not(.is-disabled)::after,
.btn-ico:hover:not(:disabled):not(.is-disabled)::after,
.btn:active:not(:disabled):not(.is-disabled)::after,
.btn-ico:active:not(:disabled):not(.is-disabled)::after,
.btn:focus-visible::after,
.btn-ico:focus-visible::after {
    transform: scaleX(1);
}

/* Bez podkreslenia: przyciski samo-ikonowe i stany nieaktywne */
.btn-icon::after,
.btn:disabled::after,
.btn-ico:disabled::after,
.btn.is-disabled::after,
.btn-ico.is-disabled::after,
.btn.is-loading::after,
.btn-ico.is-loading::after {
    content: none;
}

/* Quantity Stepper (+ / -) */
.quantity-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background-color: var(--color-transparent);
}

.quantity-stepper .quantity-value {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    min-width: 2ch;
    text-align: center;
}

/* Navigation Arrows */
.nav-arrows {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-btn-height);
    height: var(--size-btn-height);
    border-radius: var(--radius-lg);
    background-color: var(--color-transparent);
    border: var(--border-thin) solid var(--color-text-main);
    color: var(--color-text-main);
    font-size: var(--size-icon-svg);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--duration-linear) var(--ease-linear), color var(--duration-linear) var(--ease-linear), border-color var(--duration-linear) var(--ease-linear), transform var(--duration-accelerate) var(--ease-accelerate);
}

.nav-arrow:hover {
    background-color: var(--surface-ink);
    color: var(--color-white);
}

.nav-arrow:active {
    transform: scale(var(--scale-active));
    transition: transform var(--duration-snap) var(--ease-linear);
}

.nav-arrow:focus-visible {
    outline: var(--border-thick) solid var(--color-text-main);
    outline-offset: var(--space-3xs);
}

.nav-arrow:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    background-color: var(--color-transparent);
    color: var(--color-text-main);
}

/* Pagination */
.pagination-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    padding: var(--space-none);
    margin: var(--space-none);
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-btn-height);
    height: var(--size-btn-height);
    border-radius: var(--radius-lg);
    background-color: var(--color-transparent);
    color: var(--color-text-main);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background-color var(--duration-linear) var(--ease-linear), color var(--duration-linear) var(--ease-linear), transform var(--duration-accelerate) var(--ease-accelerate);
}

.pagination-link:hover {
    background-color: var(--color-bg-input);
}

.pagination-link:active {
    transform: scale(var(--scale-active));
    transition: transform var(--duration-snap) var(--ease-linear);
}

.pagination-link.is-active {
    background-color: var(--surface-ink);
    color: var(--color-white);
    pointer-events: none;
}

.pagination-ellipsis {
    color: var(--color-text-muted);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    padding: var(--space-none) var(--space-xs);
}


/* =========================================================================
   📦 MODUŁ: src/css/cards.css
   ========================================================================= */

/* ----------------------------------------- */
/* 6. COMPONENTS: CARDS                      */
/* ----------------------------------------- */
.card {
    background-color: var(--card-bg);
    padding: var(--space-ml);
    border-radius: var(--card-radius);
}

.card-green {
    background-color: var(--color-bg-green);
}

.card-cream {
    background-color: var(--color-bg-cream);
}

.card-gray {
    background-color: var(--color-bg-input);
}

/* KARTY USŁUG (Pastelowe + Glassmorphism) */
.service-section {
    position: relative;
}

.service-card {
    border-radius: var(--radius-md);
    padding: var(--space-ml);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: 100%;
}

.service-card h3,
.service-card .service-icon-wrapper i,
.service-card p {
    color: var(--card-accent);
}

.service-card--lavender {
    background-color: var(--color-bg-lavender);
    --card-accent: var(--color-overlay-indigo);
}

.service-card--mint {
    background-color: var(--color-bg-mint);
    --card-accent: var(--color-overlay-teal);
}

.service-card--peach {
    background-color: var(--color-bg-peach);
    --card-accent: var(--color-overlay-rust);
}

.service-card--slate {
    background-color: var(--color-bg-slate);
    --card-accent: var(--color-overlay-ink);
}

.service-card--rose {
    background-color: var(--color-bg-rose);
    --card-accent: var(--color-overlay-plum);
}

.service-icon-wrapper {
    width: var(--size-avatar-sm);
    height: var(--size-avatar-sm);
    background-color: var(--surface-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card--lavender .service-icon-wrapper {
    border: var(--border-thin) solid color-mix(in srgb, var(--color-bg-lavender) 40%, var(--color-primary) 20%);
}

.service-card--mint .service-icon-wrapper {
    border: var(--border-thin) solid color-mix(in srgb, var(--color-bg-mint) 40%, var(--color-primary) 20%);
}

.service-card--peach .service-icon-wrapper {
    border: var(--border-thin) solid color-mix(in srgb, var(--color-bg-peach) 40%, var(--color-primary) 20%);
}

.service-card--slate .service-icon-wrapper {
    border: var(--border-thin) solid color-mix(in srgb, var(--color-bg-slate) 40%, var(--color-primary) 20%);
}

.service-card--rose .service-icon-wrapper {
    border: var(--border-thin) solid color-mix(in srgb, var(--color-bg-rose) 40%, var(--color-primary) 20%);
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--card-accent, var(--color-primary));
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
}

.btn-read-more .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-circle-sm);
    height: var(--size-icon-circle-sm);
    background-color: var(--card-accent, var(--color-primary));
    color: var(--color-white);
    border-radius: 50%;
    transition: transform var(--duration-linear) var(--ease-linear);
}

.btn-read-more:hover .icon-circle {
    transform: translate(var(--space-px-2), var(--translate-px-neg-2));
}

@media (max-width: 767px) {
    .service-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        position: relative;
    }

    .service-card .service-icon-wrapper,
    .service-card p {
        display: none;
    }

    .service-card h3 {
        margin-bottom: 0;
    }

    .service-card .btn-read-more {
        font-size: 0;
        gap: 0;
        margin-top: 0;
    }

    .service-card .btn-read-more .icon-circle {
        font-size: var(--fs-btn);
    }

    .service-card .btn-read-more::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: var(--z-1);
    }
}

.blog-meta {
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    margin-bottom: var(--space-xs);
}

.blog-img {
    width: 100%;
    height: var(--size-blog-img-h);
    object-fit: cover;
    border-radius: var(--radius-img);
    filter: var(--img-grade);
    margin-top: auto;
}

.blog-section-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    align-items: flex-end;
}

.review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-card);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-bg-input);
}

/* Reviews Slider */
.reviews-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.reviews-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
}

.reviews-track::-webkit-scrollbar {
    display: none;
}

.reviews-track .review-card {
    flex: 0 0 calc(50% - (var(--space-md) / 2));
    scroll-snap-align: start;
}

.reviews-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

@media (max-width: 1023px) {
    .reviews-track .review-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
}

.dot {
    width: var(--size-dot);
    height: var(--size-dot);
    border-radius: 50%;
    background-color: var(--color-primary);
    opacity: 0.2;
    transition: all 0.3s ease;
}

.dot.is-active {
    opacity: 1;
    transform: scale(1.2);
}

.review-stars {
    display: flex;
    gap: var(--space-3xs);
    color: var(--color-star);
    font-size: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Cytat pary (Faza 4): kursywa Playfair jako akcent emocjonalny */
.review-content {
    flex-grow: 1;
    color: var(--color-text-body);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-body);
    line-height: var(--lh-160);
}

.review-divider {
    border: none;
    border-top: var(--border-thin) solid var(--color-bg-input);
    margin: var(--space-md) var(--space-none);
    opacity: 0.5;
}

.review-author-name {
    font-weight: var(--fw-semibold);
    color: var(--color-text-main);
    font-size: var(--fs-body);
}

.review-author-source {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}


/* =========================================================================
   📦 MODUŁ: src/css/forms.css
   ========================================================================= */

/* ----------------------------------------- */
/* 7. COMPONENTS: FORMS & INPUTS             */
/* ----------------------------------------- */
/* Skonsolidowana definicja bazowa (Faza 1 Design System 2.0).
   Odzwierciedla EFEKTYWNY wynik dawnej potrojnej kaskady
   forms.css -> subpages.css -> catering.css (ostatni wygrywal per-wlasciwosc):
   .form-group/.form-label wg catering.css, .form-control wg subpages.css.
   Wartosci komputowane identyczne jak przed konsolidacja. */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--form-label-color);
    margin-bottom: var(--space-xs);
}

.form-control {
    width: 100%;
    font-family: inherit;
    font-size: var(--fs-body);
    padding: var(--space-sm-minus) var(--space-sm);
    background-color: var(--form-control-bg);
    border: var(--border-thin) solid var(--form-control-border-color);
    border-radius: var(--form-control-radius);
    color: var(--form-control-text);
    outline: none;
    transition: all var(--duration-linear) var(--ease-standard);
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: var(--opacity-muted);
}

.form-control:hover {
    background-color: var(--color-bg-cream);
}

.form-control:focus {
    background-color: var(--form-control-bg-focus);
    border-color: var(--color-primary);
    outline: var(--border-thick) solid var(--color-primary-light);
    outline-offset: var(--space-none);
}

.form-control:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    background-color: var(--color-bg-cream);
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23311934' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: var(--space-sm);
    padding-right: var(--space-lg);
    cursor: pointer;
}

textarea.form-control {
    min-height: var(--size-textarea-min);
    resize: vertical;
}

/* --- Custom Checkbox & Radio --- */
.custom-control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--color-text-body);
    user-select: none;
    margin-bottom: var(--space-sm);
}

.custom-control input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-control input:disabled~.custom-control-indicator,
.custom-control input:disabled~.custom-toggle-indicator {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    background-color: var(--color-bg-cream);
}

.custom-control input:disabled~span:last-child {
    opacity: var(--opacity-disabled);
}

.custom-control-indicator {
    position: relative;
    width: var(--space-md);
    height: var(--space-md);
    background-color: var(--color-bg-input);
    border: var(--border-thick) solid var(--color-transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--duration-linear) var(--ease-linear), border-color var(--duration-linear) var(--ease-linear);
}

.custom-control:hover input~.custom-control-indicator {
    background-color: var(--color-bg-cream);
}

.custom-control input:focus-visible~.custom-control-indicator {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--border-thick);
}

.custom-control input:checked~.custom-control-indicator {
    background-color: var(--surface-ink);
    border-color: var(--color-primary);
}

.custom-checkbox .custom-control-indicator {
    border-radius: var(--radius-xs);
}

.custom-checkbox .custom-control-indicator::after {
    content: '';
    width: var(--size-checkbox-icon);
    height: var(--size-checkbox-icon);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(0);
    transition: transform var(--duration-accelerate) var(--ease-accelerate);
}

.custom-checkbox input:checked~.custom-control-indicator::after {
    transform: scale(1);
    transition: transform var(--duration-decelerate) var(--ease-decelerate);
}

.custom-radio .custom-control-indicator {
    border-radius: var(--radius-circle);
}

.custom-radio .custom-control-indicator::after {
    content: '';
    width: var(--size-radio-dot);
    height: var(--size-radio-dot);
    background-color: var(--color-white);
    border-radius: var(--radius-circle);
    transform: scale(0);
    transition: transform var(--duration-accelerate) var(--ease-accelerate);
}

.custom-radio input:checked~.custom-control-indicator::after {
    transform: scale(1);
    transition: transform var(--duration-decelerate) var(--ease-decelerate);
}

/* --- Custom Toggle (Uber Base Web Style) --- */
.custom-toggle {
    gap: var(--space-sm);
}

.custom-toggle-indicator {
    position: relative;
    width: var(--size-toggle-w);
    height: var(--size-toggle-h);
    background-color: var(--color-bg-input);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    padding: var(--space-3xs);
    flex-shrink: 0;
    transition: background-color var(--duration-linear) var(--ease-linear);
}

.custom-toggle-indicator::after {
    content: '';
    position: absolute;
    left: var(--space-3xs);
    width: var(--size-toggle-knob);
    height: var(--size-toggle-knob);
    background-color: var(--color-white);
    border-radius: var(--radius-circle);
    transform: translateX(0);
    transition: transform var(--duration-in-out) var(--ease-in-out);
}

.custom-control input:checked~.custom-toggle-indicator {
    background-color: var(--surface-ink);
}

.custom-control input:checked~.custom-toggle-indicator::after {
    transform: translateX(calc(var(--size-toggle-w) - var(--size-toggle-knob) - calc(var(--space-3xs) * 2)));
}

.custom-control input:focus-visible~.custom-toggle-indicator {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--space-3xs);
}


.custom-range-wrapper {
    margin-bottom: var(--space-md);
    font-family: var(--font-sans);
    width: 100%;
}

.custom-range-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text-main);
}

.custom-range-values {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.custom-range-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: calc(var(--space-xl) * 0.5);
}

.custom-range-bubble {
    position: absolute;
    top: var(--size-range-bubble-offset);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--surface-ink);
    color: var(--color-white);
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-xs);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.custom-range:active+.custom-range-bubble,
.custom-range:focus+.custom-range-bubble {
    opacity: 1;
    visibility: visible;
}

.custom-range-bubble::after {
    content: '';
    position: absolute;
    bottom: calc(var(--space-xxs) * -1);
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--space-xxs) var(--space-xs) var(--space-none);
    border-style: solid;
    border-color: var(--color-primary) var(--color-transparent) var(--color-transparent) var(--color-transparent);
}

.custom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--border-xl);
    background: var(--color-bg-input);
    border-radius: var(--radius-pill);
    outline: none;
    cursor: pointer;
    margin: var(--space-xs) 0;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--size-range-thumb-lg);
    height: var(--size-range-thumb-lg);
    border-radius: var(--radius-circle);
    background: var(--color-primary);
    cursor: pointer;
    border: var(--border-xl) solid var(--color-white);
}

.custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.custom-range::-moz-range-thumb {
    width: var(--size-range-thumb-sm);
    height: var(--size-range-thumb-sm);
    border-radius: var(--radius-circle);
    background: var(--color-primary);
    cursor: pointer;
    border: var(--border-xl) solid var(--color-white);
}

.custom-range::-moz-range-thumb:hover {
    transform: scale(1.1);
}

.custom-range:focus::-webkit-slider-thumb {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--space-3xs);
}

.custom-range:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.custom-range:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
    background: var(--color-text-muted);
    transform: scale(1);
}



/* =========================================================================
   📦 MODUŁ: src/css/breadcrumbs.css
   ========================================================================= */

/* ----------------------------------------- */
/* 9. COMPONENTS: BREADCRUMBS                */
/* ----------------------------------------- */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
}

.breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumbs-link {
    color: var(--color-text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.breadcrumbs-link:hover {
    color: var(--color-primary);
}

.breadcrumbs-item:last-child .breadcrumbs-link {
    color: var(--color-text-main);
    font-weight: var(--fw-semibold);
    pointer-events: none;
}

.breadcrumbs-separator {
    color: var(--color-text-muted);
    opacity: var(--opacity-muted);
    display: flex;
    align-items: center;
    font-size: var(--fs-small);
}


/* =========================================================================
   📦 MODUŁ: src/css/media.css
   ========================================================================= */

/* ----------------------------------------- */
/* 10. MEDIA & IMAGES                        */
/* ----------------------------------------- */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-rounded {
    border-radius: var(--radius-lg);
}


/* =========================================================================
   📦 MODUŁ: src/css/faq.css
   ========================================================================= */

/* ----------------------------------------- */
/* 8. COMPONENTS: FAQ / ACCORDION            */
/* ----------------------------------------- */

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.faq-header {
    order: 1;
}

.faq-accordion-box {
    order: 2;
}

.faq-contact-box {
    order: 3;
}

@media (min-width: 768px) {
    .faq-grid {
        grid-template-columns: 30% 1fr;
        row-gap: var(--space-md);
        column-gap: var(--space-xl);
    }

    .faq-header {
        grid-column: 1;
        grid-row: 1;
    }

    .faq-contact-box {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }

    .faq-accordion-box {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-item {
    background-color: var(--surface-card);
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-bg-input);
    overflow: hidden;
    transition: border-color var(--duration-linear) var(--ease-linear);
}

.faq-item:hover {
    border-color: var(--color-primary-light);
}

.faq-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-sm-minus) var(--space-md);
    width: 100%;
    cursor: pointer;
    font-size: var(--fs-h6);
    font-weight: var(--fw-medium);
    color: var(--color-text-main);
    user-select: none;
    transition: background-color var(--duration-linear) var(--ease-linear), color var(--duration-linear) var(--ease-linear);
}

.faq-toggle:focus-visible~.faq-question {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: calc(var(--border-thick) * -1);
}

.faq-icon {
    font-size: var(--size-icon-svg);
    color: var(--color-primary);
    transition: transform var(--duration-accelerate) var(--ease-accelerate);
}

.faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-linear) var(--ease-linear);
}

.faq-answer {
    overflow: hidden;
}

.faq-answer p {
    padding: var(--space-sm) var(--space-md) 0 var(--space-md);
    color: var(--color-text-body);
    font-size: var(--fs-body);
    margin: 0;
}

.faq-answer p:last-child {
    padding-bottom: var(--space-md);
}

.faq-answer ul {
    margin-top: var(--space-xs);
    margin-bottom: 0;
    padding-left: calc(var(--space-md) * 2);
    padding-right: var(--space-md);
    padding-bottom: var(--space-md);
}

.faq-answer li {
    margin-top: var(--space-xxs);
    color: var(--color-text-body);
    font-size: var(--fs-body);
}

/* Stan otwarty (Checked) */
.faq-toggle:checked~.faq-question {
    color: var(--color-primary);
}

.faq-toggle:checked~.faq-question .faq-icon {
    transform: rotate(180deg);
}

.faq-toggle:checked~.faq-answer-wrapper {
    grid-template-rows: 1fr;
}

/* ----------------------------------------- */
/* 8b. Desktop: rozwijanie na HOVER           */
/*     (dodatkowo do klikniecia/checkboxa).   */
/*     Tylko urządzenia wskazujące + desktop. */
/* ----------------------------------------- */

@media (hover: hover) and (min-width: 768px) {
    .faq-item:hover .faq-question {
        color: var(--color-primary);
    }

    .faq-item:hover .faq-question .faq-icon {
        transform: rotate(180deg);
    }

    .faq-item:hover .faq-answer-wrapper {
        grid-template-rows: 1fr;
    }
}


/* =========================================================================
   📦 MODUŁ: src/css/tables.css
   ========================================================================= */

/* ----------------------------------------- */
/* 9. COMPONENTS: TABLES & DATA              */
/* ----------------------------------------- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
    border: var(--border-thin) solid var(--color-bg-input);
}

.table-ds {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--fs-body);
}

.table-ds th,
.table-ds td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: var(--border-thin) solid var(--color-bg-input);
}

@media (min-width: 768px) {

    .table-ds th,
    .table-ds td {
        padding: var(--space-sm) var(--space-md);
    }
}

.table-ds th {
    background-color: var(--color-bg-cream);
    font-weight: var(--fw-semibold);
    color: var(--color-text-main);
    white-space: nowrap;
}

/* Linki w tabeli: kolor tekstu + podkreślenie (bez niebieskiego / primary) */
.table-ds a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: var(--border-thin);
    text-underline-offset: var(--underline-offset-xs);
    text-decoration-color: currentColor;
    transition: text-decoration-thickness var(--duration-responsive) var(--ease-responsive);
}

.table-ds a:hover {
    color: inherit;
    text-decoration-thickness: var(--border-thick);
    text-decoration-color: currentColor;
}

.table-ds tbody tr {
    transition: background-color var(--duration-responsive) var(--ease-responsive);
}

.table-ds tbody tr:hover {
    background-color: var(--color-sage-opacity-20);
    /* Lekki odcień var(--color-bg-green) dla hovera */
}

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

/* --- Tabela z zaokrąglonym nagłówkiem --- */
.table-ds--pill {
    border-collapse: separate;
    border-spacing: 0;
}

.table-ds--pill th {
    border-bottom: none;
}

.table-ds--pill th:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.table-ds--pill th:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.table-ds--pill tbody tr:hover {
    background-color: transparent;
}

.table-ds--pill tbody tr:hover td {
    background-color: var(--color-bg-cream);
    color: inherit;
}

.table-ds--pill tbody tr:hover td:first-child {
    border-top-left-radius: var(--radius-pill);
    border-bottom-left-radius: var(--radius-pill);
}

.table-ds--pill tbody tr:hover td:last-child {
    border-top-right-radius: var(--radius-pill);
    border-bottom-right-radius: var(--radius-pill);
}


/* =========================================================================
   📦 MODUŁ: src/css/article.css
   ========================================================================= */

/* ----------------------------------------- */
/* 10. COMPONENTS: ARTICLE / RICH SNIPPETS   */
/* ----------------------------------------- */
.article-content {
    color: var(--color-text-body);
    line-height: var(--lh-180);
}

.article-content p {
    margin-bottom: var(--space-md);
}

.article-content ul,
.article-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.article-content li {
    margin-bottom: var(--space-xs);
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content ul.check-list {
    list-style: none;
    padding-left: var(--space-none);
}

.article-content ul.check-list li {
    position: relative;
    padding-left: var(--space-lg);
}

.article-content ul.check-list li::before {
    content: "✓";
    position: absolute;
    left: var(--space-xs);
    top: 0;
    color: var(--color-accent);
    font-weight: var(--fw-bold);
}


/* =========================================================================
   📦 MODUŁ: src/css/utilities.css
   ========================================================================= */

/* ----------------------------------------- */
/* 11. UTILITIES                             */
/* ----------------------------------------- */

/* --- Icon Sizes (Phosphor Icons utility — eliminuje zakaz style="font-size:") --- */
.icon-sm {
    font-size: var(--fs-btn);
}

.icon-md {
    font-size: var(--space-md);
}

.icon-lg {
    font-size: calc(var(--space-sm) * 1.75);
}

.icon-xl {
    font-size: calc(var(--space-sm) * 2.25);
}

/* --- Font-size utilities --- */
.fs-h4 {
    font-size: var(--fs-h4);
}

/* --- Spacing extra --- */
.m-b-xs {
    margin-bottom: var(--space-xs);
}

.m-b-sm-minus {
    margin-bottom: var(--space-sm-minus);
}

.m-b-none {
    margin-bottom: 0;
}

.m-t-xl {
    margin-top: var(--space-xl);
}

.p-t-md {
    padding-top: var(--space-md);
}

.p-t-lg {
    padding-top: var(--space-lg);
}

/* --- Opacity & Visibility --- */
.opacity-muted {
    opacity: var(--opacity-muted);
    /* Przezroczystość 0.7 */
}

/* --- Spacing (Marginesy i Paddingi) --- */
.m-0 {
    margin: 0;
}

.border-none {
    border: none;
}

.m-b-sm {
    margin-bottom: var(--space-sm);
}

.m-b-md {
    margin-bottom: var(--space-md);
}

.m-b-lg {
    margin-bottom: var(--space-lg);
}

.m-b-xl {
    margin-bottom: var(--space-xl);
}

.m-b-xxl {
    margin-bottom: var(--space-xxl);
}

.m-t-md {
    margin-top: var(--space-md);
}

.m-t-lg {
    margin-top: var(--space-lg);
}

.p-sm {
    padding: var(--space-sm);
}

.p-md {
    padding: var(--space-md);
}

.p-lg {
    padding: var(--space-lg);
}

.p-card {
    padding: var(--space-md);
}

@media (min-width: 768px) {
    .p-card {
        padding: var(--space-ml);
    }
}

.p-xl {
    padding: var(--space-xl);
}

.p-t-sm {
    padding-top: var(--space-sm);
}

.p-b-xl {
    padding-bottom: var(--space-xl);
}

.p-y-sm {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.p-y-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.p-y-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}



/* --- Typography (Tekst i Czcionki) --- */
.text-center {
    text-align: center;
    /* Środkowanie tekstu */
}

.text-small {
    font-size: var(--fs-small);
}

/* Visually hidden - tresc tylko dla czytnikow ekranu (WCAG) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.text-muted {
    color: var(--color-text-muted);
    /* Szary/wygaszony tekst */
}

.text-white {
    color: var(--color-white);
    /* Biały tekst */
}

.text-primary {
    color: var(--color-primary);
    /* Główny kolor tekstu */
}

.font-semibold {
    font-weight: var(--fw-semibold);
    /* Półgruby tekst */
}

/* --- Backgrounds (Tła i Kolory) --- */
.bg-primary {
    background-color: var(--surface-ink);
    /* Tło w głównym kolorze */
}

.bg-cream {
    background-color: var(--color-bg-cream);
    /* Tło kremowe */
}

.bg-light-purple {
    background-color: var(--color-bg-light-purple);
    /* Nowe, ręcznie ustawione tło wg wskazówek */
}

.bg-green {
    background-color: var(--color-bg-green);
    /* Tło jasne zielone */
}

.bg-accent {
    background-color: var(--color-accent-green);
    /* Tło akcentujące zielone */
}

.bg-muted {
    background-color: var(--color-text-muted);
    /* Tło wygaszone (szare) */
}

.bg-primary-light {
    background-color: var(--surface-ink-hover);
    /* Tło jasnofioletowe */
}

/* --- Layout (Układ i Flexbox) --- */
.flex-row {
    display: flex;
    /* Układ flexbox */
    align-items: center;
    /* Wyrównanie do środka w pionie */
}

.flex-col {
    display: flex;
    /* Układ flexbox */
    flex-direction: column;
    /* Ułożenie w kolumnie (pionowo) */
}

.flex-wrap {
    flex-wrap: wrap;
    /* Zawijanie elementów do nowej linii */
}

.w-auto {
    width: auto;
}

.justify-between {
    justify-content: space-between;
    /* Rozłożenie elementów równomiernie z przestrzenią */
}

.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--size-util-col-200), 1fr));
}

.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-util-col-300), 1fr));
}

.gap-xs {
    gap: var(--space-xs);
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap-lg {
    gap: var(--space-lg);
}

.gap-xl {
    gap: var(--space-xl);
}

/* --- Borders & Shapes (Obramowania i Kształty) --- */
.border-radius-md {
    border-radius: var(--radius-md);
}

.no-border {
    border: none;
    /* Brak obramowania */
    padding-bottom: 0;
    /* Brak dolnego wewnętrznego odstępu */
}

/* --- Sizing (Rozmiary) --- */
.max-w-form {
    max-width: var(--size-util-form-max-w);
}

.h-demo {
    height: var(--space-xxl);
}

.w-sm {
    width: var(--space-sm);
}

.w-md {
    width: var(--space-md);
}

.w-lg {
    width: var(--space-lg);
}

.w-xl {
    width: var(--space-xl);
}

/* --- Design System Specific Component Styles --- */
.ds-section-forms {
    background-color: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: var(--border-thin) solid var(--color-bg-input);
}

.ds-subtitle {
    color: var(--color-primary);
    border-bottom: var(--border-thick) solid var(--color-bg-cream);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-md);
}

.ds-subtitle.border-none {
    padding-top: var(--space-sm-minus);
    margin-bottom: var(--space-xs);
}

/* --- Hero Layout & Utilities --- */
.hero-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.hero-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    aspect-ratio: 3/4;
}

.hero-gallery-img:first-child {
    aspect-ratio: 16/9;
}

.hero-info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
}

.hero-info-title {
    font-family: var(--font-serif);
    color: var(--color-primary);
    font-size: var(--fs-display-sm);
    /* Using display-sm instead of h2 */
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-xs);
    line-height: var(--lh-110);
}

.hero-info-subtitle {
    font-size: var(--fs-h4);
    /* Increased from h5 */
    color: var(--color-text-body);
}

.hero-info-desc {
    color: var(--color-text-body);
    font-size: var(--fs-body);
    /* Increased from small */
    line-height: var(--lh-160);
}

.hero-info-contact {
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.hero-review-card {
    background-color: var(--surface-card);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: var(--border-thin) solid var(--color-bg-input);
}

.hero-review-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.hero-review-stars {
    display: flex;
    gap: var(--space-3xs);
    color: var(--color-star);
    font-size: var(--fs-small);
}

.hero-review-avatars {
    display: flex;
}

.hero-review-avatar {
    width: var(--space-ml);
    height: var(--space-ml);
    border-radius: var(--radius-circle);
    border: var(--border-thick) solid var(--color-bg-cream);
    margin-left: calc(var(--space-sm-minus) * -1);
    background-color: var(--color-bg-input);
    object-fit: cover;
}

.hero-review-avatar:first-child {
    margin-left: var(--space-none);
}

.hero-info-contact i {
    font-size: var(--fs-h5);
}

.hero-review-card .ph-facebook-logo {
    font-size: var(--fs-h4);
}

/* Base structural utilities added to DS */
.justify-center {
    justify-content: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.align-center {
    align-items: center;
}

.align-self-end {
    align-self: flex-end;
}

.color-star {
    color: var(--color-star);
}

.text-no-underline {
    text-decoration: none;
}

/* Liczniki i ceny: cyfry tabelaryczne (Faza 4) */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.font-normal {
    font-weight: var(--fw-regular);
}

@media (max-width: 1023px) {
    .hero-gallery {
        grid-template-columns: 2fr 1fr;
    }

    .hero-gallery-img:nth-child(3) {
        display: none;
    }

    .hero-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .hero-review-card {
        grid-column: span 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
    }

    .hero-review-card>p {
        margin-bottom: var(--space-none);
    }
}

@media (max-width: 767px) {
    .hero-gallery {
        grid-template-columns: 1fr;
        margin-bottom: var(--space-none);
    }

    .hero-gallery-img {
        display: none;
        aspect-ratio: 16/9;
    }

    .hero-gallery-img:first-child {
        display: block;
        border-radius: var(--radius-md);
        min-height: var(--size-sustainability-subgrid-img-h);
        aspect-ratio: 16/9;
    }

    .hero-info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        margin-top: var(--space-xs);
    }

    .hero-info-title {
        font-size: var(--fs-hero-title-mobile);
    }

    .hero-review-card {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* --- Cookie Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--surface-elevated);
    z-index: var(--z-max);
    padding: var(--space-md);
    border-top: var(--border-thin) solid var(--border-color-medium);
}

.cookie-banner-content {
    max-width: var(--container-narrow);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
}

@media (min-width: 768px) {
    .cookie-banner-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

.cookie-banner-text {
    font-size: var(--fs-small);
    color: var(--color-text-main);
    margin: 0;
    flex: 1;
}

.cookie-banner-actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Cookie banner button styles - overriding if needed */
.cookie-banner__reject {
    border: var(--border-thin) solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
}

.cookie-banner__reject:hover {
    background: var(--surface-ink);
    color: var(--color-white);
}

.cookie-banner__accept {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
}

.cookie-banner__accept:hover {
    background: var(--color-accent-hover);
}

/* Adjust cookie banner layout on very small screens if necessary */
@media (max-width: 480px) {
    .cookie-banner-actions {
        flex-direction: column;
        width: 100%;
    }

    .cookie-banner-actions .btn {
        width: 100%;
        text-align: center;
    }
}



/* =========================================================================
   📦 MODUŁ: src/css/navigation.css
   ========================================================================= */

/* ----------------------------------------- */
/* 13. NAVBAR                                */
/* ----------------------------------------- */
.nav-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    padding-top: var(--space-sm-minus);
}

.navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg-cream);
    border-radius: var(--radius-ml);
}



@media (min-width: 1024px) {
    .navbar {
        flex-direction: row;
    }
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space-xs) * 1.2);
    font-family: var(--font-serif);
    font-size: var(--fs-h4);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: opacity 0.2s ease;
}

.nav-brand:hover {
    opacity: 0.8;
}

.nav-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-sm) * 2.1);
    height: calc(var(--space-sm) * 2.1);
    background: var(--surface-ink);
    color: var(--color-white);
    border-radius: 50%;
    font-size: calc(var(--space-sm) * 1.1);
    font-weight: var(--fw-bold);
    font-family: var(--font-serif);
    flex-shrink: 0;
}

/* Logo (wordmark SVG) — kolorowane przez currentColor (mask), więc działa */
/* na jasnym pasku (primary) i na ciemnej stopce (jasny). */
.brand-logo {
    display: block;
    height: var(--space-ml);
    aspect-ratio: 148.68 / 55.003;
    background-color: currentColor;
    -webkit-mask: url(img/logo.svg) no-repeat center / contain;
    mask: url(img/logo.svg) no-repeat center / contain;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .brand-logo {
        height: var(--space-md);
    }
}

/* Desktop: logo w gornym pasku (na hero) 2x wieksze */
@media (min-width: 768px) {
    .nav-sticky .brand-logo {
        height: calc(var(--space-ml) * 2);
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    list-style: none;
    margin: 0 var(--space-xxs) 0 auto;
    padding: 0;
}

.nav-link {
    position: relative;
    color: var(--color-text-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-medium);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm-minus);
    border-radius: var(--radius-pill);
    transition: color 200ms ease, background-color 200ms ease;
}

.nav-link:hover {
    color: var(--color-primary);
    background-color: var(--surface-elevated);
}

.nav-link.is-active {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.nav-link:focus-visible {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--space-3xs);
}

/* --- Dropdown Menu Styles --- */
.nav-item-dropdown {
    position: relative;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.dropdown-toggle i {
    font-size: var(--fs-small);
    transition: transform 0.25s ease;
    vertical-align: middle;
    margin-left: var(--space-xxs);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(var(--space-xs));
    background-color: var(--surface-elevated);
    border: var(--border-thin) solid var(--color-bg-lavender);
    border-radius: var(--radius-md);
    padding: var(--space-xs) 0;
    min-width: var(--size-nav-dropdown-min-w);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--z-dropdown);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    transition-delay: 0.4s; /* Opóźnienie przy zjechaniu myszką */
}

/* Pseudo-element do pokrycia luki hover między linkiem a menu */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: var(--translate-nav-neg-12);
    left: 0;
    width: 100%;
    height: var(--size-nav-triangle);
    background-color: transparent;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(var(--space-px-4));
    transition-delay: 0s; /* Natychmiastowe pokazanie przy najechaniu */
}

/* Usunięcie opóźnienia przy przechodzeniu między sąsiednimi menu w navbarze */
.nav-links:hover .nav-item-dropdown:not(:hover) .nav-dropdown-menu {
    transition-delay: 0s;
}

.nav-item-dropdown:hover .dropdown-toggle i,
.nav-item-dropdown:focus-within .dropdown-toggle i {
    transform: rotate(180deg);
}

.nav-dropdown-item {
    display: block;
    padding: var(--space-xs) var(--space-md);
    color: var(--color-text-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: color 200ms ease, background-color 200ms ease;
    white-space: nowrap;
}

.nav-dropdown-item:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-opacity-6);
}

.nav-dropdown-item:focus-visible {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--translate-px-neg-2);
}

.nav-cta-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* --- Przelacznik motywu (FAZA 2) --- */
/* Dyskretny button ikonowy; wpisuje sie w jasny design (jak nav-link). */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-theme-toggle);
    height: var(--size-theme-toggle);
    background: var(--color-transparent);
    border: none;
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-size: var(--fs-icon-md);
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease;
}

.theme-toggle:hover {
    /* zmiana tonu tla z tokenu (w light = biel jak hover nav-link) */
    background-color: var(--surface-elevated);
}

.theme-toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--space-3xs);
}

.nav-facebook {
    display: none;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--duration-linear) var(--ease-linear);
}

.nav-facebook:hover {
    opacity: 0.7;
}

.nav-facebook i {
    font-size: var(--size-icon-nav);
    width: var(--size-icon-nav);
    height: var(--size-icon-nav);
    line-height: var(--lh-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-admin {
    display: none;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--duration-linear) var(--ease-linear);
}

.nav-admin:hover {
    opacity: 0.7;
}

.nav-admin i {
    font-size: var(--size-icon-nav-sm);
    width: var(--size-icon-nav);
    height: var(--size-icon-nav);
    line-height: var(--lh-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1280px) {
    .nav-facebook,
    .nav-admin {
        display: inline-flex;
    }
}

@media (max-width: 1023px) {
    .nav-cta-group .nav-cta {
        display: none;
    }
}

/* --- Skip-link (WCAG 2.2 — omijanie nawigacji klawiaturą) --- */
.skip-link {
    position: absolute;
    top: calc(-1 * var(--space-xxl));
    left: var(--space-md);
    background: var(--surface-ink);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    z-index: var(--z-max);
    text-decoration: none;
    font-weight: var(--fw-bold);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: var(--space-md);
    outline: var(--border-thick) solid var(--color-white);
    outline-offset: var(--space-3xs);
}

/* --- Reset natywnego wyglądu przycisków dropdown (semantyczny <button> zamiast <a href="#">) --- */
button.nav-link {
    background: none;
    border: none;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}



/* =========================================================================
   📦 MODUŁ: src/css/footer.css
   ========================================================================= */

/* ----------------------------------------- */
/* 14. FOOTER                                */
/* ----------------------------------------- */
.site-footer-wrapper {
    margin-top: var(--space-xxl);
}

.site-footer {
    background-color: var(--color-bg-cream);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-lg);
    position: relative;
}

.site-footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.site-footer-image-col {
    position: relative;
}

.site-footer-image {
    border-radius: var(--radius-ml);
    width: 100%;
    height: var(--size-footer-map-h);
    object-fit: cover;
}

.site-footer-badge {
    position: absolute;
    bottom: calc(var(--space-ml) * -1);
    right: calc(var(--space-ml) * -1);
    width: var(--size-footer-logo-lg);
    height: var(--size-footer-logo-lg);
    background-color: var(--surface-ink);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(12deg);
}

.site-footer-badge svg {
    width: var(--size-footer-logo-sm);
    height: var(--size-footer-logo-sm);
    animation: var(--animation-spin-slow);
}

.site-footer-info-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-lg);
}

.site-footer-info-col h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--color-primary);
    margin-bottom: var(--space-sm-minus);
}

.site-footer-info-col p {
    color: var(--color-text-body);
    margin-bottom: var(--space-xxs);
}

.site-footer-info-col p i {
    font-size: var(--size-icon-svg);
    vertical-align: middle;
    margin-right: var(--space-xs);
}

.site-footer-map-link {
    color: var(--color-text-body);
    text-decoration: underline;
    font-size: var(--fs-small);
}

.site-footer-map-link:hover {
    color: var(--color-primary);
}

/* Social Links Grid */
.site-footer-socials {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: var(--border-thin) solid var(--color-accent-green);
}

.site-footer-social-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--color-text-body);
    font-weight: var(--fw-medium);
}

.site-footer-social-link:hover {
    color: var(--color-primary);
}

.site-footer-social-link span {
    display: flex;
    align-items: center;
    gap: var(--space-sm-minus);
}

.site-footer-social-link i {
    font-size: var(--fs-h5);
    color: var(--color-primary);
}

.site-footer-social-link .footer-social-arrow {
    font-size: var(--size-icon-svg);
}

.site-footer-social-icon {
    width: var(--size-social-icon);
    height: var(--size-social-icon);
    background-color: var(--surface-ink);
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--fs-social-label);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

/* Copyright */
.site-footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    font-size: var(--fs-small);
    color: var(--color-text-body);
}

.site-footer-copyright-right {
    display: flex;
    gap: var(--space-md);
}

.site-footer-copyright a {
    text-decoration: underline;
    color: inherit;
}

.site-footer-copyright a:hover {
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .site-footer {
        padding: var(--space-xl);
    }

    .site-footer-content {
        flex-direction: row;
        gap: var(--space-xl);
    }

    .site-footer-image-col {
        width: 50%;
        flex-shrink: 0;
    }

    .site-footer-info-col {
        width: 50%;
    }

    .site-footer-socials {
        grid-template-columns: repeat(4, 1fr);
    }

    .site-footer-copyright {
        flex-direction: row;
        justify-content: space-between;
    }
}


/* =========================================================================
   📦 MODUŁ: src/css/story.css
   ========================================================================= */

/* ----------------------------------------- */
/* 13b. STORY CHAPTERS (3 rozdziały)         */
/* ----------------------------------------- */
.story-section-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
}

.story-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-eyebrow);
    padding: var(--space-xxs) var(--space-sm-minus);
    background: transparent;
    color: var(--color-primary);
    border: var(--border-base) solid var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    opacity: 0.75;
}

.story-section-eyebrow::before {
    content: '\2726';
    /* ✦ gwiazdeczka dekoracyjna */
    font-size: var(--fs-eyebrow-icon);
    opacity: 0.7;
    flex-shrink: 0;
}

.story-section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--color-primary);
    line-height: var(--lh-120);
    margin: 0;
    max-width: 36ch;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--space-sm) * 1.25);
}

@media (min-width: 768px) {
    .story-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md) var(--space-sm);
    }
}

.story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-minus);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-cream);
    overflow: hidden;
    transition: transform 0.35s ease;
}

.story-card-img {
    display: block;
    width: 100%;
    height: var(--size-story-img-h);
    object-fit: cover;
    border-radius: var(--radius-img);
    filter: var(--img-grade);
}




.story-card--lavender {
    background-color: var(--color-bg-lavender);
}

.story-card--peach {
    background-color: var(--color-bg-peach);
}

.story-card--mint {
    background-color: var(--color-bg-mint);
}

.story-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-xxs);
}

.story-card-numeral {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(calc(var(--space-md) * 2), 6vw, calc(var(--space-md) * 3));
    line-height: var(--lh-100);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-tighter);
}

.story-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-btn-height);
    height: var(--size-btn-height);
    background: var(--surface-elevated);
    color: var(--color-primary);
    border-radius: var(--radius-circle);
    font-size: calc(var(--space-xs) * 2.7);
    flex-shrink: 0;
    border: var(--border-thin) solid var(--color-white-opacity-65);
}

.story-card-eyebrow {
    font-family: var(--font-sans);
    font-size: calc(var(--fs-small) * 0.82);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-primary);
    opacity: 0.7;
}

.story-card-title {
    font-family: var(--font-serif);
    font-size: clamp(calc(var(--space-xs) * 2.4), 2vw, var(--space-md));
    color: var(--color-primary);
    line-height: var(--lh-125);
    margin: 0;
}

.story-card-body {
    font-size: calc(var(--fs-btn) * 0.95);
    line-height: var(--lh-160);
    color: var(--color-text-body);
    margin: 0;
}

.story-card-body em {
    font-style: italic;
}

.story-card-chips {
    list-style: none;
    padding: var(--space-none);
    margin: var(--space-xs) var(--space-none) var(--space-none);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space-xxs) * 1.6);
}

.story-card-chips li {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xxs) var(--space-sm-minus);
    background: var(--color-white-opacity-65);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: calc(var(--fs-small) * 0.9);
    font-weight: var(--fw-medium);
    backdrop-filter: blur(var(--blur-xs));
}

.story-card-chips li::before {
    content: "✦";
    margin-right: calc(var(--space-xxs) * 1.4);
    font-size: calc(var(--fs-small) * 0.8);
    opacity: 0.7;
}


/* =========================================================================
   📦 MODUŁ: src/css/footer-capcut.css
   ========================================================================= */

/* ----------------------------------------- */
/* 14b. CAPCUT-STYLE FOOTER                  */
/* ----------------------------------------- */
.cc-footer-wrapper {
    margin-top: var(--space-xxl);
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    .cc-footer-wrapper.container {
        max-width: none;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        box-sizing: border-box;
    }

    .cc-footer-top,
    .cc-footer-grid,
    .cc-footer-bottom {
        max-width: var(--container-max);
        margin-left: auto;
        margin-right: auto;
    }
}

.cc-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    border-radius: var(--space-lg);
    padding: clamp(var(--space-ml), 5vw, calc(var(--space-md) * 3)) clamp(var(--space-md), 4vw, calc(var(--space-xs) * 7)) var(--space-md);
    position: relative;
    overflow: hidden;
}

.cc-footer::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: var(--size-footer-deco-circle);
    height: var(--size-footer-deco-circle);
    background: radial-gradient(circle, var(--color-footer-glow), var(--color-transparent) 60%);
    pointer-events: none;
}

/* TOP CTA */
.cc-footer-top {
    position: relative;
    z-index: var(--z-1);
    margin-bottom: clamp(var(--space-lg), 6vw, var(--space-xl));
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-lg);
}

.cc-footer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-footer-text);
    opacity: 0.7;
    margin-bottom: var(--space-md);
    padding: var(--space-xxs) var(--space-sm-minus);
    border: var(--border-thin) solid var(--color-footer-border);
    border-radius: var(--radius-pill);
}

.cc-dot {
    width: var(--space-xs);
    height: var(--space-xs);
    background: var(--color-success);
    border-radius: var(--radius-circle);
}

.cc-footer-cta {
    font-family: var(--font-serif);
    font-size: clamp(var(--space-lg), 7vw, calc(var(--space-xs) * 11));
    line-height: var(--lh-105);
    font-weight: var(--fw-medium);
    color: var(--color-footer-text);
    margin: 0;
    letter-spacing: var(--ls-tighter);
}

.cc-footer-cta__line {
    display: block;
}

.cc-footer-cta em {
    font-style: italic;
    background: linear-gradient(120deg, var(--color-footer-gradient-start), var(--color-footer-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--color-transparent);
}

.cc-footer-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-footer-arrow);
    height: var(--size-footer-arrow);
    margin-top: var(--space-md);
    background: var(--color-footer-text);
    color: var(--color-footer-bg);
    border-radius: var(--radius-circle);
    transition: transform var(--duration-linear) var(--ease-linear), background var(--duration-linear) var(--ease-linear);
    text-decoration: none;
}

.cc-footer-arrow i {
    font-size: var(--fs-footer-arrow-icon);
}

.cc-footer-arrow:hover {
    transform: rotate(45deg);
    background: var(--color-footer-accent);
}

/* GRID */
.cc-footer-grid {
    position: relative;
    z-index: var(--z-1);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-ml);
    padding-top: var(--space-none);
    padding-bottom: var(--space-none);
    border-top: var(--border-thin) solid var(--color-footer-border);
    border-bottom: var(--border-thin) solid var(--color-footer-border);
}

@media (min-width: 768px) {
    .cc-footer-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-lg);
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .cc-footer-grid.cc-footer-grid--6-cols {
        grid-template-columns: repeat(6, 1fr);
    }
}

.cc-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-minus);
}

/* Accordion triggers and animations for footer */
.cc-footer-accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: var(--space-xs) var(--space-none);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.cc-accordion-chevron {
    font-size: calc(var(--space-sm) * 1.1);
    transition: transform var(--duration-decelerate) var(--ease-decelerate);
    color: var(--color-footer-text);
    opacity: 0.6;
}

.cc-footer-accordion-content {
    display: grid;
    grid-template-rows: var(--space-none);
    transition: grid-template-rows var(--duration-decelerate) var(--ease-decelerate);
    overflow: hidden;
}

.cc-footer-accordion-content>ul {
    min-height: 0;
}

/* Ekrany szersze niż breakpoint: accordion rozwinięty, trigger ukryty */
@media (min-width: 501px) {
    .cc-accordion-chevron {
        display: none;
    }

    .cc-footer-accordion-trigger {
        cursor: default;
        pointer-events: none;
        padding: var(--space-none);
        margin-bottom: var(--space-sm-minus);
    }

    .cc-footer-accordion-content {
        grid-template-rows: 1fr;
        overflow: visible;
    }
}

/* Tylko mobile: accordion zwijany */
@media (max-width: 500px) {
    .cc-footer-grid {
        gap: var(--space-none);
        padding-top: var(--space-none);
        padding-bottom: var(--space-none);
    }

    .cc-footer-col.cc-footer-accordion-item {
        border-bottom: var(--border-thin) solid var(--color-footer-border);
        padding-top: var(--space-xs);
        padding-bottom: var(--space-xs);
        gap: var(--space-none);
    }

    .cc-footer-accordion-item.is-active .cc-footer-accordion-content {
        grid-template-rows: 1fr;
        padding-top: var(--space-xs);
        padding-bottom: var(--space-xs);
    }

    .cc-footer-accordion-item.is-active .cc-accordion-chevron {
        transform: rotate(180deg);
        color: var(--color-footer-accent);
    }
}

.cc-footer-label {
    font-size: var(--space-sm-minus);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-footer-text);
    opacity: 0.5;
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-xxs);
}

.cc-footer-contact-block {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cc-footer-contact-block > .cc-footer-label:first-child {
    margin-bottom: 0;
}

.cc-footer-contact-block > .cc-footer-phone--secondary,
.cc-footer-contact-block > .cc-footer-email {
    margin-top: var(--space-xxs);
}

.cc-footer-phone {
    font-family: var(--font-serif);
    font-size: var(--fs-footer-phone);
    color: var(--color-footer-text);
    text-decoration: none;
    font-weight: var(--fw-medium);
    line-height: var(--lh-110);
}

.cc-footer-phone:hover {
    color: var(--color-footer-accent);
}

.cc-footer-email {
    color: var(--color-footer-text);
    opacity: 0.75;
    text-decoration: none;
    font-size: var(--fs-small);
}

.cc-footer-email:hover {
    color: var(--color-footer-text);
}

.cc-footer-links {
    list-style: none;
    padding: var(--space-none);
    margin: var(--space-none);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cc-footer-links a {
    color: var(--color-footer-text);
    opacity: 0.8;
    text-decoration: none;
    font-size: var(--fs-small);
    transition: color var(--duration-linear) var(--ease-linear), transform var(--duration-linear) var(--ease-linear);
    display: inline-block;
}

.cc-footer-links a:hover {
    color: var(--color-footer-text);
    transform: translateX(var(--space-xxs));
}

/* COPY ROW + BUTTON */
.cc-copy-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: nowrap;
}

.cc-copy-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-box);
    height: var(--size-icon-box);
    background: var(--color-footer-border);
    border: var(--border-thin) solid var(--color-footer-border);
    border-radius: var(--radius-circle);
    color: var(--color-footer-text);
    opacity: 0.7;
    cursor: pointer;
    font-size: var(--fs-btn);
    flex-shrink: 0;
    transition: background-color var(--duration-linear) var(--ease-linear), color var(--duration-linear) var(--ease-linear), border-color var(--duration-linear) var(--ease-linear), transform var(--duration-linear) var(--ease-linear), opacity var(--duration-linear) var(--ease-linear);
}

.cc-copy-control:hover {
    background: var(--color-footer-accent);
    color: var(--color-footer-bg);
    border-color: var(--color-footer-accent);
    opacity: 1;
}

.cc-copy-control:active {
    transform: scale(0.92);
}

.cc-copy-control.is-copied {
    background: color-mix(in srgb, var(--color-success) 20%, transparent);
    border-color: var(--color-success);
    color: var(--color-success);
    opacity: 1;
}

.cc-footer-phone--secondary {
    font-size: clamp(var(--space-20), 2vw, var(--space-md));
    color: var(--color-footer-text);
    opacity: 0.85;
}

/* INFO ROW: adres + konto (zawsze widoczne) */
.cc-footer-info {
    position: relative;
    z-index: var(--z-1);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.cc-footer-info-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.cc-footer-info-text {
    margin: 0;
    color: var(--color-footer-text);
    opacity: 0.85;
    font-size: var(--fs-small);
    line-height: var(--lh-155);
}

.cc-footer-bank {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-narrow);
    font-weight: var(--fw-medium);
    color: var(--color-footer-text);
}

.cc-copy-row--bank {
    flex-wrap: wrap;
}

.cc-footer-mini-link {
    color: var(--color-footer-accent);
    text-decoration: none;
    font-size: var(--fs-small);
    align-self: flex-start;
}

.cc-footer-mini-link:hover {
    color: var(--color-footer-text);
}

/* TOAST */
.cc-toast {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%) translateY(var(--space-md));
    z-index: var(--z-max);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm-minus) var(--space-sm);
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    border: var(--border-thin) solid var(--color-success);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-responsive) var(--ease-responsive), transform var(--duration-responsive) var(--ease-responsive);
}

.cc-toast i {
    color: var(--color-success);
    font-size: calc(var(--space-xs) * 2.5);
}

.cc-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* BOTTOM */
.cc-footer-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm-minus);
    width: 100%;
    padding-top: calc(var(--space-xs) * 2.5);
    font-size: var(--fs-small);
    color: var(--color-footer-text);
    opacity: 0.55;
}

.cc-footer-bottom-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cc-footer-logo {
    color: var(--color-footer-text);
    height: var(--space-ml);
}

.cc-footer-legal {
    display: flex;
    gap: var(--space-md);
    margin-left: auto;
    flex-shrink: 0;
}

.cc-footer-legal a {
    color: inherit;
    text-decoration: none;
}

.cc-footer-legal a:hover {
    color: var(--color-bg-lavender-soft);
}



/* =========================================================================
   📦 MODUŁ: src/css/subpages.css
   ========================================================================= */

/* ================================================= */
/* SUBPAGE REUSABLE COMPONENTS                       */
/* ================================================= */

/* ----------------------------------------- */
/* PAGE HERO — Image Variant                 */
/* ----------------------------------------- */
.page-hero-image {
    position: relative;
    border-radius: var(--radius-img-lg);
    overflow: hidden;
    min-height: var(--size-hero-img-h);
    margin-bottom: var(--space-xl);
}

.page-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--img-grade);
}

/* Scrim gradientowy (Faza 4, zero cieni): gwarantuje kontrast tekstu
   na zdjeciu - zamiast cienia pod tekstem */
.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim-hero);
}

.page-hero-image-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--space-lg);
}

.page-hero-image-content h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-display-md);
    color: var(--color-white);
    margin-bottom: var(--space-sm);
    line-height: var(--lh-110);
}

.page-hero-image-content p {
    font-size: clamp(var(--fs-body), 2vw, calc(var(--space-xs) * 2.5));
    color: var(--color-white-opacity-90);
    max-width: calc(var(--space-sm) * 42);
    line-height: var(--lh-160);
}

/* ----------------------------------------- */
/* PAGE HERO — Text Variant                  */
/* ----------------------------------------- */
.page-hero-text {
    text-align: center;
    max-width: calc(var(--space-sm) * 48);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-xl);
}

.page-hero-text h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-hero-text-h1);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    line-height: var(--lh-110);
}

.page-hero-text p {
    font-size: clamp(var(--space-sm), 1.5vw, calc(var(--space-xs) * 2.25));
    color: var(--color-text-body);
    line-height: var(--lh-170);
}

/* ----------------------------------------- */
/* INTRO SECTION — Centered text block       */
/* ----------------------------------------- */
.section-intro {
    max-width: calc(var(--space-sm) * 56);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: var(--space-xl);
}

.section-intro h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    line-height: var(--lh-120);
}

.section-intro p {
    font-size: clamp(var(--space-sm), 1.5vw, calc(var(--space-xs) * 2.25));
    color: var(--color-text-body);
    line-height: var(--lh-170);
}

/* .text-small musi wygrywac z clampem leadu (specyficznosc) */
.section-intro p.text-small {
    font-size: var(--fs-small);
}

/* ----------------------------------------- */
/* FEATURE SECTION — Image + Content grid    */
/* ----------------------------------------- */
.section-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
    margin-bottom: var(--space-xxl);
}

.section-feature__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.section-feature__media img {
    border-radius: var(--radius-img-lg);
    width: 100%;
    height: var(--size-feature-img-h);
    object-fit: cover;
    filter: var(--img-grade);
}

.section-feature__media img:first-child {
    margin-top: var(--space-lg);
}

.section-feature__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section-feature__body h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.section-feature__body p {
    font-size: var(--fs-subpage-lead);
    color: var(--color-text-body);
    line-height: var(--lh-170);
}

/* Single image variant */
.section-feature__media--single {
    display: block;
}

.section-feature__media--single img {
    border-radius: var(--radius-img-lg);
    width: 100%;
    height: var(--size-hero-img-h);
    object-fit: cover;
    margin-top: 0;
}

/* ----------------------------------------- */
/* FEATURE BADGE — Pill with check icon      */
/* ----------------------------------------- */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm-minus);
    background-color: var(--surface-elevated);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    width: fit-content;
}

.feature-badge__icon {
    width: var(--size-checkbox-lg);
    height: var(--size-checkbox-lg);
    background-color: transparent;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-badge-icon);
}

.feature-badge span {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-small);
}

/* ----------------------------------------- */
/* FEATURE LIST ITEM — Check + text          */
/* ----------------------------------------- */
.feature-list {
    list-style: none;
    padding: var(--space-none);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.feature-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm-minus);
}

/* Modyfikator dla pozycji z dlugim, wieloliniowym opisem:
   ikona trzyma sie pierwszej linii zamiast plywac na srodku */
.feature-list-item--top {
    align-items: flex-start;
}

.feature-list-item__icon {
    width: var(--size-icon-nav);
    height: var(--size-icon-nav);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-btn);
}

.feature-list-item--solid .feature-list-item__icon {
    background-color: var(--surface-ink);
    color: var(--color-white);
}

.feature-list-item--light .feature-list-item__icon {
    background-color: var(--color-primary-opacity-10);
    color: var(--color-primary);
}

.feature-list-item span {
    color: var(--color-text-body);
}

/* ----------------------------------------- */
/* INFO CARD — Icon + title + description    */
/* ----------------------------------------- */
.info-card {
    background-color: var(--color-bg-cream);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.info-card__icon {
    width: var(--size-avatar-md);
    height: var(--size-avatar-md);
    background-color: var(--color-primary-opacity-10);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    font-size: var(--space-md);
}

.info-card :is(h3, h4) {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-sm-minus);
}

.info-card p {
    color: var(--color-text-body);
}

/* White variant for use on colored backgrounds */
.info-card--white {
    background-color: var(--surface-elevated);
}

/* ----------------------------------------- */
/* HIGHLIGHTED SECTION — Tinted bg panel     */
/* ----------------------------------------- */
.section-highlight {
    background-color: var(--color-bg-peach);
    border-radius: var(--radius-ml);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.section-highlight h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    position: relative;
    z-index: var(--z-1);
}

.section-highlight>p {
    font-size: clamp(var(--space-sm), 1.5vw, calc(var(--space-xs) * 2.25));
    color: var(--color-text-body);
    line-height: var(--lh-170);
    max-width: calc(var(--space-sm) * 48);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-xl);
    position: relative;
    z-index: var(--z-1);
}

/* ----------------------------------------- */
/* SALA CARD — Room description card         */
/* ----------------------------------------- */
.sala-card {
    background-color: var(--color-bg-cream);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.sala-card :is(h3, h4) {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.sala-card :is(h3, h4) i {
    color: var(--color-star);
    font-size: var(--fs-h5);
}

.sala-card p {
    color: var(--color-text-body);
}

/* ----------------------------------------- */
/* EVENT CARD — Card with bg image overlay   */
/* ----------------------------------------- */
.event-card {
    background-color: var(--color-bg-cream);
    border-radius: var(--radius-ml);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.event-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    transition: opacity 500ms ease;
}

.event-card:hover .event-card__bg {
    opacity: 0.3;
}

.event-card__body {
    position: relative;
    z-index: var(--z-1);
}

.event-card__body :is(h2, h3) {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.event-card__body p {
    color: var(--color-text-body);
    font-size: var(--fs-subpage-lead);
    margin-bottom: var(--space-md);
}

/* ----------------------------------------- */
/* CTA BANNER — Full-width dark banner       */
/* ----------------------------------------- */
.cta-banner {
    background-color: var(--surface-ink);
    border-radius: var(--radius-ml);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.cta-banner h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--color-white);
    line-height: var(--lh-120);
}

.cta-banner p {
    color: var(--color-white-opacity-80);
    font-size: var(--fs-subpage-lead);
}

/* Button: white variant */
.btn-white {
    background-color: var(--color-white);
    color: var(--text-on-light);
    border-color: var(--color-white);
}

.btn-white:hover:not(:disabled):not(.is-disabled) {
    opacity: 0.9;
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.btn-ico.btn-white>i {
    background-color: var(--color-primary-opacity-10);
    color: var(--text-on-light);
}

/* ----------------------------------------- */
/* BLOG CARD                                 */
/* ----------------------------------------- */
.blog-card {
    display: flex;
    flex-direction: column;
    background-color: var(--surface-card);
    border: var(--border-thin) solid var(--color-bg-input);
    border-radius: var(--radius-ml);
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    transition: border-color var(--duration-linear) var(--ease-linear);
}

.blog-card:hover {
    border-color: var(--color-primary-light);
}

.blog-card__image {
    height: var(--size-blog-card-img-h);
    overflow: hidden;
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--img-grade);
    transition: transform 700ms ease;
}

/* Hover zdjecia: subtelny scale wewnatrz overflow:hidden (Faza 4) */
.blog-card:hover .blog-card__image img {
    transform: scale(1.03);
}

.blog-card__body {
    padding: var(--space-ml);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--space-sm-minus);
    color: var(--color-text-body);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-sm);
}

.blog-card__meta span {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
}

.blog-card__meta i {
    font-size: var(--fs-small);
}

.blog-card__body h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-h4);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    transition: color 200ms ease;
}

.blog-card:hover .blog-card__body h3 {
    color: var(--color-text-body);
}

.blog-card__body>p {
    color: var(--color-text-body);
    line-height: var(--lh-160);
    margin-bottom: var(--space-md);
    flex-grow: 1;
}

.blog-card__link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    margin-top: auto;
}

.blog-card:hover .blog-card__link {
    text-decoration: underline;
}

/* ----------------------------------------- */
/* GALLERY MASONRY                           */
/* ----------------------------------------- */
.gallery-masonry {
    column-width: var(--size-masonry-col);
    column-gap: var(--space-md);
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-left: var(--space-sm-minus);
    padding-right: var(--space-sm-minus);
}

.gallery-masonry__item {
    break-inside: avoid;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-img);
    overflow: hidden;
}

.gallery-masonry__item img {
    display: block;
    width: 100%;
    border-radius: var(--radius-img);
    filter: var(--img-grade);
    cursor: pointer;
    transition: transform var(--duration-decelerate) var(--ease-decelerate);
}

/* Hover: subtelny scale wewnatrz kontenera z overflow:hidden (Faza 4) */
.gallery-masonry__item img:hover {
    transform: scale(1.02);
}

/* Lightbox */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--color-black-opacity-92);
    z-index: var(--z-modal);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox.is-active {
    display: flex;
}

/* Nakładka strefowa – zamykanie przez kliknięcie poza zdjęciem */
.gallery-lightbox__backdrop {
    position: absolute;
    inset: 0;
    cursor: none; /* domyślnie chowamy kursor — obsługujemy przez JS */
}

/* Kursor zamknięcia (X) */
.gallery-lightbox__cursor-close {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-lightbox);
    transform: translate(-50%, -50%);
    width: var(--size-avatar-md);
    height: var(--size-avatar-md);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-white-opacity-15);
    color: var(--color-white);
    font-size: var(--fs-xl);
    backdrop-filter: blur(var(--blur-xs));
}

.gallery-lightbox__cursor-arrow {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-lightbox);
    transform: translate(-50%, -50%);
    width: var(--size-lightbox-cursor);
    height: var(--size-lightbox-cursor);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-white-opacity-15);
    color: var(--color-white);
    font-size: var(--fs-xl);
    backdrop-filter: blur(var(--blur-xs));
}

/* Wrapper zdjęcia + opis */
.gallery-lightbox__inner {
    position: relative;
    z-index: var(--z-lightbox-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    max-width: 90vw;
    pointer-events: none;
}

.gallery-lightbox img {
    max-width: 90vw;
    max-height: 75vh;
    border-radius: var(--radius-img);
    display: block;
    pointer-events: auto;
    user-select: none;
    cursor: none;
}

/* Opis pod zdjęciem */
.gallery-lightbox__caption {
    color: var(--color-white);
    text-align: center;
    max-width: 60ch;
    opacity: 0.85;
}

.gallery-lightbox__caption-title {
    font-size: var(--fs-lightbox-caption);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-xxs);
}

.gallery-lightbox__caption-desc {
    font-size: var(--fs-lightbox-desc);
    opacity: 0.7;
    line-height: var(--lh-150);
}



/* ----------------------------------------- */
/* CONTACT CARD                              */
/* ----------------------------------------- */
.contact-card {
    background-color: var(--color-bg-cream);
    padding: var(--space-ml);
    border-radius: var(--radius-ml);
}

.contact-card :is(h2, h3) {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    color: var(--color-primary);
    margin-bottom: var(--space-ml);
}

.contact-card__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-ml);
}

.contact-card__item-icon {
    width: var(--size-avatar-md);
    height: var(--size-avatar-md);
    background-color: var(--surface-elevated);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-h5);
    color: var(--color-primary);
}

.contact-card__item h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-xxs);
}

.contact-card__item p,
.contact-card__item a {
    color: var(--color-text-body);
    margin-bottom: var(--space-xxs);
}

.contact-card__item a:hover {
    color: var(--color-primary);
}

.contact-card__divider {
    border: none;
    border-top: var(--border-thin) solid var(--color-accent-green);
    margin: var(--space-lg) var(--space-none);
}

.contact-card__bank h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.contact-card__bank p {
    color: var(--color-text-body);
}

.contact-card__bank-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xxs);
}

.contact-card__bank-number {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    background-color: var(--surface-elevated);
    display: inline-flex;
    align-items: center;
    padding: var(--space-xxs) var(--space-sm-minus);
    border-radius: var(--radius-sm);
    border: var(--border-thin) solid var(--color-accent-green);
    margin: var(--space-none);
}

.copy-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-nav);
    height: var(--size-icon-nav);
    border-radius: var(--radius-sm);
    background-color: var(--surface-elevated);
    border: var(--border-thin) solid var(--color-accent-green);
    color: var(--color-primary);
    cursor: pointer;
    transition: all 200ms ease;
}

.copy-control:hover {
    background-color: var(--color-bg-input);
    border-color: var(--color-primary);
}

/* ----------------------------------------- */
/* CONTACT — układ bez formularza             */
/* ----------------------------------------- */
/* Formularz kontaktowy usunięty 2026-07-31 (nie miał backendu, więc
   po cichu gubił zapytania). Została jedna karta z danymi, więc siatka
   dwukolumnowa ustąpiła miejsca wyśrodkowanej kolumnie. Szerokość z
   istniejącego tokenu — najbliższego sensownie dobranego. */
.contact-single {
    display: grid;
    gap: var(--space-lg);
    max-width: var(--size-util-form-max-w);
    margin-inline: auto;
}

/* Duplikaty .form-group/.form-label/.form-control usuniete (konsolidacja Fazy 1).
   Jedyna definicja bazowa: forms.css - odzwierciedla efektywny wynik dawnej kaskady. */

/* Subpage wrapper — standardizes page container
   (Faza 4: wiekszy oddech hero na gorze strony) */
.subpage {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* ----------------------------------------- */
/* GALLERY LIGHTBOX — A11y controls          */
/* (WCAG 2.1.1 / 2.4.7; zmigrowane ze scoped */
/* <style> w galeria.html - Faza 4)          */
/* Przyciski sterujace sa niewidoczne do     */
/* momentu fokusu z klawiatury, aby nie      */
/* zmieniac projektu (mysz = kursor strefowy)*/
/* ----------------------------------------- */
.gallery-lightbox__btn {
    position: absolute;
    width: var(--space-technical-pixel);
    height: var(--space-technical-pixel);
    padding: var(--space-none);
    border: var(--space-none);
    margin: var(--space-none);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    background-color: var(--color-transparent);
}

.gallery-lightbox__btn--close {
    top: var(--space-md);
    right: var(--space-md);
}

.gallery-lightbox__btn--prev {
    top: var(--space-md);
    left: var(--space-md);
}

.gallery-lightbox__btn--next {
    top: var(--space-md);
    left: var(--space-xl);
}

.gallery-lightbox__btn:focus-visible {
    width: auto;
    height: var(--size-btn-height);
    display: inline-flex;
    align-items: center;
    padding: var(--padding-btn);
    overflow: visible;
    clip-path: none;
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    outline: var(--border-thick) solid var(--color-accent);
    outline-offset: var(--space-px-2);
    cursor: pointer;
}

/* ----------------------------------------- */
/* 404 — SCENA "zgubieni w lesie" (Faza 4)   */
/* ----------------------------------------- */
.error-404-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    min-height: 60vh;
    background-color: var(--color-bg-lavender);
    border-radius: var(--radius-ml);
}

.error-illustration {
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

.error-code {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-display-md);
    color: var(--color-primary);
    line-height: var(--lh-100);
    margin-bottom: var(--space-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-tighter);
}

.error-subtitle {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    color: var(--color-text-main);
    margin-bottom: var(--space-md);
    max-width: 24ch;
    line-height: var(--lh-130);
}

.error-description {
    color: var(--color-text-body);
    margin-bottom: var(--space-lg);
    max-width: 52ch;
    font-size: var(--fs-body);
    line-height: var(--lh-170);
}

.error-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}



/* =========================================================================
   📦 MODUŁ: src/css/gallery-marquee.css
   ========================================================================= */

/* ----------------------------------------- */
/* COMPONENTS: GALLERY MARQUEE               */
/* ----------------------------------------- */

/* Główny kontener ucinający wystające elementy */
.gallery-marquee {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* Wyrównanie do pełnej szerokości ekranu */
    overflow: hidden;
    padding: 0;
}

/* Ścieżka bazowa z flexem */
.gallery-marquee-track {
    display: flex;
    width: max-content;
    gap: var(--space-md);
}

/* Grupa obrazków animowana niezależnie dla płynnej pętli */
.gallery-marquee-group {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-md);
    animation: var(--animation-marquee);
}

/* Pauzowanie animacji przy najechaniu myszką */
.gallery-marquee-track:hover .gallery-marquee-group {
    animation-play-state: paused;
}

/* Style pojedynczego zdjęcia */
.gallery-marquee-img {
    height: var(--size-gallery-marquee-h);
    width: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: var(--radius-img);
    filter: var(--img-grade);
    transition: transform var(--duration-linear) var(--ease-linear);
}

/* Opcjonalny efekt na hover samego zdjęcia */
.gallery-marquee-img:hover {
    transform: scale(1.02);
}


@media (max-width: 767px) {
    .gallery-marquee {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .gallery-marquee::-webkit-scrollbar {
        display: none;
    }

    .gallery-marquee-group {
        animation: none;
    }

    .gallery-marquee-img {
        scroll-snap-align: center;
        width: 85vw;
        height: auto;
        aspect-ratio: 4/5;
    }

    .gallery-marquee-track {
        padding: 0 var(--space-md);
    }
}



/* =========================================================================
   📦 MODUŁ: src/css/mobile-menu.css
   ========================================================================= */

/* ----------------------------------------- */
/* 11. MOBILE MENU                           */
/* ----------------------------------------- */

/* Główny przycisk hamburgera */
.mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.mobile-toggle-icon {
    font-size: var(--space-ml);
}

body.no-scroll {
    overflow: hidden;
}

/* Nakładka Menu */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: var(--surface-page);
    z-index: var(--z-max);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mobile-overlay.is-open {
    transform: translateX(0);
}

.mobile-overlay-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: var(--size-mobile-overlay-max-w);
    /* Opcjonalnie limit szerokości dla tabletów */
    margin: 0 auto;
    min-height: 0;
}

/* Nagłówek Menu (Logo + Zamknij) */
.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-thin) solid var(--color-bg-lavender);
    background-color: var(--color-bg-cream);
    flex-shrink: 0;
}

/* Przelacznik motywu w naglowku menu mobilnego (FAZA 2):        */
/* dosuniety do prawej, obok przycisku Zamknij.                   */
.mobile-header .theme-toggle {
    margin-left: auto;
    margin-right: var(--space-sm);
}

.mobile-close {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    border: var(--border-thin) solid var(--color-primary);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-primary);
    font-size: var(--fs-small);
    cursor: pointer;
}

/* Widoki (Przełączanie Główne/Podmenu) */
.mobile-view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.mobile-view.is-active {
    display: flex;
    animation: var(--animation-fade-in-x);
}


/* Przycisk Wróć */
.mobile-back {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-size: var(--fs-md);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    font-weight: var(--fw-bold);
    border-bottom: var(--border-thin) solid var(--color-bg-lavender);
    flex-shrink: 0;
}

/* Lista linków */
.mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-lg);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    min-height: var(--size-nav-item-min-h);
    border-bottom: var(--border-thin) solid var(--color-bg-lavender);
}

.mobile-nav-link,
.mobile-nav-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-primary);
    text-decoration: none;
    font-size: calc(var(--space-sm) * 1.1);
    cursor: pointer;
    text-align: left;
    font-weight: var(--fw-regular);
}

.mobile-nav-control {
    font-weight: var(--fw-regular);
    /* Default */
}

/* Sekcja dolna (CTA) */
.mobile-bottom {
    margin-top: auto;
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-bg-cream);
    border-top: var(--border-thin) solid var(--color-bg-lavender);
    flex-shrink: 0;
}

.btn-full {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: var(--space-sm);
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    padding: var(--space-sm);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: var(--fw-bold);
    align-items: center;
}

/* ----------------------------------------- */
/* RESPONSIVE MEDIA QUERIES FOR MOBILE MENU  */
/* ----------------------------------------- */
@media (max-width: 1023px) {
    .nav-links {
        display: none;
    }

    .navbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: var(--space-md);
    }

    .mobile-toggle {
        display: flex;
        gap: var(--space-xs);
        align-items: center;
        font-size: var(--fs-btn);
    }
}

/* ----------------------------------------- */
/* RESPONSIVE — Subpage components           */
/* ----------------------------------------- */
@media (min-width: 768px) {
    .gallery-marquee-img {
        height: var(--size-gallery-marquee-lg-h);
    }

    .gallery-masonry {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .cta-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-lg) var(--space-xl);
    }

    .event-card {
        padding: var(--space-lg) var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .page-hero-image {
        height: var(--size-hero-img-h);
    }

    .page-hero-image-content {
        padding: var(--space-xl);
    }

    .section-feature {
        grid-template-columns: 1fr 1fr;
    }

    .section-highlight {
        padding: var(--space-xl);
    }


    .contact-card {
        padding: var(--space-lg);
    }
}


/* =========================================================================
   📦 MODUŁ: src/css/parallax.css
   ========================================================================= */

/* ----------------------------------------- */
/* PARALLAX USP MODULE                       */
/* ----------------------------------------- */
.parallax-usp {
    position: relative;
    min-height: var(--size-parallax-min-h);
    display: flex;
    align-items: flex-start;
    margin-inline: var(--space-px-2);
    border-radius: var(--space-lg);
    overflow: hidden;
}

@media (min-width: 768px) {
    .parallax-usp {
        margin-inline: var(--space-md);
    }
}

.parallax-usp__bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url('img/wrzosowy/496183063_1246723960787056_1220131874391656265_n.jpg');
    background-size: cover;
    background-position: center top;
    z-index: var(--z-0);
}



.parallax-usp__content {
    position: relative;
    z-index: var(--z-2);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
}

.parallax-usp__box {
    background-color: var(--surface-card);
    border-radius: var(--radius-ml);
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    max-width: var(--size-parallax-box-max-w);
    border: var(--border-thin) solid var(--border-color-default);
}

/* USP BOX HEADER */
.usp-box__header {
    margin-bottom: var(--space-md);
}

.usp-box__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space-xxs) * 1.6);
    padding: var(--space-xxs) var(--space-sm-minus);
    background: var(--color-bg-lavender);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: var(--space-sm-minus);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    margin-bottom: calc(var(--space-xs) * 1.7);
}

.usp-box__eyebrow i {
    font-size: var(--fs-small);
}

.usp-box__title {
    font-family: var(--font-serif);
    font-size: clamp(var(--space-md), 3vw, var(--space-ml));
    color: var(--color-primary);
    line-height: var(--lh-120);
    margin: 0;
    letter-spacing: var(--ls-tight);
}

.tabs-usp {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-sm) * 1.25);
}

.tabs-usp__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-xxs) * 1.4);
    margin: var(--space-none);
    padding: var(--space-none);
    border: none;
}

.tabs-usp__tab {
    display: flex;
    align-items: center;
    gap: calc(var(--space-xs) * 1.7);
    width: 100%;
    padding: var(--space-sm-minus) var(--space-sm-minus);
    background: var(--color-bg-cream);
    border: none;
    border-radius: calc(var(--space-xs) * 1.7);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text-body);
    text-align: left;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.tabs-usp__tab:hover {
    background: var(--color-bg-lavender);
}

.tabs-usp__tab.is-active {
    background: var(--surface-ink);
    color: var(--color-white);
    transform: translateX(var(--space-px-2));
}

.tabs-usp__tab:focus-visible {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--space-px-2);
}

.tabs-usp__tab-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-xs) * 4.5);
    height: calc(var(--space-xs) * 4.5);
    background: var(--surface-elevated);
    color: var(--color-primary);
    border-radius: var(--radius-circle);
    font-size: calc(var(--space-sm) * 1.1);
    flex-shrink: 0;
    transition: background-color var(--duration-linear) var(--ease-linear), color var(--duration-linear) var(--ease-linear);
}

.tabs-usp__tab.is-active .tabs-usp__tab-ico {
    background: var(--color-white-opacity-18);
    color: var(--color-white);
}

.tabs-usp__tab-text {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-xxs) * 0.4);
    flex: 1;
    min-width: 0;
}

.tabs-usp__tab-title {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-btn);
    line-height: var(--lh-120);
}

.tabs-usp__tab-meta {
    font-size: calc(var(--fs-small) * 0.9);
    opacity: 0.7;
    line-height: var(--lh-120);
}

.tabs-usp__tab-arrow {
    opacity: 0;
    transform: translateX(var(--translate-px-neg-6));
    transition: opacity var(--duration-linear) var(--ease-linear), transform var(--duration-linear) var(--ease-linear);
    font-size: var(--fs-btn);
    flex-shrink: 0;
}

.tabs-usp__tab.is-active .tabs-usp__tab-arrow {
    opacity: 1;
    transform: translateX(0);
}

.tabs-usp__panels {
    position: relative;
    background: var(--color-bg-cream);
    border-radius: calc(var(--space-xs) * 2.5);
    padding: var(--space-md);
    min-height: var(--size-sustainability-subgrid-img-h);
}

.tabs-usp__panel {
    display: none;
    animation: var(--animation-fade-in-y);
    color: var(--color-text-body);
}

.tabs-usp__panel.is-active {
    display: block;
}

.tabs-usp__panel-title {
    font-family: var(--font-serif);
    font-size: calc(var(--space-xs) * 2.4);
    color: var(--color-primary);
    line-height: var(--lh-125);
    margin: var(--space-xs) var(--space-none) var(--space-xs);
}

.tabs-usp__panel p {
    font-size: calc(var(--fs-btn) * 0.95);
    line-height: var(--lh-155);
    margin: var(--space-none) var(--space-none) calc(var(--space-xs) * 1.7);
}

.tabs-usp__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm-minus);
    padding-bottom: calc(var(--space-xs) * 1.7);
    border-bottom: var(--border-thin) dashed var(--color-bg-input);
}

.tabs-usp__stat-num {
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-parallax-stat);
    line-height: var(--lh-100);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-tighter);
}

.tabs-usp__stat-label {
    font-size: calc(var(--fs-small) * 0.9);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    opacity: 0.75;
    line-height: var(--lh-120);
}

.tabs-usp__chips {
    list-style: none;
    padding: var(--space-none);
    margin: var(--space-none);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxs);
}

.tabs-usp__chips li {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xxs) var(--space-sm-minus);
    background: var(--surface-elevated);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: calc(var(--fs-small) * 0.9);
    font-weight: var(--fw-medium);
    border: var(--border-thin) solid var(--color-bg-input);
}

.tabs-usp__chips li::before {
    content: "✦";
    margin-right: var(--space-xxs);
    font-size: calc(var(--fs-small) * 0.8);
    opacity: 0.6;
}

.usp-box__cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
    margin-top: var(--space-sm);
}

.usp-box__cta-link {
    color: var(--color-primary);
    opacity: 0.75;
    text-decoration: none;
    font-size: var(--fs-small);
    transition: opacity var(--duration-linear) var(--ease-linear);
}

.usp-box__cta-link:hover {
    opacity: 1;
}



@media (min-width: 768px) {
    .usp-box__cta {
        flex-direction: row;
        align-items: center;
        gap: var(--space-sm);
    }
}

@media (max-width: 767px) {

    /* Boczny padding pojemnika na mobile */
    .container {
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }

    /* Minimalne paddingi footera na mobile */
    .cc-footer-wrapper.container,
    .site-footer-wrapper.container {
        padding-left: var(--space-technical-pixel);
        padding-right: var(--space-technical-pixel);
        padding-bottom: var(--space-technical-pixel);
    }

    /* Usuń sztuczną lukę pod footerem */
    body {
        padding-bottom: var(--space-technical-pixel);
    }

    .parallax-usp {
        min-height: auto;
        padding: var(--space-lg) 0;
    }

    .parallax-usp__box {
        max-width: 100%;
        margin: 0;

    }
}



/* =========================================================================
   📦 MODUŁ: src/css/responsive-index.css
   ========================================================================= */

/* ============================================= */
/* MOBILE RESPONSIVE — index.html fixes          */
/* ============================================= */

/* Grid helpers — stack na mobile */
@media (max-width: 767px) {

    /* Nawigacja dotyka krawędzi okna */
    .nav-sticky {
        padding-top: 0;
    }

    .grid-2-cols,
    .grid-3-cols {
        grid-template-columns: 1fr;
    }

    .grid-3-cols.gap-md {
        gap: var(--space-xs);
    }

    /* Gap-xl zbyt duży na małych ekranach */
    .gap-xl {
        gap: var(--space-sm-minus);
    }

    /* Poprawka "grid blowout" (ucinany moduł tabeli) */
    .grid-2-cols>div,
    .grid-3-cols>div {
        min-width: 0;
        max-width: 100%;
    }

    .table-responsive {
        max-width: 100%;
    }

    .table-ds th,
    .table-ds td {
        white-space: normal;
        word-wrap: break-word;
    }

    /* Sekcja SEO: usunięcie gigantycznego paddingu dla textowych kart na mobile */
    section.card {
        padding: 0;
    }

    /* Przycisk za szeroki na mobile — dopasuj do kontenera */
    .text-center .btn {
        max-width: 100%;
        white-space: normal;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* Sala Weselna — flex, zdjęcie pod nagłówkiem h3 na mobile */
    .card .grid-2-cols {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm-minus);
    }

    /* Lewa kolumna (tekst) — rozbij na osobne bloki */
    .card .grid-2-cols>.flex-col:first-child {
        display: contents;
    }

    /* h3 + opis — na górze (order 1) */
    .card .grid-2-cols>.flex-col:first-child>div:first-child {
        order: 1;
    }

    /* Zdjęcie (prawa kolumna) — zaraz po nagłówku (order 2) */
    .card .grid-2-cols>.flex-col:last-child {
        order: 2;
    }

    /* Feature badges + przycisk — po zdjęciu (order 3, 4) */
    .card .grid-2-cols>.flex-col:first-child>.grid-2-cols-always {
        order: 3;
    }

    .card .grid-2-cols>.flex-col:first-child>div:last-child {
        order: 4;
    }

    /* Story cards (3 filary) & Blog cards — Poziomy scroll (karuzela) na mobile */
    .story-grid,
    .blog-section-header+.grid-3-cols {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: var(--space-md);
        padding-bottom: var(--space-sm);
        /* Wypuszczenie poza padding kontenera by scroll chował się przy krawędzi ekranu */
        width: calc(100% + var(--space-xs) * 2);
        margin-left: calc(var(--space-xs) * -1);
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }

    .story-grid::-webkit-scrollbar,
    .blog-section-header+.grid-3-cols::-webkit-scrollbar {
        display: none;
    }

    .story-grid>*,
    .blog-section-header+.grid-3-cols>* {
        flex: 0 0 85%;
        scroll-snap-align: center;
        max-width: 85%;
    }

    /* Blog section header — przycisk pod tytułem */
    .blog-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    /* FAQ grid — więcej miejsca między pytaniami */
    .faq-grid {
        gap: var(--space-md);
    }

    /* FAQ contact box — nie jest zbyt ściśnięty */
    .faq-contact-box .card {
        padding: var(--space-md);
    }

    /* CC Footer grid — 1 kolumna na mobile */
    .cc-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    @media (max-width: 500px) {
        .cc-footer-grid {
            gap: var(--space-none);
        }
    }

    /* CC Footer top — stack na mobile */
    .cc-footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Duże karty z p-card — mniejszy padding (blog, FAQ itd.) */
    .p-card {
        padding: var(--space-md);
    }
}

/* Sala Weselna — padding jak .service-card (Imprezy firmowe) */
.card.bg-light-purple.p-card {
    padding: var(--space-ml);
}

.card.bg-light-purple .grid-2-cols-always .feature-badge {
    width: 100%;
    justify-content: flex-start;
}

/* Tabela dojazdu — scroll ok, ale mniejszy padding komórek */
.table-ds th,
.table-ds td {
    padding: var(--space-xs) var(--space-sm-minus);
    font-size: var(--fs-small);
}

/* Hero info desc — nie za mały */
.hero-info-desc {
    font-size: var(--fs-body);
    line-height: var(--lh-160);
}

/* Service section — margines górny */
.service-section {
    margin-top: var(--space-md);
}

/* USP Parallax — box fill całą szerokość z paddingiem */
.parallax-usp__content {
    padding: var(--space-md) var(--space-sm);
}

/* USP Tabs — mniejsze pady */
.tabs-usp__panels {
    min-height: var(--size-min-h-banner);
    padding: var(--space-md);
}

/* Tablet — drobne poprawki */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Grid 3-kolumnowy -> 2 kolumny na tablecie */
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Story grid -> 2 kolumny */
    .story-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CC Footer grid -> 2 kolumny */
    .cc-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }
}

/* --- Utilities for Reviews Layout --- */
.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.uppercase-text {
    text-transform: uppercase;
    letter-spacing: var(--ls-medium);
}

.w-1 {
    width: var(--space-px-4);
}

.radius-xs {
    border-radius: var(--radius-xs);
}

.bg-warning {
    background-color: var(--color-warning);
}

.gap-none {
    gap: 0;
}

.gap-xs {
    gap: var(--space-xs);
}

.gap-sm {
    gap: var(--space-sm);
}

.self-stretch {
    align-self: stretch;
}


/* =========================================================================
   📦 MODUŁ: src/css/theme-business.css
   ========================================================================= */

/* ============================================================ */
/* THEME BUSINESS — Wsparcie dla stopki stron biznesowych       */
/* Spójny ze standardowym Design Systemem (fioletowo-kremowym)  */
/* Kontroluje wersję biznesową stopki                           */
/* ============================================================ */

/* Ukrywanie/pokazywanie wariantów stopki w motywie biznesowym */
.cc-footer-cta--business {
    display: none;
}

.theme-business .cc-footer-cta--wedding {
    display: none;
}

.theme-business .cc-footer-cta--business {
    display: block;
}


/* =========================================================================
   📦 MODUŁ: src/css/events.css
   ========================================================================= */

/* ============================================================ */
/* NEW EVENTS PRESENTATION (KROK 1)                             */
/* ============================================================ */
.events-presentation-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

.events-banners-viewport {
    position: relative;
    width: 100%;
    height: auto;
    min-height: var(--size-infra-image-h);
    border-radius: var(--radius-ml);
    overflow: hidden;
    background-color: var(--surface-ink-strong);
}

.events-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-1);
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.events-banner.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: var(--z-2);
}

.events-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: var(--z-1);
    transition: transform 1.2s ease-out;
}

.events-banner.active .events-banner-bg {
    transform: scale(1.03);
}

.events-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-dark-purple-opacity-90) 0%, var(--color-dark-purple-opacity-70) 50%, var(--color-black-opacity-40) 100%);
    z-index: var(--z-2);
}

.events-banner-content {
    position: relative;
    z-index: var(--z-3);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-lg);
    width: 100%;
    height: 100%;
    align-items: center;
}

@media (min-width: 1024px) {
    .events-banner-content {
        grid-template-columns: 1.2fr 1fr;
        padding: var(--space-xl) var(--space-xxl);
    }
}

.events-banner-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.events-badge {
    background-color: var(--color-white-opacity-15);
    color: var(--color-white);
    backdrop-filter: blur(var(--blur-xs));
    -webkit-backdrop-filter: blur(var(--blur-xs));
    border: var(--border-thin) solid var(--color-white-opacity-25);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    padding: var(--space-px-6) var(--space-14);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: var(--ls-px-1);
}

.events-banner-text h4 {
    margin-bottom: var(--space-xs);
    color: var(--color-white);
}

.events-banner-text p {
    color: var(--color-white-opacity-85);
    font-size: var(--fs-events-desc);
    line-height: var(--lh-160);
    margin-bottom: var(--space-lg);
}

.events-banner-media {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: var(--perspective-card);
}

.events-float-card {
    width: 100%;
    max-width: var(--size-float-card-max-w);
    border-radius: var(--radius-lg);
    background: var(--color-white-opacity-8);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: var(--border-glass);
    padding: var(--space-sm-minus);
    transform: rotateY(-8deg) rotateX(8deg);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    animation: floatAnimation 6s ease-in-out infinite alternate;
}

@keyframes floatAnimation {
    0% {
        transform: rotateY(-8deg) rotateX(8deg) translateY(0);
    }
    100% {
        transform: rotateY(-4deg) rotateX(4deg) translateY(var(--translate-px-neg-10));
    }
}

.events-float-card:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}

.events-float-card-inner {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.events-float-img {
    width: 100%;
    height: var(--size-float-card-img-h);
    object-fit: cover;
    display: block;
}

.events-float-desc {
    padding: var(--space-sm);
    background: var(--color-dark-purple-opacity-85);
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    color: var(--color-white);
}

.float-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
}

.float-text {
    font-size: var(--fs-small);
    opacity: 0.8;
}

/* Panel Tabs */
.events-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    background: var(--color-bg-alt);
    padding: var(--space-10);
    border-radius: var(--radius-lg);
    border: var(--border-thin) solid var(--border-color-black-05);
}

.events-tab-control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm-minus) var(--space-20);
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    font-size: var(--fs-body);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.events-tab-control i {
    font-size: var(--fs-tab-icon);
    transition: transform 0.3s ease;
}

.events-tab-control:hover {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

.events-tab-control:hover i {
    transform: scale(1.15);
}

.events-tab-control.active {
    background: var(--surface-ink);
    color: var(--color-white);
}



/* =========================================================================
   📦 MODUŁ: src/css/logistics.css
   ========================================================================= */

/* ============================================================ */
/* NEW LOGISTICS SECTION (KROK 3)                               */
/* ============================================================ */
.infra-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
    width: 100%;
}

@media (min-width: 1024px) {
    .infra-container {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-xxl);
    }
    .infra-accordion-wrapper {
        grid-column: span 5;
    }
    .infra-preview-container {
        grid-column: span 7;
    }
}

.infra-accordion-wrapper {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.infra-subtitle-lead {
    font-family: var(--font-sans);
    font-size: var(--fs-logistics-lead);
    line-height: var(--lh-160);
    color: var(--color-primary-dark);
    opacity: 0.8;
    margin-bottom: var(--space-lg);
    font-weight: var(--fw-normal);
}

.infra-accordion {
    display: flex;
    flex-direction: column;
    border-top: var(--space-technical-pixel) var(--border-style-solid) var(--border-color-default);
}

.infra-accordion-item {
    border-bottom: var(--space-technical-pixel) var(--border-style-solid) var(--border-color-default);
    background: var(--color-transparent);
    overflow: hidden;
    transition: all 0.3s ease;
}

.infra-accordion-item:last-child {
    border-bottom: var(--space-technical-pixel) var(--border-style-solid) var(--border-color-default);
}

.infra-accordion-trigger {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: var(--space-md) var(--space-none);
    background: var(--color-transparent);
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
}

.infra-accordion-trigger:focus-visible {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--space-3xs);
}

.infra-accordion-title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.infra-accordion-title-wrapper i {
    font-size: var(--fs-icon-md);
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.infra-accordion-item.active .infra-accordion-title-wrapper i {
    color: var(--color-primary);
    transform: scale(1.1);
}

.infra-title {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-logistics-title);
    color: var(--color-primary-dark);
    transition: all 0.3s ease;
}

.infra-accordion-item.active .infra-title {
    color: var(--color-primary-dark);
    font-weight: var(--fw-bold);
}

.infra-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.infra-accordion-item.active .infra-accordion-content {
    max-height: var(--size-accordion-max-h);
}

.infra-accordion-content p {
    padding: var(--space-none) var(--space-none) var(--space-md) var(--size-icon-nav-sm);
    margin: var(--space-none);
    color: var(--color-text-muted);
    opacity: 0.85;
    line-height: var(--lh-160);
    font-size: var(--fs-body);
}

/* Podgląd po prawej */
.infra-preview-container {
    width: 100%;
}

.infra-image-wrapper {
    position: relative;
    width: 100%;
    height: var(--size-infra-image-h);
    border-radius: var(--radius-img-lg);
    overflow: hidden;
}

.infra-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Scrim gradientowy (Faza 4): kontrast statystyk bez cieni tekstu */
    background: var(--scrim-stats);
    z-index: var(--z-1);
    pointer-events: none;
}

.infra-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.infra-image-wrapper:hover .infra-preview-img {
    transform: scale(1.02);
}

/* Statystyki na zdjęciu */
.infra-stats-overlay {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    display: flex;
    gap: var(--space-xl);
    z-index: var(--z-2);
    padding: var(--space-xs) var(--space-sm);
}

.infra-stat-item {
    display: flex;
    flex-direction: column;
    color: var(--color-white);
}

.infra-stat-number {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-110);
}

.infra-stat-label {
    font-size: var(--fs-small);
    opacity: 0.85;
}

/* Karta info na zdjeciu (Faza 4: pelny ton powierzchni zamiast glass) */
.infra-glass-card {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    z-index: var(--z-2);
    background: var(--surface-card);
    border: var(--border-thin) solid var(--border-color-default);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    max-width: var(--size-glass-card-max-w);
    transform: translateY(0);
    transition: all 0.4s ease;
}

.infra-image-wrapper:hover .infra-glass-card {
    transform: translateY(var(--translate-hover-up));
}

.infra-glass-plus {
    color: var(--color-success);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-px-6);
    display: inline-block;
    font-weight: var(--fw-bold);
}

.infra-glass-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-xxs);
}

.infra-glass-text {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--color-text);
    margin: 0;
    line-height: var(--lh-150);
    opacity: 0.95;
}

/* ============================================================ */
/* NEW SUMMARY CATERING CART (FORMULARZ WYCENY)                 */
/* ============================================================ */
.catering-summary-cart {
    background: var(--surface-card);
    border: var(--border-thin) solid var(--color-black-opacity-8);
    border-radius: var(--radius-ml);
    padding: var(--space-md) var(--space-lg);
    width: 100%;
    margin-bottom: var(--space-md);
    display: block; /* Zawsze widoczny */
    transition: all 0.3s ease;
}

/* Klasa pomocnicza ukrywania elementów koszyka */
.is-hidden {
    display: none;
}

/* DYNAMIC EMPTY STATE W KOSZYKU */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    border: var(--border-thick) var(--border-style-dashed) var(--border-color-summary-dashed);
    background: var(--color-primary-opacity-2);
    border-radius: var(--radius-md);
    margin: var(--space-sm) 0;
    transition: all 0.3s ease;
}

.cart-empty-icon {
    font-size: var(--fs-emoji-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
    animation: pulseSmooth 2.5s infinite ease-in-out;
}

.cart-empty-title {
    font-size: var(--fs-body-large);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-xs);
}

.cart-empty-desc {
    font-size: var(--fs-body-small);
    color: var(--color-text-muted);
    max-width: var(--size-plate-wrapper-sm);
    line-height: var(--lh-140);
    margin: 0;
}

@keyframes pulseSmooth {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

.cart-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-large);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    border-bottom: var(--border-subtle);
    padding-bottom: var(--space-10);
}

.cart-title i {
    color: var(--color-primary);
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-10) var(--space-14);
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-black-opacity-4);
    background: var(--color-bg-alt);
    transition: all 0.2s ease;
}

.cart-item:hover {
    border-color: rgba(var(--color-primary-rgb), 0.15);
    background: var(--surface-elevated);
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.cart-item-name {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    color: var(--color-text);
}

.cart-item-weight {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.cart-qty-selector {
    display: flex;
    align-items: center;
    background: var(--surface-elevated);
    border: var(--border-thin) solid var(--color-black-opacity-10);
    border-radius: var(--radius-sm);
    padding: var(--space-3xs);
}

.cart-qty-control {
    background: transparent;
    border: none;
    cursor: pointer;
    width: var(--space-md);
    height: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
}

.cart-qty-control:hover {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

.cart-qty-input {
    width: var(--size-icon-nav);
    border: none;
    background: transparent;
    text-align: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    color: var(--color-primary-dark);
    -moz-appearance: textfield;
}

.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item-price {
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    color: var(--color-primary-dark);
    min-width: var(--size-price-min-w);
    text-align: right;
}

.cart-item-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-remove:hover {
    color: var(--color-error);
    transform: scale(1.15);
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: var(--border-subtle);
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
}

.cart-total-price {
    font-size: var(--fs-body);
    color: var(--color-text);
}

.cart-total-price strong {
    font-size: var(--fs-body-large);
    color: var(--color-primary-dark);
}

.cart-clear-control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    transition: color 0.2s ease;
    padding: var(--space-px-6) var(--space-sm-minus);
    border-radius: var(--radius-sm);
}

.cart-clear-control:hover {
    color: var(--color-error);
    background: var(--color-error-opacity-5);
}

/* Plakietki i statystyki */
.stats-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-md);
}

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

.stats-badge-card {
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
}

.stats-badge-card .stats-num {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--card-accent);
}

.stats-badge-card .stats-label {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--card-accent);
}

/* Premium dark quote block */
.premium-quote-section {
    background-color: var(--color-footer-bg);
    border-radius: var(--radius-ml);
    padding: var(--space-xl) var(--space-lg);
    color: var(--color-footer-text);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.premium-quote-spark {
    font-size: var(--fs-emoji-xl);
    color: var(--color-footer-accent);
    margin-bottom: var(--space-md);
    line-height: var(--lh-100);
}

.premium-quote-text {
    font-family: var(--font-serif);
    font-size: var(--fs-premium-quote);
    font-style: italic;
    line-height: var(--lh-160);
    max-width: var(--size-form-max-w);
    margin: 0 auto var(--space-lg) auto;
    color: var(--color-footer-text);
    border-left: none;
    padding-left: 0;
}

.premium-quote-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.premium-quote-avatar {
    width: var(--size-avatar-sm);
    height: var(--size-avatar-sm);
    border-radius: var(--radius-circle);
    border: var(--border-thick) solid var(--color-footer-accent);
    object-fit: cover;
}

.premium-quote-name {
    font-weight: var(--fw-bold);
    color: var(--color-footer-accent);
}

.premium-quote-desc {
    font-size: var(--fs-small);
    color: var(--color-footer-text);
    opacity: 0.8;
}

.panoramic-image-wrapper {
    width: 100%;
    height: 100%;
    min-height: var(--size-plate-wrapper);
    border-radius: var(--radius-ml);
    overflow: hidden;
}

.panoramic-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* =========================================================================
   📦 MODUŁ: src/css/regional-map.css
   ========================================================================= */

/* ============================================================ */
/* INTERACTIVE REGIONAL MAP & PINS                              */
/* ============================================================ */
.interactive-map {
    position: relative;
    width: 100%;
    height: var(--size-map-h);
    background-color: transparent;
    overflow: visible;
    border: none;
    background-image: var(--bg-map-dots);
    background-size: var(--bg-map-dots-size);
    background-position: var(--bg-map-dots-position);
}



/* Pinezki */
.map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: var(--z-10);
    cursor: pointer;
}

.map-pin__icon {
    font-size: var(--fs-xl);
    color: var(--color-primary);
    transition: transform var(--transition-bounce), color var(--transition-base);
    display: block;
}

.map-pin:hover .map-pin__icon {
    transform: scale(1.2);
    color: var(--color-primary-light);
}

/* Baza domowa: Logo W z pulsującym radarem w tle */
.map-pin--home {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: var(--z-15);
}

.map-pin__home-logo {
    width: var(--size-avatar-md);
    height: var(--size-avatar-md);
    background-color: var(--surface-ink);
    color: var(--color-white);
    border: var(--border-thick) solid var(--color-white);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: var(--fs-map-logo);
    font-weight: var(--fw-bold);
    position: relative;
    z-index: var(--z-2);
    user-select: none;
}

.map-pin__home-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size-avatar-md);
    height: var(--size-avatar-md);
    border-radius: var(--radius-circle);
    background-color: var(--color-primary-opacity-35);
    z-index: var(--z-1);
    animation: homePulse 2.5s infinite ease-out;
    pointer-events: none;
}

@keyframes homePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.4);
        opacity: 0;
    }
}


/* Tooltipy do pinezek */
.map-pin__tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background-color: var(--color-bg-light-purple);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    border: var(--border-default);
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3xs);
}

.map-pin__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--border-heavy);
    border-style: solid;
    border-color: var(--color-bg-light-purple) transparent transparent transparent;
}

.map-pin:hover .map-pin__tooltip {
    transform: translateX(-50%) translateY(var(--translate-px-neg-2));
    z-index: var(--z-20);
}

.tooltip-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    color: var(--color-primary);
}

.tooltip-desc {
    font-size: var(--fs-11);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    gap: var(--space-px-3);
}



/* Pozycjonowanie pinezek (Chocianów w centrum: top 50%, left 50%) */
.pin--chocianow { top: 50%; left: 50%; }
.pin--chojnow { top: 72%; left: 32%; }
.pin--lubin { top: 38%; left: 75%; }
.pin--polkowice { top: 22%; left: 62%; }
.pin--legnica { top: 78%; left: 62%; }
.pin--glogow { top: 12%; left: 45%; }
.pin--przemkow { top: 32%; left: 22%; }
.pin--scinawa { top: 48%; left: 90%; }
.pin--boleslawiec { top: 82%; left: 12%; }

/* Kręgi odległości regionalnej */
.map-range-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: var(--border-thin) var(--border-style-dashed) var(--border-color-default);
    border-radius: var(--radius-circle);
    pointer-events: none;
    z-index: var(--z-1);
}

.map-range-ring::after {
    content: attr(data-distance);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    background-color: var(--surface-elevated);
    padding: var(--space-px-2) var(--space-px-6);
    font-size: var(--fs-9);
    color: var(--color-primary-opacity-40);
    border: var(--border-thin) solid var(--border-color-dark-06);
    border-radius: var(--radius-badge);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

/* Wymiary okręgów na desktopie */
.ring--10km { width: var(--size-ring-10km); height: var(--size-ring-10km); }
.ring--20km { width: var(--size-ring-20km); height: var(--size-ring-20km); }
.ring--30km { width: var(--size-ring-30km); height: var(--size-ring-30km); }
.ring--40km { width: var(--size-ring-40km); height: var(--size-ring-40km); }

/* Regionalna lista miast na mobile jako zastępstwo radaru */
.regional-list {
    display: none;
}

@media (max-width: 1023px) {
    .interactive-map {
        display: none; /* Całkowicie ukrywamy nieczytelny na mobile radar */
    }
    
    .regional-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--size-regional-list-col-min), 1fr));
        gap: var(--space-sm);
        margin-top: var(--space-md);
        width: 100%;
    }
    
    .regional-list-item {
        display: flex;
        align-items: center;
        background-color: var(--surface-card);
        border: var(--border-default);
        border-radius: var(--radius-md);
        padding: var(--space-sm);
        transition: all 0.3s ease;
    }
    
    .regional-list-item:hover {
        border-color: var(--color-primary-light);
    }
    
    .regional-list-item__content {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
        text-align: left;
    }
    
    .regional-list-item__city {
        font-weight: var(--fw-bold);
        font-size: var(--fs-small);
        color: var(--color-primary);
    }
    
    .regional-list-item__time {
        font-size: var(--fs-11);
        color: var(--color-text-muted);
        font-weight: var(--fw-medium);
        display: flex;
        align-items: center;
        gap: var(--space-3xs);
    }
}



/* =========================================================================
   📦 MODUŁ: src/css/catering.css
   ========================================================================= */

/* ==========================================================================
   PREMIUM CATERING HERO — Układ Premium z makiety
   ========================================================================== */

.premium-catering-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    min-height: var(--size-hero-catering-min-h);
    background: transparent;
    border-radius: var(--radius-xl);
    padding: var(--space-xl) 0;
    overflow: hidden;
    border: none;
}

.premium-catering-hero::before {
    display: none;
}

.premium-catering-hero__left {
    position: relative;
    z-index: var(--z-2);
    padding-right: var(--space-md);
}

.premium-catering-hero__right {
    position: relative;
    z-index: var(--z-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Kolumna lewa - Teksty */
.premium-hero-eyebrow {
    display: inline-block;
    font-size: var(--fs-ui);
    text-transform: uppercase;
    letter-spacing: var(--ls-px-2);
    color: var(--color-primary-light);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xs);
}

.premium-hero-title {
    font-family: var(--font-serif);
    font-size: var(--fs-catering-hero);
    color: var(--color-primary);
    line-height: var(--lh-115);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-sm);
}

.premium-hero-subtitle {
    font-size: var(--fs-h5);
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    line-height: var(--lh-140);
    margin-bottom: var(--space-xs);
}

.premium-hero-desc {
    font-size: var(--fs-btn);
    color: var(--color-text-body);
    line-height: var(--lh-160);
    margin-bottom: var(--space-md);
}

.premium-hero-actions {
    margin-bottom: var(--space-lg);
}

.chef-recommendation {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-none);
    background: transparent;
    border: none;
    max-width: var(--size-chef-rec-max-w);
}

.chef-recommendation__avatar-wrapper {
    width: var(--size-avatar-md);
    height: var(--size-avatar-md);
    border-radius: var(--radius-circle);
    overflow: hidden;
    border: var(--border-thick) solid var(--color-white);
}

.chef-recommendation__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chef-recommendation__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-technical-pixel);
}

.chef-recommendation__title {
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    font-weight: var(--fw-semibold);
}

.chef-recommendation__link {
    font-size: var(--fs-ui);
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-px-3);
    transition: color var(--transition-base);
}

.chef-recommendation__link:hover {
    color: var(--color-primary-light);
}

.chef-recommendation__link i {
    transition: transform var(--transition-base);
}

.chef-recommendation__link:hover i {
    transform: translateX(var(--space-px-3));
}

/* Kolumna prawa - Talerz */
.premium-hero__plate-wrapper {
    position: relative;
    width: var(--size-plate-wrapper);
    height: var(--size-plate-wrapper);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-hero__plate {
    width: var(--size-plate);
    height: var(--size-plate);
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: var(--border-heavy) solid var(--color-white);
    animation: var(--animation-float-plate);
    z-index: var(--z-2);
}

/* Dryfujące warzywa i liście */
.floating-item {
    position: absolute;
    pointer-events: none;
    z-index: var(--z-3);
}

.floating-item__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.floating-tomato {
    width: var(--size-floating-tomato);
    height: var(--size-floating-tomato);
    top: 5%;
    left: 8%;
    animation: var(--animation-float-tomato);
}

.floating-leaf-1 {
    width: var(--size-floating-leaf-1);
    height: var(--size-floating-leaf-1);
    bottom: 8%;
    left: 5%;
    animation: var(--animation-float-leaf-1);
}

.floating-leaf-2 {
    width: var(--size-floating-leaf-2);
    height: var(--size-floating-leaf-2);
    bottom: 12%;
    right: 5%;
    animation: var(--animation-float-leaf-2);
}



/* Karuzela lokalnych składników */
.local-carousel {
    width: 100%;
    max-width: var(--size-carousel-max-w);
    background: linear-gradient(135deg, var(--color-menu-widget-bg-start) 0%, var(--color-menu-widget-bg-end) 100%);
    border: var(--border-testimonial);
    border-radius: var(--radius-md);
    padding: var(--space-20) var(--space-md);
    color: var(--color-white);
}

.local-carousel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: var(--space-sm-minus);
    border-bottom: var(--border-thin) solid var(--color-white-opacity-10);
    padding-bottom: var(--space-xs);
}

.local-carousel__eyebrow {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-px-1-5);
    color: var(--color-white-opacity-60);
}

.local-carousel__nav {
    display: flex;
    gap: var(--space-xs);
}

.carousel-control {
    background: var(--color-white-opacity-5);
    border: var(--border-thin) solid var(--color-white-opacity-18);
    color: var(--color-white);
    width: var(--size-icon-nav);
    height: var(--size-icon-nav);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
}

.carousel-control i {
    font-size: var(--fs-caption);
}

.carousel-control:hover {
    background-color: var(--color-white-opacity-15);
    border-color: var(--color-white-opacity-40);
}

.local-carousel__body {
    position: relative;
    min-height: var(--size-carousel-body-min-h);
}

.carousel-item {
    display: none;
    opacity: 0;
    gap: var(--space-sm);
    align-items: center;
}

.carousel-item--active {
    display: flex;
    opacity: 1;
    animation: var(--animation-carousel-fade-in);
}

.carousel-item__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-avatar-lg);
    height: var(--size-avatar-lg);
    background-color: transparent;
    border: var(--border-base) solid color-mix(in srgb, var(--color-white) 25%, transparent);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: var(--size-avatar-md);
    flex-shrink: 0;
}



.carousel-item__title {
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    line-height: var(--lh-120);
    color: var(--color-white);
    margin-bottom: var(--space-xxs);
}

.carousel-item__desc {
    font-size: var(--fs-small);
    line-height: var(--lh-145);
    color: var(--color-white);
    opacity: var(--opacity-muted);
    margin-bottom: 0;
}

/* ==========================================================================
   FORMULARZ ZAMÓWIEŃ CATERINGOWYCH
   ========================================================================== */

.catering-order-section {
    position: relative;
}

.catering-order-card {
    background-color: var(--surface-card);
    border: var(--border-thin) solid var(--color-accent-green);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.catering-order-form {
    max-width: var(--size-form-max-w);
    margin: 0 auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* Baza .form-group/.form-label przeniesiona do forms.css (konsolidacja Fazy 1).
   Tu zostaje wylacznie modyfikator siatki cateringu. */
.form-group--full {
    grid-column: span 2;
}

.form-input,
.form-select,
.form-textarea {
    background-color: var(--color-bg-green);
    border: var(--border-base) var(--border-style-solid) var(--border-color-default);
    border-radius: var(--radius-sm);
    padding: var(--space-sm-minus) var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-btn);
    color: var(--color-text-main);
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary-light);
    background-color: var(--form-control-bg-focus);
    outline: var(--border-thick) solid var(--color-primary-light);
    outline-offset: var(--space-3xs);
}

.form-textarea {
    min-height: var(--size-textarea-min);
    resize: vertical;
}

.form-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.form-checkbox {
    width: var(--size-checkbox-input);
    height: var(--size-checkbox-input);
    border-radius: var(--radius-xs);
    border: var(--border-base) var(--border-style-solid) var(--border-color-summary-dashed);
    accent-color: var(--color-primary);
    cursor: pointer;
    margin-top: var(--space-px-3);
}

.form-checkbox-label {
    font-size: var(--fs-ui);
    line-height: var(--lh-145);
    color: var(--color-text-body);
    cursor: pointer;
}



/* ==========================================================================
   RWD DLA NOWYCH SEKCJI CATERINGU
   ========================================================================== */

@media (max-width: 1023px) {
    .premium-catering-hero {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg) 0;
        min-height: auto;
    }
    
    .premium-catering-hero::before {
        display: none;
    }
    
    .premium-catering-hero__left {
        padding-right: 0;
        margin-bottom: var(--space-md);
    }
    
    .premium-catering-hero__right {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }
    
    .premium-hero__plate-wrapper {
        width: var(--size-plate-wrapper-sm);
        height: var(--size-plate-wrapper-sm);
    }

    .premium-hero__plate {
        width: var(--size-plate-sm);
        height: var(--size-plate-sm);
    }

    .floating-tomato { width: var(--size-floating-tomato-sm); height: var(--size-floating-tomato-sm); }
    .floating-leaf-1 { width: var(--size-floating-leaf-1-sm); height: var(--size-floating-leaf-1-sm); }
    .floating-leaf-2 { width: var(--size-floating-leaf-2-sm); height: var(--size-floating-leaf-2-sm); }
}

@media (max-width: 767px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
    
    .form-group--full {
        grid-column: span 1;
    }
    
    .catering-order-card {
        padding: var(--space-md);
    }
    
    .premium-hero-title {
        font-size: var(--fs-catering-mobile-h1);
    }

    .premium-hero-subtitle {
        font-size: var(--fs-catering-mobile-subtitle);
    }
}

/* ==========================================================================
   INTERAKTYWNY PLANER MENU (CATERING)
   ========================================================================== */

.menu-configurator {
    margin-top: var(--space-md);
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.menu-configurator__title {
    display: block;
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-10);
    text-transform: uppercase;
    letter-spacing: var(--ls-px-1);
}

.menu-configurator__subtitle {
    display: block;
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    color: var(--color-primary-light);
    margin-bottom: var(--space-xs);
    margin-top: var(--space-10);
    text-transform: uppercase;
    letter-spacing: var(--ls-px-half);
}

.menu-configurator__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.menu-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background-color: var(--surface-card);
    border: var(--border-medium);
    border-radius: var(--radius-pill);
    padding: var(--padding-badge);
    cursor: pointer;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--color-text-main);
    transition: all var(--transition-base);
    user-select: none;
}

.menu-option:hover {
    border-color: var(--color-primary-light);
    background-color: var(--color-bg-cream);
}

.menu-option__input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.menu-option__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-checkbox-icon);
    height: var(--size-checkbox-icon);
    border: var(--border-thick) var(--border-style-solid) var(--border-color-hover);
    border-radius: var(--radius-xs);
    transition: all var(--transition-base);
    position: relative;
}

.menu-option--radio .menu-option__box {
    border-radius: var(--radius-circle);
}

.menu-option__input:checked ~ .menu-option__box {
    border-color: var(--color-primary);
    background-color: var(--surface-ink);
}

.menu-option__input:checked ~ .menu-option__box::after {
    content: '';
    position: absolute;
    width: var(--size-checkbox-dot);
    height: var(--size-checkbox-dot);
    background-color: var(--color-white);
}

.menu-option__input:checked ~ .menu-option__box::after {
    border-radius: var(--radius-2xs);
}

.menu-option--radio .menu-option__input:checked ~ .menu-option__box::after {
    border-radius: var(--radius-circle);
}

.menu-option:has(.menu-option__input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-bg-cream);
}

/* Pływający widget podsumowania wyboru menu */
.menu-planner-widget {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%) translateY(var(--size-widget-translate-initial));
    width: calc(100% - var(--size-icon-nav));
    max-width: var(--size-widget-max-w);
    background: linear-gradient(135deg, var(--color-menu-widget-bg-start) 0%, var(--color-menu-widget-bg-end) 100%);
    border: var(--border-testimonial);
    border-radius: var(--radius-pill);
    padding: var(--space-10) var(--space-20);
    z-index: var(--z-100);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    pointer-events: none;
}

.menu-planner-widget--visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.menu-planner-widget__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.menu-planner-widget__info {
    display: flex;
    flex-direction: column;
    color: var(--color-white);
    min-width: 0;
}

.menu-planner-widget__count {
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    gap: var(--space-px-6);
}

.menu-planner-widget__count i {
    color: var(--color-footer-accent);
}

.menu-planner-widget__action {
    white-space: nowrap;
    font-size: var(--fs-caption);
    padding: var(--space-xs) var(--space-sm);
}

/* Wersja mobilna dla widgetu */
@media (max-width: 600px) {
    .menu-planner-widget {
        border-radius: var(--radius-md);
        padding: var(--space-sm-minus) var(--space-sm);
        bottom: var(--space-sm);
    }
    .menu-planner-widget__content {
        flex-direction: column;
        gap: var(--space-xs);
        align-items: stretch;
        text-align: center;
    }
    .menu-planner-widget__info {
        align-items: center;
    }
    .menu-planner-widget__action {
        width: 100%;
        justify-content: center;
    }
}



/* =========================================================================
   📦 MODUŁ: src/css/utilities-helpers.css
   ========================================================================= */

/* ============================================================ */
/* KLASY POMOCNICZE (UTILITY CLASSES) & OPTYMALIZACJA           */
/* ============================================================ */

/* 1. img-cover — Pełne pokrycie obrazem */
.img-cover,
.panoramic-image-card__bg,
.floating-media-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. glass-panel — Rozmycie tła panelu szklanego */
.glass-panel,
.floating-media-card__bottom-glass,
.premium-testimonial-floating-card {
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
}

/* 3. label-caps — Etykiety uppercase z letter-spacing */
.label-caps,
.hero-premium-card__eyebrow,
.minimalist-stats__label,
.panoramic-image-card__quote-tag,
.floating-media-card__stat-label,
.badge-pill-business {
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-bold);
}


/* =========================================================================
   📦 MODUŁ: src/css/business-premium.css
   ========================================================================= */

/* ============================================================ */
/* NEW PREMIUM BUSINESS PAGE LAYOUT CLASSES                     */
/* Inspired by reference screenshots                            */
/* ============================================================ */

/* 1. Hero Premium Card (Slide 1) */
.hero-premium-card {
    background-color: var(--color-footer-bg);
    color: var(--color-white);
    border-radius: var(--radius-ml);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    border: var(--border-testimonial);
}

.hero-premium-card__image-wrapper {
    width: 100%;
    max-width: var(--size-hero-img-max-w);
    height: var(--size-sustainability-subgrid-img-h);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--border-default);
}

.hero-premium-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-premium-card__eyebrow {
    font-size: var(--fs-small);
    color: var(--color-footer-accent);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-xs);
}

.hero-premium-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-premium-hero-title);
    line-height: var(--lh-115);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    max-width: var(--size-hero-premium-max-w);
    margin: 0 auto var(--space-sm) auto;
}

.hero-premium-card__title em,
.hero-premium-card__title span.highlight {
    font-style: italic;
    color: var(--color-footer-accent);
}

.hero-premium-card__bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: left;
    width: 100%;
    margin-top: var(--space-md);
    border-top: var(--border-thin) var(--border-style-solid) var(--border-color-lavender);
    padding-top: var(--space-md);
}

@media (min-width: 768px) {
    .hero-premium-card {
        padding: var(--space-xl) var(--space-lg);
    }
    .hero-premium-card__bottom {
        grid-template-columns: 1.3fr 0.7fr;
        align-items: center;
        gap: var(--space-lg);
    }
}

.hero-premium-card__desc {
    font-size: var(--fs-body);
    color: var(--color-lavender-opacity-85);
    line-height: var(--lh-160);
    margin: 0;
}

.hero-premium-card__actions {
    display: flex;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .hero-premium-card__actions {
        justify-content: flex-end;
    }
}

/* 2. Badge & Pill Accents (Slide 2 & 5) */
.badge-pill-business {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--padding-badge);
    border-radius: var(--radius-pill);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-wider);
    background-color: var(--color-bg-light-purple);
    color: var(--color-primary);
    border: var(--border-medium);
    margin-bottom: var(--space-sm);
    width: fit-content;
}

.badge-pill-business--dark {
    background-color: var(--color-white-opacity-8);
    border-color: var(--border-color-glass);
    color: var(--color-footer-accent);
}

/* 3. Minimalist Stats List (Slide 3) */
.minimalist-stats {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: var(--border-base) var(--border-style-solid) var(--border-color-medium);
}

.minimalist-stats__row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    padding: var(--space-md) var(--space-none);
    border-bottom: var(--border-base) var(--border-style-solid) var(--border-color-medium);
    gap: var(--space-md);
}

.minimalist-stats__label {
    font-size: var(--fs-label);
    color: var(--color-text-muted);
}

.minimalist-stats__value {
    font-family: var(--font-serif);
    font-size: var(--fs-stats-value);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    text-align: right;
}

@media (max-width: 767px) {
    .minimalist-stats__row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        padding: var(--space-sm) var(--space-none);
    }
    .minimalist-stats__value {
        text-align: left;
        font-size: var(--fs-h2);
    }
}

/* 4. Full Width Panoramic Card (Slide 4) */
.panoramic-image-card {
    position: relative;
    border-radius: var(--radius-ml);
    overflow: hidden;
    min-height: var(--size-sustainability-img-min-h);
    display: flex;
    align-items: flex-end;
    padding: var(--space-lg);
    background-color: var(--color-black);
}

.panoramic-image-card__bg {
    opacity: 0.55;
    z-index: var(--z-1);
}

.panoramic-image-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--color-footer-bg-rgb), 0.85) 0%, rgba(var(--color-footer-bg-rgb), 0.2) 100%);
    z-index: var(--z-2);
}

.panoramic-image-card__content {
    position: relative;
    z-index: var(--z-3);
    color: var(--color-white);
    max-width: var(--size-panoramic-max-w);
    text-align: left;
}

.panoramic-image-card__quote-tag {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-widest);
    color: var(--color-footer-accent);
    margin-bottom: var(--space-sm);
}

.panoramic-image-card__quote-tag span.quote-mark {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    line-height: var(--lh-100);
    color: var(--color-white);
    margin-right: var(--space-xxs);
}

.panoramic-image-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-stats-value);
    line-height: var(--lh-125);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    margin: 0;
}

@media (max-width: 767px) {
    .panoramic-image-card {
        min-height: var(--size-panoramic-mobile-min-h);
        padding: var(--space-md);
    }
}

/* 5. Floating Media Card (Slide 5 / 8 right column) */
.floating-media-card {
    position: relative;
    border-radius: var(--radius-ml);
    overflow: hidden;
    width: 100%;
    min-height: var(--size-sustainability-img-min-h);
    height: 100%;
    background-color: var(--color-gray-900);
}

.floating-media-card__image {
    z-index: var(--z-1);
}

.floating-media-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--color-black-opacity-10) 0%, var(--color-black-opacity-55) 100%);
    z-index: var(--z-2);
}

.floating-media-card__top-stats {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    z-index: var(--z-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.floating-media-card__stat {
    display: flex;
    flex-direction: column;
    color: var(--color-white);
}

.floating-media-card__stat-num {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
}

.floating-media-card__stat-label {
    font-size: var(--fs-tiny);
    letter-spacing: var(--ls-wider);
    opacity: 0.9;
}

.floating-media-card__bottom-glass {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    z-index: var(--z-3);
    background: rgba(var(--color-footer-bg-rgb), 0.82);
    border: var(--border-glass);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    color: var(--color-white);
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.floating-media-card__glass-icon {
    background: var(--color-white-opacity-10);
    border-radius: var(--radius-sm);
    padding: var(--space-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h4);
    color: var(--color-footer-accent);
}

.floating-media-card__glass-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.floating-media-card__glass-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    color: var(--color-white);
}

.floating-media-card__glass-desc {
    font-size: var(--fs-caption);
    color: var(--color-lavender-opacity-85);
    line-height: var(--lh-140);
}

@media (max-width: 767px) {
    .floating-media-card {
        min-height: var(--size-floating-media-mobile-min-h);
    }
    .floating-media-card__bottom-glass {
        left: var(--space-xs);
        right: var(--space-xs);
        bottom: var(--space-xs);
        padding: var(--space-xs);
    }
}

/* 6. Accordion Interactive List (Slide 5 / 8 left column) */
.space-accordion-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.space-accordion-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.space-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-none);
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    cursor: pointer;
    border-bottom: var(--border-base) var(--border-style-solid) var(--border-color-medium);
    transition: color var(--transition-base);
}

.space-accordion-header:hover {
    color: var(--color-primary-light);
}

.space-accordion-chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-primary);
}

.space-accordion-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.space-accordion-toggle:checked ~ .space-accordion-content-wrapper {
    max-height: var(--size-accordion-expanded-max-h);
}

.space-accordion-toggle:checked ~ .space-accordion-header {
    border-bottom-color: transparent;
    color: var(--color-primary);
}

.space-accordion-toggle:checked ~ .space-accordion-header .space-accordion-chevron {
    transform: rotate(180deg);
}

.space-accordion-content {
    padding: var(--space-none) var(--space-none) var(--space-md) var(--space-none);
    border-bottom: var(--border-base) var(--border-style-solid) var(--border-color-medium);
}

/* 7. Premium Testimonials Card (Slide 7) */
.premium-testimonial-block {
    background-color: var(--color-footer-bg);
    color: var(--color-white);
    border-radius: var(--radius-ml);
    padding: var(--space-xl) var(--space-md);
    position: relative;
    overflow: hidden;
    border: var(--border-testimonial);
}

.premium-testimonial-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    position: relative;
    z-index: var(--z-2);
}

@media (min-width: 1024px) {
    .premium-testimonial-block {
        padding: var(--space-xl) var(--space-lg);
    }
    .premium-testimonial-inner {
        grid-template-columns: 1.3fr 0.7fr;
        align-items: center;
        gap: var(--space-xl);
    }
}

.premium-testimonial-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: left;
}

.premium-testimonial-right {
    display: flex;
    justify-content: center;
    width: 100%;
}

.premium-testimonial-floating-card {
    background: var(--color-white-opacity-8);
    border: var(--border-glass);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    width: 100%;
    max-width: var(--size-glass-card-max-w);
}

.premium-testimonial-avatar {
    width: var(--size-avatar-lg);
    height: var(--size-avatar-lg);
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: var(--border-3) solid var(--color-footer-accent);
}

.premium-testimonial-name {
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    color: var(--color-white);
}

.premium-testimonial-role {
    font-size: var(--fs-caption);
    color: var(--color-footer-accent);
    font-weight: var(--fw-semibold);
}

.premium-testimonial-quote {
    font-family: var(--font-serif);
    font-size: var(--fs-premium-testimonial-quote);
    font-style: italic;
    line-height: var(--lh-150);
    color: var(--color-white);
    margin: 0;
}

.premium-testimonial-logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-start;
    margin-top: var(--space-lg);
    border-top: var(--border-thin) var(--border-style-solid) var(--border-color-lavender);
    padding-top: var(--space-md);
}

.premium-testimonial-logo {
    background: var(--color-white-opacity-6);
    border: var(--border-testimonial);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--color-lavender-opacity-85);
    letter-spacing: var(--ls-wide);
}

/* 8. Premium Contacts Grid (Slide 6) */
.premium-contact-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

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

.premium-contact-card {
    background-color: var(--color-bg-light-purple);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--size-contact-card-min-h);
    transition: transform var(--transition-bounce), background-color var(--transition-base), border-color var(--transition-base);
    border: var(--border-base) var(--border-style-solid) var(--border-color-subtle);
    text-decoration: none;
    box-sizing: border-box;
}

/* Hover bez cienia (Faza 4): krok tonu powierzchni + mocniejszy obrys */
.premium-contact-card:hover {
    background-color: var(--color-accent-green);
    border-color: var(--color-primary-light);
}

.premium-contact-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.premium-contact-card__icon {
    background-color: var(--color-primary-opacity-6);
    border-radius: var(--radius-sm);
    width: var(--size-contact-icon);
    height: var(--size-contact-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-icon-md);
    color: var(--color-primary);
    transition: color var(--transition-base), background-color var(--transition-base);
}

.premium-contact-card:hover .premium-contact-card__icon {
    background-color: var(--surface-ink);
    color: var(--color-white);
}

.premium-contact-card__tag {
    font-size: var(--fs-tiny);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    color: var(--color-text-muted);
}

.premium-contact-card__value {
    font-family: var(--font-sans);
    font-size: var(--fs-contact-value);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    margin-top: var(--space-md);
    word-break: break-all;
}


/* =========================================================================
   📦 MODUŁ: src/css/catering-configurator.css
   ========================================================================= */

/* ========================================================================== */
/* CATERING MENU CONFIGURATOR — Premium Item Cards & Quantity Selection      */
/* ========================================================================== */
.menu-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-minus);
    margin-top: var(--space-sm);
}

.menu-item-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--space-sm);
    row-gap: var(--space-px-6);
    background-color: var(--surface-card);
    border: var(--border-default);
    border-radius: var(--radius-card);
    padding: var(--space-14) var(--space-18);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    user-select: none;
    position: relative;
}

.menu-item-card:hover {
    border-color: var(--border-color-hover);
    background-color: var(--color-primary-opacity-05);
}

/* Zaznaczenie bez cienia (Faza 4): pelny obrys atramentem + tint tla */
.menu-item-card.is-active {
    border-color: var(--border-color-active);
    background-color: var(--color-primary-opacity-2);
}

/* Styl dla kart z obrazkami (obsługa siatki) */
.menu-item-card:has(.menu-item-image-wrapper) {
    grid-template-columns: auto auto 1fr auto;
}

.menu-item-card:has(.menu-item-image-wrapper) .menu-item-checkbox-wrapper {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.menu-item-card:has(.menu-item-image-wrapper) .menu-item-image-wrapper {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.menu-item-card:has(.menu-item-image-wrapper) .menu-item-info {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.menu-item-card:has(.menu-item-image-wrapper) .menu-item-price-quantity {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.menu-item-image-wrapper {
    width: var(--size-avatar-sm);
    height: var(--size-avatar-sm);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    border: var(--border-default);
    background-color: var(--color-bg-cream);
}

.menu-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu-item-card:hover .menu-item-image {
    transform: scale(1.08);
}

.menu-item-name-wrapper {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-bottom: var(--space-3xs);
}

.menu-item-weight {
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-light);
    background-color: var(--color-primary-opacity-5);
    padding: var(--space-technical-pixel) var(--space-xs);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
}

/* Custom checkbox wrapper */
.menu-item-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    flex-shrink: 0;
}

.menu-item-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Okrągły, luksusowy checkbox */
.menu-item-checkbox-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-checkbox-lg);
    height: var(--size-checkbox-lg);
    border: var(--border-thick) var(--border-style-solid) var(--border-color-hover);
    border-radius: var(--radius-circle);
    transition: all var(--transition-base);
    position: relative;
    background-color: var(--surface-elevated);
}

.menu-item-card:hover .menu-item-checkbox-custom {
    border-color: var(--color-primary-light);
}

.menu-item-checkbox:checked ~ .menu-item-checkbox-custom {
    border-color: var(--color-primary);
    background-color: var(--surface-ink);
}

/* Ptaszek w okrągłym checkboxie */
.menu-item-checkbox:checked ~ .menu-item-checkbox-custom::after {
    content: '';
    position: absolute;
    width: var(--size-checkbox-dot);
    height: var(--size-checkmark-h);
    border: solid var(--color-white);
    border-width: 0 var(--border-thick) var(--border-thick) 0;
    transform: rotate(45deg) translate(var(--translate-px-neg-1), var(--translate-px-neg-1));
    border-radius: var(--radius-2xs);
}

/* Info: nazwa i opis */
.menu-item-info {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    text-align: left;
}

.menu-item-name {
    font-size: var(--fs-menu-item-name);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    cursor: pointer;
    margin: 0;
    line-height: var(--lh-130);
}

.menu-item-description {
    font-size: var(--fs-menu-item-desc);
    color: var(--color-text-body);
    opacity: 0.8;
    line-height: var(--lh-140);
    font-weight: var(--fw-regular);
}

/* Prawa strona: cena i selektor ilości */
.menu-item-price-quantity {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    min-width: var(--size-menu-item-price-col);
}

/* BEZSZERYFOWA cena bazowa */
.menu-item-base-price {
    font-family: var(--font-sans);
    font-size: var(--fs-menu-item-price);
    font-weight: var(--fw-bold);
    color: var(--color-primary-light);
    white-space: nowrap;
    opacity: 0.9;
    transition: all var(--transition-base);
}

.menu-item-card.is-active .menu-item-base-price {
    font-size: var(--fs-label);
    opacity: 0.55;
}

/* Selektor ilości */
.menu-item-quantity-selector {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    background-color: var(--color-bg-cream);
    border: var(--border-default);
    border-radius: var(--radius-pill);
    padding: var(--space-3xs);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: var(--space-none);
    transform: translateY(var(--space-px-6)) scale(0.95);
    pointer-events: none;
    max-height: var(--space-none);
    overflow: hidden;
}

.menu-item-card.is-active .menu-item-quantity-selector {
    opacity: 1;
    transform: translateY(var(--space-none)) scale(1);
    pointer-events: auto;
    max-height: var(--size-qty-selector-active-h);
    padding: var(--space-3xs) var(--space-xxs);
    margin-top: var(--space-3xs);
}

.qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-md);
    height: var(--space-md);
    border-radius: var(--radius-circle);
    border: var(--border-thin) solid var(--border-color-default);
    background-color: var(--surface-elevated);
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: var(--fs-tiny);
}

.qty-control:hover {
    background-color: var(--surface-ink);
    color: var(--color-white);
}

.qty-input {
    width: var(--size-icon-nav);
    border: none;
    background: var(--color-transparent);
    text-align: center;
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: var(--space-none);
}

/* Podsumowanie rozdziału */
.menu-configurator-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-xxs) var(--space-xxs) var(--space-xxs);
    border-top: var(--border-thin) var(--border-style-dashed) var(--border-color-summary-dashed);
}

.menu-configurator-summary__label {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    color: var(--color-primary-light);
    text-transform: uppercase;
    letter-spacing: var(--ls-px-half);
}

/* BEZSZERYFOWA cena rozdziału */
.menu-configurator-summary__price {
    font-family: var(--font-sans);
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

/* Odstęp na dole strony pod pływający widget */
.page-wrapper, body {
    padding-bottom: var(--space-xxl);
}

/* Responsywność dla mobile */
@media (max-width: 576px) {
    /* Karty bez obrazka korzystają ze spójnego układu grid */
    .menu-item-card {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        column-gap: var(--space-sm);
        row-gap: var(--space-sm);
        padding: var(--space-sm);
        align-items: center;
    }
    
    /* Checkbox jest w lewym górnym rogu */
    .menu-item-checkbox-wrapper {
        grid-column: 1;
        grid-row: 1;
        grid-row-end: auto;
        align-self: center;
        margin: var(--space-none);
    }
    
    /* Zwiększamy checkbox mobilny dla ułatwienia klikania */
    .menu-item-checkbox-custom {
        width: var(--space-md);
        height: var(--space-md);
    }
    
    .menu-item-checkbox:checked ~ .menu-item-checkbox-custom::after {
        width: var(--space-px-6);
        height: var(--size-checkmark-h-sm);
        border-width: 0 var(--border-2-5) var(--border-2-5) 0;
    }

    /* KARTY Z OBRAZKIEM NA MOBILE - ZDJĘCIE PO LEWEJ, CHECKBOX ZARAZ ZA ZDJĘCIEM */
    .menu-item-card:has(.menu-item-image-wrapper) {
        grid-template-columns: auto auto 1fr;
    }

    .menu-item-card:has(.menu-item-image-wrapper) .menu-item-image-wrapper {
        grid-column: 1;
        grid-row: 1;
        grid-row-end: auto;
        width: var(--size-menu-img);
        height: var(--size-menu-img);
        justify-self: start;
        border-radius: var(--radius-sm);
        margin: var(--space-none);
    }

    .menu-item-card:has(.menu-item-image-wrapper) .menu-item-checkbox-wrapper {
        grid-column: 2;
        grid-row: 1;
        grid-row-end: auto;
        align-self: center;
        margin: var(--space-none);
        margin-left: var(--space-10); /* Lekki odstęp od zdjęcia po lewej */
    }
    
    /* Teksty lądują poniżej zdjęcia i checkboxa na całą szerokość karty */
    .menu-item-info {
        grid-column: 1 / span 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .menu-item-card:has(.menu-item-image-wrapper) .menu-item-info {
        grid-column: 1 / span 3;
        grid-row: 2;
    }
    
    .menu-item-name-wrapper {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .menu-item-name {
        font-size: var(--fs-h6);
    }
    
    .menu-item-description {
        font-size: var(--fs-small);
        line-height: var(--lh-150);
    }
    
    /* Sekcja z ceną i ilościami - na samym dole */
    .menu-item-price-quantity {
        grid-column: 1 / span 2;
        grid-row: 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: var(--space-none);
        margin-top: var(--space-none);
        border-top: var(--space-technical-pixel) var(--border-style-solid) var(--border-color-mobile-divider);
        padding-top: var(--space-sm);
    }

    .menu-item-card:has(.menu-item-image-wrapper) .menu-item-price-quantity {
        grid-column: 1 / span 3;
        grid-row: 3;
    }
    
    .menu-item-card.is-active .menu-item-base-price {
        font-size: var(--fs-small);
        opacity: var(--opacity-muted);
    }
    
    /* Ustawienia selektora ilości na mobile */
    .menu-item-card.is-active .menu-item-quantity-selector {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        max-height: var(--size-qty-selector-mobile-h);
        padding: var(--space-3xs);
        background-color: var(--color-bg-input);
    }
    
    /* Duże okrągłe przyciski plus/minus (rozmiar: --size-avatar-md) */
    .qty-control {
        width: var(--size-avatar-md);
        height: var(--size-avatar-md);
        font-size: var(--fs-btn);
        border: var(--border-thin) solid var(--border-color-medium);
    }
    
    .qty-input {
        width: var(--size-qty-input-mobile-w);
        font-size: var(--fs-btn);
    }
    
    /* Optymalizacja koszyka wyceny na mobile */
    .catering-summary-cart {
        padding: var(--space-md) var(--space-sm);
    }
    
    .cart-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
        padding: var(--space-sm);
    }
    
    .cart-item-info {
        width: 100%;
    }
    
    .cart-item-controls {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-xs);
    }
    
    .cart-item-price {
        min-width: auto;
        flex-grow: 1;
        text-align: right;
        margin-right: var(--space-xs);
    }
}

/* Wrapper dla rozdziałów menu w cateringu */
.menu-chapter-wrapper {
    margin-bottom: var(--space-xxl);
}
.menu-chapter-wrapper .section-feature {
    margin-bottom: var(--space-md);
}

/* ==========================================================================
   SEKCJA SUSTAINABILITY (NATURALNE SKŁADNIKI OD ROLNIKÓW)
   ========================================================================== */

.sustainability-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .sustainability-section {
        grid-template-columns: 1.15fr 1fr;
        gap: var(--space-xxl);
    }
}

.sustainability-section__left {
    display: flex;
    flex-direction: column;
}

.sustainability-section__left-img {
    width: 100%;
    height: 100%;
    min-height: var(--size-sustainability-img-min-h);
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.sustainability-section__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
}

.sustainability-section__right h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--color-primary);
    line-height: var(--lh-125);
}

.sustainability-subgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

@media (min-width: 768px) {
    .sustainability-subgrid {
        grid-template-columns: 1.25fr 1fr;
        gap: var(--space-lg);
        align-items: center;
    }
}

.sustainability-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    padding: 0;
    margin: 0;
    list-style: none;
}

.sustainability-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-10) var(--space-none);
    border-bottom: var(--border-subtle);
    font-size: var(--fs-list-item);
    font-weight: var(--fw-semibold);
    color: var(--color-text-main);
    transition: color var(--transition-base);
}

.sustainability-list-item:last-child {
    border-bottom: none;
}

.sustainability-list-item i {
    color: var(--color-primary-light);
    font-size: var(--fs-small);
    transition: transform var(--transition-base);
}

.sustainability-list-item:hover {
    color: var(--color-primary);
}

.sustainability-list-item:hover i {
    transform: translateX(var(--space-xxs));
    color: var(--color-primary);
}

.sustainability-subgrid__right {
    display: flex;
    flex-direction: column;
}

.sustainability-subgrid-img {
    width: 100%;
    height: var(--size-sustainability-subgrid-img-h);
    object-fit: cover;
    border-radius: var(--radius-ml);
}


/* =========================================================================
   📦 MODUŁ: src/css/catering-ux.css
   ========================================================================= */

/* ============================================================ */
/* OPTYMALIZACJE UX/UI PREMIUM (CATERING)                       */
/* ============================================================ */

/* 1. TACTILE SCALE FEEDBACK - EFEKT SPRĘŻYSTOŚCI DLA KART POTRAW */
.menu-item-card:active {
    transform: scale(0.985);
}

/* 2. CURSOR POINTER DLA ELEMENTÓW REGIONALNYCH */
.regional-list-item {
    cursor: pointer;
}


/* =========================================================================
   📦 MODUŁ: src/css/opinie.css
   ========================================================================= */

/* ============================================================ */
/* OPINIE PAGE STYLES - DESIGN SYSTEM CONFORMING                 */
/* ============================================================ */

.rating-stats-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    margin-bottom: var(--space-xs);
}

.rating-stats-label {
    width: var(--size-icon-nav);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    font-size: var(--fs-small);
}

.rating-stats-bar-container {
    flex-grow: 1;
    height: var(--space-xs);
    background-color: var(--color-bg-input);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.rating-stats-bar-fill {
    height: 100%;
    background-color: var(--color-star);
    border-radius: var(--radius-pill);
}

.rating-stats-count {
    width: var(--size-avatar-md);
    text-align: right;
    color: var(--color-text-muted);
    font-size: var(--fs-small);
}

/* Distribution widths without inline style */
.w-fill-95 { width: 95%; }
.w-fill-5 { width: 5%; }
.w-fill-1 { width: 1%; }
.w-fill-0 { width: 0%; }

.review-card-tag {
    display: inline-block;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-medium);
    align-self: flex-start;
}

.review-card-tag--wesele {
    background-color: var(--color-bg-lavender);
    color: var(--color-overlay-indigo);
}

.review-card-tag--biznesowe {
    background-color: var(--color-bg-input);
    color: var(--color-primary);
}

.review-card-tag--inne {
    background-color: var(--color-bg-cream);
    color: var(--color-primary);
}

/* --- Dodatkowe klasy pomocnicze dla eliminacji stylów inline --- */
.m-x-auto {
    margin-left: auto;
    margin-right: auto;
}

.opacity-85 {
    opacity: 0.85;
}

.fs-xs {
    font-size: var(--fs-xs);
}

.icon-1-5 {
    font-size: var(--fs-xl);
}

.icon-1-75 {
    font-size: var(--fs-xl-plus);
}

/* --- Klasy tła Hero dla stron miejskich i innych (eliminacja inline background-image) --- */
.hero-bg-chojnow { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1015/1920/1080'); }
.hero-bg-legnica { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1016/1920/1080'); }
.hero-bg-lubin { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1018/1920/1080'); }
.hero-bg-glogow { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1019/1920/1080'); }
.hero-bg-polkowice { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1020/1920/1080'); }
.hero-bg-boleslawiec { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1021/1920/1080'); }
.hero-bg-poznan { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1022/1920/1080'); }
.hero-bg-przemkow { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1023/1920/1080'); }
.hero-bg-scinawa { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1024/1920/1080'); }
.hero-bg-wroclaw { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1025/1920/1080'); }
.hero-bg-palace { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1027/1920/1080'); }
.hero-bg-bory { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1029/1920/1080'); }
.hero-bg-zaglebie { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1031/1920/1080'); }
.hero-bg-slow { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1032/1920/1080'); }
.hero-bg-glamping { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1033/1920/1080'); }
.hero-bg-spa { background-image: linear-gradient(var(--color-deep-purple-opacity-65), var(--color-deep-purple-opacity-50)), url('https://picsum.photos/id/1035/1920/1080'); }

.total-price {
    font-size: var(--fs-opinie-total);
    font-weight: var(--fw-bold);
    color: var(--color-white);
}
.calc-divider {
    border: none;
    border-top: var(--border-thin) solid var(--color-white-opacity-20);
    margin-bottom: var(--space-md);
}






/* =========================================================================
   📦 MODUŁ: src/css/sitemap.css
   ========================================================================= */

/* ----------------------------------------- */
/* MAPA STRONY (user-facing HTML sitemap)    */
/* ----------------------------------------- */
.sitemap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

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

.sitemap-card {
    height: 100%;
}

.sitemap-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary);
    font-family: var(--font-serif);
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-list li + li {
    margin-top: var(--space-xs);
}

.sitemap-list a {
    color: var(--color-text-main);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color var(--duration-responsive) var(--ease-responsive);
}

.sitemap-list a:hover,
.sitemap-list a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-primary-rgb), 0.4);
    text-underline-offset: var(--underline-offset-xs);
}

.sitemap-list a i {
    color: var(--color-primary);
    opacity: var(--opacity-muted);
    font-size: var(--fs-small);
}

/* ----------------------------------------- */
/* POWIĄZANE OFERTY (SEO internal linking)   */
/* ----------------------------------------- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-sitemap-col), 1fr));
    gap: var(--space-sm);
}

.related-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-thin) solid rgba(var(--color-primary-rgb), 0.14);
    border-radius: var(--radius-sitemap-card);
    background: var(--color-bg-cream);
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    transition: border-color var(--duration-responsive) var(--ease-responsive),
                color var(--duration-responsive) var(--ease-responsive),
                background-color var(--duration-responsive) var(--ease-responsive);
}

.related-card:hover,
.related-card:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--surface-card);
}

.related-card i {
    font-size: var(--fs-sitemap-heading);
    color: var(--color-primary);
    flex-shrink: 0;
}


/* =========================================================================
   📦 MODUŁ: src/css/refinements.css
   ========================================================================= */

/* ============================================================ */
/* REFINEMENTS — komponenty i dopracowania (Faza 4 + 5)         */
/* Moduł doklejany późno w kaskadzie (świadome nadpisania).     */
/* ============================================================ */

/* --- Sterowanie wideo Hero (Play/Pause) --- */
.hero-gallery {
    position: relative;
}

.video-control {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    width: var(--size-btn-height);
    height: var(--size-btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-circle);
    background: var(--color-primary-opacity-80);
    color: var(--color-white);
    cursor: pointer;
    z-index: var(--z-5);
    font-size: var(--fs-h6);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.video-control:hover {
    background: var(--surface-ink);
    transform: scale(1.05);
}

.video-control:focus-visible {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--space-3xs);
}

/* --- Dolna nawigacja mobilna (mobile only) --- */
.mobile-tabbar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--surface-elevated);
        border-top: var(--border-base) solid var(--border-color-default);
        z-index: var(--z-tabbar);
    }

    .mobile-tabbar__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-3xs);
        padding: var(--space-xs) var(--space-xxs);
        min-height: calc(var(--size-btn-height) + var(--space-xs));
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
    }

    .mobile-tabbar__item i {
        font-size: var(--fs-h5);
        color: var(--color-primary);
    }

    .mobile-tabbar__item:hover,
    .mobile-tabbar__item:focus-visible {
        color: var(--color-primary);
    }

    /* Odstęp na dole, aby pasek nie zasłaniał stopki */
    body {
        padding-bottom: calc(var(--size-btn-height) + var(--space-lg));
    }
}

/* ============================================================ */
/* GLOBALNE DOPRACOWANIA (subtelny modern refresh)              */
/* ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--surface-ink);
    color: var(--color-white);
}

/* Spójny, dostępny stan focus dla elementów interaktywnych (tylko outline, zero cieni) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: var(--border-thick) solid var(--color-primary);
    outline-offset: var(--space-3xs);
}

/* Kotwice nie chowają się pod sticky-nawigacją przy smooth-scroll */
[id] {
    scroll-margin-top: var(--space-xl);
}



/* =========================================================================
   📦 MODUŁ: src/css/motion-reduction.css
   ========================================================================= */

/* ----------------------------------------- */
/* MOTION REDUCTION (WCAG 2.2 — prefers-reduced-motion)  */
/* ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }

    .gallery-marquee-track,
    .marquee-track {
        animation: none !important;
    }
}