/* pod dostępność - ma być na samej górze */
/* Definiujemy domyślny mnożnik (1 czyli 100%) */
/* 1. Definicja mnożnika */
:root {
    /* --- SYSTEMOWE --- */
    --font-multiplier: 1;
    --main-line-height: 1.4;

    /* --- KOLORY BAZOWE --- */
    --main-black: #121212;
    --main-black-bg: #000000;
    --main-dark: #000000;
    --main-white: #ffffff;


    --main-black-rgb: 0, 0, 0;
    --main-white-rgb: 255, 255, 255;
    --main-dark-rgb: 255, 255, 255;
    --main-grey-rgb: 224, 224, 224;
    --main-grey-light-rgb: 184, 188, 191;
    --main-border-rgb: 0, 0, 0;
    --main-footer-blue-rgb: 173, 216, 230;
    
    --main-breadcrumbs: #666666;


    /* --- CIENIE --- */
    --shadow-opacity: 0.05; /* Delikatny cień w dzień */
    --shadow-opacity-white: 0.05; /* Delikatny cień w dzień */
    --shadow-opacity-article: 0.5;
    --card-shadow: 0 4px 12px rgba(var(--main-black-rgb), 0.05);
    --shadow-hero-btn: 0 10px 20px rgba(var(--main-black-rgb), 0.1);

    --opacity-strip: 0.25;
    --opacity-strip-border-icon: 0.08;
    --opacity-strip-logo: 0.85;
    --opacity-sidebar-border: 1;
    --opacity-field-label: 0.7;
    
    /* --- FOKUS --- */
    --focus-color: #007bff;
    --focus-accent: #293f8e;
    --accessibility-focus: #293f8e; 
    --accessibility-focus-multicolor: #293f8e;
    --accessibility-focus-blue: #ADD8E6; 
   
    /* --- TŁO (Tryb Jasny) --- */
    --bg-light: #f8f9fa;
    --bg-main: #ffffff;
    --bg-price: #f8f9fa;
    --bg-white: #ffffff;
    --bg-black: #111111;
    --bg-dark: #ffffff;
    --bg-card: #ffffff;
    --bg-transparent: transparent;
    --bg-article: #ffffff;
    --bg-article-sidebar: #ffffff;
    --bg-offcanvas-transparent: #070606;
    /* Systemowe dla pasków */
    --bg-strip: #ffffff; /* Domyślne tło paska w dzień */
    --bg-strip-icon-rgb: 255, 255, 255;
    --bg-strip-hover: transparent;
    --bg-minimal-card: #ffffff;
    --bg-indicators: #000000;
    --bg-indicators-dark: #ffffff;

    
    /* --- TEKST (Tryb Jasny) --- */
    --text-main: #1A1A1A;
    --text-main-light: #555555;
    --text-main-menu: #ffffff;
    --text-main-white: #ffffff;
    --text-muted: #6c757d;
    --text-blue: #004A99;
    --text-white-blue: #ffffff;
    --text-white: #ffffff;
    --text-dark: #000000;
    --text-dark-blue: #000000;
    --text-dark-minimal-card: #000000;
    --text-white-minimal-card: #ffffff;
    --text-red: #902418;
    --text-green: #166028;
    --text-hover: #000000;
    --text-footer-white: #ffffff;
    --text-footer-blue: #ADD8E6;
    --text-footer-grey: #d1d1d1;
    --text-footer-link-hover: #ADD8E6;
    --text-footer-decoration: none;
    --text-legal-decoration: none;
    
    --text-offcanvas-dark: #121212;
    --text-offcanvas-decoration: none;
    --text-offcanvas-decoration-hover: #000000;
    --text-offcanvas-link-hover: #000000;
    
    --text-acc-dark: #121212;
    
   
    /* --- BORDER (Tryb Jasny) --- */ 
    --border: #000000;
    --border-light: #e0e0e0;
    --border-super-light: #f5f5f5;
    --border-acc: 2px solid var(--text-footer-blue);
    --border-strip-icon-rgb: 0, 0, 0;
    --border-article-sidebar-rgb: 240, 240, 240;
    --border-shadow-dark: #000000;
    --border-shadow-white: #ffffff;

    /* --- PRZYCISKI --- */
    --btn-bg: #121212;
    --btn-text: #ffffff;
    --btn-hover: #333333;
    
    /* --- PANEL DOSTĘPNOŚCI (Kółko z ludzikiem) --- */
    --acc-trigger-bg: #293f8e;
    --acc-trigger-border: #ffffff;
    --acc-panel-bg: #ffffff;
    --acc-panel-border: #293f8e;
    --acc-panel-text: #121212;
    --acc-btn-bg: #f4f4f4;
    --acc-btn-active: #ffa500; /* Twoje orange */ 

    /* --- TYPOGRAFIA I EFEKTY --- */
    --h-weight: 600;
    --h-spacing: normal;
    
    --font-weight-reg: 400;
    --font-weight-med: 500;
    --font-weight-bold: 700;
    --font-weight-bold-max: 900;
    
    --letter-spacing: normal;
    --letter-spacing-article: 0.05em;
    --letter-spacing-strip-title: 0.06em; /* Odpowiednik ok. 2px przy 30px fontu */
    
    --icon-stroke: 0px;       /* Domyślnie brak obrysu */
    --icon-opacity: 1;
    
    --offcanvas-filter: grayscale(1) brightness(0.9);
    
    --sponsor-filter: grayscale(1);
    --sponsor-hover-filter: grayscale(0) invert(0);
    --filter-strip: brightness(0);
    --filter-strip-hover: saturate(1.3) brightness(1.05);
    --filter-hero-btn: brightness(0);

    --sponsor-opacity: 0.6;

    /* Kolory belek "Białych" */
    --header-bg-light: #ffffff;
    --header-text-light: #121212;

    /* Kolory belek "Czarnych" */
    --header-bg-dark: #121212;
    --header-text-dark: #ffffff;
    
        /* Kolory tła dla belek "Czarnych" */
    --header-bg-black: #ffffff;
    --header-text-black: #121212;
    
    /* Ogólne ustawienia fontu dla belek */
    --header-font-weight: 600;
    --header-letter-spacing: normal;
    
    --eu-logo-bg: transparent;
    --eu-logo-padding: 0;
    --eu-logo-filter: none;
    --eu-logo-opacity: 1;
    
    --page-title-bg: #ffffff;
    --page-title-text: #000000;
    --page-title-border: transparent;
    --page-title-border-style: none;
    
    --accent-blue: #ADD8E6;   /* Jasny błękit */
    --accent-orange: #FFA07A; /* Łososiowy */
    --accent-green: #98FB98;  /* Blada zieleń */
    --accent-yellow: #FFE664; /* Ciepły żółty */

    
}

/* === Zmienne dla Dark Mode === */
body.dark-mode {
    /* --- KOLORY BAZOWE --- */
    --main-black: #b8bcbf;
    --main-black-bg: #000000;
    --main-dark: #ffffff;
    --main-white: #121212;

    --main-black-rgb: 0, 0, 0;
    --main-white-rgb: 255, 255, 255;
    --main-dark-rgb: 0, 0, 0;
    --main-grey-rgb: 224, 224, 224;
    --main-grey-light-rgb: 184, 188, 191;
    --main-border-rgb: 255, 255, 255;
    --main-footer-blue-rgb: 173, 216, 230;

    --main-breadcrumbs: #888888;

    /* --- CIENIE --- */
    --shadow-opacity: 0.5;
    --shadow-opacity-white: 0.05;
    --shadow-opacity-article: 0.2;
    --card-shadow: 0 4px 12px rgba(var(--main-black-rgb), 0.5);
    --shadow-hero-btn: 0 10px 20px rgba(var(--main-white-rgb), 0.15);
    --opacity-strip: 0.05;
    --opacity-strip-border-icon: 0.1;
    --opacity-strip-logo: 0.9;
    --opacity-sidebar-border: 0.05;
    --opacity-field-label: 0.6;
    
    
    /* --- FOKUS --- */
    --focus-color: #007bff; /* Tu wstaw swój kolor akcentu, np. niebieski lub złoty */
    --focus-accent: #ADD8E6;
    --accessibility-focus: #4dabf7;
    --accessibility-focus-multicolor: #293f8e;
    --accessibility-focus-blue: #ADD8E6; 
   
    /* --- TŁO (Tryb Jasny) --- */
    --bg-light: #1a1a1a;
    --bg-main: #121212;
    --bg-price: #1e1e1e;
    --bg-white: #222222;
    --bg-black: #0d0d0d;
    --bg-dark: #1a1a1a;
    --bg-card: #2a2a2a;
    --bg-transparent: #171717;
    --bg-article: #121212;
    --bg-article-sidebar: #1a1a1a;
    --bg-offcanvas-transparent: transparent;
    /* W Dark Mode paski stają się spójne z resztą strony */
    --bg-strip: #1a1a1a;
    --bg-strip-icon-rgb: 184, 188, 191;
    --bg-strip-hover: #222222;
    --bg-minimal-card: #ffffff;
    --bg-indicators: #444444;
    --bg-indicators-dark: #444444;
    
    /* --- TEKST (Tryb Jasny) --- */
    --text-main: #b8bcbf;
    --text-main-light: #b8bcbf;
    --text-main-menu: #b8bcbf;
    --text-main-white: #ffffff;
    --text-muted: #aaaaaa;
    --text-blue: #ADD8E6;
    --text-white-blue: #ADD8E6;
    --text-white: #ffffff;
    --text-dark: #000000;
    --text-dark-blue: #ADD8E6;
    --text-dark-minimal-card: #000000;
    --text-white-minimal-card: #ffffff;
    --text-red: #ff8a80;
    --text-green: #b9f6ca;
    --text-hover: #ADD8E6;
    --text-footer-white: #b8bcbf;
    --text-footer-blue: #ADD8E6;
    --text-footer-grey: #b8bcbf;
    --text-footer-link-hover: #ffffff;
    --text-footer-decoration: underline rgba(var(--main-grey-light-rgb), 0.3);
    --text-legal-decoration: underline rgba(var(--main-footer-blue-rgb), 0.4);
    
    --text-offcanvas-dark: #b8bcbf;
    --text-offcanvas-decoration: underline rgba(var(--main-grey-light-rgb), 0.3);
    --text-offcanvas-decoration-hover: #ffffff;
    --text-offcanvas-link-hover: #ffffff;
    
    --text-acc-dark: #121212;
    
   
    /* --- BORDER (Tryb Jasny) --- */ 
    --border: #dee2e6;
    --border-light: #333333;
    --border-super-light: #292929;
    --border-acc: 1px solid var(--text-footer-blue);
    --border-strip-icon-rgb: 184, 188, 191;
    --border-article-sidebar-rgb: 255, 255, 255;
    --border-shadow-dark: #000000;
    --border-shadow-white: #ffffff;

    /* --- PRZYCISKI --- */
    --btn-bg: #b8bcbf;
    --btn-text: #000000;
    --btn-hover: #eeeeee;
    
    /* --- PANEL DOSTĘPNOŚCI (Kółko z ludzikiem) --- */
    --acc-trigger-bg: #1a1a1a;
    --acc-trigger-border: #ffffff;
    --acc-panel-bg: #222222;
    --acc-panel-border: #444444;
    --acc-panel-text: #b8bcbf;
    --acc-btn-bg: #333333;
    --acc-btn-active: #ffa500;

    /* --- TYPOGRAFIA I EFEKTY --- */
    --h-weight: 500;
    --h-spacing: 0.5px; 
    --font-weight-reg: 300; 
    --font-weight-med: 400;
    --font-weight-bold: 500;
    --font-weight-bold-max: 600;
    
    --letter-spacing: 0.02em;
    --letter-spacing-article: 0.01em;
    --letter-spacing-strip-title: 0.01em; /* Subtelny odstęp dla Dark Mode */
    
    --icon-stroke: 0.1px;
    --icon-opacity: 0.9;
    
    --offcanvas-filter: grayscale(1) brightness(2.8);
    
    --sponsor-filter: grayscale(1) invert(0.85);
    --sponsor-hover-filter: grayscale(1) invert(1);
    --filter-strip: brightness(0) invert(0.85);
    --filter-hero-btn: brightness(1.1);
    --filter-strip-hover: none;
    --sponsor-opacity: 0.7; /* Możesz lekko podbić widoczność w nocy, jeśli chcesz */
    
        /* W Dark Mode wszystkie belki stają się ciemne (Wersja Soft) */
    --header-bg-light: #1a1a1a;
    --header-text-light: #b8bcbf;
    
    --header-bg-dark: #080808; /* Specjalny fix dla wersji black */
    --header-text-dark: #b8bcbf;
    
    /* Kolory tła dla belek "Czarnych" */
    --header-bg-black: #080808;
    --header-text-black: #b8bcbf;

    /* Zmiękczenie fontu w nocy, o którym pisałaś */
    --header-font-weight: 500;
    --header-letter-spacing: 0.02em;
    
    --eu-logo-bg: #ffffff;
    --eu-logo-padding: 10px 15px;
    --eu-logo-filter: grayscale(1);
    --eu-logo-opacity: 0.9;
    
    --page-title-bg: #121212;
    --page-title-text: #b8bcbf;
    /* Używamy Twojej zmiennej RGB dla obramowania */
    --page-title-border: rgba(var(--main-white-rgb), var(--shadow-opacity-white));
    --page-title-border-style: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white));

}



body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.gray-mode { filter: grayscale(100%) brightness(0.9); }
.reading-active p:hover { background: rgba(255,165,0,0.1); outline: 1px dashed orange; cursor: help; }


/* 1. OGÓLNA BLOKADA SUWAKA */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Zapobiega skokom szerokości przy przełączaniu między długimi a krótkimi stronami */
html {
    scrollbar-gutter: stable;
}


#sp-header, .container-inner, #sp-menu {
    height: auto !important; /* Pozwala paskowi menu rosnąć w pionie razem z tekstem */
}

p, li, .sppb-addon-content, .sppb-addon-text { 
    /* Używamy rem, żeby tekst skalował się względem bazy, a nie rozpychał rodzica */
    font-size: calc(1rem * var(--font-multiplier)) !important; 
}

/* 1rem = 16px, więc dzielimy Twoje piksele przez 16 */
h1, .sppb-addon-title h1 { 
    font-size: calc(2.375rem * var(--font-multiplier)) !important; /* 38px / 16 = 2.375 */
}
h2, .sppb-addon-title h2 { 
    font-size: calc(1.9rem * var(--font-multiplier)) !important;     /* 32px / 16 = 2 */
}
h3, .sppb-addon-title h3 { 
    font-size: calc(1.625rem * var(--font-multiplier)) !important; /* 26px / 16 = 1.625 */
}
h4, .sppb-addon-title h4 { 
    font-size: calc(1.375rem * var(--font-multiplier)) !important; /* 22px / 16 = 1.375 */
}

/* Wspólne ustawienia dla bezpieczeństwa layoutu */
h1, h2, h3, h4 {
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    color: var(--text-main);
}


/* ZMIANA: Linki i nagłówki dostają Twój nowy platynowy kolor */
/*body.dark-mode a, 
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .sppb-addon-title { 
    color: #b8bcbf !important;
}*/

.sppb-addon-title { 
    /*color: #b8bcbf !important;*/
    color: var(--text-main);  
}

a { color: var(--text-main); }

body.dark-mode a {
    font-weight: 500 !important; 
    /*letter-spacing: 0.2px !important;*/
    letter-spacing: var(--letter-spacing);
    text-shadow: none !important;
}

body.dark-mode a:hover {
    font-weight: 500 !important;
    /* Zamiast pogrubienia na hoverze, użyj lekkiego rozjaśnienia koloru */
    color: #ffffff !important;
}

/* 3. Linki i spany (tylko te wewnątrz treści, a nie całe menu) */
p span, p a {
    font-size: 1em !important; /* One przejmą rozmiar od paragrafu */
}


/* =========================
   FONTY LOKALNE
   @font-face
========================= */

/* OSWALD */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* IBM PLEX SANS */
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* NOTO SANS */
  @font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/NotoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/NotoSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/NotoSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* =========================
     GLOBALNE FONTY
  ========================= */
  
  /* BODY / tekst główny */
  body, p, li {
    font-family: Verdana, Geneva, sans-serif !important;
    font-weight: 400 !important;
  }
  
  /* H1 */
  h1 {
    font-family: 'IBM Plex Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
  }
  
  /* H2, H3 */
  h2, h3 {
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 600 !important;
  }
  
  /* H4 */
  h4 {
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 400 !important;
  }
  
  /* H5 */
  h5 {
    font-family: 'Noto Sans', Arial, sans-serif !important;
    font-weight: 400 !important;
  }
  
  /* H6 */
  h6 {
    font-family: Verdana, Geneva, sans-serif !important;
    font-weight: 600 !important;
  }
  
  /* =========================
     SP PAGE BUILDER – nagłówki i bloki tekstu
  ========================= */
  
  .sppb-page-builder h1 {
    font-family: 'IBM Plex Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
  }
  
  .sppb-page-builder h2,
  .sppb-page-builder h3 {
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 600 !important;
  }
  
  .sppb-page-builder h4 {
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 400 !important;
  }
  
  .sppb-page-builder h5 {
    font-family: 'Noto Sans', Arial, sans-serif !important;
    font-weight: 400 !important;
  }
  
  .sppb-page-builder h6 {
    font-family: Verdana, Geneva, sans-serif !important;
    font-weight: 600 !important;
  }
  
  /* Tekst / paragrafy / listy w SP Page Builder */
  .sppb-page-builder p,
  .sppb-page-builder li,
  .sppb-page-builder .sppb-text-block {
    font-family: Verdana, Geneva, sans-serif !important;
    font-weight: 400 !important;
  }

/* ==========================================================================
   1. GLOBALNE USTAWIENIA NAGŁÓWKA I STRUKTURY
   ========================================================================== */

#sp-header {
    height: auto !important;
    min-height: 90px;
    display: flex;
    align-items: center;
    /*border-bottom: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white)) !important;*/
}

#sp-header .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Domyślny odstęp treści od menu */
#sp-main-body {
    clear: both !important;
    padding-top: calc(50px * var(--font-multiplier, 1)) !important; 
    position: relative !important;
    /*border-top: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white)) !important;*/
}

/* Wyjątek: Strona główna (Slider przylega do menu) */
body.home #sp-main-body,
body.com-content-featured #sp-main-body,
body.itemid-101 #sp-main-body {
    padding-top: 0 !important;
}

/* 1. Ujednolicenie głównej ramy dla wszystkiego */
#sp-header .container, 
#sp-main-body .container, 
.sppb-container, 
#sp-footer .container {
    max-width: 1320px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 2. NAPRAWA "SKAKANIA" W LEWO (Dla strony z Builderem) */
/* Jeśli wiersz jest bezpośrednio w main-body, musi zachowywać się jak kontener */
#sp-main-body > .row {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: flex !important;
}

#sp-left .sp-module ul > li > a, #sp-right .sp-module ul > li > a {
  padding: 8px 0 !important;
}

/* Tylko strony z ręcznie dopisaną klasą będą ograniczone szerokością */
.strona-z-left-menu #sp-main-body {
    max-width: 1320px !important;
    margin: 0 auto !important;
}

/* ==========================================================================
   START - REGULAMINY - CUSTOM TABS
   ========================================================================== */

.newsflash-title { padding-bottom:30px }

/* --- STYLIZACJA ZAKŁADEK (TABS) --- */
.custom-tabs-black .nav-link {
    color: var(--text-main); 
    background: transparent;
    border: 1px solid var(--border);
    margin: 0 5px;
    transition: all 0.3s ease;
    font-weight: 500;
}

/*body.dark-mode .custom-tabs-black .nav-link {
    color: #eee;
    border-color: rgba(255,255,255,0.2);
}*/

.custom-tabs-black .nav-link.active, 
.nav-pills.custom-tabs-black .show > .nav-link {
    /*background-color: #000 !important;*/
    background-color: var(--btn-bg) !important; 
    color: var(--btn-text) !important;
    /*border-color: #000;*/
    border-color: var(--border);
}

/*body.dark-mode .custom-tabs-black .nav-link.active {
    background-color: var(--focus-color) !important; 
    color: #000 !important;
    border-color: var(--border);
}*/

.custom-tabs-black .nav-link:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px;
    border-radius: 4px; /* Opcjonalnie, żeby ramka była ładnie zaokrąglona */
    box-shadow: none; /* Pozbywamy się domyślnego cienia Bootstrapa */
}

.custom-tabs-black .nav-link:hover:not(.active) {
    /*background-color: rgba(0,0,0,0.05);*/
    background-color: var(--btn-bg) !important; 
    /*border-color: #000;*/
    border-color: var(--border);
    /*color: #000;*/
    color: var(--btn-text);
}

/*body.dark-mode .custom-tabs-black .nav-link:hover:not(.active) {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}*/

/* opcjonalnie - Styl kontenera z treścią (pod spodem) */
.tab-content.bg-light-soft {
    background-color: var(--bg-white) !important; 
    border: 1px solid var(--border) !important;
}

/*body.dark-mode .tab-content.bg-light-soft {
    background-color: #222 !important; 
}*/

/* ==== END - REGULAMINY - CUSTOM TABS ==== */


/* === ODCHUDZENIE NAGŁÓWKÓW W ARTYKUŁACH DLA DARK MODE === */

/* Celujemy w nagłówki wewnątrz treści artykułu, żeby nie zepsuć wyglądu modułów czy menu */
/*body.dark-mode .com-content-article h2, 
body.dark-mode .com-content-article h3,
body.dark-mode .article-details h2,
body.dark-mode .article-details h3 {
    font-weight: 500 !important;
    letter-spacing: 0.5px; 
}*/

.com-content-article h2, 
.com-content-article h3,
.article-details h2,
.article-details h3 {
    font-weight: var(--h-weight) !important;
    letter-spacing: var(--h-spacing);
    transition: font-weight 0.3s ease, letter-spacing 0.3s ease; 
}


/* ==========================================================================
   START - BIBLIOTEKA
   ========================================================================== */

/* Ikona Facebooka dla pozycji w bocznym menu */
.menu-facebook::before {
    font-family: "Font Awesome 5 Brands"; /* WAŻNE: Rodzina "Brands" dla logo */
    content: "\f09a"; /* Kod Unicode dla Facebooka */
    margin-right: 10px;
    display: inline-block;
    color: #1877F2; /* Oryginalny kolor Facebooka */
}

/* ==== END - BIBLIOTEKA ===== */

/* ==========================================================================
   START - BIBLIOTEKA - GODZINY PRACY
   ========================================================================== */

.harmonogram-sekcja {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.5) !important;
    /*padding: 10px;*/
    padding: 0 !important; /* Usuwamy zbędne luzu po bokach */
}

.harmonogram-wrapper {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.harmonogram-karta {
    /*background: #ffffff;*/
    background: var(--bg-dark); 
    /*border: 1px solid #e0e0e0;*/
    border: 1px solid var(--border-light) !important;
    border-radius: 12px;
    padding: clamp(15px, 4%, 25px);
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);*/
    /*box-shadow: var(--card-shadow);*/
    box-shadow: 0 4px 12px rgba(var(--main-black-rgb), var(--shadow-opacity));
    /*color: #333;*/
    color: var(--text-main) !important;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box !important;
}

/*.dark-mode .harmonogram-karta {
    background: #1a1a1a !important;
    border-color: #333 !important;
    color: #b8bcbf !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}*/

/* Nagłówki - dodajemy odstęp przy dużej interlinii */
.karta-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-light) !important;
}

/*.dark-mode .karta-header {
    border-bottom-color: #333 !important;
}*/

.karta-header h2,
.karta-header i {
    margin: 0;
    font-size: calc(1.5rem * var(--font-multiplier)) !important;
    line-height: calc(1.2 * var(--main-line-height, 1.2)) !important;
    color: var(--text-main) !important;
    /*color: #333;*/
    font-weight: var(--h-weight) !important;
}

/*.karta-header i {
    color: var(--text-main) !important;
}*/

/*.dark-mode .karta-header h2 {
    font-weight: 500 !important;
}*/

/*.dark-mode .karta-header h2, 
.dark-mode .karta-header i {
    color: #b8bcbf !important; 
}*/

/* Lista godzin - KLUCZOWA ZMIANA */

.godziny-lista li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    gap: 5px 15px;
    font-size: calc(1.1rem * var(--font-multiplier)) !important;
}

.godziny-lista li span {
    flex: 1 1 100px; /* Minimalna szerokość dla nazwy dnia */
    font-weight: var(--font-weight-med) !important;
    letter-spacing: var(--letter-spacing);
    color: var(--text-main);
}

.godziny-lista li strong {
    flex: 0 1 auto;
    white-space: nowrap; /* Godziny trzymają się razem: 08:00-18:00 */
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(--letter-spacing);
    color: var(--text-main);
}

/*.dark-mode .godziny-lista li span, 
.dark-mode .godziny-lista li strong {
    font-weight: 400 !important; 
    color: #d1d1d1 !important; 
    letter-spacing: 0.02em;
}*/

/* Siatka dat - poprawka na interlinię */
.soboty-siatka {
    display: flex;
    flex-wrap: wrap;
    /* Usuwamy sztywne gap, jeśli interlinia ma przejąć kontrolę, ale zostawiamy poziomy odstęp */
    column-gap: 10px;
    row-gap: calc(10px * var(--main-line-height, 1)); /* Dynamiczny odstęp pionowy! */
    margin-top: 15px;
}

.soboty-notka {
    margin-top: 20px !important;
}

/*.soboty-siatka span {
    background: #f8f9fa;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 6px;
    min-width: 70px;
    text-align: center;
    line-height: normal;
}*/

.soboty-siatka span {
    /*background: #f8f9fa;*/
    background: var(--bg-light) !important; 
    border: 1px solid var(--border-light) !important;
    /* Zmieniamy padding na taki, który nie blokuje rozsuwania */
    padding: 8px 12px;
    border-radius: 6px;
    min-width: 75px;
    text-align: center;
    display: inline-block; 
    line-height: var(--main-line-height, 1.5) !important;
    color: var(--text-main) !important;
}

/*.dark-mode .soboty-siatka span {
    color: #b8bcbf !important;
    font-weight: 400 !important;
}*/

/* --- DARK MODE (Dopasuj klasę .dark-mode do swojego systemu) --- */
/* Korekta czytelności tekstu w Dark Mode */
/*.dark-mode .harmonogram-karta {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

/* ==== END - BIBLIOTEKA - GODZINY PRACY === */

/* ==========================================================================
   START - BIBLIOTEKA - FILIE
   ========================================================================== */

.library-horizontal-card { 
    /*background-color: #ffffff !important;*/
    background-color: var(--bg-dark) !important; 
    /*border: 1px solid #e0e0e0;*/
    border: 1px solid var(--border-light) !important;
    /*color: #000000 !important;*/
    color: var(--text-main) !important;
    border-radius: 12px;
    /* Używamy zmiennej do paddingu, aby karta "oddychała" przy zwiększaniu interlinii */
    padding: calc(20px * var(--font-multiplier));
    margin-bottom: calc(40px * var(--font-multiplier));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    line-height: var(--main-line-height);
    overflow-wrap: break-word; /* Wymusza łamanie długich słów */
    word-wrap: break-word;
    max-width: 100%; /* Nie pozwala karcie wyjść poza ekran */
    box-sizing: border-box !important;
}

/*.dark-mode .library-horizontal-card,
body.dark-mode .library-horizontal-card {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #b8bcbf !important;
}*/

.branch-title {
    /*color: #b8bcbf !important;*/
    color: var(--text-main) !important;
}

/*.dark-mode .branch-title,
body.dark-mode .branch-title {
    color: #b8bcbf !important;
}*/

h3[class*="branch-title"] {
    margin: 0 !important;
    margin-bottom: calc(15px * var(--font-multiplier)) !important;
    /*font-weight: bold !important;*/
    font-weight: var(--h-weight) !important;
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase !important;
    /*color: #000000 !important;*/
    color: var(--text-main) !important;
    font-size: calc(1.5rem * var(--font-multiplier)) !important;
    line-height: calc(1.2 * var(--main-line-height, 1.2)) !important;
    display: block !important;
}

.contact-item {
    display: flex;
    align-items: flex-start; /* Ikona zawsze na górze pierwszej linii tekstu */
    margin-bottom: calc(12px * var(--font-multiplier)) !important;
    line-height: var(--main-line-height) !important;
    font-size: calc(1.1rem * var(--font-multiplier)) !important;
    /* Dodajemy padding całemu wierszowi, żeby tekst miał "oddech" */
    padding-left: 0;
}

.contact-item i {
    color: var(--text-main) !important;
    margin-right: calc(15px * var(--font-multiplier)) !important;
    width: calc(20px * var(--font-multiplier)) !important;
    margin-top: calc(0.3em * var(--font-multiplier)) !important;
    font-size: calc(1.1rem * var(--font-multiplier)) !important;
    flex-shrink: 0 !important;
    display: inline-block;
    text-align: center;
    -webkit-text-stroke: var(--icon-stroke) !important;
    opacity: var(--icon-opacity);
    transition: opacity 0.3s ease; /* Płynne przejście przy zmianie trybu */
}

/*.dark-mode .contact-item i,
body.dark-mode .contact-item i {
    color: #b8bcbf !important;
    -webkit-text-stroke: 0px !important;
    opacity: 0.9; 
}*/

.contact-item a {
    /*color: #004a99;*/
    color: var(--text-white-blue) !important;
    text-decoration: underline;
    /*word-break: break-all;*/
}

/*.dark-mode .contact-item a {
    color: #8ab4f8 !important;
}*/

.contact-item span, .contact-item a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word; /* Agresywne łamanie maili, by nie wypchały boxa */
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
    gap: calc(25px * var(--font-multiplier));
}

/* 1. DOMYŚLNE STYLE (Dla komputerów i tabletów) */
.info-section {
    flex: 1 1 300px; /* Elastyczna baza, minimum 300px */
    min-width: 0;
    border-right: 1px solid var(--border-light) !important;
    padding-right: 25px;
}

.hours-section {
    flex: 0 1 350px; /* Stała szerokość dla godzin, niech się nie rozpycha */
    min-width: 0;
}

h4[class*="hours-title"] {
    margin: 0 !important;
    margin-bottom: calc(10px * var(--font-multiplier)) !important;
    /*font-weight: bold !important;*/
    font-weight: var(--h-weight) !important;
    letter-spacing: var(--letter-spacing);
    color: var(--text-main) !important;
    font-size: calc(1.3rem * var(--font-multiplier)) !important;
    line-height: calc(1.2 * var(--main-line-height, 1.2)) !important;
    display: block !important;
}

/*.dark-mode h3[class*="branch-title"],
.dark-mode h4[class*="hours-title"],
body.dark-mode h3[class*="branch-title"],
body.dark-mode h4[class*="hours-title"] {
    font-weight: 500 !important; 
    letter-spacing: 0.02em; 
}
*/

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-list li {
    display: flex;
    flex-wrap: wrap; /* Pozwala godzinom spaść pod dni przy powiększeniu */
    justify-content: space-between;
    padding: calc(8px * var(--font-multiplier)) 0;
    /*border-bottom: 1px solid rgba(0,0,0,0.1);*/
    border-bottom: 1px solid rgba(var(--main-black-rgb), 0.1);
    line-height: var(--main-line-height);
}

.day { 
    flex: 1 0 calc(150px * var(--font-multiplier));
    font-size: calc(1.1rem * var(--font-multiplier)) !important;
} 

.time { 
    /*font-weight: bold;*/
    font-weight: var(--h-weight) !important;
    font-size: calc(1.1rem * var(--font-multiplier));
}

/*.dark-mode .hours-list .time,
body.dark-mode .hours-list .time {
    font-weight: 500 !important; 
}*/

/*.dark-mode .hours-list .day,
body.dark-mode .hours-list .day {
    font-weight: 400 !important;
    opacity: 0.9;
}*/

.closed-day { 
  /*color: #d93025 !important;*/
  color: var(--text-red) !important;
  /*font-weight: bold;*/
  font-weight: var(--h-weight) !important;
}

.special-day { 
  /*color: #1e7e34 !important;*/
  color: var(--text-green) !important;
  /*font-weight: bold;*/
  font-weight: var(--h-weight) !important;
}

/*.dark-mode .closed-day, 
body.dark-mode .closed-day { 
    color: #ff8a80 !important; 
}

.dark-mode .special-day, 
body.dark-mode .special-day { 
    color: #b9f6ca !important; 
}*/

/* ==== KONIEC FILIE - BIBLIOTEKA === */


