/* =========================================
   Paleta Kolorów QBI - Zmienne Globalne
   ========================================= */
:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-qbi-gray: #202122;
  --color-qbi-indigo: #1C2564;
  --color-qbi-pink: #FF59DB;
  --color-qbi-turquoise: #02B9A7;
  --color-qbi-orange: #DC9705;
}

/* =========================================
   Klasy Narzędziowe
   ========================================= */
.text-white         { color: var(--color-white); }
.text-black         { color: var(--color-black); }
.text-qbi-gray      { color: var(--color-qbi-gray); }
.text-qbi-indigo    { color: var(--color-qbi-indigo); }
.text-qbi-pink      { color: var(--color-qbi-pink); }
.text-qbi-turquoise { color: var(--color-qbi-turquoise); }
.text-qbi-orange    { color: var(--color-qbi-orange); }

.bg-white         { background-color: var(--color-white); }
.bg-black         { background-color: var(--color-black); }
.bg-qbi-gray      { background-color: var(--color-qbi-gray); }
.bg-qbi-indigo    { background-color: var(--color-qbi-indigo); }
.bg-qbi-pink      { background-color: var(--color-qbi-pink); }
.bg-qbi-turquoise { background-color: var(--color-qbi-turquoise); }
.bg-qbi-orange    { background-color: var(--color-qbi-orange); }

/* =========================================
   Główne Tło Strony i Typografia
   ========================================= */