/* ==== POCZĄTEK MODUŁ INFORMACYJNY - BIBLIOTEKA GŁÓWNA === */

.library-card { 
    /*background-color: #ffffff !important;*/
    background-color: var(--bg-dark) !important; 
    /*border: 1px solid #e0e0e0;*/
    border: 1px solid var(--border-light) !important;
    /*color: #000000 !important;*/
    color: var(--text-main) !important;
    border-radius: 12px;
    padding: calc(20px * var(--font-multiplier));
    margin-bottom: calc(40px * var(--font-multiplier));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    line-height: var(--main-line-height);
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box !important;
}

/*body.dark-mode .library-card { 
    background-color: #1a1a1a !important; 
    border-color: #333 !important; 
    color: #b8bcbf !important; 
}*/

.library-horizontal-card { 
    /*background-color: #ffffff !important;*/
    background-color: var(--bg-dark) !important; 
    /*border: 1px solid #e0e0e0;*/
    border: 1px solid var(--border-light) !important;
    /*color: #000000 !important;*/
    color: var(--text-main) !important;
    border-radius: 12px;
    /* Używamy zmiennej do paddingu, aby karta "oddychała" przy zwiększaniu interlinii */
    padding: calc(20px * var(--font-multiplier));
    margin-bottom: calc(40px * var(--font-multiplier));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    line-height: var(--main-line-height);
    overflow-wrap: break-word; /* Wymusza łamanie długich słów */
    word-wrap: break-word;
    max-width: 100%; /* Nie pozwala karcie wyjść poza ekran */
    box-sizing: border-box !important;
}

h3[class*="library-branch-title"] {
    margin: 0 0 calc(15px * var(--font-multiplier)) 0 !important;
    /*font-weight: bold !important;*/
    font-weight: var(--h-weight) !important;
    letter-spacing: var(--letter-spacing);
    /*color: #000000 !important;*/
    color: var(--text-main) !important;
    text-transform: uppercase !important;    
    font-size: calc(1.5rem * var(--font-multiplier)) !important;
    line-height: calc(1.2 * var(--main-line-height, 1.2)) !important;
    display: block !important;
}

/*body.dark-mode h3[class*="library-branch-title"] { 
    color: #b8bcbf !important; 
    font-weight: 500 !important; 
    letter-spacing: 0.02em; }
*/

/* 3. TREŚĆ I LISTY - WYRÓWNANIE FONTÓW */
.library-info-item {
    font-size: calc(1.1rem * var(--font-multiplier)) !important;
    line-height: var(--main-line-height) !important;
    margin-bottom: 30px !important;
}
 
.library-info-item p, 
.library-contact-item, 
.point {
    font-size: calc(1.1rem * var(--font-multiplier)) !important;
    line-height: var(--main-line-height) !important;
    margin-bottom: calc(12px * var(--font-multiplier)) !important;
}

/* Ikony w danych teleadresowych (duże, zachowane jako <i>) */
.library-contact-item i {
    /*color: #000000 !important;*/
    color: var(--text-main) !important;
    margin-right: calc(15px * var(--font-multiplier)) !important;
    width: calc(20px * var(--font-multiplier)) !important;
    margin-top: calc(0.3em * var(--font-multiplier)) !important;
    font-size: calc(1.1rem * var(--font-multiplier)) !important;
    flex-shrink: 0 !important;
    display: inline-block;
    text-align: center;
    opacity: var(--icon-opacity);
}

/*body.dark-mode .library-contact-item i { 
    color: #b8bcbf !important; 
    opacity: 0.9; 
}*/

/* 4. NOWA LISTA PUNKTOWA (BEZ IKON W HTML) */
.points-list {
    list-style: none !important;
    padding: 0 0 calc(10px * var(--font-multiplier)) calc(15px * var(--font-multiplier)) !important;
    margin: 0 !important;
}

.points-list li {
    position: relative;
    padding: calc(4px * var(--font-multiplier)) 0 calc(4px * var(--font-multiplier)) calc(25px * var(--font-multiplier));
    line-height: var(--main-line-height);
    display: block;
}

/* Generowanie idealnie wyśrodkowanej kropki */
.points-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(1.1em * var(--font-multiplier));
    transform: translateY(-50%);
    width: calc(6px * var(--font-multiplier));
    height: calc(6px * var(--font-multiplier));
    /*background-color: #444; */
    background-color: var(--text-main) !important; 
    border-radius: 50%;
}

/* Jasna kropka w trybie ciemnym */
/*body.dark-mode .points-list li::before {
    background-color: #b8bcbf;
}*/

/* 5. LINKI */
.library-contact-item a {
    /*color: #004a99;*/
    color: var(--text-blue) !important;
    text-decoration: underline;
}

/*body.dark-mode .library-contact-item a { 
  color: #8ab4f8 !important; 
}*/

.library-contact-item span, .library-contact-item a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* ==== KONIEC MODUŁ INFORMACYJNY - BIBLIOTEKA GŁÓWNA === */



/* ==========================================================================
   NADAWANIE SKALOWANIA DLA SUBMENU (DROPDOWN & MEGA MENU)
   ========================================================================== */

/* 1. Standardowe linki w submenu i Mega Menu */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span,
.sp-megamenu-parent .sp-mega-group > li > a,
.sp-megamenu-parent .sp-mega-group > li > span {
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.4) !important;
    color: var(--text-main) !important;
    height: auto !important;
    transition: all 0.3s ease;
}

/* Kolor tekstu w submenu w Dark Mode */
/*body.dark-mode .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
body.dark-mode .sp-megamenu-parent .sp-dropdown li.sp-menu-item span {
    color: #ffffff !important;
}*/

/* 2. Nagłówki grup w Mega Menu (te, które miały sztywne 14px) */
.sp-megamenu-parent .sp-mega-group > li > .sp-mega-group-title {
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important; /* Trochę większe niż zwykłe linki */
    color: var(--text-main) !important;
    text-transform: uppercase;
    /*font-weight: 700;*/
    font-weight: var(--h-weight) !important;
    margin-bottom: 10px;
    display: block;
}

/* 1. Celujemy dokładnie w ten selektor, który widziałaś w inspektorze, 
      ale dodajemy naszą klasę nadrzędną, aby zwiększyć priorytet */

.sp-megamenu-parent li.menu-bez-uppercase .sp-mega-group > li > a,
.sp-megamenu-parent li.menu-bez-uppercase .sp-mega-group > li > span,
.sp-megamenu-parent li.menu-bez-uppercase .sp-mega-group > li > .sp-mega-group-title {
    text-transform: none !important;
    font-size: calc(0.9375rem * var(--font-multiplier, 1)) !important; /* to ok. 15px */
    /*font-weight: normal !important;*/
    font-weight: var(--font-weight-med) !important;
}

/* 2. Jeśli Helix nadal jest uparty i trzyma uppercase na samych linkach wewnątrz grup */
li.menu-bez-uppercase .sp-dropdown li.sp-menu-item a {
    text-transform: none !important;
}


/* ==========================================================================
   DARK MODE DLA SUBMENU (DROPDOWN)
   ========================================================================== */


/*body.dark-mode .sp-dropdown, 
body.dark-mode .sp-dropdown .sp-dropdown-inner,
body.dark-mode .sub-menu {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}*/

/* Tło i ramki submenu */
.sp-dropdown, 
.sp-dropdown .sp-dropdown-inner,
.sub-menu {
    background-color: var(--main-dark) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 5px 15px rgba(var(--main-black-rgb), var(--shadow-opacity));
}

/* Efekt hover w Dark Mode */
/*body.dark-mode .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background-color: #333 !important;
    color: #00d1b2 !important; 
}*/

/* Efekt Hover dla linków w menu */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background-color: var(--main-white) !important;
    color: var(--focus-accent) !important;
}

/* ==========================================================================
   FIX DLA ISTNIEJĄCEGO KODU (Nadpisanie sztywnych wartości)
   ========================================================================== */

/* Musimy "odczarować" te 16px, które masz na końcu pliku */
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {
    font-size: calc(1.125rem * var(--font-multiplier, 1)) !important; /* 18px bazowo */
    color: var(--text-main-menu) !important;
    letter-spacing: var(--letter-spacing);
}

/* =================== POCZĄTEK MODUŁ DOSTEPNOŚCI ================ */
/* 1. BAZA PANELU */
#side-acc-panel { 
  position: fixed; 
  right: 20px; 
  top: 40%; 
  transform: translateY(-50%); 
  z-index: 999999; 
}

.acc-main-trigger { 
  width: 50px; 
  height: 50px; 
  /*background: #293f8e;*/
  background: var(--acc-trigger-bg); 
  /*border: 2px solid #fff;*/
  border: 2px solid var(--acc-trigger-border); 
  border-radius: 50%; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  /*box-shadow: 0 4px 10px rgba(0,0,0,0.3);*/
  box-shadow: 0 4px 10px rgba(var(--main-black-rgb), 0.3);
  transition: all 0.3s ease;
}

.acc-main-trigger:focus-visible {
    outline: 4px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px;
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

.acc-icon-svg { width: 30px; height: 30px; }

.acc-side-menu { 
  display: none; 
  /*background: #fff;*/
  background: var(--acc-panel-bg); 
  /*border: 2px solid #293f8e;*/
  border: 2px solid var(--acc-panel-border);
  color: var(--acc-panel-text);
  border-radius: 10px; 
  padding: 15px; 
  width: 240px; 
  margin-top: 10px; 
  /*box-shadow: -5px 5px 20px rgba(0,0,0,0.2);*/
  box-shadow: -5px 5px 20px rgba(var(--main-black-rgb), 0.2);
}

.acc-side-menu.active { display: block; }

.acc-title { 
    /*font-weight: bold;*/
    font-weight: var(--h-weight);
    /*color: #293f8e;*/
    color: var(--acc-panel-text);
    /*border-bottom: 1px solid #eee;*/
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px; 
    text-align: center; 
}

/* 2. STYLE ELEMENTÓW PANELU */
/* Blokada zoomu dla wszystkich interaktywnych elementów panelu */
.acc-main-trigger, 
.acc-row-btn, 
.acc-btn-group button {
    touch-action: manipulation !important;
}

.acc-row-btn { 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    padding: 8px; 
    margin: 4px 0; 
    /*background: #f4f4f4;*/
    background: var(--acc-btn-bg); 
    /*border: 1px solid #ddd;*/
    border: 1px solid var(--border-light);
    border-radius: 4px; 
    cursor: pointer; 
    /*color: #000 !important;*/
    color: var(--acc-panel-text) !important;
    font-size: 13px !important; 
    line-height: 1.2 !important; 
}

.acc-btn-group { display: flex; gap: 5px; margin-bottom: 10px; }

.acc-btn-group button { 
    flex: 1; 
    padding: 5px; 
    /*background: #eee;*/
    background: var(--bg-light) !important; 
    /*border: 1px solid #ccc;*/
    border: 1px solid var(--border-light);
    cursor: pointer; 
    /*font-weight: bold;*/
    font-weight: var(--h-weight) !important;
    /*color: #000 !important;*/
    color: var(--text-main) !important; 
}

.acc-btn-group button:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 2px; 
    border-radius: 4px;
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

.acc-label { 
    font-size: 11px; 
    /*font-weight: bold;*/
    font-weight: var(--h-weight) !important;
    text-transform: uppercase; 
    /*color: #666;*/
    color: var(--acc-panel-text);
    line-height: 1.1 !important; 
    margin: 20px 0px 10px 0px; 
}

.acc-row-btn:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 2px; 
    border-radius: 4px;
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

.acc-row-btn.active { 
    /*background: orange !important;*/
    background: var(--acc-btn-active) !important; 
    /*color: #000 !important;*/
    color: var(--text-main) !important;
}

/* Interlinia tylko dla tekstów ciągłych (p, li) */
body.spacing-active p, 
body.spacing-active li, 
body.spacing-active .sppb-addon-text {
    line-height: var(--main-line-height) !important;
}

/* Nagłówki przy powiększeniu potrzebują mniejszej interlinii niż tekst p */
body.spacing-active h1, body.spacing-active h2 {
    line-height: calc(var(--main-line-height) * 0.8) !important;
}

/* 4. TRYBY WIDOKU - AKTUALIZACJA SOFT GREYSCALE (FIX NACHODZENIA) */

/*body.dark-mode, 
body.dark-mode #sp-main-body,
body.dark-mode #sp-main {
    background-color: #121212 !important;
    color: #b8bcbf !important;
}

body, 
body #sp-main-body,
body #sp-main {
    background-color: var(--main-white) !important;
    color: var(--text-main) !important;
}*/

body,
#sp-main-body,
#sp-main {
    background-color: var(--main-white) !important;
    color: var(--text-main) !important;
    /*transition: background-color 0.3s ease, color 0.3s ease; */
}

body.dark-mode section, 
body.dark-mode .sppb-section {
    background-color: transparent !important; 
    color: var(--text-main) !important;
}

/* Kluczowa zmiana: Sekcje wewnątrz nie mogą mieć własnego tła, chyba że są banerami z obrazkiem */
/*body.dark-mode section, 
body.dark-mode .sppb-section {
    background-color: transparent !important; 
    color: #b8bcbf !important;
}*/

/* Wyjątek: Jeśli sekcja ma obrazek tła w SPPB, pozwalamy mu być */
/*body.dark-mode .sppb-section[style*="background-image"] {
    background-color: rgba(0,0,0,0.5) !important; 
}*/

/* 2. INTELIGENTNY WYJĄTEK DLA OBRAZKÓW W TLE */
/* Ten blok sprawia, że jeśli w SPPB dasz zdjęcie w tle, to zostanie ono lekko przyciemnione naszą zmienną RGB i mocą cienia */
body.dark-mode .sppb-section[style*="background-image"] {
    background-color: rgba(var(--main-black-rgb), var(--shadow-opacity)) !important;
    /* transition zapewni płynne ściemnianie tła przy zmianie trybu */
    transition: background-color 0.3s ease; 
}

/* Przyciski też zmiękczamy, żeby nie były zbyt kontrastowe */
/*body.dark-mode button:not(.acc-main-trigger):not(.mag-control):not(.custom-control):not(.mob-nav-btn):not([data-bs-target]) {
    background: #1a1a1a !important; 
    color: #b8bcbf !important;
    border: 1px solid rgba(255,255,255,0.19) !important;
    transition: all 0.3s ease;
}*/

button:not(.acc-main-trigger):not(.mag-control):not(.custom-control):not(.mob-nav-btn):not([data-bs-target]):not(.cky-btn-revisit) {
    /*background: #1a1a1a !important;*/
    background-color: var(--bg-light) !important;
    /*color: #b8bcbf !important;*/
    color: var(--text-main) !important;
    border: 1px solid rgba(var(--main-border-rgb), 0.19) !important;
    transition: all 0.3s ease;
}

/* Wykorzystujemy ten sam silny selektor, aby wymusić błękit na aktywnym przycisku */
body.dark-mode button.active:not(.acc-main-trigger):not(.mag-control):not(.custom-control):not(.mob-nav-btn):not([data-bs-target]):not(.cky-btn-revisit) {
    /*background: #ADD8E6 !important;*/
    background: var(--text-white-blue) !important; 
    /*color: #000 !important;*/
    color: var(--btn-text) !important;
    /*border-color: #ADD8E6 !important;*/
    border-color: var(--text-white-blue) !important;
    opacity: 1 !important;
}

/* Dodatkowo dla tekstów wewnątrz (strong/small), żeby też były czarne na błękitnym tle */
body.dark-mode button.active:not(.acc-main-trigger) strong,
body.dark-mode button.active:not(.acc-main-trigger) small {
    /*color: #000 !important;*/
    color: var(--btn-text) !important;
}

/* Dodajemy hover dla przycisków, żeby strona "żyła" */
body.dark-mode button:hover:not(.acc-main-trigger) {
    background: #252525 !important;
    /*color: #ffffff !important;*/
    color: var(--main-dark) !important;
}

/* --- KOREKTA CZYTELNOŚCI LINKÓW W DARK MODE --- */
body.dark-mode .contact-link, 
body.dark-mode .legal-link,
body.dark-mode .author-link {
    /*font-weight: 500 !important; */
    font-weight: var(--font-weight-bold) !important;
    /*letter-spacing: 0.2px !important;*/
    letter-spacing: var(--letter-spacing);
    text-shadow: none !important;
}

/* =================== KONIEC MODUŁ DOSTEPNOŚCI ================ */

/* =================== INTELIGENTNY BANER (Wersja Dostępna i Elastyczna) ================ */

.sppb-section.baner-strony {
    position: relative;
    z-index: 1;
    min-height: 200px !important;
    height: auto !important; 
    max-height: none !important;
    display: flex !important;
    align-items: center !important; 
    justify-content: flex-start !important;
    overflow: hidden;
}

.sppb-section.baner-strony::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transition: background 0.3s ease;
    /*background-color: rgba(255, 255, 255, 0.6) !important;*/
    background-color: rgba(var(--main-dark-rgb), 0.6) !important; 
}

/* TRYB CIEMNY */
/*body.dark-mode .sppb-section.baner-strony::before {
    background-color: rgba(0, 0, 0, 0.7) !important;
}*/

/* Tekst i nagłówki */
.sppb-section.baner-strony h1.sppb-addon-title,
.sppb-section.baner-strony .sppb-addon-title {
    /*color: #000000 !important;*/
    margin: 0 !important; /* Usuwamy marginesy, bo centrowanie robi Flex */
    padding: 20px 15px !important; /* Bezpieczny margines wewnętrzny */
    white-space: normal !important;
    word-break: break-word !important;
    width: 100% !important;
}

.sppb-section.baner-strony h1.sppb-addon-title {
    /*color: #000000 !important;*/
    color: var(--main-dark) !important;
}

/*body.dark-mode .sppb-section.baner-strony h1.sppb-addon-title {
    color: #ffffff !important;
}*/

/* =================== END - INTELIGENTNY BANER (Wersja Dostępna i Elastyczna) ================ */

/* =================== POCZĄTEK MODUŁ SPONSORZY W SP-POSITION1 ================ */
 /* --- 1. STRUKTURA I TŁO --- */ 
 .sponsors-section { 
     /*background-color: #ffffff;*/
     background-color: var(--main-white) !important;
     padding: 50px 5px 50px 5px; 
     text-align: center; 
     transition: background-color 0.3s ease;
 }
 
  /*body.dark-mode .sponsors-section { 
     background-color: #121212 !important; 
 } */

 .sponsors-grid { 
     display: grid; 
     grid-template-columns: repeat(4, 1fr);  
     gap: 60px; 
     max-width: 1300px; 
     margin: 0 auto; 
     align-items: center; 
 } 

 /* Wyśrodkowanie ostatniego elementu (5-ty w gridzie 4-kolumnowym) */
 .sponsor-item:last-child:nth-child(5) {
     grid-column: span 4;
     justify-self: center;
 }

 /* --- 2. ELEMENT SPONSORA --- */ 
 .sponsor-item { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     text-decoration: none; 
     transition: transform 0.3s ease; 
     outline: none !important;
     border-radius: 8px;
     padding: 10px;
 } 

 .sponsor-item img { 
     max-width: 100%; 
     max-height: 75px;  
     width: auto; 
     height: auto; 
     object-fit: contain; 
     /*filter: grayscale(1);*/
     filter: var(--sponsor-filter); 
     opacity: 0.6;
     /*opacity: var(--sponsor-opacity);*/
     transition: all 0.3s ease; 
 } 
 
 /* body.dark-mode .sponsor-item img {
     filter: grayscale(1) invert(0.85); 
     opacity: 0.6;
     transition: all 0.3s ease;
 }*/
 
.sponsor-item:hover,
.sponsor-item:focus-visible { 
    transform: translateY(-5px);
    transition: transform 0.3s ease;
 } 

.sponsor-item:hover img,
.sponsor-item:focus-visible img { 
    /*filter: grayscale(0);*/
    filter: var(--sponsor-hover-filter) !important; 
    opacity: 1; 
 } 

/* body.dark-mode .sponsor-item:hover img,
 body.dark-mode .sponsor-item:focus-visible img {
     filter: grayscale(1) invert(1); 
     opacity: 1;
 }*/


 /*.sponsor-item:focus-visible { 
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 7px #293f8e !important; 
 }*/

 /*body.dark-mode .sponsor-item:focus-visible {
     box-shadow: 0 0 0 2px #000, 0 0 0 4px #b8bcbf, 0 0 0 7px rgba(184, 188, 191, 0.3) !important;
 }*/

.sponsor-item:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}
 
/* =================== KONIEC MODUŁ SPONSORZY W SP-POSITION1 ================ */

/* ==========================================================================
   DYNAMICZNE BELKI NAGŁÓWKÓW - WERSJA EXTRA (NACHODZĄCE) ORAZ FLAT (PŁASKIE)
   po nowemu
   ========================================================================== */

/* 1. STYL BAZOWY (Wspólny dla wszystkich belek) */
[class*="moj-naglowek"] {
    position: relative !important;
    display: flex !important;
    align-items: center !important; 
    z-index: 999 !important; 
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    min-height: calc(4.5rem * var(--font-multiplier, 1)) !important;
    box-shadow: 0 10px 20px rgba(var(--main-black-rgb), 0.1);
    
    /* Fonty i wygładzanie sterowane zmiennymi z :root */
    font-weight: var(--header-font-weight) !important;
    letter-spacing: var(--header-letter-spacing) !important;
    -webkit-font-smoothing: antialiased;
}

/* 2. TYPOGRAFIA (h1, h2) */
[class*="moj-naglowek"] h1, 
[class*="moj-naglowek"] h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: calc(1.2rem + (0.8rem * var(--font-multiplier, 1))) !important;
    line-height: var(--main-line-height, 1.2) !important;
    text-transform: uppercase !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    color: inherit !important;
    width: 100% !important;
    white-space: normal !important; 
    overflow-wrap: break-word !important;
}

/* 3. KOLORYSTYKA (Białe vs Czarne) */
.moj-naglowek-extra, .moj-naglowek-flat, .moj-naglowek-right.moj-white {
    background-color: var(--header-bg-light) !important;
    color: var(--header-text-light) !important;
}
.moj-naglowek-extra-white, .moj-naglowek-flat-white, .moj-naglowek-right.moj-black {
    background-color: var(--header-bg-dark) !important;
    color: var(--header-text-dark) !important;
}

/* 4. LOGIKA UKŁADU - PRZYWRÓCENIE ORYGINALNYCH PADDINGÓW */

/* BELKI LEWE (Extra i Flat) - Przywracamy 30px 40px 30px 0 */
.moj-naglowek-extra, .moj-naglowek-extra-white,
.moj-naglowek-flat, .moj-naglowek-flat-white {
    padding: 30px 40px 30px 0 !important; 
    margin-bottom: -15px !important; 
    border-radius: 0 5px 5px 0;
}

/* BELKI PRAWE (Right) - Przywracamy 30px 0 30px 40px */
.moj-naglowek-right {
    padding: 30px 0 30px 40px !important; 
    margin-bottom: -15px !important; 
    border-radius: 5px 0 0 5px;
    justify-content: flex-end !important;
}
.moj-naglowek-right h2 { text-align: right !important; }

/* WYJĄTEK: Wersja FLAT (Kasuje margines nachodzenia) */
[class*="-flat"] {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   DYNAMICZNE BELKI NAGŁÓWKÓW - WERSJE EXTRA (NACHODZĄCE) ORAZ FLAT (PŁASKIE)
   ========================================================================== */


/* 1. STYL BAZOWY - Dodajemy nowe klasy do wspólnych ustawień */
/*.moj-naglowek-extra, .moj-naglowek-extra-white,
.moj-naglowek-flat, .moj-naglowek-flat-white {
    position: relative !important;
    display: flex !important;
    align-items: center !important; 
    z-index: 999 !important; 
    margin-top: 0 !important;
    margin-bottom: -15px !important; 
    border-radius: 0 5px 5px 0;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    padding: 30px 40px 30px 0 !important; 
    min-height: calc(4.5rem * var(--font-multiplier, 1)) !important;
    box-shadow: 0 10px 20px rgba(var(--main-black-rgb), 0.1);
}

.moj-naglowek-extra h1, .moj-naglowek-extra-white h1,
.moj-naglowek-flat h1, .moj-naglowek-flat-white h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: calc(1.2rem + (0.8rem * var(--font-multiplier, 1))) !important;
    line-height: var(--main-line-height, 1.2) !important;
    text-transform: uppercase !important;
    width: 100% !important;
    white-space: normal !important; 
    overflow-wrap: break-word !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 600 !important;
}

.moj-naglowek-extra h2, .moj-naglowek-extra-white h2,
.moj-naglowek-flat h2, .moj-naglowek-flat-white h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: calc(1.2rem + (0.8rem * var(--font-multiplier, 1))) !important;
    line-height: var(--main-line-height, 1.2) !important;
    text-transform: uppercase !important;
    width: 100% !important;
    white-space: normal !important; 
    overflow-wrap: break-word !important;
}

.moj-naglowek-extra-white, .moj-naglowek-flat-white { 
    background-color: #121212 !important; 
    color: #ffffff !important; 
}
.moj-naglowek-extra-white h1, .moj-naglowek-flat-white h1 { color: #ffffff !important; }
.moj-naglowek-extra-white h2, .moj-naglowek-flat-white h2 { color: #ffffff !important; }


.moj-naglowek-extra, .moj-naglowek-flat { 
    background-color: #ffffff !important; 
    color: #121212 !important; 
}
.moj-naglowek-extra h1, .moj-naglowek-flat h1 { color: #121212 !important; }
.moj-naglowek-extra h2, .moj-naglowek-flat h2 { color: #121212 !important; }

.moj-naglowek-flat, 
.moj-naglowek-flat-white {
    margin-bottom: 0 !important; 
}
*/
/* Klasa dla Sekcji SPPB, w której siedzi Twoja belka */
.sekcja-belka-naglowek {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centrowanie pionowe */
    align-items: flex-start !important; /* Belka zaczyna się od lewej */
    
    /* Resetujemy narzucone przez SPPB i Helix style */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
    /* Wymuszamy wysokość - na mobile auto, na desktopie z Twoich ustawień */
    min-height: 200px !important; 
}

/* Usuwamy marginesy z Row i Column wewnątrz tej sekcji, które psują centrowanie */
.sekcja-belka-naglowek .sppb-row-container,
.sekcja-belka-naglowek .sppb-row,
.sekcja-belka-naglowek .sppb-column,
.sekcja-belka-naglowek .sppb-column-addons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /*width: 100% !important;*/
}






/* ==========================================================================
   SYSTEM NAGŁÓWKÓW PRAWYCH (BIAŁY/CZARNY | EXTRA/FLAT | POSITION1 FIX)
   ========================================================================== */

/* 1. STYL BAZOWY */
/*.moj-naglowek-right {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; 
    z-index: 999 !important;
    margin-top: 0 !important;
    margin-bottom: -15px !important; 
    border-radius: 5px 0 0 5px; 
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    padding: 30px 0 30px 40px !important; 
    min-height: calc(4.5rem * var(--font-multiplier, 1)) !important;
    box-shadow: 0 10px 20px rgba(var(--main-black-rgb), 0.1);
}

.moj-naglowek-right h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: calc(1.2rem + (0.8rem * var(--font-multiplier, 1))) !important;
    line-height: var(--main-line-height, 1.2) !important;
    text-transform: uppercase !important;
    text-align: right !important; 
    width: 100% !important;
    white-space: normal !important; 
    overflow-wrap: break-word !important;
}

.moj-naglowek-right.moj-white { background-color: #ffffff !important; }
.moj-naglowek-right.moj-white h2 { color: #121212 !important; }
.moj-naglowek-right.moj-black { background-color: #121212 !important; }
.moj-naglowek-right.moj-black h2 { color: #ffffff !important; }
.moj-naglowek-right.moj-flat { margin-bottom: 0 !important; }
*/





/* ==========================================================================
   DARK MODE - SOFT GREYSCALE (WYGŁADZONY, NIE DRAŻNIĄCY)
   ========================================================================== */

/*body.dark-mode [class*="moj-naglowek"] h1 {
    color: #b8bcbf !important; 
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 1px rgba(184, 188, 191, 0.2) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

body.dark-mode [class*="moj-naglowek"] h2 {
    color: #b8bcbf !important; 
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 1px rgba(184, 188, 191, 0.2) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

body.dark-mode [class*="moj-naglowek"] {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .moj-naglowek-extra-white, 
body.dark-mode .moj-naglowek-flat-white,
body.dark-mode .moj-naglowek-right.moj-black {
    background-color: #080808 !important; 
}
*/







/* =================== POCZĄTEK MODUŁ PROJEKTY EU W SP-POSITION1 ================ */
.eu-funding-section {
    /*background-color: #ffffff;*/
    background-color: var(--main-white) !important;
    padding: 40px 20px;
    /*border-top: 1px solid #e5e5e5;*/
    border-top: 1px solid rgba(var(--main-border-rgb), 0.05) !important;
    /*color: #333;*/
    color: var(--text-main);
    font-family: Arial, sans-serif;
    transition: all 0.3s ease; /* Płynne przejście kolorów */
}

/*body.dark-mode .eu-funding-section {
    background-color: #121212 !important;
    border-top-color: #333 !important;
}

body.dark-mode .eu-funding-section {
    background-color: #121212 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important; 
}*/

/* Siatka logotypów */
.eu-logos-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto 30px auto;
}

.eu-logo-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.eu-logo-item img {
    max-width: 100%;
    max-height: 80px;
    height: auto;
    object-fit: contain;
}*/

.eu-logo-item img {
    max-width: 100%;
    max-height: 80px;
    height: auto;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    border-radius: 2px;

    /* Te wartości zmieniają się automatycznie (Dzień: transparent/0 | Noc: biały/padding) */
    background-color: var(--eu-logo-bg) !important;
    padding: var(--eu-logo-padding) !important;
    filter: var(--eu-logo-filter);
    opacity: var(--eu-logo-opacity);
}

/*body.dark-mode .eu-logo-item img {
    background-color: #ffffff !important; 
    padding: 10px 15px !important; 
    border-radius: 2px;
    opacity: 0.8; 
    filter: grayscale(1); 
    transition: all 0.3s ease;
}*/

.eu-logo-item img:hover {
    opacity: 1;
    filter: grayscale(0); /* Na hoverze flaga odzyskuje unijny błękit i złoto - pełna poprawność! */
}

/* --- MODUŁ LOGOTYPÓW UE --- */

/* Interakcja (Hover) - spójna z Twoją logiką "pełnej poprawności" */
/*body.dark-mode .eu-logo-item img:hover {
    filter: grayscale(0) !important;
    opacity: 1 !important;
}*/

/* Treść tekstowa */
.eu-text-content {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
}

.eu-text-content p {
    margin: 5px 0;
    font-size: 1rem;
    /*color: #222;*/
    color: var(--text-main) !important;
}

/* Teksty główne w kolorze Twojej platyny */
/*body.dark-mode .eu-text-content p {
    color: #b8bcbf !important;
    -webkit-font-smoothing: antialiased;
}
body.dark-mode .eu-text-content p {
    color: #eee !important;
}*/

.eu-text-content strong {
    font-weight: 700;
}

.eu-subtext {
    font-size: 0.9rem !important;
    /*color: #555 !important;*/
    color: var(--text-main-light);
}

/*body.dark-mode .eu-subtext {
    color: #aaa !important;
}

body.dark-mode .eu-subtext {
    color: #888 !important;
}
*/

/* =================== KONIEC MODUŁ PROJEKTY EU W SP-POSITION1 ================ */



/* =================== START - LEWA KOLUMNA: Menu boczne (np. Biblioteka) ================ */

/* 1. Nagłówek modułu w lewej kolumnie - skalowanie */
#sp-left .sp-module-title {
    font-size: calc(1.5rem * var(--font-multiplier, 1)) !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
    white-space: normal !important;    /* KLUCZ: pozwala tekstowi pęknąć na dwie linie */
    word-break: break-word !important; /* Rozbija długie słowa */
    overflow-wrap: break-word !important;
}

/* 2. Linki w menu bocznym - czcionka i bazowa interlinia */
#sp-left .mod-menu li a {
    font-size: calc(1.2rem * var(--font-multiplier, 1)) !important;
    color: var(--text-main) !important;
    /* Ustawiamy elastyczną linię, żeby litery nie nachodziły na siebie przy zoomie */
    line-height: 1.4 !important; 
    display: block !important;
    padding: 8px 0; /* Odstęp między linkami */
    transition: all 0.3s ease;
    white-space: normal !important;    /* KLUCZ: pozwala tekstowi pęknąć na dwie linie */
    word-break: break-word !important; /* Rozbija długie słowa */
    overflow-wrap: break-word !important;
}

/* 3. Reakcja na suwak INTERLINII z panelu dostępności */
body.spacing-active #sp-left .mod-menu li a {
    line-height: var(--main-line-height, 1.6) !important;
    /* Dodatkowo odsuwamy elementy listy od siebie, gdy zwiększamy odstępy */
    margin-bottom: calc(5px * var(--font-multiplier, 1)) !important;
}

/* 4. Poprawka: Usuwamy stały Bold z bazy, zostawiamy tylko hover */
#sp-left .mod-menu li.active a {
    font-weight: normal !important; /* To zabije ten stały bold */
    color: inherit !important;
}

/* Potem pogrubiamy TYLKO to, co jest faktycznie otwarte */
/* Klasa .current jest nadawana przez Joomlę tylko linkowi docelowemu */
#sp-left .mod-menu li.current > a,
#sp-left .mod-menu li a.current {
    font-weight: bold !important;
    /*color: #293f8e !important;*/
}

/* =================== END - LEWA KOLUMNA: Menu boczne (np. Biblioteka) ================ */

/* =================== START - STOPKA: Obsługa powiększania tekstu i interlinii ================ */

/* 1. Rozmiar czcionki dla linków w menu stopki */
#sp-bottom1 .mod-menu li a, 
#sp-bottom2 .mod-menu li a, 
#sp-bottom3 .mod-menu li a, 
#sp-bottom4 .mod-menu li a {
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    transition: all 0.3s ease;
}

/* 2. Interlinia (odstępy między linkami) po aktywacji suwaka */
body.spacing-active #sp-bottom1 .mod-menu li a,
body.spacing-active #sp-bottom2 .mod-menu li a,
body.spacing-active #sp-bottom3 .mod-menu li a,
body.spacing-active #sp-bottom4 .mod-menu li a {
    line-height: var(--main-line-height, 1.4) !important;
    display: inline-block; /* Pozwala na poprawne działanie line-height na linkach */
    padding-top: 5px;      /* Dodatkowy margines bezpieczeństwa przy dużych skokach */
    padding-bottom: 5px;
}

/* 3. Nagłówek modułu (np. "Szybkie linki") - on też powinien rosnąć */
#sp-bottom1 .sp-module-title, 
#sp-bottom2 .sp-module-title, 
#sp-bottom3 .sp-module-title, 
#sp-bottom4 .sp-module-title {
    font-size: calc(1.3rem * var(--font-multiplier, 1)) !important;
    line-height: 1.2 !important;
}

/* =================== END - STOPKA: Obsługa powiększania tekstu i interlinii ================ */

/* =================== START - FIX DLA TOP BAR (Telefon i Mail) - WERSJA DO WYRÓWNANIA ================ */

/* 1. Sama lista - robimy ją elastyczną */
#sp-top-bar ul.sp-contact-info {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Środkowanie na mobile */
    gap: 5px 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 3. Ustawienia elementów listy */
#sp-top-bar ul.sp-contact-info li {
    display: inline-flex !important;
    align-items: center;
    font-size: calc(0.9rem * var(--font-multiplier, 1)) !important;
    white-space: nowrap !important; /* Domyślnie w jednej linii */
}

/* 5. Ikony */
#sp-top-bar ul.sp-contact-info li span {
    margin-right: 8px !important;
}

/* =================== END - FIX DLA TOP BAR (Telefon i Mail) - WERSJA DO WYRÓWNANIA ================ */

/* =================== START - POPRAWKA DLA PRZYCISKÓW SP PAGE BUILDER W DARK MODE ================ */



body.dark-mode .sppb-btn:hover {
    background-color: #fff !important; /* Białe tło po najechaniu */
    color: #000 !important;           /* Wymuszamy CZARNY tekst zamiast błękitnego */
    border-color: #fff !important;     /* Biała ramka, żeby się nie odcinała */
    transition: all 0.3s ease;
}

/* 3. Opcjonalnie: Stan FOCUS (dla dostępności) */
/* Dodajemy nasze sprawdzone "halo", żeby przycisk był widoczny przy nawigacji klawiaturą */
/*body.dark-mode .sppb-btn:focus {
    box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 7px #293f8e !important;
    outline: none !important;
}*/

.sppb-btn:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}


/* =================== END - POPRAWKA DLA PRZYCISKÓW SP PAGE BUILDER W DARK MODE ================ */

/* ==========================================================================
   START - PAGE TITLE & BREADCRUMBS - FIXY DLA DOSTĘPNOŚCI I DARK MODE
   ========================================================================== */

/* Twoja nowa sekcja z index.php - wymuszamy brak paddingu */
/*body.dark-mode .sp-page-title-custom-fluid,
body.dark-mode #sp-page-title-custom {
    background-color: #121212 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: none !important;
}*/

.sp-page-title-custom-fluid,
#sp-page-title-custom {
    /*background-color: #121212 !important;*/
    background-color: var(--page-title-bg) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    /*border-top: none !important;*/
    /*border-top: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white)) !important;*/
    border-top: var(--page-title-border-style) !important;
    border-bottom: none !important;
}

/*---------------*/

/* --- SEKCJA TYTUŁU STRONY (Nagłówek Helix) --- */

/* TŁO: Łączymy wszystkie selektory Helixa w jeden blok */
/*
body.site section#sp-page-title,
body.site .sp-page-title {
    background-color: var(--page-title-bg) !important;
    background-image: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--page-title-border) !important;
    transition: all 0.3s ease;
}


*/
/*-------------*/

/* Wygląd sekcji, gdy jest widoczna */
body.site section#sp-page-title {
    /*background-color: #ffffff !important;*/
    background-color: var(--page-title-bg) !important;
    background-image: none !important;
    
    border-top: none !important;
    /*border-bottom: 1px solid var(--page-title-border) !important;*/
    border-bottom: var(--page-title-border-style) !important;
    transition: all 0.3s ease;
}

section#sp-page-title,
body.site .sp-page-title {
    /*background: transparent !important;*/
    background: var(--bg-light) !important;    
    background-image: none !important;
    /*border-top: none !important;
    border-bottom: 1px solid var(--page-title-border) !important;
    border-bottom: var(--page-title-border-style) !important;*/

}

/* Naprawa kolorów tekstu w nagłówku (czarny tytuł) */
body.site .sp-page-title .sp-page-title-heading {
    /*color: #000000 !important;*/
    color: var(--page-title-text) !important;
    margin-bottom: 10px !important;
}


/* 1. DARK MODE - TŁO (Miękka czerń zgodna z resztą modułów) */
/*body.dark-mode.site section#sp-page-title,
body.dark-mode section#sp-page-title,
body.dark-mode .sp-page-title {
    background-color: #121212 !important;
    background-image: none !important;
    border-top: none !important; 
    border-bottom: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white)) !important;
}*/

/* 2. TYTUŁ STRONY (H1) - Zamiana bieli na platynę */
/*body.dark-mode.site .sp-page-title h1.sp-page-title-heading {
    color: #b8bcbf !important;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0 1px rgba(184, 188, 191, 0.1) !important;
}*/

body.site .sp-page-title h1.sp-page-title-heading {
    color: var(--page-title-text) !important;
    transition: color 0.3s ease;
    /*-webkit-font-smoothing: antialiased;*/
    text-shadow: 0 0 1px rgba(184, 188, 191, 0.1) !important;
}


/* ==========================================================================
   3. DYNAMIKA PAGE TITLE I UKRYWANIE (KINO / INNE STRONY)
   ========================================================================== */

/* A. UKRYWANIE DLA KINA - KLASYCZNE (Działa na Windows 7 i Firefox 115) */
html.page-title-blokada #sp-page-title,
html.page-title-blokada section#sp-page-title,
body.page-title-blokada section#sp-page-title,
body.page-title-blokada #sp-page-title {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* B. Ukrywanie systemowe (jeśli wyłączone w Joomla) */
body.site section#sp-page-title[style*="display: none"],
body.site section#sp-page-title[style*="display:none"] {
    display: none !important;
    height: 0 !important;
}

body.site:not(.page-title-blokada):not(:has([class*="-layout"])) section#sp-page-title:not([style*="display: none"]):has(.sp-page-title) {
    display: block !important;
    min-height: 50px !important;
}

/* Zmieniamy regułę tak, aby NIE DZIAŁAŁA, gdy na stronie jest blokada filmu */
body.site:not(.page-title-blokada) section#sp-page-title:not([style*="display: none"]):has(.sp-page-title) ~ #sp-main-body {
    padding-top: calc(15px * var(--font-multiplier, 1)) !important;
}

/* PRZYWRÓCENIE ODSTĘPU DLA STRONY FILMU */
html.page-title-blokada #sp-main-body,
body.page-title-blokada #sp-main-body {
    /*padding-top: 50px !important;*/ /* Tutaj możesz zmienić 50px na tyle, ile potrzebujesz "oddechu" */
    margin-top: 0 !important;
}

/* Opcjonalnie: Jeśli masz tam Breadcrumbs (okruszki), dajmy im też trochę miejsca */
body.page-title-blokada .mod-breadcrumbs {
    margin-bottom: 20px !important;
    padding-top: 10px !important;
}

/* ==========================================================================
   4. DODATKOWE FIXY (KONTAKT, LISTY, BREADCRUMBS)
   ========================================================================== */

.contact, .category-list, .blog {
    margin-top: 0 !important;
    padding-top: 10px !important;
}

/* Kolory okruszków */
body.site .mod-breadcrumbs__item a, 
body.site .mod-breadcrumbs__item span,
body.site .mod-breadcrumbs__here {
    /*color: #666 !important;*/
    color: var(--main-breadcrumbs) !important;
    transition: all 0.3s ease;
}

/*body.dark-mode.site .mod-breadcrumbs__item a, 
body.dark-mode.site .mod-breadcrumbs__item span, 
body.dark-mode.site .mod-breadcrumbs__here {
    color: #888888 !important; 
    transition: all 0.3s ease;
}*/

body.site .breadcrumb-item + .breadcrumb-item::before {
    color: #999 !important;
    content: "/" !important;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

body.site .mod-breadcrumbs__item {
    display: flex;
    align-items: center;
}

/* Hover w okruszkach - zamiast błękitu dajemy rozjaśnienie do platyny */
body.dark-mode.site .mod-breadcrumbs__item a:hover {
    color: #b8bcbf !important;
    text-decoration: underline rgba(184, 188, 191, 0.3) !important;
}

.mod-breadcrumbs__here {
    font-size: calc(0.9rem * var(--font-multiplier, 1)) !important;
    color: inherit;
}

/* ==========================================================================
   END - PAGE TITLE & BREADCRUMBS - FIXY DLA DOSTĘPNOŚCI I DARK MODE
   ========================================================================== */


/* =================== START - ARTICLES ================ */


/*zaznaczenie tab dla img + tytuł */

/* 1. Ustawiamy bazę dla całego artykułu */
.article-list .article {
    position: relative; /* To pozwala linkowi rozciągnąć się wewnątrz tej ramki */
    transition: all 0.3s ease;
    border-radius: 10px;
    padding: 10px; /* Delikatny margines wewnętrzny, by focus nie dotykał krawędzi */
}

/* 2. Rozciągamy link z tytułu na CAŁY artykuł (łącznie z obrazkiem) */
.article-header h2 a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10; /* Wyciąga link na sam wierzch */
}

/* 3. Usuwamy domyślne podkreślenie i focus z samych liter tytułu */
.article-header h2 a:focus {
    outline: none !important;
    text-decoration: none !important;
}

/* --- to psuje fokus pod tab --
.article:focus-within {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}
---- mam usunąć */
    
/* 5. Obsługa obrazka - żeby ładnie reagował na hover całej karty */
.article-list .article .item-image img {
    transition: transform 0.4s ease;
}

.article:hover .item-image img {
    transform: scale(1.03);
}

/* Opcjonalnie: jeśli chcesz, by tytuł zmieniał kolor po najechaniu na dowolne miejsce karty */
.article:hover .article-header h2 a {
    color: #293f8e !important;
}

/* =================== START - BLOG_ITEM - CATEGORY VIEW ================ */

/* 1. USUWANIE PUSTYCH RAMEK HELIXA */
.article-list .article, 
.article-list itemprop, 
.article-list .col-lg-4, 
.article-list .col-lg-6 {
    border: none !important;
    background: transparent !important;
    padding: 0 !important; /* Reset paddingu dla czystej siatki */
    box-shadow: none !important;
}

/* 2. SIATKA - CAŁKOWITE ROZBICIE SZTYWNYCH Wierszy (ROW) */

/* Neutralizujemy kontenery ROW, aby artykuły z różnych wierszy mogły być obok siebie */
.article-list .row {
    display: contents !important;
}

.article-list .leading-articles,
.article-list .intro-articles {
    display: contents !important;
}

/* Tworzymy JEDNĄ wspólną siatkę na poziomie rodzica */
.article-list, 
.article-list [itemprop="blogPosts"] {
    display: grid !important;
    /* Automatyczne kolumny: min. 300px * suwak, max 1fr */
    grid-template-columns: repeat(auto-fill, minmax(calc(min(100%, 300px * var(--font-multiplier, 1))), 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Wymuszamy na artykułach wypełnienie komórek */
.article-list .row > div,
.article-list .article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}

/* 3. STYL KARTY I TYPOGRAFIA */
.article-full-card-link {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Karta wypełnia wysokość kolumny */
    text-decoration: none !important;
    outline: none !important;
    /*color: #1a1a1a !important;*/
    color: var(--text-main) !important;
    transition: color 0.3s ease;
}

.article-title {
    font-size: 1.25rem;
    /*font-weight: 700;*/
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.3;
    margin-bottom: 12px;
    /*color: #1a1a1a;*/
    color: var(--text-main) !important;
    /* DOMYŚLNIE: Ładne łamanie bez kresek */
    word-break: normal !important; 
    overflow-wrap: break-word !important; 
    hyphens: none !important;
    text-wrap: balance;
    transition: color 0.3s ease;
}

/* Tytuł artykułu - Twoja Platyna + ostry, odchudzony tekst */
/*body.dark-mode .article-title,
body.dark-mode .article-full-card-link {
    color: #b8bcbf !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased;
    transition: color 0.3s ease;
}*/

/* Wyraźna ramka przy nawigacji tabulatorem */
/*body.dark-mode .article-full-card-link:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px #121212, 0 0 0 5px #ADD8E6 !important;
    border-radius: 8px;
}*/

/*.article-full-card-link:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}*/

.article-full-card-link:focus-visible .article-inner-card {
    transform: translateY(-5px) !important;
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px;
    box-shadow: none !important; /* Czyścimy cienie, żeby ramka była ostra */
}

/* 4. Czyścimy focus na samym linku, żeby nie było "podwójnej ramki" */
.article-full-card-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 5. INTERAKCJE I FOCUS */
/*.article-full-card-link:focus-visible .article-inner-card {
    box-shadow: 0 0 0 5px #293f8e !important;
    transform: translateY(-5px);
}*/

.article-full-card-link:hover .article-inner-card {
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

/*.article-full-card-link:hover .article-inner-card {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}*/

.article-inner-card {
    /*background: #fff;*/
    background: var(--bg-dark) !important;
    /*border: 1px solid #e0e0e0;*/
    border: 1px solid rgba(var(--main-grey-rgb), var(--shadow-opacity-article)) !important;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100% !important; /* Karta zawsze 100% wysokości sąsiada */
    display: flex !important;
    flex-direction: column !important;
    /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
    transition: transform 0.3s ease, box-shadow 0.3s ease, outline 0.2s ease !important;
    outline: 3px solid transparent; /* Rezerwujemy miejsce na outline */
    outline-offset: 3px;
    box-sizing: border-box !important;
}

/* Karta artykułu - Tło i subtelna linia */
/*body.dark-mode .article-inner-card {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}*/

.article-inner-card:hover {
    background-color: var(--bg-white) !important;
    /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(184, 188, 191, 0.1) !important;*/
}

/* Efekt najechania na kartę */
/*body.dark-mode .article-inner-card:hover {
    background-color: #222222 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(184, 188, 191, 0.1) !important;
}*/

/* Zmiana koloru tytułu na Twój błękit przy hoverze */
/*body.dark-mode .article-inner-card:hover .article-title,
body.dark-mode .article-inner-card:hover .article-full-card-link {
    color: #ADD8E6 !important;
}*/

.article-full-card-link:hover .article-title,
.article-full-card-link:focus-within .article-title {
    /*color: #ADD8E6 !important;*/
    color: var(--text-hover) !important;
}

/* Zmiana koloru tytułu na błękit przy hover ORAZ focus */
/*body.dark-mode .article-full-card-link:hover .article-title,
body.dark-mode .article-full-card-link:focus-within .article-title {
    color: #ADD8E6 !important;
}*/

.article-body {
    padding: 20px;
    flex-grow: 1 !important; /* Rozpycha środek karty */
    display: flex !important;
    flex-direction: column !important;
}

.article-introtext {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    /* DOMYŚLNIE: Normalne łamanie */
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Tekst wstępny (Introtext) - Aksamitny szary */
body.dark-mode .article-introtext {
    color: #a0a4a7 !important; /* Nieco ciemniejszy od tytułu */
    line-height: 1.6;
}

/* --- RATUNEK DLA WCAG (tylko przy dużym powiększeniu) --- */
body[style*="--font-multiplier: 1.3"] .article-title,
body[style*="--font-multiplier: 1.4"] .article-title,
body[style*="--font-multiplier: 1.5"] .article-title,
body[style*="--font-multiplier: 2"] .article-title,
body[style*="--font-multiplier: 1.3"] .article-introtext,
body[style*="--font-multiplier: 1.4"] .article-introtext,
body[style*="--font-multiplier: 1.5"] .article-introtext,
body[style*="--font-multiplier: 2"] .article-introtext {
    word-break: break-word !important;
    hyphens: auto !important;
    overflow-wrap: anywhere !important;
}

/* 4. OBRAZEK */
.article-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* UKŁAD POZIOMY (Zdjęcie z boku - lista jeden pod drugim) */

/* 1. Rozbijamy siatkę Grid, aby wpisy były jeden pod drugim */
.strona-pozioma .article-list, 
.strona-pozioma .article-list [itemprop="blogPosts"] {
    display: flex !important; /* Zamieniamy Grid na Flex */
    flex-direction: column !important; /* Ustawiamy w pionie (jeden pod drugim) */
    gap: 30px !important; /* Odstęp MIĘDZY wpisami */
}

/* 2. Upewniamy się, że każdy artykuł zajmuje 100% szerokości */
.strona-pozioma .article-list .article {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* 3. Karta - zdjęcie obok tekstu */
.strona-pozioma .article-inner-card {
    display: flex !important;
    flex-direction: row !important; /* Zdjęcie z lewej, tekst z prawej */
    min-height: 250px; /* Minimalna wysokość karty */
    align-items: stretch;
}

/* 4. Kontener zdjęcia - teraz może być większy */
/*.strona-pozioma .article-image-container,
.strona-pozioma figure.item-image.left {
    flex: 0 0 350px !important; 
    max-width: 40% !important;
    margin: 0 !important;
    float: none !important;
}*/

/* 2. Zdjęcie na lewo - tutaj sterujesz rozmiarem */
.strona-pozioma .article-image-container,
.strona-pozioma figure.item-image.left {
    /* flex: 0 0 [szerokość]; - zmień 250px na mniej lub więcej, aż będzie idealnie */
    flex: 0 0 250px !important; 
    margin: 0 !important;
    float: none !important;
    max-width: none !important; /* Wyłączone, żeby nie blokowało flexa */
}

/*.strona-pozioma .article-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}*/

.strona-pozioma .article-image-container img {
    width: 100% !important;
    /* Tutaj ustawiamy stałą wysokość dla wszystkich zdjęć w tym układzie */
    height: 350px !important; 
    /* To jest klucz: zdjęcie wypełni obszar, nie rozciągając się (zostanie docięte) */
    object-fit: cover !important;
    /* Opcjonalnie: centrujemy kadr, żeby nie ucięło głowy */
    object-position: center !important; 
    display: block;
}

/* Opcjonalnie: dopasuj wysokość kontenera, żeby nie było dziur pod spodem */
.strona-pozioma .article-image-container {
    height: 350px !important;
    overflow: hidden;
}

/* 5. Korpus artykułu */
.strona-pozioma .article-body {
    /*flex: 1 !important;*/
    flex-grow: 1 !important; /* Rozciąga tekst do krawędzi karty */
    flex-basis: 0;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Środkuje tekst pionowo obok zdjęcia */
    padding: 20px 30px !important;
}

/* =================== KONIEC STYLE DLA BLOG_ITEM - CATEGORY VIEW ================ */

/* =================== TOP1 ================ */

/* =================== TOP1: ALERT NO-JS & SOCIAL ICONS =================== */

/* 1. ALERT NO-JS - Baza */
.no-js-alert-local {
    background: #fff3cd;
    color: #856404;
    padding: 8px 12px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* Ukrywanie alertu, gdy JS działa */
.js .no-js-alert-local { 
    display: none !important; 
}

/* 2. SOCIAL ICONS - Baza */
.social-icons {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    gap: 15px;
    justify-content: flex-end; /* Domyślnie na desktop do prawej */
    align-items: center;
}

.social-icons a {
    color: #fff;
    font-size: 18px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #ADD8E6;
}

/* =================== KONIEC SOCIAL LINKS W TOP1 ================ */

/* =================== START - OFFCANVAS ================ */

/* Podłączenie menu offcanvas do suwaka interlinii z panelu */
body.spacing-active .offcanvas-inner ul.menu li a,
body.spacing-active .offcanvas-inner ul.mod-menu li a,
body.spacing-active .offcanvas-inner span {
    line-height: var(--main-line-height) !important;
}

/* Podłączenie tekstu w Hero Slider do suwaka interlinii */
body.spacing-active .hero-intro {
    line-height: var(--main-line-height) !important;
}

/* =================== START - MODUŁ KONTAKT W OFFCANVAS ================ */
.offcanvas-contact-box {
    /*padding-left: 10px;*/
    padding: 30px 0px 30px 10px;
    text-align: left;
    margin-bottom: 30px;
}

/* 1. Kontener na label i value - dodajemy dynamiczny odstęp (gap) */
.offcanvas-contact-details {
    display: flex;
    flex-direction: column;
    /* To rozsunie label od value pod spodem */
    gap: calc(4px * var(--font-multiplier, 1)) !important;
}

/* 2. Odstęp między całymi blokami kontaktu (np. między telefonem a mailem) */
.offcanvas-contact-item {
    display: flex;
    align-items: flex-start;
    /* Używamy marginesu, który rośnie wraz z interlinią */
    margin-bottom: calc(10px * (var(--main-line-height, 1.4) / 1.4)) !important;
}

/* 3. Interlinia wewnątrz tekstu (jeśli np. adres zawinie się do drugiej linii) */
.offcanvas-contact-link {
    /*color: #121212 !important;*/
    color: var(--text-offcanvas-dark) !important;
    font-size: calc(16px * var(--font-multiplier, 1)) !important;
    /*text-decoration: none;*/
    text-decoration: var(--text-offcanvas-decoration) !important;
    transition: all 0.3s ease;
    /* Podpięcie pod suwak interlinii */
    line-height: var(--main-line-height, 1.4) !important;
    display: block;
    padding: 10px 0;
    min-height: 24px;
}

/* Linki (Mail, Telefon) - Zamiast ostrego błękitu, dajemy "aktywną platynę" */
/*body.dark-mode .offcanvas-contact-link {
    color: #b8bcbf !important; 
    text-decoration: underline rgba(184, 188, 191, 0.3) !important;
    transition: all 0.3s ease;
}*/

.offcanvas-contact-text {
    /*color: #121212 !important;*/
    color: var(--text-offcanvas-dark) !important;
    font-size: calc(16px * var(--font-multiplier, 1)) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    /* Podpięcie pod suwak interlinii */
    line-height: var(--main-line-height, 1.4) !important;
    display: block;
    padding: 10px 0;
    min-height: 24px;
}

/* Adres (Tekst statyczny) - Stonowana platyna (trochę ciemniejsza niż link) */
/*body.dark-mode .offcanvas-contact-text {
    color: #b8bcbf !important; 
}*/

/* 4. Poprawka dla labela, żeby nie był zbyt "ciasny" */
.offcanvas-contact-label {
    font-size: calc(12px * var(--font-multiplier, 1)) !important; 
    /*color: #333 !important;*/
    color: var(--text-offcanvas-dark) !important;
    text-transform: uppercase;
    /*letter-spacing: 1px;*/
    letter-spacing: var(--letter-spacing) !important;
    display: block;
    /* Interlinia dla labela też powinna reagować */
    line-height: var(--main-line-height, 1.2) !important;
}

/*body.dark-mode .offcanvas-contact-label {
    color: #b8bcbf !important; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}*/

/* 5. Ikona - żeby nie uciekała w górę przy dużych odstępach */
.offcanvas-contact-icon {
    font-size: calc(1.2rem * var(--font-multiplier, 1)) !important;
    margin-right: 15px;
    /* Wyśrodkowanie ikony względem pierwszej linii tekstu */
    align-self: flex-start;
    margin-top: calc(10px * var(--font-multiplier, 1));
    /*filter: grayscale(1) brightness(0.9);*/
    filter: var(--offcanvas-filter); 
    opacity: 0.9;
}

/*body.dark-mode .offcanvas-contact-icon {
    filter: grayscale(1) brightness(2.8); 
}*/

/* Kolory w trybie normalnym przy najechaniu */
.offcanvas-contact-link:hover {
    /*color: #ADD8E6 !important;*/
    color: var(--text-offcanvas-link-hover) !important;
    text-decoration-color: rgba(var(--main-white-rgb), var(--shadow-opacity)) !important;
}

/*body.dark-mode .offcanvas-contact-link:hover {
    color: #ffffff !important;
    text-decoration-color: rgba(255, 255, 255, 0.6) !important;
}*/

/* =================== END - MODUŁ KONTAKT W OFFCANVAS ================ */


/* =================== END - OFFCANVAS ================ */



/* =================== POCZĄTEK MODUŁ SKIP TO W TOP1 ================ */

/* 1. UKRYWANIE WIZUALNE (Ale zachowanie tabulacji) */
.skip-link { 
    position: absolute !important; 
    top: -500px; /* Wywalamy go daleko poza ekran */
    left: 0; 
    width: auto !important; 
    min-width: 220px !important; 
    background: #293f8e !important; 
    color: #ffffff !important; 
    padding: 15px 30px !important;
    z-index: 2147483647 !important;
    font-weight: 700 !important; 
    text-decoration: none !important; 
    border-radius: 0 0 10px 10px; 
    transition: top 0.4s ease-in-out; /* Usuwamy opacity z transition */
    pointer-events: auto; 
    white-space: nowrap; 
    box-shadow: 0 5px 25px rgba(0,0,0,0.6); 
    border: 2px solid #fff !important; 
    border-top: none !important; 
    opacity: 1 !important; /* ZAWSZE 1, żeby kontrast był poprawny */
    text-align: center; 
}

/* Wyświetlanie przy fokusie */
.skip-link:focus { 
    top: 0 !important; /* Wjeżdża na górę ekranu */
    opacity: 1 !important; 
    outline: 5px solid orange !important; 
    outline-offset: -5px; 
}

.skip-container { position: absolute !important; top: 0; left: 0; width: 0; height: 0; }
.skip-links-fixed { position: fixed !important; top: 0; left: 20px; z-index: 2147483647 !important; pointer-events: none; }
#sp-menu .sp-megamenu-parent > li:focus-within > .sp-dropdown, #sp-menu .sp-megamenu-parent > li:focus-within > .sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; top: 100% !important; transition: none !important; }
body #no-js-hamburger-trigger { display: none !important; }

/* --- KRZYŻYK ZAMKNIJ --- */
.close-offcanvas { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    width: 45px !important; 
    height: 45px !important; 
    background: #f4f4f4 !important; 
    color: #293f8e !important; 
    border-radius: 4px; 
    text-decoration: none !important; 
    outline: none !important; 
}
.close-offcanvas .fa-remove { 
    color: #000 !important; 
}

/* Fokus tylko dla klawiatury */
.close-offcanvas:focus-visible { 
    background: #f4f4f4 !important; 
    outline: 5px solid orange !important; 
    outline-offset: 2px; 
}

.close-offcanvas:focus-visible .fa-remove { 
    color: #000 !important; 
}

/* --- LINKI SKIP-LINKS W MENU --- */
#offcanvas-menu a[href*="#skip-links-unique-id"] { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    margin: 20px 15px !important; 
    padding: 15px !important; 
    background: #f8f9fa !important; 
    color: #293f8e !important; 
    text-align: center !important; 
    font-weight: bold; 
    border: 2px dashed #293f8e !important; 
    text-decoration: none !important; 
    min-height: 50px; 
    outline: none !important; 
}

/* Fokus tylko dla klawiatury */
#offcanvas-menu a[href*="#skip-links-unique-id"]:focus-visible { 
    /*background: #293f8e !important;*/
    background: transparent !important; 
    /*color: #fff !important; */
    /*outline: 5px solid orange !important;*/
    outline: 3px solid var(--accessibility-focus) !important;
    /*border-style: solid !important; */
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

/* --- LOGO W MENU --- */
#offcanvas-menu .logo a { display: inline-block !important; border: 4px solid transparent !important; outline: none !important; }

/* Fokus tylko dla klawiatury */
#offcanvas-menu .logo a:focus-visible { 
    /*border: 4px solid orange !important;*/
    /*border: 4px solid var(--accessibility-focus) !important;
    outline: none !important; */
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    /*background: #fff !important;*/
    background: var(--bg-offcanvas-transparent) !important;
     
}

/* --- ELEMENTY LISTY MENU --- */
#offcanvas-menu .offcanvas-inner ul.menu li a { 
    display: block !important; 
    width: 100% !important; 
    padding: 12px 15px !important; 
    color: #333 !important; 
    border-bottom: 1px solid #eee; 
    text-decoration: none !important; 
    box-sizing: border-box !important; 
    outline: none !important; 
}

#offcanvas-menu .offcanvas-inner ul.menu li ul { display: block !important; visibility: visible !important; padding: 0 !important; }
#offcanvas-menu .offcanvas-inner ul.menu li ul li a { padding-left: 40px !important; }

/* Fokus tylko dla klawiatury */
#offcanvas-menu .offcanvas-inner ul.menu li a:focus-visible { 
    /*background-color: #293f8e !important;*/
    background-color: transparent !important; 
    /*color: #ffffff !important; 
    outline: 4px solid orange !important; */
    /*outline-offset: -4px; */
    outline: 4px solid var(--accessibility-focus) !important;
    outline-offset: -4px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}


/* --- TARGETY (DLA NO-JS) --- */
#no-js-hamburger-trigger:target { 
    outline: 5px solid orange !important; 
    outline-offset: 4px !important; 
}

#sp-menu:target, #offcanvas-menu:target, #sp-bottom2:target { 
    /*outline: 6px solid #293f8e !important; */
    outline: 6px solid var(--accessibility-focus) !important;
    outline-offset: 4px !important; 
    scroll-margin-top: 180px !important; 
}

#sp-main-body:target { 
    /*outline: 6px solid #293f8e !important;*/
    outline: 6px solid var(--accessibility-focus) !important;
    outline-offset: -6px !important; 
    display: block !important; 
    scroll-margin-top: 180px !important; 
}

/* --- 6. PRZYCISK POWROTU (NO-JS) --- */
.btn-top-fixed-nojs { 
    display: flex !important; 
    position: fixed !important; 
    bottom: 30px !important; 
    right: 30px !important; 
    z-index: 2147483647 !important; 
    width: 55px !important; 
    height: 55px !important; 
    background-color: #293f8e !important; 
    border: 2px solid #ffffff !important; 
    border-radius: 5px !important; 
    justify-content: center !important; 
    align-items: center !important; 
    text-decoration: none !important; 
    outline: none !important; 
}

.btn-top-fixed-nojs span { 
    color: #ffffff !important; 
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important; 
    font-weight: 900 !important; 
    font-size: 22px !important; 
}

/* Fokus tylko dla klawiatury */
.btn-top-fixed-nojs:focus-visible { 
    background-color: #ffffff !important; 
    box-shadow: 0 0 0 5px orange !important; 
    outline: none !important; 
}

.btn-top-fixed-nojs:focus-visible span { 
    color: #293f8e !important; 
}