body {
    background-color: var(--color-black);
    color: var(--color-white); 
    font-family: var(--font-qbiton-mono); 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   GLOBALNE STYLE LINKÓW (Zwykły tekst)
   ========================================= */
a:link, 
a:visited {
    /* Twój neonowy teal (turkus), wygląda obłędnie na czarnym tle */
    color: var(--color-qbi-turquoise); 
    text-decoration: none; /* Pozbywamy się brzydkiego podkreślenia */
    transition: color 0.3s ease; /* Płynna zmiana przy najechaniu */
}

/* Opcjonalnie: mała przyprawa na hover, żeby link reagował na myszkę */
a:hover, 
a:active {
    color: var(--color-qbi-pink); /* Przy najechaniu zaświeci na różowo! */
    text-decoration: underline; 
}

/* =========================================
   Standardowy wygląd logo (Podstrony)
   ========================================= */
/* Standardowy wygląd logo (Podstrony) */
.qbiton-logo-container {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    flex-shrink: 0;
    border: 5px solid var(--color-qbi-indigo) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: var(--color-black) !important;
    
    z-index: 99 !important; 
    cursor: pointer !important; 
    pointer-events: auto !important; 
    
    /* --- BRAKUJĄCY SILNIK ANIMACJI --- */
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =========================================
   NAKŁADANIE WIDEO NA OBRAZEK (Magia Hovera)
   ========================================= */
.logo-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative; 
}

/* Kładziemy statyczny obrazek i wideo dokładnie jedno na drugim */
.logo-static, .logo-animated {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    object-fit: cover; /* Gwarantuje, że obrazki wypełnią równe ramy */
}

.logo-animated {
    opacity: 0; /* Wideo domyślnie ukryte */
}

/* Włoska magia Mouse Over - podmieniamy warstwy */
.qbiton-logo-container:hover .logo-static {
    opacity: 0;
}

.qbiton-logo-container:hover .logo-animated {
    opacity: 1;
}

/* =========================================
   NAGŁÓWEK PODSTRON (Logo + Banner Sekcji)
   ========================================= */
.qbiton-top-bar {
    display: flex;
    align-items: center; /* To jest magia: Wyrównuje elementy idealnie do środka w pionie */
    justify-content: flex-start;
    padding: 20px;
    background-color: var(--color-black);
    border-bottom: 2px solid var(--color-qbi-indigo); /* Lekka linia odcinająca nagłówek od treści */
    gap: 20px; /* Odstęp między neonową nutą a napisem "ADRES" */
}

/* Ustawienie wysokości Twojego napisu */
.qbiton-section-banner {
    height: 60px; /* Zrównujemy z wysokością kontenera logo (.qbiton-logo-container ma 60px) */
    width: auto;  /* Pozwala obrazkowi zachować naturalne proporcje, zero spłaszczania! */
    display: block;
}

/* Baza dla treści poniżej */
.qbiton-page-content {
    padding: 40px 20px;
    max-width: 1200px; /* Zapobiega rozlewaniu się tekstu na kilometr na szerokich monitorach */
    margin: 0 auto; /* Centruje treść na ekranie */
}

/* Responsywność dla telefonów */
@media (max-width: 768px) {
    .qbiton-top-bar {
        padding: 15px;
        gap: 15px;
    }
    
    /* Na bardzo małych ekranach lekko zmniejszamy logo i banner */
    .qbiton-logo-container { width: 50px !important; height: 50px !important; }
    .qbiton-section-banner { height: 50px; }
}

/* =========================================
   ODBLOKOWANIE PRZEWIJANIA (Ważne!)
   ========================================= */
body {
    overflow-y: auto !important; /* Gwarantuje, że strona zawsze będzie się przewijać */
    overflow-x: hidden; /* Ukrywa pasek poziomy, by strona nie latała na boki */
}

/* =========================================
   UKŁAD DWUKOLUMNOWY DLA ARTYKUŁÓW
   ========================================= */
.qbiton-two-column-layout {
    display: flex;
    gap: 50px;
    flex-wrap: wrap; /* Pozwala kolumnom spaść jedna pod drugą na telefonach */
    align-items: flex-start; /* Ważne dla działania Sticky Sidebar */
}

.qbiton-main-column {
    flex: 2; /* Główna treść zajmuje 2/3 szerokości */
    min-width: 300px; /* Zabezpieczenie przed zgnieceniem tekstu */
}

.qbiton-side-column {
    flex: 1; /* Sidebar zajmuje 1/3 szerokości */
    min-width: 250px;
    background-color: #080a14;
    padding: 25px;
    border: 1px solid var(--color-qbi-indigo);
    border-radius: 15px;
    
    /* MAGIA STICKY: Menu zjeżdża w dół razem z Tobą podczas czytania! */
    position: sticky;
    top: 20px; 
}

/* Upiększenie listy linków bocznych */
.qbiton-sidebar-links {
    list-style-type: none;
    padding: 0;
}

.qbiton-sidebar-links li {
    margin-bottom: 10px;
}

.qbiton-sidebar-links a {
    color: var(--color-qbi-turquoise);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.qbiton-sidebar-links a:hover {
    color: var(--color-qbi-pink);
}

/* =========================================
   RESPONSYWNE WIDEO (YouTube Fix)
   ========================================= */
.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Idealne proporcje 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 15px;
    border: 2px solid var(--color-qbi-indigo);
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Jeśli nie masz jeszcze zdefiniowanej tej zmiennej, dodaj to na samej górze pliku CSS:
:root {
    --color-qbi-turquoise: #40E0D0; /* Podmień na swój dokładny kod HEX turkusu */
}
*/

/* 1. Baza dla linku (usuwamy domyślne linie) */
.qbi-offer {
    display: inline-block; /* Żeby transformacje działały poprawnie */
    text-decoration: none;
    border-bottom: none !important; /* Zapobiega podkreślaniu obrazka w HTML5 UP */
    outline: none;
}

/* 2. Przygotowanie obrazka do mutacji (płynne przejście) */
.qbi-offer img {
    transition: all 0.3s ease-in-out;
}

/* 3. Efekt podświetlenia (Highlight) po najechaniu myszką */
.qbi-offer:hover img {
    /* Zergowa poświata dopasowująca się do kształtu przezroczystego PNG */
    filter: drop-shadow(0px 0px 12px var(--color-qbi-turquoise));
    
    /* Opcjonalnie: lekkie powiększenie obrazka dla lepszego odczucia klikalności */
    transform: scale(1.08); 
}

/* Przycisk Zablokowany */
.qbi-btn-disabled {
    background-color: rgba(255, 255, 255, 0.1); /* Bardzo blade, martwe tło */
    color: rgba(255, 255, 255, 0.3); /* Mocno wyszarzony tekst */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    cursor: not-allowed; /* Kursor zmienia się na znak zakazu */
    display: inline-block;
}

/* Brak efektu hover, bo jest wyłączony */
.qbi-btn-disabled:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}