/* --- 7. STYLIZACJA LINKU ZAMKNIJ NA DOLE (CANVAS.PHP) --- */
.close-offcanvas-bottom { 
    display: block !important; 
    margin: 20px 15px !important; 
    padding: 15px !important; 
    background-color: #293f8e !important; 
    color: #ffffff !important; 
    text-align: center !important; 
    font-weight: bold !important; 
    text-decoration: none !important; 
    border-radius: 5px !important; 
    border: 2px solid #ffffff !important; 
    outline: none !important; 
}

/* Fokus tylko dla klawiatury */
.close-offcanvas-bottom:focus-visible { 
    background-color: #ffffff !important; 
    color: #293f8e !important; 
    outline: 5px solid orange !important; 
    outline-offset: -5px; 
}

/* --- 8. BLOKADA NIEWIDOCZNEGO MENU --- */
noscript #offcanvas-menu:not(:target) { display: none !important; visibility: hidden !important; }
noscript #offcanvas-menu:not(:target) a, noscript #offcanvas-menu:not(:target) button { display: none !important; }

.sp-scroll-up:focus-visible { outline: 5px solid orange !important; outline-offset: 2px !important; }

/* --- 9. GLOBALNY BEZPIECZNIK --- */
/* Usuwa wszelkie domyślne obramowania fokusu w menu, jeśli nie są wywołane klawiaturą */
#offcanvas-menu *:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* =================== END - MODUŁ SKIP TO W TOP1 ================ */

/* =================== END - TOP ================ */


/* =================== START - FOOTER ================ */

/* =================== START - MODUŁ LOGO + OPIS W BOTTOM1 ================ */

 /* --- 1. KONTENER I STRUKTURA --- */ 
 .footer-about-col { 
     padding-right: 20px; 
     padding-bottom: 30px; 
 } 

 .footer-inst-name { 
     /*color: #fff;*/
     color: var(--text-footer-white) !important;
     font-size: 1.8rem; 
     font-weight: 900; 
     margin: 0; 
     letter-spacing: -1px; 
 } 

 .footer-inst-name span { 
     /*color: #ADD8E6;*/
     color: var(--text-footer-blue);
 } 

 .footer-tagline { 
     /*color: #ADD8E6;*/
     color: var(--text-footer-blue);
     font-size: 0.75rem; 
     text-transform: uppercase; 
     letter-spacing: 2px; 
     margin-bottom: 20px; 
     font-weight: 600; 
 } 

/* --- OPIS "O NAS" (Główny tekst) --- */ 
 .footer-description { 
     /*color: #d1d1d1 !important;*/
     color: var(--text-footer-grey);
     font-size: 0.95rem; 
     line-height: 1.6; 
     margin-bottom: 25px; 
 } 

 /*body.dark-mode .footer-description {
     color: #b8bcbf !important; 
     -webkit-font-smoothing: antialiased;
 }*/
 
 /* --- 3. DISCLAIMER --- */ 
 .demo-disclaimer-inline { 
     /*border-top: 1px solid #333;*/
     border-top: 1px solid rgba(var(--main-border-rgb), var(--shadow-opacity-article)) !important;
     padding-top: 15px; 
 } 
 /*
  body.dark-mode .demo-disclaimer-inline {
     border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
 }*/

 /* --- DISCLAIMER (Mniejszy tekst na dole) --- */ 
 .demo-disclaimer-inline p { 
     /*color: #a0a0a0 !important;*/
     color: var(--text-footer-grey);
     font-size: 0.78rem; 
     margin: 0; 
     line-height: 1.5; 
 } 
 
  /*body.dark-mode .demo-disclaimer-inline p {
     color: #888888 !important; 
     font-size: 0.9em; 
 }*/

 .demo-badge { 
     background-color: #fff; 
     color: #000; 
     padding: 1px 6px; 
     border-radius: 3px; 
     font-size: 0.65rem; 
     font-weight: bold; 
     margin-right: 5px; 
     display: inline-block; 
     vertical-align: middle;
 } 

/* =================== END - MODUŁ LOGO + OPIS W BOTTOM1 ================ */



/* =================== POCZĄTEK MODUŁ KONTAKT W BOTTOM3 ================ */
.footer-contact-box {
    padding-left: 10px;
}

/*.footer-heading {
    color: #ffffff;
    color: var(--text-footer-white);
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    font-weight: 700;
}*/

/* 1. Kontener na label i value - dodajemy dynamiczny odstęp (gap) */
.contact-details {
    display: flex;
    flex-direction: column;
    /* To rozsunie label od value pod spodem */
    gap: calc(4px * var(--font-multiplier, 1)) !important;
}

/* 2. Odstęp między całymi blokami kontaktu (np. między telefonem a mailem) */
.contact-item {
    display: flex;
    align-items: flex-start;
    /* Używamy marginesu, który rośnie wraz z interlinią */
    margin-bottom: calc(20px * (var(--main-line-height, 1.4) / 1.4)) !important;
}

/* 3. Interlinia wewnątrz tekstu (jeśli np. adres zawinie się do drugiej linii) */
.contact-link {
    /*color: #ffffff !important;*/
    color: var(--text-footer-white);
    font-size: calc(16px * var(--font-multiplier, 1)) !important;
    /*text-decoration: none;*/
    text-decoration: var(--text-footer-decoration) !important;
    transition: all 0.3s ease;
    /* Podpięcie pod suwak interlinii */
    line-height: var(--main-line-height, 1.4) !important;
    display: block; 
}

/*body.dark-mode .contact-link {
    color: #b8bcbf !important;
    text-decoration: underline rgba(184, 188, 191, 0.3) !important;
    transition: all 0.3s ease;
}*/

/* Kolory w trybie normalnym przy najechaniu */
.contact-link:hover {
    /*color: #ADD8E6 !important;*/
    color: var(--text-footer-link-hover) !important; 
}

/*body.dark-mode .contact-link:hover {
    color: #ffffff !important;
    text-decoration-color: rgba(255, 255, 255, 0.6) !important;
}*/

.contact-text {
    /*color: #ffffff !important;*/
    color: var(--text-footer-white);
    font-size: calc(16px * var(--font-multiplier, 1)) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    /* Podpięcie pod suwak interlinii */
    line-height: var(--main-line-height, 1.4) !important;
    display: block; 
}

/*body.dark-mode .contact-text {
    color: #a0a4a7 !important; 
}*/

/* 4. Poprawka dla labela, żeby nie był zbyt "ciasny" */
.contact-label {
    font-size: calc(12px * var(--font-multiplier, 1)) !important; 
    /*color: #a0a0a0 !important;*/
    color: var(--text-footer-grey) !important;
    text-transform: uppercase;
    /*letter-spacing: 1px;*/
    letter-spacing: var(--letter-spacing) !important;
    display: block;
    /* Interlinia dla labela też powinna reagować */
    line-height: var(--main-line-height, 1.2) !important;
}

/*body.dark-mode .contact-label {
    color: #b8bcbf !important; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}*/

/* 5. Ikona - żeby nie uciekała w górę przy dużych odstępach */
.contact-icon {
    font-size: calc(1.2rem * var(--font-multiplier, 1)) !important;
    margin-right: 15px;
    /* Wyśrodkowanie ikony względem pierwszej linii tekstu */
    align-self: flex-start;
    margin-top: calc(5px * var(--font-multiplier, 1));
    filter: grayscale(1) brightness(2.8); 
    opacity: 0.9;
}

/* =================== KONIEC MODUŁ KONTAKT W BOTTOM3 ================ */



/* =================== POCZĄTEK MODUŁ DOSTĘPNOŚĆ W BOTTOM4 ================ */
/* 1. TEKSTY POMOCNICZE (Poprawa kontrastu na tle #171717) */
.footer-text {
    /*color: #d1d1d1 !important;*/
    color: var(--text-footer-grey) !important;
    font-size: calc(0.95rem * var(--font-multiplier, 1)) !important;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Główny tekst stopki - Twoja "aksamitna" platyna */
/*body.dark-mode .footer-text {
    color: #b8bcbf !important;
    -webkit-font-smoothing: antialiased;
}*/

.acc-status {
    margin-top: 15px;
    /* Rozjaśniamy z #666 na #a0a0a0, żeby status był widoczny */
    /*color: #b0b0b0 !important;*/
    color: var(--text-footer-grey) !important;
    font-size: calc(0.85rem * var(--font-multiplier, 1)) !important;
    display: flex;
    align-items: center;
}

/* Status dostępności (np. "Aktywny") - nieco ciemniejszy szary */
/*body.dark-mode .acc-status {
    color: #888888 !important;
}*/


.status-dot {
    height: 10px; /* Nieco większa kropka */
    width: 10px;
    background-color: #2ecc71; /* Żywszy zielony */
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

/* 2. PRZYCISK DEKLARACJI */
.btn-accessibility {
    display: inline-flex;
    align-items: center;
    background-color: transparent !important;
    /*color: #ADD8E6 !important;*/
    color: var(--text-footer-blue) !important;
    /*border: 2px solid #ADD8E6 !important;*/
    border: var(--border-acc) !important;
    padding: 12px 20px !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: calc(0.9rem * var(--font-multiplier, 1)) !important;
    font-weight: var(--font-weight-bold) !important;
    /*transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);*/
    transition: all 0.3s ease;
    outline: none !important;
    /* FIX DLA INTERLINII W PRZYCISKU */
    line-height: 1.2 !important; /* Blokujemy małą linię, żeby przycisk nie "puchł" */
    min-height: calc(44px * var(--font-multiplier, 1)); /* Zapewnia minimalny obszar klikalny pod WCAG */
}


/* Stan spoczynku przycisku (jeśli chcesz, żeby pasował do reszty przed najechaniem) */
/*body.dark-mode .btn-accessibility {
    border: 1px solid #ADD8E6 !important;
    color: #ADD8E6 !important;
    background: transparent !important;
    transition: all 0.3s ease;
}*/


/* FIX DLA HOVER (Zarówno w Light jak i Dark Mode) */

.btn-accessibility:focus-visible {
    /*background-color: #ADD8E6 !important;*/
    background-color: var(--text-footer-blue) !important;
    /*color: #121212 !important;*/
    color: var(--text-acc-dark) !important;
    transform: translateY(-3px);
    /*box-shadow: 0 6px 15px rgba(173, 216, 230, 0.4);*/
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
    
}

/* DODATKOWY FOKUS (Dla dostępności) */
/*.btn-accessibility:focus-visible {
    box-shadow: 0 0 0 3px #171717, 0 0 0 6px #ADD8E6 !important;
}*/

.btn-accessibility:hover {
    /*background-color: #ADD8E6 !important;*/
    background-color: var(--text-footer-blue) !important;
    /*color: #121212 !important;*/
    color: var(--text-acc-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(173, 216, 230, 0.4);
}

body.dark-mode .btn-accessibility:hover {
    /*color: #121212 !important;*/
    color: var(--text-acc-dark) !important;
}

/* Zabezpieczenie: ikona też musi mieć stałą wysokość linii */
.icon-acc {
    margin-right: 12px;
    font-size: 1.2rem;
    line-height: 1 !important;
    display: flex;
    align-items: center;
}

/* =================== KONIEC MODUŁ DOSTEPNOŚĆ W BOTTOM4 ================ */


/* --- ODCIĘCIE BOTTOM W DARK MODE --- */

#sp-bottom, 
.sp-bottom,
section#sp-bottom {
    border-top: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white)) !important;
}

/*body.dark-mode #sp-bottom, 
body.dark-mode .sp-bottom,
body.dark-mode section#sp-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}*/

/* --- ODCIĘCIE SEKCJI SPONSORÓW (TRYB JASNY) --- */
#sp-banery-sponsorow, 
.sp-banery-sponsorow,
section#sp-banery-sponsorow {
    /* Używamy delikatnego szarego, który jest widoczny na białym tle */
    /*border-top: 1px solid #eeeeee !important;*/
    border-top: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white)) !important;
    padding-top: 40px !important; /* Oddech, żeby loga nie dotykały linii */
}

/* --- ODCIĘCIE SEKCJI SPONSORÓW (DARK MODE) --- */
/*body.dark-mode #sp-banery-sponsorow, 
body.dark-mode .sp-banery-sponsorow,
body.dark-mode section#sp-banery-sponsorow {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}*/

/* =================== POCZĄTEK MODUŁ LEGAL LINKS W FOOTER1 ================ */


/* --- STOPKA: Polityka prywatności i cookies --- */

/* 1. Powiększanie tekstu linków i separatora */
.footer-legal-links .legal-link,
.footer-legal-links .legal-separator {
    /* Ustawiamy bazę na 0.85rem i mnożymy przez suwak */
    font-size: calc(0.85rem * var(--font-multiplier, 1)) !important;
}

/* 2. Obsługa interlinii (odstępów) */
body.spacing-active .footer-legal-links {
    line-height: var(--main-line-height, 1.4) !important;
}

.footer-legal-links {
    text-align: left; 
    background: transparent !important;
}

/* Kontener - upewniamy się, że nie ma żadnych zbędnych tłów */
/*body.dark-mode .footer-legal-links {
    background: transparent !important;
}*/

.legal-link {
    /*color: #888;*/
    color: var(--text-footer-grey) !important;
    text-decoration: none;
    font-size: 0.85rem;
    /*transition: color 0.3s ease;*/
    transition: color 0.3s ease, text-decoration 0.3s ease;
    display: inline-block;
}

/* Stan spoczynku - dopasowany do "aksamitnej szarości" */
/*body.dark-mode .legal-link {
    color: #888888 !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}*/

.legal-link:hover {
    /*color: #ADD8E6;*/
    color: var(--text-footer-blue) !important;
    text-decoration: var(--text-legal-decoration) !important;
}

/* Hover - Twój błękitny akcent spójny z resztą strony */
/*body.dark-mode .legal-link:hover {
    color: #ADD8E6 !important;
    text-decoration: underline rgba(173, 216, 230, 0.4) !important;
}*/

.legal-separator {
    /*color: #b8bcbf;*/
    color: var(--text-footer-grey) !important;
    margin: 0 10px;
    font-size: 0.85rem;
}

/* Separatory (|) - Przyciemniamy je, żeby były tylko tłem */
/*body.dark-mode .legal-separator {
    color: #b8bcbf !important;
}*/

/* =================== KONIEC MODUŁ LEGAL LINKS W FOOTER1 ================ */


/* =================== POCZATEK MODUŁ CREDITS W FOOTER2 ================ */
/* Kontener, który rozpycha zawartość góra-dół */
.footer-sidebar-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Rozciąga się na całą dostępną wysokość kolumny */
    min-height: 100px; /* Bezpieczne minimum, żeby nie było ścisku */
    text-align: right;
}

.copyright-top p {
    /*color: #ffffff; */
    color: var(--text-footer-white) !important;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}
/* 1. COPYRIGHT (Góra sekcji) - Zamiana bieli na Twoją platynę */
/*body.dark-mode .copyright-top p {
    color: #b8bcbf !important;
    font-weight: 600;
}*/

.credits-bottom {
    /*border-top: 1px solid #222;*/
    border-top: 1px solid rgba(var(--main-white-rgb), var(--shadow-opacity-white)) !important;
    padding-top: 15px;
    /*margin-top: 20px;*/
}

/* 2. LINIA ODDZIELAJĄCA - Subtelna jak w reszcie stopki */
/*body.dark-mode .credits-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}*/

.credits-bottom p {
    /*color: #666;*/
    color: var(--text-footer-grey) !important;
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.5;
}

/* 3. TEKST "PROJEKT I WYKONANIE" - Przyciemniony szary */
/*body.dark-mode .credits-bottom p {
    color: #777777 !important;
}*/

/* 4. LINK DO AUTORA - Twój błękitny akcent */
.author-link {
    /*color: #ADD8E6;*/
    color: var(--text-footer-blue) !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/*body.dark-mode .author-link {
    color: #ADD8E6 !important;
    transition: all 0.3s ease;
}*/

.author-link:hover {
    /*color: #fff;*/
    color: var(--acc-trigger-border) !important;
    text-shadow: 0 0 8px rgba(var(--main-footer-blue-rgb), 0.4) !important;
}

/* Hover linku autora - rozjaśnienie do platyny */
/*body.dark-mode .author-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(173, 216, 230, 0.4) !important;
}*/

.author-label {
    /*color: #ADD8E6;*/
    color: var(--text-footer-blue);
}

/* =================== KONIEC MODUŁ CREDITS W FOOTER2 ================ */

/* =================== END FOOTER ================ */




/* =================== START HOMEPAGE ================ */

/* =================== POCZĄTEK MODUŁ SEKCJE NA HOPEPAGE ================ */
/* 1. Reset i szerokość Full-Width */
.culture-strips-wrapper {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    overflow: hidden;
    background: #000;
}

.culture-strips { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
}

/* 2. Styl paska i kolory */
.strip-item {
    padding: 25px 0;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: block;
    position: relative;
    /*border-bottom: 1px solid rgba(0,0,0,0.05);*/
    border-bottom: 1px solid rgba(var(--main-border-rgb), 0.05) !important;
    /*background-color: var(--bg-strip) !important;*/
}

/*.color-1 { background-color: #ADD8E6; }
.color-2 { background-color: #FFA07A; }
.color-3 { background-color: #98FB98; }
.color-4 { background-color: #FFE664; }*/

.color-1 { background-color: var(--accent-blue) !important; }
.color-2 { background-color: var(--accent-orange) !important; }
.color-3 { background-color: var(--accent-green) !important; }
.color-4 { background-color: var(--accent-yellow) !important; }

/* zmiana koloru pasków*/
body.dark-mode .strip-item {
    background-color: #1a1a1a !important; 
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;*/
}

/* 3. Kwadratowy Wrapper na logo */
.strip-icon-wrapper {
    width: 120px;
    height: 120px;
    /*background: rgba(255, 255, 255, 0.25);*/
    background: rgba(var(--bg-strip-icon-rgb), var(--opacity-strip)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    transition: all 0.4s ease;
    /*border: 1px solid rgba(0, 0, 0, 0.08);*/
    border: 1px solid rgba(var(--border-strip-icon-rgb), var(--opacity-strip-border-icon)) !important;
    flex-shrink: 0;
    overflow: hidden;
    padding: 12px;
}

/* Wrapper ikony */
/*body.dark-mode .strip-icon-wrapper {
    background: rgba(184, 188, 191, 0.05) !important;
    border: 1px solid rgba(184, 188, 191, 0.1) !important;
}*/

/* 4. Logo PNG */
.strip-logo-img {
    max-width: 90%; 
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    /*filter: brightness(0);*/
    filter: var(--filter-strip) !important; 
    /*opacity: 0.85;*/
    opacity: var(--opacity-strip-logo);
    transition: transform 0.3s ease;
}

/* Ikony/Loga w pasku - zmiękczony invert */
/*body.dark-mode .strip-logo-img { 
    filter: brightness(0) invert(0.85) !important; 
    opacity: 0.9;
}*/

/* 5. Tytuły - SKALOWALNE (Nadpisujemy globalne h2) */
.strip-title {
    /*color: #1a1a1a !important;*/
    color: var(--text-main) !important;
    margin: 0;
    font-weight: 700 !important;
    text-transform: uppercase;
    /*letter-spacing: 2px;*/
    letter-spacing: 0.06em !important;
    font-size: calc(30px * var(--font-multiplier, 1)) !important; 
    transition: all 0.3s ease;
    text-shadow: none !important;
}

/* Tytuł paska - ODCHUDZONY I WYSTRZYŻONY DLA CZYTELNOŚCI */
body.dark-mode .strip-title { 
    /*color: #b8bcbf !important; 
    font-weight: 500 !important; */
    /*letter-spacing: 0.3px !important;*/
    letter-spacing: 0.01em !important; 
    /*text-shadow: none !important;*/
}

/* 6. Interakcje */
.strip-item:hover {
    /*background-color: var(--bg-strip-hover) !important;*/
    /*filter: saturate(1.3) brightness(1.05); */
    filter: var(--filter-strip-hover) !important;
}

/* Hover na pasku - zmiana koloru bez pogrubiania */
body.dark-mode .strip-item:hover {
    background-color: #222222 !important;
}

.strip-item:hover .strip-icon-wrapper { 
     transform: scale(1.05) rotate(-2deg); 
     /*background: rgba(255, 255, 255, 0.4);*/
     background: rgba(var(--main-white-rgb), 0.4); 
}

.strip-item:hover .strip-logo-img { transform: scale(1.1); opacity: 1; }

.strip-item:hover .strip-title { 
    /*letter-spacing: 4px;*/
    letter-spacing: calc(var(--letter-spacing-strip-title) + 0.06em) !important;
    transform: translateX(10px); 
}

body.dark-mode .strip-item:hover .strip-title {
    color: #ffffff !important; 
}

/* FOCUS KLAWIATURĄ */
.strip-item:focus { outline: none !important; }

/*.strip-item:focus-visible {
    outline: none !important;
    z-index: 10;
    box-shadow: inset 0 0 0 5px #293f8e !important;
}*/

.strip-item:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    z-index: 10;
    outline-offset: -3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

.strip-item:focus-visible .strip-title {
    /*color: #293f8e !important;*/
    color: var(--accessibility-focus) !important;
    /*letter-spacing: 4px;*/
    letter-spacing: 0.12em;
    transform: translateX(10px);
}

.strip-item:focus-visible .strip-icon-wrapper {
    /*border-color: #293f8e !important;*/
    border-color: var(--accessibility-focus) !important;
    /*background: rgba(255, 255, 255, 0.6);*/
    background: rgba(var(--main-white-rgb), 0.6);
}

/* 7. REVERSE MODE */
.strip-item.reverse .container { flex-direction: row-reverse; }
.strip-item.reverse .strip-icon-wrapper { margin-right: 0; margin-left: 40px; }
.strip-item.reverse:hover .strip-title,
.strip-item.reverse:focus-visible .strip-title { 
    transform: translateX(-10px) !important; 
}


/* =================== KONIEC MODUŁ SEKCJE NA HOMEPAGE ================ */



/* =================== START - SZABLON EVENT - ARTYKUŁ ================ */
/* =================== KONIEC STYLE DLA SZABLONU EVENT - SZABLON ARTYKUŁU ================ */


/* =================== START - SZABLON EVENT + EVENT-BILETY + ARTYKULPREMIUM - PO POPRAWKACH - SZABLON ARTYKUŁU ================ */

.hero-image-container {
    width: 100%;
    min-height: 450px; 
    height: auto;      
    display: flex;     
    align-items: flex-end; 
    overflow: hidden;
    position: relative;
    /*background-color: #000;*/
    background-color: var(--main-black-bg);
}

.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }

.event-hero-overlay {
    position: relative;
    width: 100%;
    z-index: 2;
    /*background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);*/
    background: linear-gradient(to top, rgba(var(--main-black-rgb), 0.9) 0%, rgba(var(--main-black-rgb), 0.4) 70%, transparent 100%);
    padding: 120px 20px 40px;
    /*color: #fff;*/
    color: var(--text-main-white);
}

.event-title-font { 
    font-size: calc(3.5rem * var(--font-multiplier, 1)) !important;
    color: var(--text-main-white) !important;
    font-weight: var(--font-weight-bold) !important;

}

/*body.dark-mode .event-title-font { 
    color: #b8bcbf !important; 
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
}*/


.event-layout { 
    padding-top: 50px !important; 
    /*background-color: #fdfdfd;*/
    background-color: var(--bg-article) !important;
    padding-bottom: 80px; 
}

/*body.dark-mode .event-layout { 
    background-color: #121212 !important; 
}*/

.event-sidebar {
    background-color: var(--bg-article-sidebar) !important;
    /*border-color: #f0f0f0 !important;*/
    border: 1px solid rgba(var(--border-article-sidebar-rgb), var(--opacity-sidebar-border)) !important; 
}

/*body.dark-mode .event-sidebar { 
    background-color: #1a1a1a !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 
}*/

.event-fields { padding-bottom: 50px;}

/* Teraz styl dotyczy tylko pól wewnątrz układu eventu/biletu */
.event-layout .field-item, 
.event-sidebar .field-item,
.event-fields .field-item { 
    /*border-left: 3px solid #eee !important;*/
    border-left: 3px solid var(--border-light) !important;
    padding-left: 15px;
    margin-bottom: 25px !important;
    transition: border-color 0.3s ease;
}

/*body.dark-mode .event-layout .field-item,
body.dark-mode .event-sidebar .field-item,
body.dark-mode .event-fields .field-item {
    border-left: 3px solid #333 !important;
    padding-left: 15px;
    margin-bottom: 25px !important;
    transition: border-color 0.3s ease;
}*/

.event-layout .field-item:hover,
.event-sidebar .field-item:hover,
.event-fields .field-item:hover {
    /*border-left-color: #000000 !important;*/
    border-left-color: var(--text-dark-blue) !important;
}

/*body.dark-mode .event-layout .field-item:hover,
body.dark-mode .event-sidebar .field-item:hover,
body.dark-mode .event-fields .field-item:hover {
    border-left-color: #ADD8E6 !important;
}*/

.com-content-article__body p, 
.com-content-article__body li, 
.com-content-article__body div { 
    font-size: calc(1.25rem * var(--font-multiplier, 1)) !important; 
    line-height: 1.8; 
    /*color: #444;*/
    color: var(--text-main) !important;
    margin-bottom: 1.5rem;
}

/*body.dark-mode .com-content-article__body p, 
body.dark-mode .com-content-article__body li,
body.dark-mode .com-content-article__body div { 
    color: #a0a4a7 !important;
    line-height: 1.6;
}*/

/* 2. SIDEBAR I ELEMENTY FORMULARZA */
.event-field-value { 
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    color: var(--text-main) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(---letter-spacing-article) !important;
    word-break: break-word;
    line-height: var(--main-line-height, 1.2) !important;
}

/*body.dark-mode .event-field-value { 
    color: #b8bcbf !important; 
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
}*/


.section-title {
    font-size: calc(1.5rem * var(--font-multiplier, 1)) !important;
    /*font-weight: 700;*/
    font-weight: var(--font-weight-bold) !important;
    /*letter-spacing: 1px;*/
    letter-spacing: var(---letter-spacing-article) !important;
    
}

/*body.dark-mode .section-title { 
    color: #b8bcbf !important; 
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
}*/

.label-meta { 
    font-size: calc(0.75rem * var(--font-multiplier, 1)) !important;
    color: var(--main-breadcrumbs) !important;
}

body.dark-mode .field-icon,
body.dark-mode .card-text { 
    /*color: #888888 !important;*/
    color: var(--main-breadcrumbs) !important;
}

/* 2. PRZYCISKI I INTERAKCJA */
.btn-event-external {
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

/*.btn-event-external:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #293f8e !important;
    transform: scale(1.02);
}*/


/*.btn-event-external:focus-visible {
    outline: 2px solid transparent !important; 
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #293f8e !important; 
    transform: translateY(-5px) scale(1.01);
    border-radius: 8px;
}*/


.btn-event-external:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important;
    transform: translateY(-5px) scale(1.01);
    transition: outline 0.2s ease;
}

/*body.dark-mode .btn-event-external:focus-visible {
    box-shadow: 0 0 0 4px #ADD8E6 !important;
}

body.dark-mode .btn-event-external:focus-visible {
    box-shadow: 0 0 0 2px #121212, 0 0 0 5px #ADD8E6 !important; 
}*/

.btn-event-external:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
}


/* =================== END - SZABLON EVENT + EVENT-BILETY + ARTYKULPREMIUM - PO POPRAWKACH - SZABLON ARTYKUŁU ================ */




/* ============================================================
   START - TYLKO EVENT-BILETY - SZABLON ARTYKUŁU 
=============================================================== */

.price-value { 
    font-size: calc(1.4rem * var(--font-multiplier, 1)) !important; 
    color: var(--text-main) !important;
    /*font-weight: 700;*/
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(---letter-spacing-article) !important;
}

/*body.dark-mode .price-value { 
    color: #b8bcbf !important; 
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
}*/

.price-box { 
    /*background-color: #f8f9fa !important;*/
    background-color: var(--bg-price) !important;
}

body.dark-mode .price-box { 
    /*border: 1px solid rgba(255, 255, 255, 0.03) !important;*/
    border: 1px solid rgba(var(--main-white-rgb), 0.03) !important;
}


/*.free-entry-badge { 
    background: #E5FFE3; color: #000 !important; border: 2px solid green; 
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    padding: 5px 10px;
    border-radius: 4px;
}*/

/* tylko w event bilety */
/* Badge "Wstęp wolny" w nocy - stonowany zielony */
body.dark-mode .free-entry-badge { 
    background: rgba(27, 58, 26, 0.4) !important; 
    color: #b8bcbf !important; 
    border-color: #1b3a1a !important;
}

/* === END - TYLKO EVENT-BILETY PO POPRAWKACH - SZABLON ARTYKUŁU === */

/* ============================================================
   START - TYLKO ARTYKULPREMIUM - SZABLON ARTYKUŁU 
=============================================================== */

.premium-layout { 
    padding-top: 50px; 
    /*background-color: #fdfdfd;*/
    background-color: var(--bg-article) !important;
    padding-bottom: 80px; 
}

/*body.dark-mode .premium-layout { 
    background-color: #121212 !important; 
}*/

/* =================== END - TYLKO AERTYKULPREMIUM - PO POPRAWKACH - SZABLON ARTYKUŁU ================ */

/* =====================================================
   START - RELATED ARTICLES - SZABLON ARTYKUŁU 
======================================================== */

.manual-related-articles h3 { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.related-card-link { display: block; border-radius: 8px; transition: all 0.3s ease; outline: none !important; }

/* Stan spoczynku karty w nocy */
.related-card-link .card {
    /*background-color: #1a1a1a !important;*/
    background-color: var(--bg-dark) !important;
    /*border: 1px solid rgba(255, 255, 255, 0.05) !important;*/
    border: 1px solid rgba(var(--main-white-rgb), 0.05) !important;
    transition: all 0.3s ease;
}

/* Stan spoczynku karty w nocy */
/*body.dark-mode .related-card-link .card {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease;
}*/

/*.card { 
    background-color: var(--bg-dark) !important;
    border: 1px solid rgba(var(--main-white-rgb), 0.05) !important;
    transition: all 0.3s ease;
}*/

/*body.dark-mode .card { 
    background-color: #1a1a1a !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}*/

.related-card-link:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 8px; 
    box-shadow: none !important;
    transform: translateY(-5px); 
    z-index: 2; 
    transition: outline 0.2s ease;
}

/*dla event i events bilety - patrz, że w w related jest inaczej dla focus */
/*body.dark-mode .related-card-link:focus-visible {
    box-shadow: 0 0 0 4px #ADD8E6 !important;
}*/

/* dla artykulpremium - było wyłączone */
/*body.dark-mode .related-card-link:focus-visible {
    box-shadow: 0 0 0 2px #121212, 0 0 0 5px #ADD8E6 !important;
}*/

.related-card-link:hover .card { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; 
}

body.dark-mode .related-card-link:hover .card {
    background-color: #222 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(184, 188, 191, 0.1) !important;
}

.related-card-link:hover .card-title { 
    /*color: #000 !important;*/
    color: var(--text-dark-blue) !important;
}

/* Hover - Zmiana koloru tytułu na Twój błękit i jasna poświata */
/*body.dark-mode .related-card-link:hover .card-title {
    color: #ADD8E6 !important; 
}*/

/* 6. OBSŁUGA INTERLINII */
body.spacing-active .com-content-article__body p { line-height: var(--main-line-height) !important; }
body.spacing-active .field-item { margin-bottom: 2rem !important; }

.card-img-wrapper img { transition: transform 0.5s ease; }
.related-card-link:hover img, 
.related-card-link:focus-visible img { transform: scale(1.05); }

.card-text { font-size: calc(0.95rem * var(--font-multiplier, 1)) !important; line-height: 1.5; transition: font-size 0.2s ease; }

/* Tytuły w kartach też powinny rosnąć, jeśli jeszcze tego nie robią */
.card-title { 
    font-size: calc(1.25rem * var(--font-multiplier, 1)) !important;
    color: var(--text-main) !important;
    font-weight: var(--font-weight-med) !important;
    letter-spacing: var(---letter-spacing-article) !important;
}

/*body.dark-mode .card-title { 
    color: #b8bcbf !important; 
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
}*/

/* === END - RELATED ARTICLES - PO POPRAWKACH - SZABLON ARTYKUŁU === */


/* =====================================================
   START - WYDARZENIA - ARTYKUŁY MIGAWKI - HOMEPAGE
======================================================== */

.mod-articlesnews.newsflash-cards, .mod-articlesnews__item { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.row.mod-articlesnews { --bs-gutter-x: 0; }
.mod-articlesnews__item.bg-white { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }

.luxury-grid {
    display: grid;
    gap: 30px; 
    padding: 0;
    grid-template-columns: 1fr;
}

.luxury-col {
    display: flex;
    height: 100%;
}

/* === END - WYDARZENIA - ARTYKUŁY MIGAWKI - HOMEPAGE ================ */

/* =====================================================
   START - WYDARZENIA ITEM - ARTYKUŁY MIGAWKI - HOMEPAGE
======================================================== */

.minimal-card { 
    /*background: #ffffff !important;*/
    background: var(--bg-minimal-card) !important;
    margin: 0 !important; 
    width: 100%; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    outline: none !important; 
    text-decoration: none !important; 
    position: relative; 
}

.minimal-card h3 {
    /*font-size: 1.8rem;*/
    font-size: calc(1.8rem * var(--font-multiplier)) !important;
    margin: 0;
    letter-spacing: -0.5px;
    /*color: #000000 !important;*/
    color: var(--text-dark-minimal-card) !important;
    /*font-weight: 900 !important;*/
    font-weight: var(--font-weight-bold-max) !important;
    line-height: var(--main-line-height, 1.1) !important;
    /*text-shadow: 0 1px 2px rgba(255,255,255,0.2);*/
    text-shadow: 0 1px 2px rgba(var(--main-white-rgb), 0.2); 
}

body.dark-mode .minimal-card h3 {
    /*color: #000000 !important;*/
    color: var(--text-dark-minimal-card) !important;
    /*font-weight: 600 !important;*/
    font-weight: var(--font-weight-bold-max) !important;
}

.minimal-card .card-title-text {
    color: var(--text-dark-minimal-card) !important;
    line-height: var(--main-line-height, 1.1) !important;
    font-weight: var(--font-weight-bold-max) !important;
}

/*body.dark-mode .minimal-card .card-title-text {
    color: #000000 !important;
    font-weight: 600 !important;
}*/

.minimal-card span, 
.minimal-card .card-label, 
.minimal-card .event-date-label {
    font-size: calc(15px * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.2) !important; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.minimal-card .card-intro-text {
    margin-top: 15px; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;

    color: var(--text-dark-minimal-card) !important;
    font-weight: 600; 

    font-size: calc(0.95rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.5) !important;
}

/*body.dark-mode .minimal-card .card-intro-text {
    color: #000000 !important;
    color: var(--text-dark-minimal-card) !important;
    font-weight: 600 !important; 
}*/

.minimal-card p {
    margin-top: 15px; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;

    color: var(--text-dark-minimal-card) !important;
    font-weight: 600; 

    /*font-size: calc(15px * var(--font-multiplier, 1)) !important;*/
    font-size: calc(0.95rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.5) !important;
}

/*body.dark-mode .minimal-card p {
    color: #000000 !important;
    font-weight: 600 !important; 
}*/

.minimal-card:hover { transform: translateY(-8px); }
.minimal-card:hover .img-bg { transform: scale(1.1); }

.minimal-card:focus-visible { 
    outline: none !important; 
    transform: translateY(-8px); 
    z-index: 10 !important; 
}

/*.minimal-card:focus-visible::after { 
    content: ""; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
    border: 4px solid #293f8e; 
    box-shadow: 0 0 0 2px #ffffff; 
    z-index: 99; 
    pointer-events: none; 
}*/

.minimal-card:focus-visible::after {
    content: "";
    position: absolute;
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px;
    /*border: 4px solid #293f8e;*/
    border: 6px solid var(--accessibility-focus-multicolor) !important; 
    /*box-shadow: 0 0 0 2px #ffffff;*/
    box-shadow: 0 0 0 4px var(--border-shadow-white);
    z-index: 99;
    pointer-events: none;
    border-radius: 4px; 
    transition: outline 0.2s ease;
}

/*body.dark-mode .minimal-card:focus-visible::after {
    border-color: #ADD8E6 !important; 
    box-shadow: 0 0 0 2px #121212;
}*/

.minimal-card:focus-visible h3 { 
    /*color: #293f8e !important;*/
    color: var(--accessibility-focus-multicolor) !important;
}

body.dark-mode .minimal-card [style*="z-index: 2"] {
    opacity: 0.85 !important;
}

.info-overlay-box {
    background: rgba(18, 18, 18, 0.9);
    padding: 15px 25px 15px 20px;
    width: fit-content; 
    max-width: 90%; 
    min-width: 140px;
    border-radius: 0 1px 1px 0;
    backdrop-filter: blur(10px);
    margin-top: 30px;
    z-index: 4;
}

/* Wymuszenie białego koloru ikon w czarnym boxie */
.info-overlay-box i {
    /*color: #ffffff !important;*/
    color: var(--text-white-minimal-card) !important;
    font-size: 1.1rem; 
    opacity: 0.9;      
}

.minimal-card:hover .info-overlay-box i {
    /*color: #ffffff !important;*/
    color: var(--text-white-minimal-card) !important;
}

.fields-container { 
    display: flex; 
    flex-direction: column; 
    gap: calc(12px * var(--spacing-multiplier, 1)) !important; 
}

.field-item { 
    display: flex; 
    align-items: flex-start; 
    gap: calc(10px * var(--spacing-multiplier, 1)) !important; 
    margin-bottom: calc(5px * (var(--spacing-multiplier, 1) - 1)) !important;
}

.minimal-card .field-item {
    border-left: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.field-item > div {
    display: flex;
    flex-direction: column;
}

.field-item i {
    display: inline-block;
    margin-top: calc(4px * var(--spacing-multiplier, 1)) !important;
}

/* Etykieta (np. DATA) */
.field-label { 
    display: block !important; 
    /*color: #fff;*/
    color: var(--bg-minimal-card) !important;
    /*opacity: 0.7;*/
    opacity: var(--opacity-field-label); 
    font-size: 0.65rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    margin-bottom: calc(4px * var(--spacing-multiplier, 1)) !important;
    line-height: 1.2 !important;
}

/*body.dark-mode .info-overlay-box .field-label {
    color: #ffffff !important;
    opacity: 0.6;
}*/

/* Wartość (np. Długa nazwa miejsca) */
.field-value { 
    display: block !important; 
    /*color: #fff;*/
    color: var(--text-footer-white) !important;
    font-size: 1rem; 
    font-weight: 500; 
    word-break: break-word; 
    line-height: var(--main-line-height, 1.2) !important; 
}

/*body.dark-mode .info-overlay-box .field-value {
    color: #b8bcbf !important; 
}*/

/* =================== KONIEC STYLE DLA WYDARZENIA_ITEM - ARTYKUŁY MIGAWKI ================ */



/* =====================================================
   START - MAGAZINE - ARTYKUŁY MIGAWKI - HOMEPAGE SLIDER
======================================================== */


.mag-slider { 
    /*background: #fff;*/
    background-color: var(--bg-main) !important;
    position: relative; 
    width: 100%; 
    overflow: hidden; 
}

body.dark-mode .mag-slider { 
    /*background-color: #121212 !important;*/
    /*border-color: rgba(255, 255, 255, 0.05) !important;*/
    border-color: rgba(var(--main-white-rgb), 0.05) !important; 
}

.mag-wrapper { display: flex; min-height: 650px; height: auto; width: 100%; }
.mag-image-wrap { flex: 0 0 50%; height: 650px; overflow: hidden; position: relative; background: #eee; }
.mag-image-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.mag-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.4; pointer-events: none; }

.mag-text { 
    flex: 0 0 42%; 
    display: flex; 
    align-items: center; 
    padding: 60px 30px 60px 80px; 
    /*background: #fff;*/
    background-color: var(--bg-main) !important;
    min-height: 650px; 
}

body.dark-mode .mag-text { 
    /*background-color: #121212 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;*/
    border-color: rgba(var(--main-white-rgb), 0.05) !important;  
}

.mag-text-content { width: 100%; }

.mag-header { 
    font-size: calc(clamp(2.5rem, 4vw, 3.8rem) * var(--font-multiplier, 1)) !important; 
    /*font-weight: 900;*/
    font-weight: var(--font-weight-bold-max) !important;
    line-height: 1.1; 
    margin-bottom: 15px; 
    /*color: #000;*/
    color: var(--text-main) !important;
}

body.dark-mode .mag-header { 
    /*color: #b8bcbf !important; 
    -webkit-font-smoothing: antialiased;
    font-weight: 600 !important;*/
    font-weight: var(--font-weight-bold-max) !important;
}

.mag-subheader { 
    font-size: calc(1.3rem * var(--font-multiplier, 1)) !important; 
    /*font-weight: 600;*/
    font-weight: var(--font-weight-med) !important;
    /*color: #333;*/
    color: var(--text-main) !important;
    margin-bottom: 45px; 
    line-height: 1.4; 
}

/*body.dark-mode .mag-subheader { 
    color: #a0a4a7 !important; 
    font-weight: 400 !important;
    font-weight: var(--font-weight-bold-max) !important;
}*/

/* --- 2. PRZYCISK --- */
.mag-btn { 
    display: inline-block; 
    padding: 14px 35px; 
    /*color: #000 !important;*/
    color: var(--text-dark) !important;
    text-decoration: none; 
    font-weight: 700; 
    text-transform: uppercase; 
    /*border: 1px solid rgba(0,0,0,0.15);*/
    border: 1px solid rgba(var(--main-black-rgb), 0.1) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: calc(16px * var(--font-multiplier, 1)) !important;
}

/*body.dark-mode .mag-btn { 
    color: #000 !important; 
    border-color: rgba(0,0,0,0.1) !important;
}*/

.mag-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* FIX DLA HOVER NA PRZYCISKU */
body.dark-mode .mag-btn:hover { 
    /*color: #000 !important;*/
    color: var(--text-dark) !important;
    filter: brightness(1.1); 
    box-shadow: 0 5px 15px rgba(var(--main-white-rgb), 0.1) !important;
}

/*.mag-btn:focus-visible { 
    outline: none !important; background: #fff !important; color: #000 !important;
    box-shadow: 0 0 0 4px rgba(41, 63, 142, 0.6) !important; border-color: #293f8e !important;
}
*/

.mag-btn:focus-visible { 
    /*outline: none !important; 
    background-color: inherit !important; */
    /*color: #000 !important;*/
    /*box-shadow: 0 0 0 2px #fff, 0 0 0 5px #293f8e !important; 

    border-color: transparent !important;*/
    color: var(--text-dark) !important;
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;

    transform: translateY(-3px);
}

/* FIX DLA FOKUSU PRZYCISKU W DARK MODE */
body.dark-mode .mag-btn:focus-visible { 
    /*outline: none !important;*/
    background: #ffffff !important; 
    background-color: #ffffff !important;
    /*color: #000000 !important; 
    box-shadow: 0 0 0 3px #121212, 0 0 0 6px #ADD8E6 !important; 
    border-color: transparent !important;
    transform: translateY(-3px);
    transition: all 0.2s ease-in-out;*/
}

/* --- 3. PIONOWY NAPIS --- */
.mag-vertical { 
    flex: 0 0 8%; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    padding-top: 60px; 
    /*border-left: 1px solid #f5f5f5;*/
    border-left: 1px solid var(--border-super-light) !important;
    /*background: #fff;*/
    background-color: var(--bg-main) !important;
    height: 650px; 
}

/*body.dark-mode .mag-vertical { 
    background-color: #121212 !important;
    border-color: rgba(255, 255, 255, 0.05) !important; 
}*/

.vertical-text-wrapper { writing-mode: vertical-rl; transform: rotate(180deg); }

.vertical-text-wrapper span { 
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 6px; 
    /*color: #000;*/
    color: var(--text-main) !important;
}

/* Pionowy napis - Subtelny szary metalik */
/*body.dark-mode .vertical-text-wrapper span { 
    color: #888888 !important; 
    letter-spacing: 6px; 
}*/

/* --- 4. NAWIGACJA (STRZAŁKI) --- */
/* używam button.mag-control, aby wymusić brak tła nawet jeśli globalny CSS coś narzuca */
button.mag-control { 
    width: 60px; 
    opacity: 1 !important; 
    z-index: 10; 
    border: none !important; 
    background: transparent !important; 
    background-color: transparent !important;
    box-shadow: none !important; 
    outline: none !important; 
}

/* Ostateczne czyszczenie tła strzałek */
body.dark-mode button.mag-control { 
    background: transparent !important; 
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

.mag-icon { 
    width: 44px !important; 
    height: 44px !important; 
    background-color: #111111 !important; 
    border-radius: 50% !important; 
    border: 2px solid #ffffff !important; 
    background-size: 50% 50% !important; 
    background-repeat: no-repeat !important; 
    background-position: center !important; 
}
.carousel-control-prev-icon.mag-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important; }
.carousel-control-next-icon.mag-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; }

button.mag-control:focus, button.mag-control:active, button.mag-control:hover { 
    outline: none !important; 
    box-shadow: none !important; 
    background: transparent !important; 
    background-color: transparent !important; 
    border: none !important; 
}
.mag-control:focus-visible .mag-icon { 
    /*background-color: #293f8e !important; */
    background-color: var(--accessibility-focus-multicolor) !important;
    /*box-shadow: 0 0 0 4px rgba(41, 63, 142, 0.4) !important;*/
    outline: 3px solid var(--accessibility-focus-multicolor) !important;
    outline-offset: 3px; 
    /*border-radius: 4px; */
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

/* Indykatory (Kreski na dole) */
.mag-indicators { bottom: 30px; z-index: 15; }

.mag-indicators [data-bs-target] { 
    width: 40px; 
    height: 4px; 
    /*background-color: #000; */
    background-color: var(--bg-indicators) !important;
    border: 10px solid transparent; 
    background-clip: padding-box; 
    margin: 0 5px; 
    opacity: 0.4; 
}

/*body.dark-mode .mag-indicators [data-bs-target] { 
    background-color: #444 !important; 
}*/

.mag-indicators .active { opacity: 1; transform: scaleY(1.2); }

body.dark-mode .mag-indicators .active { 
    background-color: #ADD8E6 !important; 
}

.mag-indicators [data-bs-target]:focus-visible { 
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

/* =================== KONIEC STYLE DLA MAGAZINE - ARTYKUŁY MIGAWKI ================ */

/* =====================================================
   START - HERO - ARTYKUŁY MIGAWKI - HOMEPAGE AKTUALNOŚCI
======================================================== */

.newsflash-hero { 
    /*background: #000;*/
    background: var(--text-dark);
    position: relative; 
    width: 100%; 
    overflow: hidden; 
}
.newsflash-hero .hero-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.hero-wrapper { display: flex; min-height: 600px; height: auto; width: 100%; }
.hero-image { flex: 0 0 50%; max-width: 50%; height: 600px; overflow: hidden; position: relative; }


.hero-content { 
    flex: 0 0 50%; 
    max-width: 50%; 
    display: flex; 
    align-items: center; 
    padding: 60px 45px; 
    /*background: #111;*/
    background-color: var(--bg-black) !important;
    color: #fff; 
    box-sizing: border-box; 
    overflow: hidden; 
}

/*body.dark-mode .hero-content { 
    background-color: #0d0d0d !important;
}*/

.hero-text-inner { width: 100%; max-width: 100%; overflow: visible; padding: 10px; margin: -10px; }

.hero-title { 
    font-size: calc(clamp(1.8rem, 3.2vw, 3rem) * var(--font-multiplier, 1)) !important; 
    /*font-weight: 900;*/
    font-weight: var(--font-weight-bold-max) !important;
    line-height: 1.1; 
    margin-bottom: 20px; 
    /*color: #fff !important;*/
    color: var(--text-footer-white) !important;
    word-break: keep-all; 
    overflow-wrap: normal; 
    hyphens: none; 
    -webkit-hyphens: none;
    white-space: normal; 
    width: 100%; 
    display: block;
}

/*body.dark-mode .hero-title { 
    color: #b8bcbf !important; 
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased;
}*/

.hero-intro { 
    font-size: calc(1.3rem * var(--font-multiplier, 1)) !important; 
    font-weight: 400; 
    /*color: #ccc;*/
    color: var(--text-footer-white) !important;
    margin-bottom: 40px; 
    line-height: 1.6; 
}

/*body.dark-mode .hero-intro { 
    color: #a0a4a7 !important; 
}*/

.hero-btn { 
    display: inline-block !important; /* Wymuszone, transform nie działa na inline */
    padding: 14px 35px; 
    /*color: #fff !important;*/
    color: var(--text-footer-white) !important;
    text-decoration: none; 
    font-weight: 700; 
    text-transform: uppercase; 
    /*border: 2px solid #fff;*/
    border: 2px solid var(--text-footer-white) !important;
    font-size: calc(15px * var(--font-multiplier, 1)) !important; 
    position: relative; 
    margin: 5px; 
    vertical-align: middle;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transform: translateY(0); /* Punkt startowy dla animacji */
}

/*body.dark-mode .hero-btn { 
    border-color: #b8bcbf !important; 
    color: #b8bcbf !important; 
}*/

.hero-btn:hover {
    /*border: 2px solid #fff;*/
    border: 2px solid var(--text-footer-white) !important;
    /*background: #000000 !important;*/
    background: var(--bg-black) !important;
    /*color: #ffffff !important;*/
    color: var(--text-white) !important; 
    transform: translateY(-5px) !important; 
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;*/
    box-shadow: var(--shadow-hero-btn)!important;
    filter: var(---filter-hero-btn);
}

/*body.dark-mode .hero-btn:hover {
    border-color: #b8bcbf !important; 
    background: #000000 !important; 
    color: #fff !important; 
    transform: translateY(-5px) !important; 
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15) !important;
    filter: brightness(1.1); 
}*/

.hero-btn:focus-visible { 
    /*outline: none !important;*/

    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 6px; 
    border-radius: 4px; 
    box-shadow: none !important;

    /*background: #fff !important;*/
    background: var(--bg-minimal-card) !important; 
    /*color: #000 !important;*/
    color: var(--text-dark) !important;
    /*box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 7px #293f8e !important; */
    z-index: 5;
    transition: outline 0.3s ease;
}

/* FIX DLA FOKUSU PRZYCISKU (Dark Mode) */
/*body.dark-mode .hero-btn:focus-visible { 
    background: #ffffff !important; 
    color: #000 !important;
    box-shadow: 0 0 0 3px #0d0d0d, 0 0 0 6px #ADD8E6 !important; 
}*/

.custom-control { width: 70px; opacity: 1 !important; z-index: 10; border: none; background: none; }
.custom-icon { 
    width: 46px !important; 
    height: 46px !important; 
    /*background-color: rgba(255,255,255,0.9) !important;*/
    background-color: #ffffff !important; 
    border-radius: 50% !important;
    border: 2px solid #000000 !important; 
    background-size: 50% 50% !important;
    background-repeat: no-repeat !important; 
    background-position: center !important; 
    transition: all 0.3s ease;
}

/*body.dark-mode .custom-icon {
    background-color: rgba(184, 188, 191, 0.8) !important; 
}*/

.carousel-control-prev-icon.custom-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important; }
.carousel-control-next-icon.custom-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; }

.custom-control:focus-visible .custom-icon { 
    /*background-color: #293f8e !important;*/
    background-color: var(--accessibility-focus-blue) !important;
    outline: 4px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    /*box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 7px #293f8e !important;*/
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

/* Strzałki mobilne - domyślnie ukryte */
.hero-mobile-nav-wrapper { display: none; }

/* --- 5. INDYKATORY --- */
.custom-indicators [data-bs-target] { 
    width: 40px; 
    height: 6px; 
    /*background-color: #fff !important;*/
    background-color: var(--bg-indicators-dark) !important;
    border: 8px solid transparent; 
    background-clip: padding-box; 
    opacity: 0.4; 
    transition: all 0.3s ease;
}

/*body.dark-mode .custom-indicators [data-bs-target] { 
    background-color: #444 !important; 
}*/

.custom-indicators .active { opacity: 1 !important; transform: scaleY(1.3); }

body.dark-mode .custom-indicators .active { 
    background-color: #ADD8E6 !important; 
}

.custom-indicators [data-bs-target]:focus-visible { 
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 3px; 
    border-radius: 4px; 
    box-shadow: none !important; 
    transition: outline 0.2s ease;
}

/* =================== KONIEC STYLE DLA HERO - ARTYKUŁY MIGAWKI ================ */

/* =====================================================
   START - CALENDAR - ARTYKUŁY MIGAWKI
======================================================== */




/* =================== POCZĄTEK STYLE DLA CALENDAR - ARTYKUŁY MIGAWKI ================ */
/* --- 1. TYPOGRAFIA I SKALOWANIE (WCAG) --- */
.timeline-day { font-size: calc(2.8rem * var(--font-multiplier, 1)) !important; font-weight: 900; line-height: var(--main-line-height, 1) !important; color: #000; display: block; }
.timeline-month-year { font-size: calc(1.1rem * var(--font-multiplier, 1)) !important; color: #666; font-weight: 700; text-transform: uppercase; display: block; }
.event-card-title { font-size: calc(2.2rem * var(--font-multiplier, 1)) !important; font-weight: 900; color: #000; line-height: var(--main-line-height, 1.1) !important; margin-bottom: 15px; transition: color 0.3s; }
.event-subheader { font-size: calc(1.1rem * var(--font-multiplier, 1)) !important; color: #444; font-weight: 600; line-height: var(--main-line-height, 1.4) !important; margin-bottom: 15px; }
.event-type-label, .meta-item span, .event-price-tag, .free-entry-badge { font-size: calc(1rem * var(--font-multiplier, 1)) !important; line-height: var(--main-line-height, 1.4) !important; }

/* --- 2. NAWIGACJA (GÓRNY PASEK) --- */
.calendar-nav-bar { 
    background: #fff; padding: 20px 40px; border-radius: 100px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; 
    align-items: center; justify-content: space-between; margin-bottom: 60px; 
    flex-wrap: wrap; gap: 20px; 
}
.btn-all-events { 
    border: 2px solid #000; background: transparent; padding: 12px 35px; 
    border-radius: 50px; font-weight: 700; text-transform: uppercase; transition: all 0.2s; cursor: pointer;
}
.btn-all-events.active { background: #000; color: #fff; }
.btn-all-events:hover { background: #333; color: #fff; }

.month-single-switcher { width: 450px; display: flex; align-items: center; position: relative; }
.month-display-name { text-align: center; font-size: 2.2rem; font-weight: 900; text-transform: uppercase; width: 100%; color: #000; padding: 0 60px; }

/* Strzałki slidera i FOKUS */
.month-single-switcher .carousel-control-prev,
.month-single-switcher .carousel-control-next { 
    width: 50px; height: 50px; background: rgba(0,0,0,0.05); border-radius: 50%; 
    top: 50%; transform: translateY(-50%); opacity: 0.8; transition: all 0.3s;
    border: 2px solid rgba(0, 0, 0, 0.1); /* Subtelne obramowanie */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Opcjonalnie: lekki cień dla głębi */
}

.month-single-switcher .carousel-control-prev:focus-visible,
.month-single-switcher .carousel-control-next:focus-visible {
    outline: 3px solid #293f8e !important; outline-offset: 2px; opacity: 1;
}
.month-single-switcher .carousel-control-prev-icon,
.month-single-switcher .carousel-control-next-icon { filter: brightness(0); width: 20px; }
.month-single-switcher .carousel-control-prev.disabled,
.month-single-switcher .carousel-control-next.disabled { opacity: 0.1 !important; pointer-events: none; }

/* --- 3. UKŁAD KARTY (PANCERNY SZKIELET + WYGLĄD) --- */
.timeline-group { display: flex; border-top: 4px solid #000; padding-top: 40px; margin-bottom: 80px; }
.timeline-sidebar { flex: 0 0 150px; }
.timeline-content { flex: 1; padding-left: 40px; min-width: 0; }

.timeline-item-inner { 
    border: 1px solid #e0e0e0; border-radius: 16px; margin-bottom: 40px; 
    background: #fff; overflow: hidden; display: flex; flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item-inner:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); }

.event-main-link { display: block; text-decoration: none !important; color: inherit !important; outline: none; }

.event-layout-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 30px; padding: 25px; align-items: flex-start; }

.event-img-aside { flex: 0 0 300px; width: 300px; border-radius: 12px; overflow: hidden; }
.event-img-aside img { width: 100%; height: auto; object-fit: cover; display: block; }
.event-main-body { flex: 1; min-width: 0; }

/* Ikony i meta info */
.event-type-label { color: #000; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; }
.event-meta-info { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #eee; padding-top: 15px; }
.meta-item { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.meta-item i { color: #000 !important; font-size: 1.1rem; text-align: center; margin-top: 3px; }



/* Stopka karty i Przyciski */
.event-footer-bar { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    /* Padding reaguje na interlinię */
    padding: calc(20px * var(--main-line-height, 1)) 30px; 
    background: #fcfcfc; 
    border-top: 1px solid #eee; 
    gap: 25px; 
    flex-wrap: wrap; /* Kluczowe: przyciski nie wyjdą poza kartę przy zoomie */
}


.event-price-tag { font-weight: 800; color: #000; font-size: 1.2rem; }




.btn-event-ticket { 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--font-multiplier, 1)); /* Odstęp rośnie wraz z czcionką */
    background: #000; 
    color: #fff !important; 
    /* Elastyczny padding i powiększona czcionka */
    padding: calc(12px * var(--font-multiplier, 1)) calc(30px * var(--font-multiplier, 1)) !important; 
    border-radius: 8px; 
    text-transform: uppercase; 
    font-weight: 800; 
    border: 2px solid #000; 
    transition: 0.3s;
    text-align: center;
    /* Kluczowe dla WCAG: interlinia */
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.2) !important;
    min-height: calc(44px * var(--font-multiplier, 1)); /* Standard WCAG dla klikalnych elementów */
}

.btn-event-ticket:hover { background: #333; border-color: #333; }

.free-entry-badge { 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    background: #E5FFE3; 
    color: #000 !important; 
    padding: calc(12px * var(--font-multiplier, 1)) calc(30px * var(--font-multiplier, 1)) !important; 
    border-radius: 8px; 
    text-transform: uppercase; 
    font-weight: 800; 
    border: 2px solid #000;
    text-align: center;
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.2) !important;
    max-width:100%;
}


/* --- 4. FOCUS (DOSTĘPNOŚĆ) --- */
.event-main-link:focus-visible .event-layout-wrapper {
    background: rgba(41, 63, 142, 0.05) !important;
    box-shadow: inset 0 0 0 4px #293f8e !important; border-radius: 12px;
}
.btn-event-ticket:focus-visible, .btn-all-events:focus-visible {
    outline: 3px solid #293f8e !important; outline-offset: 4px;
}

/* --- 5. RESPONSYWNOŚĆ --- */
@media (max-width: 1280px) {
    .timeline-group { flex-direction: column !important; }
    .timeline-sidebar { width: 100% !important; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
    .timeline-content { padding-left: 0 !important; }
    .event-layout-wrapper { flex-direction: row !important; flex-wrap: nowrap !important; }
    .event-img-aside { flex: 0 0 300px !important; width: 300px !important; }
}

@media (max-width: 991px) {
    .calendar-nav-bar { justify-content: center !important; flex-direction: column !important; border-radius: 40px; padding: 20px 10px; }
    .btn-all-events { margin: 0 auto !important; }
    .month-single-switcher { margin: 0 auto !important; width: 100% !important; max-width: 450px; }
}

@media (max-width: 767px) {
    .month-display-name { font-size: 1.4rem !important; padding: 0 40px !important; }
    .month-single-switcher .carousel-control-prev, .month-single-switcher .carousel-control-next { width: 40px; height: 40px; }
    .event-layout-wrapper { flex-direction: column !important; align-items: center; }
    .event-img-aside { width: 100% !important; max-width: 100% !important; margin-bottom: 20px; }
    .event-footer-bar { flex-direction: column !important; align-items: stretch !important; gap: 15px; }
    .event-price-tag { text-align: center; }
}

/* --- 6. SPECJALNE DLA ZOOMU --- */
body.spacing-active .event-img-aside, body.spacing-active .event-img-aside img { max-width: 300px !important; flex: 0 0 300px !important; }
body.spacing-active .calendar-nav-bar { flex-direction: column !important; align-items: center !important; gap: 20px; }



/* --- 7. DARK MODE (ZINTEGROWANY) --- */
/*body.dark-mode .calendar-nav-bar { background: #222 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }*/
body.dark-mode .calendar-nav-bar { 
    background: #1a1a1a !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

/*body.dark-mode .month-display-name, body.dark-mode .timeline-day, body.dark-mode .event-card-title { color: #fff !important; }*/
/* Nazwa miesiąca i Dzień w sidebarze - Twoja Platyna */
body.dark-mode .month-display-name, body.dark-mode .timeline-day { 
    color: #b8bcbf !important; 
}

body.dark-mode .timeline-month-year { 
    color: #ADD8E6 !important; 
}

/*body.dark-mode .btn-all-events { border-color: #ADD8E6 !important; color: #ADD8E6 !important; }
body.dark-mode .btn-all-events.active { background: #000 !important; }*/

body.dark-mode .btn-all-events { 
    border-color: #ADD8E6 !important; 
    color: #ADD8E6 !important; 
}

/*body.dark-mode .btn-all-events.active { 
    background: #ADD8E6 !important; 
    color: #000 !important; 
}*/

/* Konstrukcja karty */
body.dark-mode .timeline-group { border-top-color: #333 !important; }
body.dark-mode .timeline-item-inner { 
    background: #1e1e1e !important; 
    border-color: #333 !important; 
}
body.dark-mode .event-footer-bar { 
    background: #252525 !important; 
    border-top-color: #333 !important; 
}
/*body.dark-mode .timeline-group { border-top-color: #444 !important; }
body.dark-mode .timeline-item-inner { background: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode .event-footer-bar { background: #252525 !important; border-top-color: #333 !important; }*/

/* Tytuł wydarzenia - Platyna + odchudzony bold dla ostrości */
body.dark-mode .event-card-title { 
    color: #b8bcbf !important; 
    font-weight: 500 !important;
}

/* Subheader i Meta dane (tekst, ikony, cena) - Aksamitny szary / Jasny szary */
body.dark-mode .event-subheader { color: #a0a4a7 !important; }
body.dark-mode .meta-item span, 
body.dark-mode .meta-item i,
body.dark-mode .event-price-tag { 
    color: #eee !important; 
}

/*body.dark-mode .event-subheader { color: #ccc !important; }
body.dark-mode .meta-item span, body.dark-mode .meta-item i { color: #eee !important; }
body.dark-mode .event-price-tag { color: #fff !important; }*/

/* Typ wydarzenia i przyciski nawigacji - Błękitny akcent */
body.dark-mode .event-type-label { color: #ADD8E6 !important; }

/* Strzałki w Dark Mode i ich FOKUS */
body.dark-mode .month-single-switcher .carousel-control-prev,
body.dark-mode .month-single-switcher .carousel-control-next { background: #555 !important; border: 1px solid #777 !important; opacity: 1 !important; }
body.dark-mode .month-single-switcher .carousel-control-prev:focus-visible,
body.dark-mode .month-single-switcher .carousel-control-next:focus-visible { outline: 3px solid #ADD8E6 !important; }
body.dark-mode .month-single-switcher .carousel-control-prev-icon,
body.dark-mode .month-single-switcher .carousel-control-next-icon { filter: invert(1) brightness(1.5) !important; }
body.dark-mode .month-single-switcher .carousel-control-prev.disabled,
body.dark-mode .month-single-switcher .carousel-control-next.disabled { background: #1a1a1a !important; opacity: 0.2 !important; }


/* --- FIX DLA "WSTĘP WOLNY" W DARK MODE --- */
body.dark-mode .free-entry-badge { 
    background: rgba(27, 58, 26, 0.8) !important; /* Stonowana zieleń (brak przeźroczystości tła strony) */
    color: #b8bcbf !important; 
    border-color: #1b3a1a !important;
    font-weight: 500 !important;
}

/* --- FIX DLA FOKUSU (Błękit zamiast granatu) --- */
body.dark-mode .event-main-link:focus-visible .event-layout-wrapper {
    background: rgba(173, 216, 230, 0.05) !important;
    box-shadow: inset 0 0 0 4px #ADD8E6 !important;
}

body.dark-mode .btn-event-ticket:focus-visible, 
body.dark-mode .btn-all-events:focus-visible,
body.dark-mode .month-single-switcher .carousel-control-prev:focus-visible,
body.dark-mode .month-single-switcher .carousel-control-next:focus-visible {
    outline: 3px solid #ADD8E6 !important;
    outline-offset: 4px;
}

/* Strzałki w Dark Mode */
body.dark-mode .month-single-switcher .carousel-control-prev,
body.dark-mode .month-single-switcher .carousel-control-next { 
    background: #333 !important; 
    border-color: #444 !important; 
}
body.dark-mode .month-single-switcher .carousel-control-prev-icon,
body.dark-mode .month-single-switcher .carousel-control-next-icon { 
    filter: invert(1) brightness(1.2) !important; 
}


/* =================== KONIEC STYLE DLA CALENDAR - ARTYKUŁY MIGAWKI ================ */







/* =================== POCZĄTEK STYLE DLA KINO - REPERTUAR ======================== */

/* --- 1. NAWIGACJA DAT (SLIDER KINA) --- */
.kino-nav-container { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 40px; 
    background: #fff; 
    padding: 15px 25px; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    flex-wrap: wrap; /* Pozwala na przeskakiwanie do nowej linii */
}

/* Przycisk Cały Repertuar - Stylizacja */
.btn-all-kino {
    flex: 0 0 auto;
    /*background: #000;*/
    background: transparent;
    /*color: #fff !important;*/
    border: 2px solid #000;
    /*border-radius: 15px;*/
    border-radius: 50px !important;
    /*padding: 10px 15px;*/
    padding: 12px 35px;
    font-weight: 700;
    /*font-size: 0.85rem;*/
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    text-transform: uppercase;
    /*line-height: 1.1; *//* Ciasna interlinia dla tekstu jeden pod drugim */
    line-height: var(--main-line-height, 1.2) !important;
    cursor: pointer;
    /*transition: 0.3s;*/
    transition: all 0.2s;
    text-align: center;
}

.btn-all-kino.active {
    background: #000;
    color: #fff !important;
    /*border-color: #ADD8E6;*/
}

.btn-all-kino:hover {
    background: #333;
    color: #fff !important;
    /*border-color: #ADD8E6;*/
}

/* Poprawka dla stanu Focus (Tabulator) */
.btn-all-kino:focus-visible {
    /* Outline to ta niebieska ramka "na zewnątrz" przycisku */
    outline: 3px solid #293f8e !important; 
    outline-offset: 4px;
    /* Wymuszamy, aby główna ramka przycisku nie zniknęła */
    border: 2px solid #000 !important; 
    background: #fff; /* Opcjonalnie: tło na biało, żeby było czytelnie */
    color: #000 !important;
}

.kino-date-viewport { 
    overflow-x: auto; 
    /*flex-grow: 1;*/
    flex: 1; /* Zajmuje całą dostępną przestrzeń */
    scroll-behavior: smooth; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}

.kino-date-viewport::-webkit-scrollbar { display: none; }

.kino-date-track { display: flex; gap: 12px; width: max-content; padding: 5px; }

/* Kafle dat w kinie */
.date-tile-btn { 
    min-width: 70px; background: #fff; border: 2px solid #eee; border-radius: 12px; 
    padding: 10px; cursor: pointer; display: flex; flex-direction: column; 
    align-items: center; transition: 0.3s;
}
.date-tile-btn small { font-size: 0.75rem; text-transform: uppercase; font-weight: 600; color: #444; }
.date-tile-btn strong { font-size: 1.3rem; font-weight: 900; color: #000; }

.date-tile-btn:hover { border-color: #ADD8E6; background: #f0f8ff; }
.date-tile-btn.active { background: #ADD8E6 !important; border-color: #ADD8E6 !important; transform: scale(1.05); }

/* Przyciski przewijania (strzałki) */
.nav-arrow { 
    background: #f0f0f0; border: none; border-radius: 50%; width: 40px; height: 40px; 
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s;
}
.nav-arrow:hover { background: #e0e0e0; }

/* --- 2. UNIKALNE DLA KARTY KINA --- */
/* Plakat filmowy (pionowy) - Calendar ma 300px poziomo, Kino potrzebuje 220px pionowo */
.kino-item-inner .event-img-aside { 
    flex: 0 0 260px !important; 
    width: 260px !important; 
}

.movie-intro-text {
    font-size: calc(1rem * var(--font-multiplier, 1));
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px;
}

/* Godziny seansów (Badge) */
.seanse-wrapper { margin-top: auto; padding-top: 20px; border-top: 1px dashed #eee; }

.hours-label-small { 
    font-size: calc(0.8rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.4) !important;
    font-weight: 700; 
    text-transform: uppercase; 
    margin-bottom: calc(8px * var(--main-line-height, 1)) !important;
    color: #444; 
}

.badge-hour { 
    background: #ADD8E6; 
    color: #000; 
    /*padding: 6px 14px;*/
    padding: calc(6px * var(--font-multiplier, 1)) calc(14px * var(--font-multiplier, 1)) !important;
    border-radius: 6px; 
    font-weight: 800; 
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    display: inline-block;
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
/* Rozsuwanie się badge'y przy zwiększaniu interlinii */
    margin-bottom: calc(5px * var(--main-line-height, 1));
}

.price-full-text {
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    font-weight: 700;  /* Wyraźne, ale nie "ciężkie" */
    color: #333;
}

.price-full-text strong {
    font-size: calc(0.85rem * var(--font-multiplier, 1)) !important;
    font-weight: 900;  /* Słowo "Bilety" będzie ciut mocniejsze */
    margin-right: 5px;
}

.price-full-text small {
    font-size: 0.9rem;
    margin-left: 3px;
    font-weight: 700;
}



/* --- 3. DARK MODE KINO (Tylko to, czego nie ma w Calendar) --- */
body.dark-mode .kino-nav-container { background: #1a1a1a !important; }
body.dark-mode .date-tile-btn { background: #252525 !important; border-color: #333 !important; }
body.dark-mode .date-tile-btn strong { color: #b8bcbf !important; }
body.dark-mode .date-tile-btn small { color: #ADD8E6 !important; }
body.dark-mode .date-tile-btn.active strong { color: #000 !important; }
body.dark-mode .nav-arrow { background: #333 !important; color: #fff; }
body.dark-mode .movie-intro-text { color: #a0a4a7 !important; }
body.dark-mode .seanse-wrapper { border-top-color: #333; }
body.dark-mode .hours-label-small { color: #b8bcbf !important; }

/* Dark Mode dla ceny */
body.dark-mode .price-full-text {
    color: #eee !important;
}

/* DARK MODE FIX DLA PRZYCISKU */
body.dark-mode .btn-all-kino {
    background: #333;
    border-color: #444;
}


/* To samo dla Dark Mode, żeby ramka była widoczna na ciemnym tle */
body.dark-mode .btn-all-kino:focus-visible {
    outline: 3px solid #ADD8E6 !important;
    outline-offset: 4px;
    border: 2px solid #fff !important; /* W ciemnym trybie biała ramka przy focusie */
    background: #1a1a1a !important;
    color: #fff !important;
}

/* --- 4. RESPONSYWNOŚĆ KINA --- */
@media (max-width: 991px) {
    /* Na tabletach nieco mniejszy plakat, ale wciąż z boku */
    .kino-item-inner .event-img-aside { 
        flex: 0 0 260px !important; 
        width: 260px !important; 
    }

    /* Przycisk na całą szerokość nad sliderem */
    .kino-nav-container {
        flex-direction: row; /* Zostawiamy row, ale przycisk dostanie 100% */
        justify-content: center;
    }

    .btn-all-kino {
        flex: 0 0 100%; /* Wymusza 100% szerokości */
        order: -1;      /* Wyświetla go zawsze na samej górze */
        margin-bottom: 5px;
        br { display: none; } /* Na mobile tekst w jednej linii */
    }
    
    .kino-nav-container br { display: none; } /* Ukrywamy łamanie linii na mobile */
}

@media (max-width: 767px) {
    /* Na telefonach: zdjęcie na całą szerokość karty */
    .kino-item-inner .event-layout-wrapper {
        flex-direction: column !important; /* Tekst pod zdjęciem */
        align-items: center;
        padding: 0; /* Usuwamy padding, żeby zdjęcie przylegało do krawędzi (opcjonalnie) */
    }

    .kino-item-inner .event-img-aside { 
        width: 100% !important; 
        max-width: 100% !important; 
        flex: 0 0 auto !important; 
    }

    .kino-item-inner .event-img-aside img {
        border-radius: 12px 12px 0 0; /* Zaokrąglamy tylko górę zdjęcia */
        width: 100%;
        height: auto;
        aspect-ratio: auto; /* Pozwalamy zdjęciu zachować naturalny pionowy kształt */
    }

    .kino-item-inner .event-main-body {
        padding: 20px; /* Dodajemy padding tylko dla tekstu, skoro wrapper go stracił */
        width: 100%;
    }

    /*.kino-nav-container { padding: 10px; gap: 5px; }*/
    
    .btn-all-kino {
        font-size: 1rem;
        padding: 15px;
    }
    
    .kino-nav-container {
        padding: 15px 10px;
        gap: 10px;
    }
}

/* KLUCZOWE DLA REPERTUARU: Ukrywa seanse i pokazuje tylko te z wybranego dnia */
/* Ukrywanie grup, gdy JS jest aktywny */
.js-enabled .timeline-group { 
    display: none !important; 
}

/* Pokazywanie tylko aktywnej grupy */
.js-enabled .timeline-group.show { 
    display: flex !important; 
}

/* =================== KONIEC STYLE DLA KINO - REPERTUAR ======================== */



/* =================== POCZATEK STYLE DLA SZABLONU KINO-FILM ======================== */


/* ==========================================================================
   KINO: WIDOK SZCZEGÓŁOWY FILMU (WCAG & DARK MODE)
   ========================================================================== */

.kino-movie-layout { padding-top: 50px; }

/* --- 1. Typografia i Skalowanie --- */
.kino-movie-layout h1 {
    font-size: calc(2.5rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.1) !important;
}

/*.kino-movie-layout .article-text {
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.6) !important;
}*/

/* Celujemy bezpośrednio w paragrafy, listy i divy wewnątrz opisu filmu */
.kino-movie-layout .article-text p, 
.kino-movie-layout .article-text li, 
.kino-movie-layout .article-text div,
.kino-movie-layout .article-text {
    font-size: calc(1.25rem * var(--font-multiplier, 1)) !important;
    /*line-height: var(--main-line-height, 1.8) !important;*/
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
}


/* --- 2. Metryczka (Pola dodatkowe) --- */
.movie-specs-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: calc(1.2rem * var(--main-line-height, 1));
    margin-bottom: 2rem;
}

.spec-item {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    /* Rozsuwanie wnętrza pola przy zwiększaniu interlinii */
    gap: calc(4px * var(--main-line-height, 1));
}

.spec-item small {
    font-size: calc(0.8rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1) !important;
    color: #666;
}

.spec-item span {
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.2) !important;
    font-weight: 600;
    color: #000;
}

/* Poprawka dla pola WIEK (rezygnacja z ciemnego badge na rzecz czytelności) */
.spec-item .badge.bg-dark {
    background: transparent !important;
    color: #000 !important;
    padding: 0 !important;
    font-weight: 700;
    border: none;
}

/* --- 3. Sekcja Biletowa (Strefa Zakupu) --- */
/*.ticket-buy-zone {
    border-radius: 15px !important;
    background-color: #fdfdfd !important;
    border: 1px solid #eee !important;
    padding: calc(25px * var(--font-multiplier, 1)) !important;
    margin-bottom: 40px !important;
}*/

/* --- 3. Sekcja Biletowa (Strefa Zakupu) --- */
.ticket-buy-zone {
    border-radius: 15px !important;
    background-color: #fdfdfd !important;
    border: 1px solid #eee !important;
    /* Na desktopie zostaje calc, ale ograniczamy go na mobile w sekcji media */
    padding: calc(25px * var(--font-multiplier, 1)) !important;
    margin-bottom: 40px !important;
    overflow: hidden; /* Zapobiega wyciekaniu treści */
}


/* Fix dla cen obok siebie na bardzo małych ekranach */
.ticket-buy-zone .d-flex.gap-4 {
    gap: 15px !important; /* Zmniejszamy odstęp między cenami */
    flex-wrap: wrap; 
}

.price-item {
    /* Rozsuwanie pionowe cen */
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--main-line-height, 1));
}

.price-item small {
    font-size: calc(0.8rem * var(--font-multiplier, 1)) !important;
    color: #666;
}

.price-item .fs-3 {
    font-size: calc(2rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1) !important;
}

/* Nagłówek dokumentów */
.discounts-box h6 {
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.4) !important;
}

/* Lista dokumentów - naprawa ikon i opływania tekstu */
.discounts-box ul li {
    display: grid;
    grid-template-columns: 25px 1fr; /* Ikona ma stałą szerokość, tekst jest obok */
    align-items: start;
    gap: 10px;
    padding-bottom: calc(8px * var(--main-line-height, 1));
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.4) !important;
}

.discounts-box ul li i {
    margin-top: 4px; /* Wyrównanie ikony do pierwszej linii tekstu */
    text-align: center;
}




/* --- 4. Przyciski (Pancerne na Zoom) --- */
.action-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.action-zone .btn, .action-zone .badge {
    white-space: normal !important; /* Pozwala zawijać tekst wewnątrz przycisku */
    height: auto !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    padding: calc(12px * var(--font-multiplier, 1)) calc(20px * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.2) !important;
    width: auto;
    max-width: 100%; /* Nigdy nie wyjdzie poza kontener */
}





/* --- 5. Seanse (Kafelki) --- */
.seanse-fixed-grid {
    display: grid !important;
    /* Zwiększamy min-width do 150px, by uniknąć ścisku przy zoomie */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    width: 100%;
    align-items: start; /* Wyrównuje cały rząd do góry */
}




.seans-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Mniejszy przelicznik dla paddingu (0.7 zamiast 1), by nie "puchło" za bardzo */
    padding: calc(12px * var(--font-multiplier, 0.7)) !important;
    background: #fff;
    border: 1px solid #eee;
    min-width: 0;
}


.seans-hours {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    /* USUNIĘTO margin-top: auto - teraz godziny będą zaraz pod datą */
    margin-top: 10px; 
}



.seans-day-label {
    color: #333;
    /* Przy multiplier = 1, mamy standardowe 1.1rem i 1.3rem */
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    /*line-height: 1.2 !important;*/
    line-height: var(--main-line-height, 1.2) !important;
    text-align: center;
}



.seans-day-label strong {
    display: block;
    /* Data pozostaje duża w widoku normalnym */
    font-size: calc(1.3rem * var(--font-multiplier, 1)) !important;
    margin-top: 2px;
}





.badge-seans {
    background-color: #ADD8E6 !important;
    color: #000 !important;
    font-weight: 800;
    /* Standardowa wielkość godziny */
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    padding: 8px 12px !important;
    /*line-height: 1 !important;*/
    line-height: var(--main-line-height, 1) !important;
    white-space: nowrap;
}



/* ==========================================================================
   DARK MODE (Zgodność z platynowym schematem)
   ========================================================================== */

body.dark-mode .kino-movie-layout { color: #eee; }


/* Dostosowanie koloru dla Dark Mode */
body.dark-mode .kino-movie-layout .article-text p, 
body.dark-mode .kino-movie-layout .article-text li, 
body.dark-mode .kino-movie-layout .article-text div,
body.dark-mode .kino-movie-layout .article-text {
    color: #a0a4a7 !important; /* Aksamitny szary spójny z resztą strony */
}

body.dark-mode .ticket-buy-zone,
body.dark-mode .seans-tile {
    background: #1e1e1e !important;
    border-color: #333 !important;
}

body.dark-mode .spec-item { border-bottom-color: #333; }

/* Teksty w Dark Mode */
body.dark-mode .spec-item span,
body.dark-mode .price-item .fs-3,
body.dark-mode .text-muted,
body.dark-mode .seans-day-label,
body.dark-mode .discounts-box h6 {
    color: #b8bcbf !important; /* Platynowy */
}


body.dark-mode .spec-item small,
body.dark-mode .discounts-box ul li {
    color: #a0a4a7 !important; /* Aksamitny szary */
}

body.dark-mode .spec-item .badge.bg-dark { color: #ADD8E6 !important; }

/* Ikony w Dark Mode */
body.dark-mode .spec-item i,
body.dark-mode .discounts-box ul li i {
    color: #ADD8E6 !important; /* Błękitny akcent */
}

/* Przyciski w Dark Mode */
body.dark-mode .action-zone .btn-outline-dark {
    border-color: #444 !important;
    color: #eee !important;
    background: #252525 !important;
}



/* ==========================================================================
   RESPONSYWNOŚĆ I FIXY DLA MAŁYCH EKRANÓW (360px+)
   ========================================================================== */

@media (max-width: 575px) {
    /* Wymuszamy 2 kolumny seansów nawet na bardzo małych ekranach */
    .seanse-fixed-grid {
        /*grid-template-columns: repeat(2, 1fr) !important;*/
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 10px;
    }
    
    .seans-tile {
        padding: 10px !important;
    }

    /* Redukcja paddingów w strefie biletu, żeby nie "wywalało" na 360px */
    .ticket-buy-zone {
        padding: 15px !important; /* Mniejszy padding na mobile */
        margin-left: -5px; /* Lekka korekta jeśli kontener nadrzędny ma padding */
        margin-right: -5px;
    }

    .price-item .fs-3 {
        font-size: calc(1.6rem * var(--font-multiplier, 1)) !important; /* Ciut mniejsza cena na mobile */
    }
    
    /* Naprawa przycisków i badge'y */
    .action-zone .btn-event-ticket, 
    .action-zone .free-entry-badge {
        width: 100% !important;
        display: flex !important;
        padding: 12px 10px !important;
        font-size: calc(0.9rem * var(--font-multiplier, 1)) !important;
    }
    
    .seans-day-label {
        font-size: calc(0.9rem * var(--font-multiplier, 1)) !important;
    }

    .seans-day-label strong {
        font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    }

    .discounts-box h6 {
    	font-size: calc(0.85rem * var(--font-multiplier, 1)) !important;
    }

    .discounts-box ul li {
        font-size: calc(1rem * var(--font-multiplier, 1)) !important;
    }

    .badge-seans {
        /* Godziny na mobile startują z poziomu 0.85rem zamiast 1rem */
        font-size: calc(0.85rem * var(--font-multiplier, 1)) !important;
        padding: 6px 8px !important;
    }

    .seanse-fixed-grid {
        /* auto-fit zamiast repeat(2, 1fr) to Twoja polisa ubezpieczeniowa.
           Jeśli kafelek z powiększoną czcionką nie zmieści się obok drugiego, 
           bezpiecznie spadnie niżej zamiast na niego najechać. */
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
        gap: 8px;
    }
}




@media (min-width: 768px) {
    .movie-specs-grid { 
        grid-template-columns: repeat(2, 1fr); 
        max-width: 600px; 
    }
    .border-end-lg { border-right: 1px solid #dee2e6 !important; }
}

@media (max-width: 767px) {
    .price-item.border-start {
        border-left: none !important;
        padding-left: 0 !important;
        margin-top: 0; /* Zdejmujemy margines, bo ceny są obok siebie */
    }
    
    /* Jeśli ceny mają być jedna pod drugą na najmniejszych: */
    @media (max-width: 400px) {
        .ticket-buy-zone .d-flex.gap-4 {
            flex-direction: column;
            gap: 10px !important;
        }
        .price-item.border-start {
            padding-left: 0 !important;
            border-left: none !important;
        }
    }
}

/* =================== KONIEC STYLE DLA SZABLONU KINO-FILM ======================== */













/* =================== PAGNACJA ================ */
/* --- PAGINACJA: OGÓLNE --- */
.com-content-category-blog__navigation {
    margin-top: 80px; /* Solidny odstęp od ostatnich wpisów */
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.com-content-category-blog__counter {
    color: #666;
    font-size: 0.9rem;
    font-weight: 600;
}

.pagination {
    gap: 8px; /* Odstęp między kwadracikami */
}

.pagination .page-link {
    border-radius: 8px !important;
    border: 1px solid #e0e0e0;
    color: #333;
    padding: 10px 16px;
    font-weight: 600;
    transition: all 0.2s;
}

/* Stan aktywny (Twoja obecna strona) */
.pagination .page-item.active .page-link {
    background-color: #000 !important; /* Zamieniamy granat na czarny dla spójności */
    border-color: #000 !important;
    color: #fff !important;
}

/* Hover na numerkach */
.pagination .page-link:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
    color: #000;
}

/* Fokus dla WCAG */
.pagination .page-link:focus-visible {
    outline: 3px solid #293f8e !important;
    outline-offset: 2px;
    box-shadow: none;
}


/* --- PAGINACJA: DARK MODE --- */
body.dark-mode .com-content-category-blog__navigation {
    border-top-color: #333 !important;
}

body.dark-mode .com-content-category-blog__counter {
    color: #888 !important;
}

/* Przyciski w nocy */
body.dark-mode .pagination .page-link {
    background-color: #1a1a1a !important; /* Ciemne tło zamiast białego */
    border-color: #333 !important;
    color: #b8bcbf !important; /* Twoja Platyna */
}

/* Ikony strzałek w nocy */
body.dark-mode .pagination .page-link .fas {
    color: #b8bcbf !important;
}

/* Hover w nocy */
body.dark-mode .pagination .page-link:hover {
    background-color: #252525 !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* AKTYWNA STRONA W NOCY - Błękitny akcent */
body.dark-mode .pagination .page-item.active .page-link {
    background-color: #ADD8E6 !important;
    border-color: #ADD8E6 !important;
    color: #000 !important; /* Czarny numer na błękitnym tle */
}

/* Przyciski wyłączone (disabled) */
body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: #121212 !important;
    border-color: #222 !important;
    color: #444 !important;
    opacity: 0.5;
}

/* Fokus w nocy */
body.dark-mode .pagination .page-link:focus-visible {
    outline-color: #ADD8E6 !important;
}



/* =================== BUTTON PREMIUM ================ */
/* To, czego nie ma w SPPB */
.btn-premium {
    position: relative !important;
    display: inline-block !important;
    border: 2px solid #FDFDFD !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    outline: none !important; /* Całkowite wyłączenie domyślnego obrysu */
}

/* HOVER: Dynamika */
.btn-premium:hover {
    border-color: #bbbbbb !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

/* ACTIVE: Efekt "wciśnięcia" */
.btn-premium:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* FOCUS: Zaznaczenie uniwersalne dla tła białego i czarnego */
.btn-premium:focus-visible {
    outline: none !important;
    border-color: #293f8e !important;
    /* Podwójny box-shadow: biały margines bezpieczeństwa + granatowy pierścień */
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #293f8e !important;
    z-index: 5; /* Wyciąga przycisk nad inne elementy, by ramka nie była ucięta */
}



/* --- SEKCJA BOTTOM (STOPKA) - STYLIZACJA + WCAG --- */

/* 1. Nagłówki modułów (sp-bottom2, 3, 4) */
#sp-bottom2 .sp-module .sp-module-title,
#sp-bottom3 .sp-module .sp-module-title,
#sp-bottom4 .sp-module .sp-module-title {
    color: #ffffff;
    /* Skalowanie tytułu */
    font-size: calc(1.5rem * var(--font-multiplier, 1)) !important; 
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    font-weight: 700;
}

/* 2. Lista w module menu */
#sp-bottom2 .sp-module ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sp-bottom2 .sp-module ul li {
    margin-bottom: 10px;
    padding-left: 0;
    transition: all 0.3s ease;
}

/* 3. Linki - Rozmiar i Kolory */
#sp-bottom2 .sp-module ul li a {
    color: #d1d1d1;
    text-decoration: none;
    /* Skalowanie czcionki */
    font-size: calc(0.95rem * var(--font-multiplier, 1)) !important;
    display: block;
    transition: all 0.3s ease;
}

/* 4. Interlinia (tylko gdy suwak jest w ruchu) */
body.spacing-active #sp-bottom2 .sp-module ul li a {
    line-height: var(--main-line-height, 1.4) !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* 5. Efekty Hover (Twoje błękity) */
#sp-bottom2 .sp-module ul li a:hover {
    color: #ADD8E6; 
    transform: translateX(5px);
}

#sp-bottom2 .sp-module ul li a:hover::before {
    content: "— ";
    font-weight: bold;
}

/* sponsorzy*/
#sp-position1 {
  padding-top: 35px;
}
.related-article-list-container {
  margin-top: 55px;
}
.related-article-list-container .related-article-title {
  font-size: 30px;
  padding-bottom: 25px;
  text-transform: uppercase;
}
/* Powiększenie czcionki do poziomu fs-5 (1.25rem) dla wszystkich artykułów */
div[itemprop="articleBody"], 
div[itemprop="articleBody"] p, 
div[itemprop="articleBody"] li {
    font-size: 1.25rem !important; /* To jest Twoje fs-5 */
    line-height: 1.7 !important;    /* Odpowiedni odstęp, żeby tekst nie był zbity */
    color: #333 !important;
}

/* Opcjonalnie: poprawienie czytelności nagłówków wewnątrz tekstu */
div[itemprop="articleBody"] h2, 
div[itemprop="articleBody"] h3 {
    margin-top: 1.5em !important;
    margin-bottom: 0.8em !important;
}

/* Tablet i Mobile (wszystko poniżej 991px) */
@media (max-width: 991px) {
    #sp-header {
        height: 90px !important; /* Zwiększyłem, żeby pomieścić padding */
        padding: 15px 0px 15px 0px !important;
    }
}
/* Opcjonalnie: Specyficzne poprawki tylko dla bardzo małych telefonów */
@media (max-width: 575px) {
    #sp-header {
        height: 90px !important;
        padding: 15px 0px 15px 0px !important;
    }
}

/*.offcanvas-menu img {
    filter: invert(1) brightness(0) !important;
    -webkit-filter: invert(1) brightness(0) !important;
}*/

/* 1. TRYB JASNY - Wymuszamy CZARNE logo */
/* Dodajemy body i id, żeby selektor był nie do przebicia */
body #offcanvas-menu .logo a img.logo-image,
body #offcanvas-menu .logo a img.logo-image-phone,
body #offcanvas-menu .logo a:focus img,
body #offcanvas-menu .logo a:focus-visible img {
    filter: invert(1) brightness(0) !important;
    -webkit-filter: invert(1) brightness(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* FOKUS W TRYBIE JASNYM - Białe tło i ramka */
body #offcanvas-menu .logo a:focus,
body #offcanvas-menu .logo a:focus-visible {
    background-color: #ffffff !important;
    outline: 3px solid #293f8e !important;
    outline-offset: 4px;
    display: inline-block !important;
}

/* 2. TRYB CIEMNY - Wymuszamy BIAŁE logo (czyli brak filtra) */
body.dark-mode #offcanvas-menu .logo a img.logo-image,
body.dark-mode #offcanvas-menu .logo a img.logo-image-phone,
body.dark-mode #offcanvas-menu .logo a:focus img,
body.dark-mode #offcanvas-menu .logo a:focus-visible img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* FOKUS W TRYBIE CIEMNYM */
body.dark-mode #offcanvas-menu .logo a:focus,
body.dark-mode #offcanvas-menu .logo a:focus-visible {
    background-color: transparent !important;
    outline-color: #ADD8E6 !important;
}


.burger-icon > span {
  background-color: #fff;
}


/* ==== START - LOGO FIX === */

/* 1. Wspólne ustawienia proporcji (dla obu obrazków) */
#sp-logo .logo a img {
    aspect-ratio: 303 / 110 !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* 2. DESKTOP - wymuszamy wymiary tylko gdy logo desktopowe jest widoczne */
@media (min-width: 992px) {
    #sp-logo .logo a img.logo-image {
        width: 154px !important;
        height: 56px !important;
        display: inline-block !important; /* Pokazuje tylko to logo */
    }
    #sp-logo .logo a img.logo-image-phone {
        display: none !important; /* Ukrywa logo mobilne na desktopie */
    }
}

/* 3. MOBILE & TABLET - tam gdzie pojawia się hamburger */
@media (max-width: 991px) {
    #sp-logo .logo a img.logo-image-phone {
        width: 138px !important;
        height: 50px !important;
        display: inline-block !important; /* Pokazuje tylko to logo */
    }
    #sp-logo .logo a img.logo-image {
        display: none !important; /* Ukrywa logo desktopowe na mobile */
    }
}

/* ==== END - LOGO FIX === */


/* 1. Domyślnie slider działa normalnie */
.n2-section-smartslider, 
ss3-force-full-width {
    display: block;
}
/* 2. JEŚLI NIE MA JS (brak klasy .js na tagu html), usuwamy slider całkowicie */
html:not(.js) .n2-section-smartslider,
html:not(.js) ss3-force-full-width {
    display: none !important;
    height: 0 !important;
}

/* 3. Twój noscript i tak zadziała automatycznie, bo on żyje własnym życiem */
noscript + ss3-force-full-width,
noscript + .n2-section-smartslider {
    display: none !important;
}
.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
  opacity: 1;
}
.form-text {
  color: #000000;
}
.form-check-input {
  border: 2px solid rgba(0,0,0,.25);
}
/* Wymuszenie pełnego krycia dla głównych pozycji menu */
.offcanvas-menu .offcanvas-inner ul.menu > li > a, 
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
    opacity: 1 !important;
    line-height: 24px;
}

/*
.btn-custom {
    display: inline-block;
    padding: 14px 28px;
    background-color: #293f8e;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: 
        background-color 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-custom:hover,
.btn-custom:focus {
    background-color: #1f2f6a; 
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(41, 63, 142, 0.3);
}
*/


/* 1. STYL PODSTAWOWY */
.btn-custom {
    display: inline-block;
    padding: 14px 28px;
    background-color: #293f8e !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 2. HOVER */
.btn-custom:hover {
    background-color: #1f2f6a !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(41, 63, 142, 0.3);
}

/* 3. NAPRAWA FOKUSU - WYMUSZENIE ODSTĘPU */
/* Dodajemy 'body', żeby CSS był "silniejszy" niż systemowe style */
body .btn-custom:focus-visible {
    outline: none !important;
    background-color: #1f2f6a !important;
    /* Zwiększamy odstęp do 4px i ramkę do 8px dla pewności widoczności */
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #293f8e !important;
    transform: translateY(-2px) scale(1.02);
}

/* 4. DARK MODE - TUTAJ ODSTĘP MUSI BYĆ CZARNY */
body.dark-mode .btn-custom:focus-visible {
    box-shadow: 0 0 0 4px #121212, 0 0 0 8px #4a69d4 !important;
}

/* Wyłączamy standardowy outline, który może się nakładać */
.btn-custom:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #293f8e !important;
}






.offcanvas-menu .offcanvas-inner ul.menu > li > ul li {
  margin: 0px 0px 10px 10px;
}
.offcanvas-menu ul.menu-child {
display: block !important;
}

.sppb-panel-title {
  font-size: 16px;
}

/*.sp-megamenu-parent .sp-mega-group > li > span {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}*/

/*ukrywa social share na stronie polityki prywatnosci*/
.article-id-10 .social-share-block {
display:none;
}
/*ukrywa legendę "pola dodatkowe */
.contact-form fieldset > legend {
display: none;
}

.sp-scroll-up {
  bottom: 90px;
}

.sp-contact-info li {
margin: 0px 20px 0px 0px;
font-size: 110%;
}



/* =========================
   POCZĄTEK MODUŁ - PRACOWNIE
========================= */

/* 1. KONTENER - Używamy GRID zamiast FLEX dla równych kolumn */
.workshops-container {
    display: grid;
    /* Tworzy kolumny o szerokości min 300px, ale nie więcej niż 1fr */
    grid-template-columns: repeat(auto-fill, minmax(calc(300px * var(--font-multiplier)), 1fr));
    gap: calc(30px * var(--font-multiplier));
    width: 100%;
    margin: 0 auto;
}

/* 2. KARTA */
.workshop-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ważne, żeby kafelki w rzędzie były równe */
}

/* 3. ZDJĘCIE - Zmiana na dopasowanie całości */
/*.workshop-image {
    position: relative;
    height: calc(420px * var(--font-multiplier));
    background-color: #f9f9f9; 
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* 1. Poprawka tła sekcji obrazka w trybie jasnym */
.workshop-image {
    position: relative;
    height: calc(420px * var(--font-multiplier));
    background-color: #f4f4f4; /* Delikatny szary w trybie jasnym */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease; /* Płynne przejście */
}


.workshop-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Pokazuje całe zdjęcie bez ucinania */
    padding: 10px;
}

/* 4. TYTUŁ KATEGORII - Poprawki dostępności */
.workshop-title {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: calc(12px * var(--font-multiplier));
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(1.3rem * var(--font-multiplier));
    line-height: var(--main-line-height, 1) !important;
    word-wrap: break-word; /* Łamanie długich słów */
    overflow-wrap: break-word;
    transition: background 0.3s ease, color 0.3s ease;
}



/* 5. TREŚĆ I LINKI */
.workshop-content {
    padding: calc(20px * var(--font-multiplier));
    flex-grow: 1;
}

.workshop-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.workshop-links li {
    padding: calc(10px * var(--font-multiplier)) 0;
    border-bottom: 1px solid #eee;
}

.workshop-links li a {
    color: #000000 !important; /* Czarny kolor linków */
    text-decoration: none;
    font-weight: 500;
    font-size: calc(1rem * var(--font-multiplier));
    display: block;
    /*line-height: 1.4;*/
    line-height: var(--main-line-height, 1.4) !important;
}

.workshop-links li a:hover {
    color: #293f8a !important;
    text-decoration: underline;
}



/* 6. DARK MODE - Poprawki wizualne i odchudzenie fontu */
body.dark-mode .workshop-card { 
    background: #1a1a1a; 
    border-color: #333; 
}

body.dark-mode .workshop-title {
    background: rgba(0, 0, 0, 0.85);
    color: #e0e0e0 !important; /* Nieco ciemniejszy biały, by nie raził */
    font-weight: 500 !important; /* Odchudzenie czcionki */
    letter-spacing: 0.03em;
}

body.dark-mode .workshop-links li a { 
    color: #d1d1d1 !important; 
}

body.dark-mode .workshop-links li { 
    border-bottom-color: #333; 
}

body.dark-mode .workshop-image {
    background-color: #252525; /* Ciemne tło dla PNG bez tła */
}

/* 3. Magiczny filtr dla obrazków w Dark Mode */
body.dark-mode .workshop-image img {
    /* brightness(0.8) przyciemnia biel, a contrast(0.9) wygładza krawędzie */
    filter: brightness(0.75) contrast(0.9);
    transition: filter 0.3s ease;
}

/* 4. Opcjonalnie: efekt po najechaniu myszką (rozjaśnienie filtra) */
body.dark-mode .workshop-card:hover .workshop-image img {
    filter: brightness(0.9) contrast(1);
}

/* 7. RESPONSIVE - Fluid Row Fix */
@media (max-width: 767px) {
    .workshops-container {
        grid-template-columns: 1fr; /* Na komórkach jeden wielki kafelek */
        gap: 20px;
    }
    .workshop-image { height: auto; min-height: 200px; }
}



/* =========================
   KONIEC MODUŁ - PRACOWNIE
========================= */


/* ============================================================
TO JEST CHYBA ZE STRONY AGAMUN
===========================================================*/

.cookie-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cookie-item {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 6px;
  background: #fafafa;
}

.cookie-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.cookie-duration {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}

.cookie-desc {
  line-height: 1.5;
}

/* Hero slide z tłem i animacją */
.hero-slide {
  /*background-image: url('/images/tlo-hero.jpg');*/ /* zamień na swój obraz */
  background-size: cover;
  background-position: center;
  min-height: 50vh;
  display: flex;
  align-items: left;
  justify-content: left;
  padding: 0 1%;
  overflow: hidden;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}

/* CTA buttons */
.cta-buttons {
  display: flex;
  justify-content: left;
  gap: 15px 30px;
  flex-wrap: wrap;
  padding-top: 30px;
}

.btn {
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #293f8e;
  color: #fff;
}
.btn-primary:hover { background-color: #fff; color: #000;}

.btn-secondary {
  background-color: #000;
  color: #fff;
}
.btn-secondary:hover { background-color: #293f8e; color: #fff;}

/* ==================== Responsywność ==================== */
/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-slide { min-height: 20vh; /* mniejsze niż desktop */}
  .hero-title { font-size: 48px; }
  .typewriter-container { font-size: 48px; }
  .hero-subtitle { font-size: 48px; }
  .subheader-text { font-size: 18px; }
  .btn { font-size: 14px; padding: 10px 25px; }
}

/* Mobile (do 767px) */
@media (max-width: 767px) {
  .hero-slide { min-height: 10vh; /* krótsza sekcja na telefonie */}
  .hero-title { font-size: 35px; }
  .typewriter-container { font-size: 35px; }
  .hero-subtitle { font-size: 35px; }
  .subheader-text { font-size: 18px; }
  .btn { font-size: 14px; padding: 10px 25px; }
  .cta-buttons { flex-direction: column; gap: 10px; }
}

/* ===== Ogólne ustawienia - jak pracuje ===== */
.workflow-section {
  position: relative;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.workflow-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  flex-wrap: nowrap;
}

/* ===== Linia pozioma (desktop) ===== */
.workflow-line {
  position: absolute;
  top: 90px; /* 90px = połowa wysokości kółka */
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #293f8e;
  z-index: 1;
}

/* ===== Pojedynczy krok ===== */
.step {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  align-items: flex-start;
  text-align: center;
  position: relative;
  z-index: 2;
  flex: 1; /* elastyczna szerokość */
}

.step-number {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: #293f8e;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  margin: 0; /* usuń margines */
}

.step-content {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  align-itemms: flex-start;
}

.step-title {
  font-size: 20px;
  font-weight: 600;
  /*margin-bottom: 10px;*/
  text-align: left;
  margin: 30px 0px 10px 0px;
}

.step-desc {
  font-size: 16px;
  color: #000;
  text-align: left;
  padding: 0px 30px 0px 0px;
}

/* ===== RESPONSYWNOŚĆ ===== */

/* Tablet i Mobile – pionowa oś */
@media (max-width: 1024px) {
  .workflow-steps {
    flex-direction: column;
    position: relative;
  }

  .workflow-line {
    top: 0;
    left: 42px; /* miejsce numeru */
    width: 4px;
    height: 100%;
  }

  .step {
    flex-direction: row; /* numer + treść w jednej linii */
    align-items: flex-start;
    gap: 20px;
    width: 100%; /* pełna szerokość */
    margin-bottom: 40px;
  }

  .step-number {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    flex-shrink: 0;
  }

  .step-content {
    flex: 1; /* treść rozciąga się na resztę ekranu */
    display: flex;
    flex-direction: column;
  }

  .step-title {
    font-size: 20px;
    text-align: left;
    /*margin-bottom: 5px;*/
    margin: 1px 0px 5px 0px;
  }

  .step-desc {
    font-size: 16px;
    text-align: left;
  }
}

/* Mobile dodatkowe poprawki */
@media (max-width: 767px) {
  .workflow-section {
    padding: 40px 20px;
  }

  .step-number {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }

  .step-title {
    font-size: 20px;
  }

  .step-desc {
    font-size: 16px;
  }
}

/* Resetujemy marginesy dla kontenera przycisku */
.com-contact__form .control-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    width: 100% !important;
}

.com-contact__form .controls {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Naprawiamy wygląd przycisku na mobile */
#contact-form button.btn-primary {
    display: block;
    width: auto;         /* Przycisk będzie tak szeroki jak tekst */
    min-width: 150px;    /* Ale nie węższy niż 150px */
    white-space: nowrap; /* Zakaz łamania liter jedna pod drugą! */
    text-align: center;
    margin-top: 15px;
}

@media (max-width: 767px) {
    #contact-form button.btn-primary {
        width: 100%;     /* Na komórkach niech zajmuje całą szerokość - łatwiej kliknąć kciukiem */
        margin-left: 0;
    }
}





/* ==== CONTACT FORM === */

/* ODDECH DLA CAŁEGO FORMULARZA (WCAG - LEPSZA CZYTELNOŚĆ) */
#contact-form fieldset {
    padding-left: 15px !important;
    padding-right: 15px !important;
    /* Dodajemy też lekki margines góra/dół, żeby sekcje (np. Pola dodatkowe) się nie zlewały */
    margin-bottom: 20px !important;
}

/* OPCJONALNIE: Jeśli chcesz, by na bardzo małych ekranach (mobile) 
   formularz nie tracił zbyt wiele miejsca, możesz to lekko zmniejszyć */
@media (max-width: 576px) {
    #contact-form fieldset {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* PODPIĘCIE FORMULARZA POD PANEL DOSTĘPNOŚCI */

/* 1. Skalowanie tekstu wewnątrz pól, etykiet i przycisków */
#contact-form input, 
#contact-form textarea, 
#contact-form select, 
#contact-form label, 
#contact-form legend,
#contact-form .btn,
#contact-form .form-check-label,
#contact-form small {
    /* Używamy Twojej zmiennej mnożnika. 
       1rem to baza, którą mnożymy przez ustawienie z panelu */
    font-size: calc(1rem * var(--font-multiplier)) !important;
    
    /* Używamy Twojej zmiennej interlinii */
    line-height: var(--main-line-height) !important;
}

/* 2. Automatyczne powiększanie wysokości pól */
/* Standardowe inputy mają często sztywną wysokość, 
   musimy pozwolić im rosnąć, gdy czcionka się powiększa */
#contact-form .form-control,
#contact-form .form-select {
    height: auto !important;
    min-height: calc(2.5rem * var(--font-multiplier)) !important;
    padding: calc(0.5rem * var(--font-multiplier)) !important;
}

/* 3. Poprawka dla checkboxów */
/* Aby przy 8-krotnym powiększeniu checkbox nie był mikroskopijny przy wielkim tekście */
#contact-form .form-check-input {
    width: calc(1.2rem * var(--font-multiplier)) !important;
    height: calc(1.2rem * var(--font-multiplier)) !important;
    margin-top: 0.2rem;
}


/* WYMUSZENIE SKALOWANIA DLA ELEMENTÓW TYPU SPAN I STRONG W FORMULARZU */

/* 1. Naprawa góry (* pola obowiązkowe) i dołu (Zgoda na...) */
#contact-form .control-group .text span,
#contact-form .control-group .spacer span,
#contact-form .control-group > span,
#contact-form strong.red {
    font-size: calc(1rem * var(--font-multiplier)) !important;
    line-height: var(--main-line-height) !important;
    display: inline-block; /* Ważne, aby interlinia (line-height) miała na co oddziaływać */
}

/* 2. Naprawa opisu pod zgodą RODO (mały druk) */
#contact-form .form-text, 
#contact-form small {
    font-size: calc(1rem * var(--font-multiplier)) !important; /* Odrobinę mniejszy bazowo, ale skalowalny */
    line-height: var(--main-line-height) !important;
}

/* 3. Dodatkowy fix dla legendy w polach dodatkowych */
#contact-form fieldset legend {
    font-size: calc(1rem * var(--font-multiplier)) !important;
    line-height: var(--main-line-height) !important;
}







/* GRUBY FOKUS DLA WSZYSTKICH PÓL FORMULARZA */
#contact-form .form-control:focus,
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form select:focus,
.com-contact__form input:focus,
.com-contact__form textarea:focus {
    outline: 3px solid #008cff !important; /* Grubość 3px dla WCAG */
    outline-offset: 2px !important;
    border-color: #008cff !important;
    box-shadow: 0 0 8px rgba(0, 140, 250, 0.3) !important;
}

/* Wersja dla Dark Mode (jaśniejszy błękit dla lepszego kontrastu) */
body.dark-mode #contact-form .form-control:focus,
body.dark-mode #contact-form input:focus {
    outline-color: #4db8ff !important;
}


/* 1. Tło i tekst w polach formularza */
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .contact-form select {
    background-color: #1a1a1a !important; /* Bardzo ciemny szary zamiast bieli */
    color: #e0e0e0 !important;           /* Jasny tekst */
    border: 1px solid #444 !important;    /* Delikatne obramowanie */
    padding: 10px !important;
}

/* 2. Focus - podświetlenie pola, gdy w nim piszemy (ważne dla WCAG!) */
body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus,
body.dark-mode .contact-form select:focus {
    background-color: #222 !important;
    border-color: #008cff !important;     /* Wyraźny niebieski focus */
    outline: none !important;
    box-shadow: 0 0 5px rgba(0, 140, 255, 0.5) !important;
}

/* 3. Poprawa kontrastu błędów (Czerwony na ciemnym) */
/* Standardowa czerwień jest za ciemna, używamy jaśniejszego koralu/różu */
body.dark-mode .red, 
body.dark-mode .star,
body.dark-mode .invalid,
body.dark-mode label.invalid,
body.dark-mode .form-control.invalid {
    color: #ff6b6b !important; /* Jaśniejszy czerwony, widoczny na czarnym */
}

/* 4. Pole wymagane (gwiazdka i tekst nad formularzem) */
body.dark-mode #jform_spacer-lbl strong.red {
    color: #ff6b6b !important;
}

/* 5. Checkboxy i Radio - żeby nie były białe */
body.dark-mode .form-check-input {
    background-color: #1a1a1a !important;
    border-color: #444 !important;
}

body.dark-mode .form-check-input:checked {
    background-color: #008cff !important; /* Kolor zaznaczenia */
    border-color: #008cff !important;
}

/* 6. Tekst pomocniczy (mały druk pod zgodą RODO) */
body.dark-mode .form-text, 
body.dark-mode small {
    color: #b8bcbf !important;
}

/* 7. Nagłówki grup (Legendy) */
body.dark-mode .contact-form legend {
    color: #ffffff !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 5px;
    margin-bottom: 15px;
}


/* FOKUS DLA PRZYCISKU W TRYBIE JASNYM I CIEMNYM */

/* Resetujemy domyślne, słabe style przeglądarki */
#contact-form .btn-primary:focus,
#contact-form button[type="submit"]:focus {
    outline: 3px solid #008cff !important; /* Wyraźna niebieska linia */
    outline-offset: 2px !important;       /* Odstęp linii od przycisku */
    box-shadow: none !important;
    background-color: #0056b3 !important; /* Lekkie przyciemnienie tła dla pewności */
}

/* Specyficznie dla Dark Mode - jeszcze mocniejszy kontrast */
body.dark-mode #contact-form .btn-primary:focus {
    outline-color: #4db8ff !important;   /* Jaśniejszy niebieski, by świecił na czarnym */
    background-color: #007bff !important;
    color: #ffffff !important;
}


body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus,
body.dark-mode .contact-form select:focus {
    border-color: #4db8ff !important;
    outline: 2px solid #4db8ff !important;
    outline-offset: 1px !important;
}

/* RAMKA CLOUDFLARE - TYLKO GDY FOKUS JEST AKTYWNY */

/* Resetujemy poprzednie próby na samym Turnstile */
.cf-turnstile, .cf-turnstile:focus-within {
    outline: none !important;
    border: none !important;
}

/* RAMKA NA CAŁYM KONTENERZE CAPTCHA */
.contact-captcha .control-group:focus-within {
    outline: 3px solid #008cff !important;
    outline-offset: 10px !important; /* Większy margines, żeby ramka ładnie objęła całość */
    border-radius: 8px;
    background-color: rgba(0, 140, 255, 0.05); /* Delikatne tło, by było wiadomo, że to ta sekcja */
}

/* Wersja Dark Mode */
body.dark-mode .contact-captcha .control-group:focus-within {
    outline-color: #4db8ff !important;
}

/* GWARANCJA ZNIKANIA: Jeśli fokus przejdzie na przycisk "Wyślij" */
/* Selektor ~ działa na rodzeństwo, ale przycisk jest głębiej, więc użyjemy ogólnego podejścia */
#contact-form:not(:focus-within) .contact-captcha .control-group,
#contact-form .btn-primary:focus ~ .contact-captcha .control-group {
    outline: none !important;
}

/* ==== END CONTACT FORM === */







/* sp easy image galery */

/* 1. Poprawa czytelności napisów na liście zdjęć (po najechaniu) */
.speasyimagegallery-gallery-item-content {
    background: rgba(0, 0, 0, 0.85) !important; /* Ciemniejsze, prawie pełne tło */
    padding: 15px !important;
    transition: all 0.3s ease;
}

.speasyimagegallery-gallery-item-title {
    color: #ffffff !important;
    /*font-weight: 600 !important;
    text-transform: uppercase;*/
    letter-spacing: 1px;
}

.speasyimagegallery-gallery-stat {
  color: #ffffff !important;
}

/* 2. Poprawa czytelności w oknie powiększonego zdjęcia (Lightbox) */
.speasyimagegallery-image-content {
    background: #000000 !important; /* Pełny czarny bez przeźroczystości dla max kontrastu */
    opacity: 1 !important; 
    padding: 20px !important;
}

.speasyimagegallery-image-content .speasyimagegallery-image-title {
    color: #ffffff !important;
    /*font-size: 1.2rem !important;*/
}

/* 3. Dodatkowy efekt dla WAVE (obramowanie focusa dla klawiatury) */
.speasyimagegallery-gallery-item:focus {
    outline: 3px solid #008cff !important;
    outline-offset: 2px;
}

/* PRZYCIEMNIENIE ZDJĘĆ TYLKO W TRYBIE DARK MODE */

/* 1. Miniatury na liście zdjęć */
.dark-mode .mod-speasyimagegallery img,
body.dark-mode .speasyimagegallery-gallery-item img {
    filter: brightness(0.8) contrast(1.05) !important;
    transition: filter 0.3s ease !important;
}

/* Przywrócenie jasności po najechaniu w dark-mode */
.dark-mode .speasyimagegallery-gallery-item:hover img {
    filter: brightness(1) !important;
}

/* 2. Zdjęcie w oknie modalnym (Lightbox) */
/* Tutaj uwaga: modal często ląduje na końcu <body>, więc .dark-mode na body go obejmie */
.dark-mode .mfp-img,
body.dark-mode .speasyimagegallery-image-viewer img {
    filter: brightness(0.85) !important;
    background-color: #000 !important; /* Eliminuje biały prześwit pod zdjęciem */
}

/* 3. Tło samego okna modala, żeby nie było "szarych" obwódek */
.dark-mode .mfp-bg,
.dark-mode .mfp-wrap {
    background-color: #000000 !important;
    opacity: 0.95 !important;
}

/* PRZYCIEMNIENIE ZDJĘCIA W OKNIE POWIĘKSZENIA (MODALU) */

/* Celujemy bezpośrednio w klasę zdjęcia wewnątrz modalu, gdy body ma .dark-mode */
body.dark-mode .speasyimagegallery-modal img.speasyimagegallery-image {
    filter: brightness(0.8) contrast(1.05) !important;
    background-color: #000 !important; /* Na wypadek prześwitów */
}

/* Tło całego modalu na czarno, żeby nie było jasnych ramek */
body.dark-mode .speasyimagegallery-modal {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
}

/* Tło pod opisem wewnątrz modalu (3 of 8, Śniadanie 03) */
body.dark-mode .speasyimagegallery-image-content {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
}

/* Przycisk zamknięcia (X) w modalu */
body.dark-mode .speasyimagegallery-close {
    color: #fff !important;
    text-shadow: none !important;
}






/* === START LOGO - BIP === */

/* --- Wersja Standard (Jasna) --- */
.bip-styled {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 4px;
    display: block;
    margin: 10px 0; /* Zmienione z auto na 0, bo chciałaś do lewej */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* --- Wersja DARK MODE --- */
/* Przytłumiamy tło do jasnej platyny/szarości */
body.dark-mode .bip-styled {
    background-color: #d1d1d1 !important; /* Przygaszona biel/jasny szary */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Mocniejszy cień dla kontrastu na czarnym */
    opacity: 0.9; /* Opcjonalnie: lekka przezroczystość, by jeszcze bardziej "stopić" z tłem */
}

/* Hover dla obu trybów */
.bip-styled:hover {
    transform: scale(1.02);
    opacity: 1; /* W ciemnym trybie rozbłyśnie przy najechaniu */
}

@media (max-width: 576px) {
    .bip-styled {
        margin: 10px 0px 100px 0px;
    }
}

/* === END LOGO - BIP === */





/* === START ARTYKUŁ - PRACOWNIA === */

/* 1. TYPOGRAFIA I SKALOWANIE (Logika Max A) */
.pracownia-layout-new { 
    padding-top: 30px; 
    background-color: #fdfdfd; 
}

.pracownia-layout-new h1.display-4 {
    font-size: calc(3.5rem * var(--font-multiplier, 1)) !important;
}

/* Treść artykułu - spójna z Twoim systemem */
.pracownia-layout-new .com-content-article__body {
    font-size: calc(1.25rem * var(--font-multiplier, 1)) !important;
    line-height: 1.7;
    color: #444;
}

/* Wymuszenie skalowania dla klasy text-muted oraz małych nagłówków */
.pracownia-layout-new .text-muted, 
.pracownia-layout-new .small,
.pracownia-layout-new .tracking-wider {
    /* Używamy rem, aby bazowa wielkość była stała, a multiplier ją skalował */
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    color: #121212 !important;
}

/* Jeśli text-muted jest używany wewnątrz paragrafów lub list */
.pracownia-layout-new .instructor-section .text-muted {
    font-size: calc(1rem * var(--font-multiplier, 1)) !important;
}

/* 2. INSTRUKTOR I SZCZEGÓŁY (WCAG & INTERLINIA) */
.instructor-section { 
    border-left: 2px solid #121212; 
    background-color: #f8f9fa;
}

.instructor-section h4 {
    font-size: calc(1.3rem * var(--font-multiplier, 1)) !important;
}

.tracking-wider { 
    letter-spacing: 1px; 
    color: #888; 
    font-size: calc(0.85rem * var(--font-multiplier, 1)) !important;
}

/* Pola Subform i standardowe */
.detail-item p, 
.custom-schedule-list li {
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    color: #333;
}

.price-tag { 
    /*color: #2c7a32; */
    font-size: calc(1.1rem * var(--font-multiplier, 1)) !important;
    line-height: var(--main-line-height, 1.4) !important;
}


/* Kolor ikon w listach (godziny, telefon, mail) */
.pracownia-layout-new .custom-schedule-list .text-primary {
    color: #121212 !important; 
}


/* 3. OBSŁUGA INTERLINII (Klasa systemowa) */
body.spacing-active .pracownia-layout-new .com-content-article__body,
body.spacing-active .custom-schedule-list li,
body.spacing-active .instructor-section div {
    line-height: var(--main-line-height, 1.8) !important;
}

body.spacing-active .detail-item {
    margin-bottom: 2.5rem !important;
}

/* 4. GRAFIKA BOCZNA */
.pracownia-side-image img { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    border: 1px solid #eee; 
}

/* 5. DARK MODE (Soft Greyscale / Platyna) */
body.dark-mode .pracownia-layout-new { 
    background-color: #121212 !important; 
    color: #b8bcbf !important; 
}

/* Tytuły i nagłówki w Dark Mode */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode .text-dark,
body.dark-mode .custom-schedule-list li span:not(.text-primary) { 
    color: #b8bcbf !important;
    font-weight: 500 !important; 
}

/* Wersja Dark Mode dla tych ikon */
body.dark-mode .pracownia-layout-new .custom-schedule-list .text-primary {
    color: #ADD8E6 !important; /* Jasny błękit dla kontrastu */
}

/* Kontener instruktora i obramowania */
body.dark-mode .instructor-section { 
    background-color: #1a1a1a !important; 
    border-left-color: #ADD8E6 !important; /* Błękitny akcent WCAG */
}

body.dark-mode .border-bottom, 
body.dark-mode .border-bottom-dashed { 
    border-color: #333 !important; 
}

/* Ikony i tekst wyciszony */
body.dark-mode .text-muted, 
body.dark-mode .tracking-wider { 
    color: #b8bcbf !important;
    font-weight: 500 !important;
}

body.dark-mode .text-primary {
    color: #ADD8E6 !important;
}

/* Dark Mode - Naprawa widoczności ikon i tekstu w szczegółach */
body.dark-mode .detail-item p, 
body.dark-mode .detail-item .fs-5 {
    color: #b8bcbf !important; /* Twoja platyna */
}

/* Specyficznie dla ikony lokalizacji, żeby była wyraźna */
body.dark-mode .detail-item i.fa-map-marker-alt {
    color: #ADD8E6 !important; /* Jasny błękit (lepiej widoczny niż czerwień) */
}

/* Jeśli chcesz, żeby wszystkie ikony w detalach ożyły w nocy */
body.dark-mode .detail-item i {
    color: #ADD8E6 !important;
}

/* Responsywność */
@media (max-width: 991px) {
    .pracownia-side-image { 
        position: static !important; 
        margin-bottom: 40px; 
    }
    .pracownia-layout-new h1.display-4 {
        font-size: calc(2rem * var(--font-multiplier, 1)) !important;
    }
}

/* Responsywne wiersze Subform */
.subform-row {
    gap: 5px 10px; /* Odstęp między etykietą a wartością, gdy spadnie pod spód */
}

.subform-row .item-label-container {
    display: flex;
    align-items: center;
    min-width: fit-content;
}

/* Kluczowa zmiana dla Max A i Małych ekranów */
.subform-row span.fw-bold {
    /* Pozwala etykiecie (np. Poniedziałek) zająć tyle miejsca ile potrzebuje, 
       ale wymusza na wartości (np. 16:00) przejście niżej jeśli brakuje 1 px */
    flex: 0 0 auto; 
}

.subform-row span.text-dark,
body.dark-mode .subform-row span.text-dark {
    flex: 1 1 auto;
    min-width: 200px; /* Wymusza zawinięcie na bardzo małych ekranach przy dużym fontie */
    word-break: break-word;
}

/* Optymalizacja dla ekranów mobilnych (np. Twoje 360px) */
@media (max-width: 480px) {
    .custom-schedule-list li {
        /*flex-direction: column !important;*/
        flex-direction: row !important; 
        align-items: flex-start !important;
        padding-bottom: 15px !important;
    }
    
    .custom-schedule-list li span.me-3 {
        margin-bottom: 5px; /* Odstęp ikony od tekstu w pionie */
    }
}

/* Poprawka dla bardzo dużego Max A */
body.max-a-active .subform-row {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* === END ARTYKUŁ - PRACOWNIA === */






/* === START ARTYKUŁ - WYNAJEM === */

/* --- WCAG & KOLORY PODSTAWOWE --- */
.hall-wrapper { 
    /*max-width: 1200px; */
    margin: 0 auto; 
    --p-color: #121212; 
    --bg-light: #f9f9f9; 
    --border: #ececec;
    --text-main: #212529;
    --focus-color: #296f8e;
    overflow-wrap: break-word; /* Globalne bezpieczeństwo */
    word-wrap: break-word;
}

body.dark-mode .hall-wrapper {
    --p-color: #b8bcbf;
    --text-main: #b8bcbf;
    --bg-light: #2a2a2a;
    --border: #444;
    --focus-color: #4db3e2;
}

/* Nagłówki - Dodano łamanie słów dla bezpieczeństwa */
.hall-header h1 { 
    font-size: calc(3.5rem * var(--font-multiplier)) !important; 
    line-height: var(--main-line-height) !important;
    border-bottom: 4px solid var(--p-color); padding-bottom: 20px; margin: 40px 0; font-weight: 800;
    color: var(--text-main) !important;
    overflow-wrap: break-word;
}

.hall-title, .hall-title-center { 
    font-size: calc(1.9rem * var(--font-multiplier)) !important; 
    line-height: var(--main-line-height) !important;
    margin-bottom: 30px; color: var(--text-main) !important; font-weight: 700; 
    overflow-wrap: break-word;
}

.hall-label { 
    font-size: calc(1.05rem * var(--font-multiplier)) !important; 
    line-height: var(--main-line-height) !important;
    color: var(--p-color) !important; 
    font-weight: 700; 
    display: block;
}

.hall-description { 
    font-size: calc(1.05rem * var(--font-multiplier)) !important; 
    line-height: var(--main-line-height) !important;
    color: var(--text-main) !important;
    margin-bottom: 50px !important;
}

.hall-value, .hall-wcag-text, .hall-list span, .hall-contact-details li span {
    font-size: calc(1.05rem * var(--font-multiplier)) !important;
    line-height: var(--main-line-height) !important;
    color: var(--text-main) !important;
    overflow-wrap: anywhere; /* Kluczowe dla długich maili i adresów */
}

.hall-wrapper h1, 
.hall-wrapper h2 
/*.hall-wrapper p, 
.hall-wrapper span*/ {
    overflow-wrap: break-word !important; 
    word-break: normal !important; 
    hyphens: none !important; 
    white-space: normal !important;
}

/* --- UKŁADY --- */
.hall-layout-stacked .hall-entry { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.hall-layout-stacked .hall-label { margin-bottom: 5px; }

.hall-layout-inline .hall-entry { 
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 10px;
    padding: 12px 0; border-bottom: 1px dashed var(--border); 
}
.hall-layout-inline .hall-label {
    display: inline-block; flex: 1; min-width: 150px;
    color: var(--text-main) !important; font-weight: 400;
    max-width: 80% !important;
}
.hall-layout-inline .hall-value { flex: 1; text-align: right; min-width: 100px; overflow-wrap: anywhere; }

.hall-layout-pricing .hall-items-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.hall-layout-pricing .hall-entry { 
    display: flex; justify-content: space-between; align-items: center; 
    flex-wrap: wrap; gap: 15px;
    padding: 15px 0; border-bottom: 1px solid var(--border); 
}
.hall-layout-pricing .hall-label { flex: 1; min-width: 200px; color: var(--text-main) !important; font-weight: 400; max-width: 80% !important; }
.hall-layout-pricing .hall-value { color: var(--p-color) !important; white-space: nowrap; }

/* --- STRUKTURA SEKCJI --- */
.hall-main-content { display: grid; grid-template-columns: 1fr 400px; gap: 40px; margin-bottom: 40px; }
.hall-features-row { 
    display: grid; grid-template-columns: 1fr 1fr; 
    background: var(--bg-light); border: 1px solid var(--border); margin-bottom: 40px; 
}
.hall-feature-box { padding: 30px; box-sizing: border-box; }
.hall-feature-box:first-child { border-right: 1px solid var(--border); }

.hall-price-card { background: var(--bg-light); border: 1px solid var(--border); padding: 40px; margin-top: 60px; margin-bottom: 60px; }
.hall-price-footer { margin-top: 40px; color: var(--text-main); opacity: 0.8; font-style: italic; font-size: 0.9rem; overflow-wrap: break-word; }

.hall-dark-section { background: #171717; color: #b8bcbf !important; padding: 40px; border-radius: 8px; margin-top: 60px; margin-bottom: 40px; }
.hall-dark-section * { color: #b8bcbf !important; }
.hall-dark-section .hall-entry { border-color: #444; }

.hall-contact-section { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-top: 40px; 
    overflow: hidden; /* Zabezpieczenie przed rozpychaniem */
}
.hall-contact-col { min-width: 0; /* Kluczowe dla flex/grid by zawijać tekst */ }

/* --- LISTY I IKONY --- */
.hall-list, .hall-contact-details { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.hall-list li, .hall-contact-details li { display: flex; align-items: flex-start; margin-bottom: 12px; min-width: 0; }
.hall-list i, .hall-contact-details i { color: var(--p-color); flex-shrink: 0; width: 25px; margin-right: 15px; margin-top: 0.3em; }

.hall-why-us { margin-top: 60px; }

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 992px) {
    .hall-main-content, .hall-features-row, .hall-contact-section, .hall-layout-pricing .hall-items-container { grid-template-columns: 1fr; }
    .hall-feature-box:first-child { border-right: none; border-bottom: 1px solid var(--border); }
    .hall-contact-section { gap: 40px; }
}

@media (max-width: 768px) {
    .hall-wrapper { overflow-x: hidden; } /* Ostateczne zabezpieczenie */
    .hall-layout-inline .hall-entry, .hall-layout-pricing .hall-entry { /*flex-direction: column;*/ align-items: flex-start; }
    .hall-layout-inline .hall-value { text-align: left; }
    .hall-feature-box, .hall-price-card { padding: 40px 15px !important; }
    .hall-layout-pricing .hall-label { max-width: 100% !important; }
    /* Marginesy boczne dla mobile */
    .hall-main-content, .hall-contact-section, .hall-layout-pricing .hall-items-container, 
    .hall-why-us, .hall-services { 
        padding-left: 15px !important; padding-right: 15px !important; 
    }
}

@media (max-width: 567px) {
    .hall-layout-inline .hall-entry, .hall-layout-pricing .hall-entry { flex-direction: column; align-items: flex-start; }

}

/* Fix dla ekstremalnego powiększenia WCAG */
.hall-wrapper[style*="--font-multiplier: 1.6"] .hall-layout-inline .hall-entry,
.hall-wrapper[style*="--font-multiplier: 2"] .hall-layout-inline .hall-entry,
.hall-wrapper[style*="--font-multiplier: 1.6"] .hall-layout-pricing .hall-entry,
.hall-wrapper[style*="--font-multiplier: 2"] .hall-layout-pricing .hall-entry,
.hall-wrapper[style*="--font-multiplier: 2"] .hall-contact-section {
    flex-direction: column !important;
}
.hall-wrapper[style*="--font-multiplier: 2"] .hall-features-row { grid-template-columns: 1fr; }

.hall-plan-section { margin-top: 60px; /*text-align: center;*/ }
.hall-plan-container { margin-top: 30px; background: var(--bg-light); padding: 20px; border: 1px solid var(--border); border-radius: 8px; }
.hall-plan-container img { max-width: 100%; height: auto; border-radius: 4px; }



/* Styl miniaturki */
.hall-plan-trigger {
    display: block;
    max-width: 300px; /* Rozmiar miniatury */
    margin: 20px;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}



.hall-plan-trigger:hover, .hall-plan-trigger:focus {
    transform: scale(1.02);
    /*outline: 3px solid var(--p-color);*/
    outline: 4px solid var(--focus-color) !important;
    outline-offset: 2px;
}


.hall-plan-trigger img {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay na miniaturce */
.hall-plan-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Lightbox - tło */
.hall-plan-lightbox {
    display: none; /* Domyślnie ukryty */
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

/* Aktywacja Lightboxa przez :target */
.hall-plan-lightbox:target {
    display: flex;
}

/* Przezroczysta warstwa do zamykania kliknięciem w tło */
.hall-plan-close-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    cursor: zoom-out;
}

/* Kontener na duże zdjęcie */
.hall-plan-full-wrapper {
    position: relative;
    z-index: 100000;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*.hall-plan-full-wrapper img {
    max-width: 100%;
    max-height: 85vh;
    border: 4px solid white;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    object-fit: contain;
}*/

.hall-plan-full-wrapper img {
    max-width: 100%;
    max-height: 80vh;
    border: 3px solid #fff;
    object-fit: contain;
}

/* Przycisk zamknij */
/*.hall-plan-close-btn {
    margin-top: 15px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    background: var(--p-color);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
}*/

.hall-plan-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #c0392b; /* Czerwony przycisk - zawsze widoczny */
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-decoration: none !important;
    font-weight: bold;
    border: 2px solid transparent;
}

.hall-plan-close-btn:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 4px var(--focus-color);
}

.hall-plan-close-btn:hover {
    background: #333;
    color: white;
}

.hall-plan-close-btn span {
    color: #ffffff !important;
}

/* Naprawa widoczności w Dark Mode */
body.dark-mode .hall-plan-lightbox {
    background: rgba(0, 0, 0, 0.98);
}

body.dark-mode .hall-plan-full-wrapper img {
    border-color: #444;
}

/* Zamykanie tłem */
.hall-plan-close-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    cursor: default;
}

.hall-files-section {
    margin-top: 60px;
    padding: 30px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.hall-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.hall-file-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none !important;
    color: var(--text-main) !important;
    transition: all 0.2s ease;
}

body.dark-mode .hall-file-item {
    background: #333;
}

.hall-file-item:hover {
    border-color: var(--focus-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    outline: none;
}

.hall-file-item:focus {
    /*border-color: var(--focus-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);*/
    outline: none;
}

.hall-file-item:focus-visible {
    outline: 3px solid var(--accessibility-focus) !important;
    outline-offset: 2px;
    border-radius: 4px; /* Opcjonalnie, żeby ramka była ładnie zaokrąglona */
    box-shadow: none; /* Pozbywamy się domyślnego cienia Bootstrapa */
}


/* Ikona dokumentu (PDF/Word) */
.hall-file-icon {
    flex-shrink: 0;
    font-size: 1.8rem;
    color: var(--focus-color); /* Przeniesione tutaj ze starego i:first-child */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Kontener na teksty */
.hall-file-info {
    flex-grow: 1;
    min-width: 0; /* Kluczowe dla zawijania długich nazw plików */
}

.hall-file-name {
    display: block;
    font-weight: 600; /* Zamiast 500 w span, lepiej wygląda jako nagłówek */
    line-height: 1.2;
    margin-bottom: 2px;
    word-wrap: break-word; /* Wymusza łamanie bardzo długich słów */
}

.hall-file-info small {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Wizualny wskaźnik pobierania (kółko ze strzałką) */
.hall-download-visual {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--focus-color);
    font-size: 0.8rem;
}

body.dark-mode .hall-download-visual {
    background: rgba(255,255,255,0.1);
}

body.dark-mode .hall-file-info small {
    color: #bbb; /* Jasnoszary, ale z odpowiednim kontrastem */
    opacity: 1;  /* Wyłączamy przezroczystość w dark mode */
}


@media (max-width: 567px) {
    .hall-files-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* Zabezpieczenie dla bardzo małych ekranów (poniżej 340px) */
@media (max-width: 340px) {
    .hall-plan-trigger {
        max-width: 100%;
        margin: 20px;
    }
}

/* === END ARTYKUŁ - WYNAJEM === */


/* ==============================================================
===================================================================
=================================================================
===================================================================
==================================================================
===================================================================
================================================================*/


/* === MEDIA QUERIES === */


/* ==============================
UKŁAD STRONY: SIDEBAR (25%) + TREŚĆ (75%)
Naprawa proporcji i odstępów (Desktop + Mobile)
============================== */

/* 4. Inteligentne proporcje (Desktop) */
@media (min-width: 992px) {
    /* Ustawienie wiersza jako Flex, żeby kolumny stały obok siebie */
    #sp-main-body .container > .row,
    #sp-main-body .container-inner > .row,
    #sp-main-body > .row {
        display: flex !important;
        /*flex-wrap: nowrap !important;*/
        /* ZMIANA: Pozwalamy na zawijanie TYLKO jeśli w środku nie ma sidebara, 
        lub używamy bezpieczniejszego wrap, by Related Articles mogło spaść */
        flex-wrap: wrap !important;
    }

    /* TYLKO GDY SIDEBAR ISTNIEJE: Lewa 25%, Prawa 75% */
    aside[id="sp-left"] {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    /* Selektor '+' sprawia, że 75% zadziała TYLKO jeśli obok jest sp-left */
    aside[id="sp-left"] + div[id="sp-component"] {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }

    /* GDY SIDEBARA NIE MA: Rozciągnij komponent na 100% */
    /* Dotyczy stron, gdzie sp-component jest jedynym dzieckiem wiersza */
    #sp-main-body .row > div[id="sp-component"]:only-child,
    #sp-main-body .row > div[id="sp-component"]:first-child:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* NAPRAWA MARGINESÓW NA MOBILE (Dla SP Page Builder) */
@media (max-width: 991px) {
    aside[id="sp-left"] {
        margin-bottom: 50px !important; 
        display: block !important;
        width: 100% !important; /* Na mobile zawsze pełna szerokość */
        max-width: 100% !important;
    }

    /* Jeśli wiersz jest bezpośrednio w main-body, dodajemy mu padding */
    #sp-main-body > .row,
    #sp-main-body > section > .row {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Upewniamy się, że kolumny na mobile zajmują 100% */
    #sp-left, 
    #sp-component {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================ */

/* Inteligentny rewers kolumn TYLKO na tabletach (768px - 991px) */
@media (min-width: 568px) and (max-width: 991px) {
    .rewers-mobilny > .sppb-row-container > .sppb-row,
    .rewers-mobilny .sppb-row {
        display: flex !important;
        flex-direction: row-reverse !important; 
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    /* Ustawienie kolumn 50/50 tylko w tym zakresie */
    .rewers-mobilny .sppb-row-column {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* Na telefonach (poniżej 768px) wymuszamy standardowy układ */
@media (max-width: 567px) {
    .rewers-mobilny .sppb-row {
        display: block !important; /* Wyłącza flexa i rewers */
    }
    .rewers-mobilny .sppb-row-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* ============================ */


/* 2. RAMY DLA MOBILE/TABLET (Poprawione) */
@media (max-width: 1200px) {
    /* Blokujemy tylko główne kontenery, nie ruszając środka (row/column) */
    #sp-main-body, .container, #sp-header, #sp-footer {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Tutaj usuwamy margin auto, żeby Bootstrap mógł rozsunąć logo i menu */
    .row, .sp-column {
        max-width: 100% !important;
        margin-left: unset !important;  /* Pozwalamy Helixowi decydować */
        margin-right: unset !important; /* Pozwalamy Helixowi decydować */
    }
}


/* =================== START - INTELIGENTNY BANER (Wersja Dostępna i Elastyczna) ================ */
/* RESPONSYWNOŚĆ - dopasowanie przestrzeni */

@media (min-width: 992px) {  
    .sppb-section.baner-strony {
        padding: 50px 0 !important;
    }
}


@media (min-width: 568px) and (max-width: 991px) {
    .sppb-section.baner-strony {
        padding: 30px 0 !important;
    }
}


@media (max-width: 567px) {
    .sppb-section.baner-strony {
        padding: 30px 0 !important;
    }
}

/* =================== END - INTELIGENTNY BANER (Wersja Dostępna i Elastyczna) ================ */

/* === SPONSORZY HOME === */

 /* --- 5. RWD --- */ 
 @media (max-width: 992px) { 
     .sponsors-grid { 
         grid-template-columns: repeat(3, 1fr); 
         gap: 40px; 
     } 
     .sponsor-item:last-child:nth-child(5) {
         grid-column: auto;
     }
 } 

 @media (max-width: 600px) { 
     .sponsors-grid { 
         grid-template-columns: repeat(2, 1fr); 
         gap: 30px; 
     } 
     .sponsor-item {
         padding: 10px 5px;
     } 
     .sponsor-item img { 
         max-height: 50px; 
     } 
 } 
 
 /* === SPONSORZY HOME === */
 
 
 /* === NAGŁÓWKI === */
/* Tutaj też dopisujemy nowe klasy, aby zachowywały się identycznie */

@media (min-width: 1200px) {
    .moj-naglowek-extra, .moj-naglowek-extra-white,
    .moj-naglowek-flat, .moj-naglowek-flat-white {
        min-width: 40% !important; max-width: 60% !important;
        margin-left: -60px !important; padding-left: 60px !important;
    }
    #sp-position1 .moj-naglowek-extra, #sp-position1 .moj-naglowek-extra-white,
    #sp-position1 .moj-naglowek-flat, #sp-position1 .moj-naglowek-flat-white {
        margin-left: -75px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .moj-naglowek-extra, .moj-naglowek-extra-white,
    .moj-naglowek-flat, .moj-naglowek-flat-white {
        min-width: 45% !important; max-width: 60% !important;
        margin-left: calc(-50vw + 50%) !important;
        padding-left: calc(50vw - 50% + 15px) !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .moj-naglowek-extra, .moj-naglowek-extra-white,
    .moj-naglowek-flat, .moj-naglowek-flat-white {
        min-width: 55% !important; max-width: 80% !important;
        margin-left: calc(-50vw + 50%) !important;
        padding-left: calc(50vw - 50% + 15px) !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .moj-naglowek-extra, .moj-naglowek-extra-white,
    .moj-naglowek-flat, .moj-naglowek-flat-white {
        min-width: 70% !important; max-width: 95% !important;
        margin-left: calc(-50vw + 50%) !important;
        padding-left: calc(50vw - 50% + 15px) !important;
    }
}

@media (max-width: 575px) {
    .moj-naglowek-extra, .moj-naglowek-extra-white,
    .moj-naglowek-flat, .moj-naglowek-flat-white {
        min-width: 85% !important; max-width: 100% !important;
        margin-left: calc(-50vw + 50%) !important;
        padding-left: calc(50vw - 50% + 15px) !important;
    }
    
    
    #sp-position1 .moj-naglowek-extra, #sp-position1 .moj-naglowek-extra-white,
    #sp-position1 .moj-naglowek-flat, #sp-position1 .moj-naglowek-flat-white {
        margin-left: calc(-50vw + 50% - 30px) !important;
    }
}


/* Naprawa dla trybu mobilnego - jeśli tekst się zawija, sekcja musi urosnąć */
@media (max-width: 767px) {
    .sekcja-belka-naglowek {
        min-height: 200px !important;
        height: auto !important;
        padding-top: 30px !important;  /* Oddech od góry na mobile */
        margin-bottom: 30px !important; /* Oddech od dołu na mobile */
    }
}




/* 4. RESPONSYWNE SZEROKOŚCI I MARGINESY (Z KOREKTĄ POSITION1) */

/* --- LAPTOP / DESKTOP (>1200px) --- */
@media (min-width: 1200px) {
    .moj-naglowek-right {
        min-width: 40% !important;
        max-width: 55% !important;
        margin-left: auto !important;
        margin-right: -60px !important; 
        padding-right: 60px !important;
        left: 0 !important; 
    }
    /* Korekta Position1 dla prawej strony */
    #sp-position1 .moj-naglowek-right {
        margin-right: -75px !important;
    }
}

/* --- TABLETY (768px - 1199px) --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .moj-naglowek-right {
        min-width: 50% !important;
        max-width: 70% !important;
        margin-left: auto !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-right: calc(50vw - 50% + 15px) !important;
    }
    /* Tutaj korekta zazwyczaj nie jest potrzebna, ale w razie czego 
       możesz odkomentować poniższe jeśli zobaczysz przesunięcie: */
    /* #sp-position1 .moj-naglowek-right { margin-right: calc(-50vw + 50% - 15px) !important; } */
}


/* --- MOBILE (poniżej 767px) --- */
@media (max-width: 767px) {
    .moj-naglowek-right {
        min-width: 80% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-right: calc(50vw - 50% + 15px) !important;
    }
}

/* FIX DLA MODUŁU W POSITION1 NA MAŁEJ KOMÓRCE */
@media (max-width: 575px) {
    #sp-position1 .moj-naglowek-right {
        margin-right: calc(-50vw + 50% - 30px) !important;
    }
    .moj-naglowek-extra h2, .moj-naglowek-extra-white h2,
    .moj-naglowek-flat h2, .moj-naglowek-flat-white h2,
    .moj-naglowek-right h2, .moj-naglowek-flat-white h1 {
        font-size: calc(0.9rem + (0.8rem * var(--font-multiplier, 1))) !important;
    }
    /*.moj-naglowek-right h2 {
        font-size: calc(0.9rem + (0.8rem * var(--font-multiplier, 1))) !important;
    }*/
}

/* --- KOREKTA MARGINESU TYLKO DLA PRAWEGO NAGŁÓWKA (0px - 768px) --- */
/*@media (max-width: 768px) {
    .moj-naglowek-right:not(.moj-flat) {
        margin-bottom: -15px !important;
    }
}*/




 /* === NAGŁÓWKI === */

/* --- STAET - MEDIA QUERIES GODZINY PRACY - BIBLIOTEKA --- */

/* Tablety (np. iPad) - optymalizacja szerokości */
@media (max-width: 1024px) {
    .harmonogram-wrapper {
        gap: 15px; /* Mniejszy odstęp, więcej miejsca na treść */
    }
}

/* Mniejsze tablety i duże telefony */
@media (max-width: 768px) {
    .harmonogram-wrapper {
        grid-template-columns: 1fr; /* Jedna kolumna, ale na całą szerokość */
    }
}

/* Najmniejsze ekrany (360px, 384px) */
@media (max-width: 400px) {
    .harmonogram-sekcja {
        padding: 0 !important;
    }
    
    .harmonogram-karta {
        border-radius: 8px; /* Nieco mniejszy promień na małym ekranie */
        padding: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Jeśli ikony i tekst w nagłówku się nie mieszczą */
    /*.karta-header h3 {
        font-size: 1.1em !important;
    }*/
    
    .godziny-lista li {
        /*flex-direction: column !important;*/
        align-items: flex-start !important;
        /* Zmniejszamy padding, bo interlinia sama w sobie zrobi odstęp */
        /*padding: 4px 0 !important; 
        gap: 0 !important; */
    }

    .godziny-lista li span, 
    .godziny-lista li strong {
        width: 100% !important;
        /* Używamy Twojej zmiennej - teraz suwak BĘDZIE działał */
        line-height: var(--main-line-height, 1.4) !important;
        font-size: calc(1rem * var(--font-multiplier, 1)) !important;
        display: block;
        white-space: normal !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
    }

    /*.godziny-lista li span {
        font-size: 0.9em; 
        margin-bottom: -2px; 
    }*/
}

/* --- END - MEDIA QUERIES GODZINY PRACY - BIBLIOTEKA --- */

/* 3. START - MEDIA QUERIES - FILIE - BIBLIOTEKA --- */
/* Przywrócenie układu obok siebie tylko na dużych ekranach */
/*@media (min-width: 992px) {
    .info-section { flex: 1 1 350px; }
    .hours-section { flex: 0 1 350px; }
}*/


@media (max-width: 991px) {
    .info-section { 
        border-right: none !important; 
        border-bottom: 1px solid #dee2e6; 
        padding-bottom: 20px; 
        margin-bottom: 20px;
    }
    
    .contact-item {
	font-size: calc(1rem * var(--font-multiplier)) !important;
     }
     
     .contact-item i {
	font-size: calc(1rem * var(--font-multiplier)) !important;
     }
     
     .day {
	font-size: calc(1rem * var(--font-multiplier)) !important;
     }
     
     .time {
 	font-size: calc(1rem * var(--font-multiplier));
     }
}


/* 3. END - MEDIA QUERIES - FILIE - BIBLIOTEKA --- */

/* 3. START - MEDIA QUERIES - INFO - BIBLIOTEKA GLOWNA --- */
/* 2. MEDIA QUERY TYLKO DLA MAŁYCH EKRANÓW (Smartfony) */
@media (max-width: 767px) {
    .info-section {
        flex: 1 1 100%;
        border-right: none !important;
        border-bottom: 1px solid #dee2e6;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .hours-section {
        flex: 1 1 100%;
    }
    
    /* Dodatkowy bezpiecznik dla Skierniewic na 360px przy Max A */
    .library-horizontal-card {
        padding: calc(15px * var(--font-multiplier)) !important;
        overflow-wrap: anywhere; /* Wymusi łamanie maila, jeśli dotknie krawędzi */
    }
    
    h3[class*="branch-title"] {
        word-break: normal;
        overflow-wrap: break-word;
    }
}


/* 7. RESPONSIVE */
@media (max-width: 991px) {
    .library-info-section { flex: 1 1 100%; padding-right: 0; }
    
    .library-contact-item, .library-info-item, .library-info-item p, .point {
        font-size: calc(1rem * var(--font-multiplier)) !important;
    }
}

@media (max-width: 767px) {
    .library-card { padding: calc(15px * var(--font-multiplier)) !important; }
    .library-contact-item a { overflow-wrap: anywhere; word-break: break-all; }
}
/* END - MEDIA QUERIES - INFO - BIBLIOTEKA GLOWNA --- */


/* START - MEDIA QUERIES - EU LOGOS --- */

@media (max-width: 768px) {
    .eu-logos-grid {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .eu-logo-item {
        flex: 1;
    }

    .eu-logo-item img {
        max-height: 45px;
    }

    .eu-text-content p {
        font-size: 0.85rem;
        padding: 0 10px;
    }
}

@media (max-width: 400px) {
    .eu-logos-grid {
        gap: 8px;
    }
    .eu-logo-item img {
        max-height: 35px;
    }
    .eu-funding-section {
        padding: 40px 0px;
    }
}

/* END - MEDIA QUERIES - EU LOGOS --- */



/* =================== START - FIX DLA TOP BAR (Telefon i Mail) - WERSJA DO WYRÓWNANIA ================ */

/* 2. Na laptopie wyrównujemy do prawej krawędzi kontenera (nie ekranu!) */
@media (min-width: 992px) {
    #sp-top-bar ul.sp-contact-info {
        justify-content: flex-end !important;
    }
}

/* 4. Zabezpieczenie dla bardzo dużego powiększenia / małych ekranów */
@media (max-width: 576px) {
    #sp-top-bar ul.sp-contact-info li {
        white-space: normal !important; /* Pozwól łamać na bardzo małych tel. */
        word-break: break-all !important;
    }
}

/* FIX pod Lighthouse dla Top Baru (Tap Targets) */
/* Poprawka odstępu dla Lighthouse - TYLKO dla małych ekranów */
@media (max-width: 576px) {
    /* 1. Wymuszamy pionowy układ i większy odstęp między liniami */
    #sp-top-bar ul.sp-contact-info {
        /*flex-direction: column !important;*/
        gap: 15px !important; /* To fizycznie odsuwa telefon od maila */
        padding: 10px 0 !important;
    }

    /* 2. Powiększamy obszar klikalny linków bez zmiany wielkości liter */
    /*#sp-top-bar ul.sp-contact-info li a {
        display: inline-block !important;
        padding: 8px 0 !important;
        min-height: 44px; 
    }*/
}
/* =================== END - FIX DLA TOP BAR (Telefon i Mail) - WERSJA DO WYRÓWNANIA ================ */

/* =================== START - BLOG_ITEM - CATEGORY VIEW ================ */

/* DOPASOWANIE DLA DESKTOPU (3 kolumny przy suwaku = 1) */
@media (min-width: 1200px) {
    .article-list, .article-list [itemprop="blogPosts"] {
        grid-template-columns: repeat(auto-fill, minmax(calc(max(31%, 300px * var(--font-multiplier, 1))), 1fr)) !important;
    }
}

/* DOPASOWANIE DLA TABLETU (2 kolumny) */
@media (min-width: 768px) and (max-width: 1199px) {
    .article-list, .article-list [itemprop="blogPosts"] {
        grid-template-columns: repeat(auto-fill, minmax(calc(max(45%, 300px * var(--font-multiplier, 1))), 1fr)) !important;
    }
}





/* 6. Responsywność - na komórkach wracamy do pionu */
@media (max-width: 768px) {
    .strona-pozioma .article-inner-card {
        flex-direction: column !important;
    }
    .strona-pozioma .article-image-container,
    .strona-pozioma figure.item-image.left {
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }
    .strona-pozioma .article-body {
        padding: 20px !important;
    }
/* TO DOPISZ: */
    .strona-pozioma .article-image-container,
    .strona-pozioma figure.item-image.left {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .strona-pozioma .article-image-container img {
        /* Zmniejszamy wysokość na komórkach, żeby nie trzeba było tyle przewijać */
        /*height: 250px !important; */
        /* Albo daj height: auto !important; jeśli chcesz naturalne proporcje zdjęcia */
    }
}

/* =================== END - BLOG_ITEM - CATEGORY VIEW ================ */

/* =================== TOP1: ALERT NO-JS & SOCIAL ICONS =================== */

/* 3. DOPASOWANIE DLA MOBILE (991px i mniej) */
@media (max-width: 991px) {
  /* Zerujemy lewy margines modułów w top-bar, który powoduje przesunięcie */
    #sp-top-bar .sp-module {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Upewniamy się, że kontener modułu też nie ma ograniczeń */
    #sp-top1 .sp-module-content {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Kontener pozycji top1 wymusza układ pionowy */
    #sp-top1 .sp-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Wyśrodkowanie ikon na mobile */
    .social-icons {
        justify-content: center !important;
        margin-top: 5px !important;
	margin-bottom: 10px !important; 
    }

    /* Inteligentny margines dla alertu: 
       Pojawia się TYLKO gdy JS jest wyłączony (brak klasy .js na html) */
    html:not(.js) .no-js-alert-local {
        margin-bottom: 15px !important;
    }
}

@media (max-width: 567px) {
    /* Wymuszamy na kontenerze i liście brak bocznych ograniczeń */
    #sp-top1 .sp-column,
    #sp-top1 .social-icons {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center !important;
    }

    /* Upewniamy się, że same elementy listy nie mają zbędnych marginesów */
    .social-icons li {
        display: inline-block !important;
        margin: 0 7px !important; /* Równy odstęp z obu stron dla balansu */
    }
}

/* =================== TOP1: ALERT NO-JS & SOCIAL ICONS =================== */

/* =================== LOGIKA SKIP-LINKS (POKAZYWANIE/UKRYWANIE) ================ */


@media (max-width: 991px) { 
  body #no-js-hamburger-trigger { 
    display: flex !important; 
    position: fixed !important; 
    top: 20px; 
    right: 20px; 
    width: 55px; 
    height: 55px; 
    background: #293f8e !important; 
    z-index: 2147483640 !important; 
    border: 2px solid #fff !important; 
    border-radius: 5px; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    text-decoration: none !important; } 
}

/* LOGIKA WYŚWIETLANIA (Filtrowanie linków) */
/* DESKTOP: Ukryj linki mobilne */
    @media (min-width: 992px) {
        .s-mobile-js, .s-mobile-nojs { 
            display: none !important; 
        }
    }

/* MOBILE: Ukryj linki desktopowe */
    @media (max-width: 991px) {
        .s-desktop { 
            display: none !important; 
        }
/* Jeśli JS działa, ukryj link no-js (na wypadek gdyby noscript świrował) */
        .js .s-mobile-nojs { 
            display: none !important; 
        }
    }

/* Jeśli brak JS, ukryj elementy wymagające skryptów */
    html:not(.js) .s-js-only, 
    html:not(.js) .s-mobile-js { 
        display: none !important; 
    }

/* =================== LOGIKA SKIP-LINKS (POKAZYWANIE/UKRYWANIE) ================ */

/* =================== START - MODUŁ LOGO + OPIS W BOTTOM1 ================ */
 /* --- 5. RWD --- */ 
 @media (max-width: 768px) { 
     .footer-about-col { 
         padding-right: 0; 
         padding-bottom: 30px; 
         text-align: left; 
         margin-bottom: 30px; 
     } 
     .demo-disclaimer-inline { 
         text-align: left; 
     } 
 } 
 /* =================== END - MODUŁ LOGO + OPIS W BOTTOM1 ================ */
 
 /* =================== START MODUŁ KONTAKT W BOTTOM3 ================ */
/* RWD */
@media (max-width: 768px) {
      .footer-contact-box {
        padding: 10px 0px 30px 0px;
        text-align: left;
        margin-bottom: 30px;
    }
    .contact-link {
        padding: 10px 0;
        min-height: 44px;
    }
    .contact-item {
        margin-bottom: 15px !important;
        justify-content: flex-start;
    }
    .contact-icon {
        margin-top: 0;
    }
}
/* =================== KONIEC MODUŁ KONTAKT W BOTTOM3 ================ */

/* =================== START MODUŁ DOSTEPNOŚĆ W BOTTOM4 ================ */

/* RWD */
@media (max-width: 768px) {
    .footer-text, .acc-status {
        text-align: left;
    }
    .btn-accessibility {
        width: 100%; /* Na mobile przycisk na całą szerokość łatwiej kliknąć */
        justify-content: center;
    }
}

/* =================== END MODUŁ DOSTEPNOŚĆ W BOTTOM4 ================ */

/* =================== START MODUŁ LEGAL LINKS W FOOTER1 ================ */

/* 3. Poprawka dla wersji mobilnej - żeby linki nie były zbyt blisko siebie */
@media (max-width: 768px) {
    body.spacing-active .footer-legal-links .legal-link {
        /* Zwiększamy margines dolny proporcjonalnie do interlinii */
        margin-bottom: calc(8px * var(--main-line-height, 1)) !important;
    }
}


/* RWD - na telefonach układ pionowy i wyśrodkowany */
@media (max-width: 768px) {
    .footer-legal-links {
        text-align: left;

    }
    
    .legal-link {
        display: block; /* Jeden pod drugim na mobile */
        margin: 0px 0px 8px 0px;
    }
    
    .legal-separator {
        display: none; /* Ukrywamy kreskę na telefonie */
    }
}

/* =================== END MODUŁ LEGAL LINKS W FOOTER1 ================ */

/* =================== START MODUŁ CREDITS W FOOTER2 ================ */

/* RWD - na telefonach wracamy do standardowego układu */
@media (max-width: 768px) {
    .footer-sidebar-wrap {
        text-align: right;
        height: auto;
        gap: 20px;
    }
    .credits-bottom {
        border-top: none;
        padding-top: 0;
    }
}

/* =================== END MODUŁ CREDITS W FOOTER2 ================ */

/* =================== START - MODUŁ SEKCJE NA HOMEPAGE ================ */
/* 8. RWD - POPRAWKA DLA MOBILE */
@media (max-width: 992px) {
    .strip-title { font-size: calc(28px * var(--font-multiplier, 1)) !important; }
    .strip-icon-wrapper { width: 100px; height: 100px; }
}

@media (max-width: 768px) {
    .strip-item.reverse .container { flex-direction: row-reverse !important; }
    .strip-item.reverse .strip-icon-wrapper { margin-left: 20px; margin-right: 0; }
    .strip-item:not(.reverse) .strip-icon-wrapper { margin-right: 20px; margin-left: 0; }

    .strip-item { padding: 18px 0; }
    
    /* Tutaj kluczowa zmiana: mniejsza baza dla h2 na mobile */
    .strip-title { 
        font-size: calc(24px * var(--font-multiplier, 1)) !important; 
        letter-spacing: 1px; 
        line-height: 1.2; 
    }
    
    .strip-icon-wrapper { 
        width: 70px; 
        height: 70px; 
        padding: 8px;
    }
}

/* =================== END - MODUŁ SEKCJE NA HOMEPAGE ================ */

/* =================== START - STYLE DLA SZABLONÓW ARTYKUŁU ================ */

@media (max-width: 768px) {
    .hero-image-container { min-height: 300px; }
    .event-title-font { font-size: calc(2rem * var(--font-multiplier, 1)) !important; }
}

/* =================== END - STYLE DLA SZABLONÓW ARTYKUŁU ================ */

/* =================== START STYLE DLA WYDARZENIA - ARTYKUŁY MIGAWKI ================ */

/* --- 3. RESPONSYWNOŚĆ (Bez zmian) --- */
@media (min-width: 1200px) {
    .luxury-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .luxury-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .luxury-grid {
        grid-template-columns: 1fr;
    }
}

/* =================== KONIEC STYLE DLA WYDARZENIA - ARTYKUŁY MIGAWKI ================ */

/* =================== POCZĄTEK STYLE DLA MAGAZINE - ARTYKUŁY MIGAWKI ================ */

/* --- 7. RESPONSYWNOŚĆ --- */
@media (max-width: 991px) {
    .mag-wrapper { height: auto; flex-direction: column; }
    .mag-image-wrap { order: 1; height: 450px; flex: 0 0 100%; position: relative; }
    .mag-vertical { order: 2; padding: 25px; border: none; align-items: center; height: auto; }
    .vertical-text-wrapper { writing-mode: horizontal-tb; transform: none; letter-spacing: 3px; }
    .mag-text { order: 3; padding: 40px 20px 100px 20px; text-align: center; height: auto; min-height: 0; }
    
    button.mag-control { 
        position: absolute !important;
        top: 225px !important; 
        transform: translateY(-50%) !important;
        height: 60px; 
        background: transparent !important;
    }
}

/* =================== KONIEC STYLE DLA MAGAZINE - ARTYKUŁY MIGAWKI ================ */

/* =================== POCZĄTEK STYLE DLA HERO - ARTYKUŁY MIGAWKI ================ */

/* --- 7. RESPONSYWNOŚĆ --- */
@media (max-width: 991px) {
    .hero-wrapper { flex-direction: column; }
    .hero-image { height: 350px; flex: 0 0 100%; max-width: 100%; position: relative; }
    .hero-content { flex: 0 0 100%; max-width: 100%; padding: 40px 20px 80px 20px; text-align: center; display: block; }
    
    /* Ukrywa boczne strzałki desktopowe */
    .custom-control { display: none !important; }

    /* Strzałki na styku zdjęcia i tekstu*/
    .hero-mobile-nav-wrapper {
        display: flex;
        position: absolute;
        bottom: 10px;
        left: 15px; /* Przeniesione na LEWĄ stronę */
        gap: 8px;
        z-index: 15;
    }
    .mob-nav-btn {
        background: #000000 !important; 
        border: 2px solid #ffffff !important;
        width: 44px; 
        height: 44px; 
        border-radius: 50%;
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    .mob-nav-btn span { 
        filter: brightness(0) invert(1) !important; /* Jasne ikony */
        width: 20px; height: 20px; 
    }
    /* Widoczny fokus */
    .mob-nav-btn:focus-visible {
        /*outline: none;*/
        outline: 3px solid var(--accessibility-focus) !important;
        outline-offset: 3px; 
        /*border-radius: 4px; */
        box-shadow: none !important;
        
        /*box-shadow: 0 0 0 2px #000, 0 0 0 5px #ADD8E6 !important;*/
        /*background: var(--text-footer-white) !important;*/
        /*color: var(--text-dark) !important;*/
        transition: outline 0.3s ease;
    }
}

/* =================== KONIEC STYLE DLA HERO - ARTYKUŁY MIGAWKI ================ */