/* ============================================== */
/* === 1. ZMIENNE I SETUP === */
/* ============================================== */
:root {
    --text-dark:  #060C12;
    --text-light: #FAFCFF;
    --color-yellow: #F7D18E;
    --color-white:  #FFFFFF;
    --color-navy:   #1D2B45;
    
    --font-heading: 'Playfair Display', serif;
    --font-body:    'Montserrat', sans-serif;
    
    /* DEFINICJA SZEROKOŚCI TREŚCI */
    /* To jest ta "niewidzialna ramka" na środku ekranu */
    --content-max-width: 1440px; 
    /* Domyślny margines dla mniejszych ekranów (laptop) */
    --default-padding: 72px; 
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden; /* Zapobiega paskom przewijania na boki */
}

/* ============================================== */
/* === 2. TYPOGRAFIA === */
/* ============================================== */
h1 {
    font-family: var(--font-heading);
    color: var(--color-navy);
    font-size: 48px;
    margin-bottom: 16px;
}

/* ==========================================================================
   3. NAWIGACJA (NAVBAR - GLOBALNE / DESKTOP)
   ========================================================================== */

/* 1. Ustawienia podstawowe Paska (Desktop - domyślnie) */
.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 154px; /* Wysokość Desktop */
    
    padding: 0 var(--default-padding); /* 72px */
    
    background-color: rgba(250, 252, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    z-index: 10000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    
    transition: all 0.4s ease;
}

/* 2. Linki Desktopowe */
.nav-group {
    list-style: none;
    display: flex;
    gap: 64px;
    flex: 1;
}
.nav-group.left { justify-content: flex-start; }
.nav-group.right { justify-content: flex-end; }

.nav-group a {
    text-decoration: none;
    color: var(--color-navy);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s;
}
.nav-group a:hover { opacity: 0.7; }

/* 3. Logo Desktop */
.logo-container {
    flex: 0 0 auto;
    margin: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.desktop-logo {
    height: 100px;
    width: auto;
    display: block;
    transition: all 0.4s ease;
}

/* 4. Navbar po Scrollu (Desktop) */
.navbar.scrolled {
    height: 100px !important;
    background-color: #FAFCFF !important;
    opacity: 1 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-bottom: none;
}
.navbar.scrolled .desktop-logo {
    filter: brightness(0) !important;
    opacity: 0.8;
}
.navbar.scrolled .nav-group a,
.navbar.scrolled .lang-switch,
.navbar.scrolled .lang-switch a {
    color: #1D2B45 !important;
}

/* Navbar po scrollingu dla our-place i about-us - węższy i opacity 100% */
header.hero-our-place .navbar.scrolled,
header.hero-about-us .navbar.scrolled {
    /* Zachowujemy tylko pełną nieprzezroczystość i kolor tła jak na innych stronach */
    opacity: 1 !important;
    background-color: #FAFCFF !important;
}

/* 5. Przełącznik języka (Desktop) */
.lang-switch {
    margin-left: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-navy);
}

/* --- KLUCZOWE: UKRYWANIE ELEMENTÓW MOBILNYCH NA DESKTOPIE --- */
/* To naprawia problem nakładania się menu */
.mobile-burger, 
.mobile-menu-overlay, 
.mobile-logo {
    display: none !important; 
}


/* ==========================================================================
   MOBILE NAVBAR & MENU (WERSJA PANCERNA - DZIAŁAJĄCA)
   ========================================================================== */

/* Ukrywanie na Desktopie */
.mobile-burger, 
.mobile-menu-overlay,
.mobile-logo {
    display: none !important;
}

/* --- TYLKO MOBILE (poniżej 768px) --- */
@media (max-width: 768px) {
    
    /* 1. PASEK NAWIGACJI */
    .navbar {
        height: 78px !important;
        padding: 0 24px !important; 
        display: flex;
        justify-content: space-between !important;
        align-items: center;
        background-color: rgba(250, 252, 255, 0.7); /* #FAFCFF z opacity 70% */
        backdrop-filter: blur(5px);
        transition: background-color 0.3s ease;
        /* Navbar musi być niżej niż otwarte menu, ale wyżej niż treść */
        z-index: 10000 !important;
        position: fixed !important; /* Musi być fixed */
    }

    .navbar.scrolled {
        height: 78px !important; /* ta sama wysokość po scrollu */
        background-color: rgba(250, 252, 255, 1) !important; /* pełna opacity po scrollowaniu */
    }

    /* 2. UKRYWAMY DESKTOP */
    .desktop-only, 
    .desktop-logo {
        display: none !important; 
    }

    /* 3. LOGO MOBILNE */
    .logo-container {
        margin: 0 !important; 
        padding: 0;
        flex: 0 0 auto; 
    }

    .mobile-logo {
        display: block !important; 
        max-height: 60px !important; /* zwiększone o 50% z 40px */
        width: auto !important;
    }

    /* 4. BURGER MENU (PRZYCISK OTWIERANIA) */
    .mobile-burger {
        display: block !important; 
        width: 32px;
        height: 32px;
        cursor: pointer;
        
        /* KLUCZOWE: Musi być klikalny! */
        position: relative; 
        z-index: 10001 !important; 
        
        margin-left: auto; 
    }
    
    .mobile-burger img {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none; /* Żeby kliknięcie w obrazek nie psuło eventu na divie */
    }

    /* 5. OVERLAY MENU (TŁO) */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        
        background-color: #064C65; /* Ciemne tło */
        
        /* Overlay jest NAJWYŻEJ */
        z-index: 20005 !important; 
        
        /* Flexbox do układania treści */
        display: flex;
        flex-direction: column;
        
        /* WYRÓWNANIE DO LEWEJ */
        align-items: flex-start !important; 
        text-align: left !important;
        
        padding-top: 30px;
        padding-left: 24px !important;
        
        /* STAN ZAMKNIĘTY: */
        opacity: 0;
        pointer-events: none; /* Nie blokuje klikania pod spodem */
        visibility: hidden;   /* Element znika całkowicie */
        
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* STAN OTWARTY (.active) */
    .mobile-menu-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important; /* Teraz można klikać w linki */
        visibility: visible !important;  /* Teraz widać element */
    }

    /* 6. PRZYCISK ZAMKNIJ (X) */
    .mobile-menu-close {
        position: absolute;
        top: 24px;   
        right: 24px; 
        width: 32px;
        height: 32px;
        cursor: pointer;
        
        /* Musi być na wierzchu wewnątrz overlay */
        z-index: 20010 !important; 
        display: block !important;
    }
    
    .mobile-menu-close img {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* 7. LISTA LINKÓW */
    .mobile-links-list {
        list-style: none;
        padding: 0;
        margin: 0;
        
        /* Odstęp od góry (80px + mała korekta, żeby nie weszło na X) */
        margin-top: 80px; 
        
        display: flex;
        flex-direction: column;
        
        align-items: flex-start !important; 
        justify-content: flex-start !important;
        
        /* ODSTĘPY 24px MIĘDZY WSZYSTKIM */
        gap: 24px !important; 
    }

    .mobile-links-list li {
        width: 100%; /* Żeby link był szeroki */
    }

    .mobile-links-list li a {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        line-height: 145%;
        color: #FAFCFF;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        display: block;
        text-align: left;
    }
    
    .mobile-links-list li a:hover {
        font-weight: 700;
    }
    
    /* 8. GRUPA JĘZYKOWA */
    .mobile-lang-group {
        display: flex;
        gap: 24px; /* Odstęp między IT a PL */
        margin-top: 0 !important; /* Żadnych dodatkowych marginesów */
        padding: 0;
    }
}
/* ==========================================================================
   GLOBALNA SEKCJA HERO (WSZYSTKIE STRONY) - FINALNA WERSJA
   ========================================================================== */

/* 1. BAZOWY STYL KONTENERA (DESKTOP) */
header.hero {
    position: relative;
    
    /* WAŻNE: 100vw zamiast 100% - to samo co navbar (fixed) */
    /* Dzięki temu padding-right: calc(100vw...) działa tak samo jak w navbar */
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2); /* Kompensacja dla scrollbara */
    
    /* Wysokość startowa: 100% ekranu */
    height: 100vh; 
    min-height: 600px;
    
    /* Ustawienia tła (Wspólne dla wszystkich) */
    background-size: cover;
    background-repeat: no-repeat;
    /* Fixed na desktopie daje efekt elegancji (tło stoi, treść wjeżdża) */
    background-attachment: fixed; 
    
    /* USTAWIENIA POZYCJI TEKSTU (FLEXBOX) */
    display: flex;
    /* 1. W poziomie: dopychamy boks do prawej */
    justify-content: flex-end; 
    /* 2. W pionie: centrujemy w widocznej sekcji pod navbarem */
    align-items: center; 
    
    /* MARGINESY (Wyrównanie do linii języków w menu) */
    padding-right: 72px; /* Musi być identyczny jak padding-right w .navbar */
    padding-top: 154px;  /* Miejsce na navbar */
    padding-bottom: 0;
    
    /* Płynna animacja wysokości */
    transition: height 0.5s ease-in-out;
    
    overflow: hidden;
}

/* 2. ZACHOWANIE PO SCROLLOWANIU (DESKTOP) */
header.hero.scrolled {
    /* Sekcja zmniejsza się do 55% ekranu. 
       Dzięki 'align-items: center' tekst płynnie przesunie się 
       do nowego środka widocznego obszaru. */
    height: 55vh; 
}

/* 3. WARSTWA PRZYCIEMNIAJĄCA (OVERLAY) */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.18); /* Przyciemnienie 18% */
    z-index: 1;
}

/* Dodatkowe przyciemnienie o ~15% tylko dla stron location (EN / IT / PL) */
header.hero-location .hero-overlay {
    background-color: rgba(0, 0, 0, 0.33);
}

/* 4. KONTENER TEKSTU (BOKS) */
.hero-content {
    position: relative;
    z-index: 2;
    
    /* WYMIARY BOKSU */
    width: 100%;
    max-width: 548px; 
    
    /* Tekst wewnątrz boksu wyśrodkowany */
    text-align: center; 
    
    /* WYRÓWNANIE DO PRAWEJ - margin-left: auto pcha element w prawo */
    margin-left: auto;
    margin-right: 0;
    
    /* Delikatna animacja dla płynności */
    transition: all 0.5s ease;
}

/* 5. TYPOGRAFIA (NAGŁÓWKI) */
.hero h1 {
    font-family: 'Playfair Display', serif; /* Font szeryfowy */
    font-weight: 400; /* Regular */
    font-size: 56px;  /* Desktop: 56px */
    line-height: 1.2;
    margin-bottom: 0;
    color: #FAFCFF; 
}

.hero-subtitle {
    font-family: 'Montserrat', sans-serif; /* Font bezszeryfowy */
    font-weight: 500;
    font-size: 16px;  /* Rozmiar 16px */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px; /* Odstęp od H1 */
    display: block;
    color: #FAFCFF;
}

/* ============================================== */
/* === DEFINICJE ZDJĘĆ TŁA DLA PODSTRON (DESKTOP) === */
/* ============================================== */

/* 1. HOMEPAGE (Dół bardziej widoczny) */
header.hero-homepage {
    background-image: url('assets/photos/phot_homepage_desktop.jpg');
    background-position: center 90%; /* 90% wysokości = widać dół */
}

/* 2. ABOUT US (Dół bardziej widoczny) */
header.hero-about-us {
    background-image: url('assets/photos/photo_about_us_desktop.jpg');
    background-position: center 90%; 
}

/* 3. AREA (Dół bardziej widoczny) */
header.hero-area {
    background-image: url('assets/photos/photo_area_desktop.jpg');
    background-position: center 90%; 
}

/* 4. OUR PLACE (Standardowy środek) */
header.hero-our-place {
    background-image: url('assets/photos/phot_our_place_desktop.jpg');
    background-position: center center;
}

/* 5. LOCATION (Standardowy środek) */
header.hero-location {
    background-image: url('assets/photos/photo_location_desktop.jpg');
    background-position: center 95%; /* Jeszcze wyżej - pokazuje maksymalnie dolną część zdjęcia */
    /* Wyłączamy animację wysokości i fixed attachment dla location - zapobiega "odskakiwaniu" */
    transition: none !important;
    background-attachment: scroll !important;
}

/* Wyłączamy animację wysokości przy scrollowaniu dla location */
header.hero-location.scrolled {
    height: 100vh !important; /* Zostaje na pełnej wysokości */
}

/* W mobile wyłączamy całkowicie zmiany wysokości dla location */
@media (max-width: 768px) {
    header.hero-location {
        height: 65vh !important;
        min-height: 400px;
    }
    
    header.hero-location.scrolled {
        height: 65vh !important;
        min-height: 400px;
    }
}

/* 6. CONTACT (Standardowy środek) */
header.hero-contact {
    background-image: url('assets/photos/photo_contact_desktop.jpg');
    background-position: center center;
}


/* ============================================== */
/* === WERSJA MOBILNA (max-width: 768px) === */
/* ============================================== */
@media (max-width: 768px) {
    
    /* RESET DLA WSZYSTKICH HERO NA MOBILE */
    header.hero {
        /* Wyłączamy fixed - to naprawia skakanie na telefonach! */
        background-attachment: scroll !important;
        
        /* Reset szerokości z desktopu */
        width: 100% !important;
        margin-left: 0 !important;
        
        /* Sztywna wysokość */
        height: 65vh !important;
        min-height: 400px;
        
        /* Wyśrodkowanie treści na ekranie */
        justify-content: center !important;
        align-items: center !important;
        
        /* Reset marginesów desktopowych */
        padding-right: 20px !important;
        padding-left: 20px !important;
        padding-top: 0 !important;
        
        /* Wyłączamy animacje wysokości */
        transition: none !important;
    }

    /* TYPOGRAFIA MOBILE */
    .hero h1 {
        font-size: 32px !important; /* Mobile: 32px */
    }
    
    .hero-content {
        /* Na mobile centrujemy - resetujemy margin-left: auto */
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* PODMIANA ZDJĘĆ NA WERSJE MOBILNE */
    
    header.hero-homepage {
        background-image: url('assets/photos/photo_homepage_mobile.jpg') !important;
        background-position: center top !important;
    }

    header.hero-about-us {
        background-image: url('assets/photos/photo_about_us_mobile.jpg') !important;
        background-position: center top !important;
    }

    header.hero-area {
        background-image: url('assets/photos/photo_area_mobile.jpg') !important;
        background-position: center top !important;
    }

    header.hero-our-place {
        background-image: url('assets/photos/photo_our_place_mobile.jpg') !important;
        background-position: center top !important;
    }

    header.hero-location {
        background-image: url('assets/photos/photo_location_desktop.jpg') !important;
        background-position: center 95% !important; /* Jeszcze wyżej - pokazuje maksymalnie dolną część na mobile */
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    header.hero-contact {
        background-image: url('assets/photos/photo_conta_mobile.jpg') !important;
        background-position: center top !important; /* hero przesunięty pod navbar */
    }
}
/* ============================================== */
/* === 7. SEKCJA TEKSTOWA POD HERO === */
/* ============================================== */
.intro-text-section {
    background-color: #FAFCFF;
    position: relative;
    z-index: 2;
    
    padding-top: 64px;
    padding-bottom: 64px;
    
    /* Domyślny padding boczny */
    padding-left: 186px;
    padding-right: 186px;
    
    text-align: left;
}

/* Stylizacja tekstu */
.intro-text-container p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
    color: var(--text-dark);
    text-transform: none;
    max-width: 1200px;
    margin: 0 auto; /* Centrowanie kontenera */
    
    /* === TO TWORZY PRZERWĘ === */
    /* Dodajemy odstęp pod każdym akapitem */
    margin-bottom: 24px; 
}

/* Opcjonalnie: Usuwamy odstęp pod ostatnim akapitem, żeby nie odpychał za mocno guzików */
.intro-text-container p:last-of-type {
    margin-bottom: 0;
}

/* ============================================== */
/* === 8. STOPKA (FOOTER) === */
/* ============================================== */
.footer {
    background-color: #064C65;
    color: var(--text-light);
    
    padding-top: 36px;
    padding-bottom: 36px;
    /* Padding boczny domyślny */
    padding-left: var(--default-padding);
    padding-right: var(--default-padding);
    
    width: 100%;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    
    /* ZMIANA: Centrujemy elementy w pionie. */
    /* Teraz środek Logo będzie w jednej linii ze środkiem tekstów */
    align-items: center; 
    
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.footer-logo img {
    height: 140px;
    width: auto;
    display: block;
}

.footer-info {
    display: flex;
    gap: 60px;
    text-align: center;
    
    /* ZMIANA: Usuwamy margines górny (zmieniamy na 0), żeby tekst nie był wypychany sztucznie w dół */
    margin-top: 0; 
}

/* Nowy układ stopki: tytuły i wartości w dwóch liniach (IT / PL) */
.footer-info.footer-info-inline {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
}

.footer-info.footer-info-inline .footer-info-row {
    display: flex;
    gap: 40px;
}

.footer-info-col {
    display: flex;
    flex-direction: column;
    align-items: center;   /* nagłówek i tekst pod spodem wyśrodkowane względem siebie */
    text-align: center;
    gap: 4px;
}

.footer-info-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 145%;
    color: #FAFCFF;
}

.footer-info-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
    color: #FAFCFF;
}

/* Link do emaila w stopce – ten sam kolor co tekst stopki */
/* Link do emaila w stopce – ten sam kolor co tekst stopki (dla wszystkich wariantów struktur) */
.footer a[href^="mailto:"] {
    color: #FAFCFF;
    text-decoration: underline;
}

.footer-links-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-links-inline a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
    color: #FAFCFF;
    text-decoration: none;
}

.footer-links-inline a:hover {
    text-decoration: underline;
}

.info-group h4, .footer-links h4 {
    font-family: var(--font-body);
    
    /* ZMIANA: Semibold to 600 */
    font-weight: 600; 
    
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--text-light);
}

.info-group p, .footer-links a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    opacity: 0.9;
    color: var(--text-light);
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-links h4 {
    margin-bottom: 0;
    white-space: nowrap;
}

.footer-links ul {
    list-style: none;
    display: flex;
    gap: 32px;
    padding: 0;
    margin-top: 8px;
}

.footer-links a { text-decoration: none; transition: opacity 0.3s; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }

/* ============================================================= */
/* === 9. DUŻE EKRANY (Desktop > 1600px) - KUMULACJA W ŚRODKU === */
/* ============================================================= */

/* Tutaj dzieje się magia! Jeśli ekran jest szerszy niż ~1600px: */
@media (min-width: 1600px) {
    
    /* 1. NAVBAR - Ściskamy zawartość do środka */
    .navbar {
        /* Obliczamy padding: (Szerokość ekranu - 1440px) / 2 */
        padding-left: calc((100vw - var(--content-max-width)) / 2);
        padding-right: calc((100vw - var(--content-max-width)) / 2);
    }

    /* 2. HERO - Tekst nie ucieka do prawej, tylko trzyma się linii 1440px */
    /* WAŻNE: Używamy header.hero dla wyższej specyficzności (przebija bazowy styl) */
    header.hero {
        /* Tło zostaje na 100%, ale padding prawy rośnie */
        padding-right: calc((100vw - var(--content-max-width)) / 2);
        /* Bez padding-bottom - treść ma być na środku widocznej sekcji */
    }
    
    /* 3. HERO (SCROLLED) - Też musi trzymać ten sam margines */
    header.hero.scrolled {
        padding-right: calc((100vw - var(--content-max-width)) / 2) !important;
    }

    /* 4. INTRO TEXT - Zwiększamy paddingi, żeby tekst był w tej samej linii */
    .intro-text-section {
        /* Tekst już ma max-width 1200px, więc tutaj tylko centrujemy paddingi */
        padding-left: calc((100vw - var(--content-max-width)) / 2);
        padding-right: calc((100vw - var(--content-max-width)) / 2);
    }

    /* 5. FOOTER - Ściskamy zawartość */
    .footer {
        padding-left: calc((100vw - var(--content-max-width)) / 2);
        padding-right: calc((100vw - var(--content-max-width)) / 2);
    }
}
/* ============================================== */
/* === PRZYCISKI W SEKCJI INTRO (POPRAWIONE) === */
/* ============================================== */

/* Kontener na przyciski */
.intro-buttons {
    display: flex;
    align-items: center;
    /* ZMIANA: Wyśrodkowanie przycisków na stronie */
    justify-content: center; 
    
    margin-top: 48px;
    gap: 92px; /* Odstęp między przyciskami */
}

/* Wspólne style dla obu przycisków */
.btn-intro {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ZMIANA: Nowa szerokość z Figmy */
    width: 206px; 
    height: 40px;
    
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 145%;
    
    transition: opacity 0.3s ease;
}

/* Reszta stylów (.btn-intro:hover, .btn-yellow, .btn-outline) bez zmian... */
.btn-intro:hover, .btn-intro:active { opacity: 0.7; }

.btn-yellow {
    background-color: #F7D18E;
    color: #060C12;
    border: none;
    text-transform: uppercase;
}

.btn-outline {
    background-color: #FAFCFF;
    border: 1px solid #F7D18E;
    color: var(--color-navy);
    gap: 10px;
}

.btn-icon { height: 20px; width: auto; }

/* RESPONSYWNOŚĆ (Mobile) */
@media (max-width: 768px) {
    .intro-buttons {
        flex-direction: column;
        margin-top: 32px;
        gap: 32px;
    }
    .btn-intro {
        /* Na mobile szerokość 345px (lub 100% minus paddingi) */
        width: 345px; 
    }
}

/* ============================================== */
/* === RESPONSYWNOŚĆ PRZYCISKÓW (MOBILE) === */
/* ============================================== */

@media (max-width: 768px) {
    .intro-buttons {
        /* Układamy jeden pod drugim */
        flex-direction: column;
        
        /* Odstęp od tekstu (32px) */
        margin-top: 32px;
        
        /* Odstęp między przyciskami (32px) */
        gap: 32px;
    }

    .btn-intro {
        /* Zmieniamy szerokość na 345px */
        width: 345px;
        /* Wysokość zostaje 40px */
    }
}

/* ============================================== */
/* === 10. MNIEJSZE EKRANY (RESPONSYWNOŚĆ) === */
/* ============================================== */

/* Tablet / Laptop (poniżej 1400px) */
@media (max-width: 1400px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .footer-info {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-info.footer-info-inline .footer-info-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
    }
}

/* Mobile (poniżej 768px) */
@media (max-width: 768px) {
    .nav-group, .btn-primary { display: none; }
    .navbar { justify-content: center; padding: 0 20px; }
    
    .hero {
        justify-content: center;
        align-items: center;
        padding-bottom: 0;
        padding-right: 0;
    }
    /* Na mobile anulujemy duży margines prawy */
    .hero, .hero.scrolled { padding-right: 0 !important; }
    
    .hero h1 { font-size: 2.5rem; }
    
    .intro-text-section {
        padding: 40px 24px;
    }
    
    .footer { padding: 40px 20px; }
    .footer-info { flex-direction: column; gap: 30px; }
    .footer-links ul { flex-direction: column; gap: 15px; }

    /* Większy odstęp między blokami: Adres / Email / Numer / Szybkie linki w mobile */
    .footer-info.footer-info-inline .footer-info-row {
        gap: 24px; /* było 16px, zwiększone */
    }

    /* Delikatnie większy odstęp między nagłówkiem a tekstem w kolumnach stopki (mobile) */
    .footer-info-col {
        gap: 8px; /* było 4px, lekko zwiększone tylko na mobile */
    }

    /* Szybkie linki w stopce (wariant inline) jeden pod drugim w mobile */
    .footer-links-inline {
        flex-direction: column;
        align-items: center;
        gap: 16px; /* było 8px, zwiększone */
    }

    /* Typografia stopki w mobile: nagłówki 14px bold, tekst 14px regular */
    .footer-info-heading,
    .info-group h4,
    .footer-links h4 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 145%;
    }

    .footer-info-value,
    .info-group p,
    .footer-links a,
    .footer-links-inline a {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 145%;
    }
}
/* ============================================== */
/* === DEKORACYJNE RYBKI (INTRO - FINAL) === */
/* ============================================== */

.intro-text-section {
    position: relative; 
    overflow: hidden; 
}

.fish-decor {
    position: absolute;
    z-index: 1;
    opacity: 0.1;
    pointer-events: none;
    width: 300px;
    height: auto;
}

/* --- RYBKA LEWA (NA SAMYM DOLE, BLISKO ŚRODKA) --- */
.fish-left {
    top: auto;
    bottom: 20px;    
    
    /* ZMIANA: Zmniejszyliśmy 880px na 750px. 
       Rybka przesuwa się o 130px bliżej środka ekranu. */
    left: calc(50% - 750px);      
    
    transform: scaleX(-1); /* Patrzy w prawo */
}

/* --- RYBKA PRAWA (WYSOKO, BLISKO ŚRODKA) --- */
.fish-right {
    top: 10px;       
    
    /* ZMIANA: Zmniejszyliśmy 880px na 750px. */
    right: calc(50% - 750px);
    
    transform: none; /* Patrzy w lewo */
}

/* --- POPRAWKA DLA LAPTOPÓW (Standardowe ekrany) --- */
/* Na ekranach mniejszych niż 1600px (zmniejszyłem próg z 1760px, bo rybki są bliżej środka) */
@media (max-width: 1600px) {
    .fish-left {
        /* ZMIANA: Było -40px, dajemy -10px. 
           Rybka wchodzi głębiej na ekran. */
        left: -10px; 
    }
    .fish-right {
        /* ZMIANA: Było -40px, dajemy -10px. */
        right: -10px; 
    }
}

/* --- MOBILE (UKRYWAMY) --- */
@media (max-width: 768px) {
    .fish-decor {
        display: none !important;
    }
}
/* ============================================== */
/* === STRONA: OUR PLACE === */
/* ============================================== */

/* 1. Nowe zdjęcie Hero dla tej podstrony */
.hero-our-place {
    /* Nadpisujemy zdjęcie z homepage */
    background-image: url('assets/photos/phot_our_place_desktop.jpg') !important;
}

/* 2. Zdjęcie po scrollowaniu dla Our Place */
/* UWAGA: Jeśli masz mniejszą wersję tego zdjęcia ("unrolled"), wpisz ją tutaj. */
/* Jeśli nie masz, zostawiamy to samo co wyżej */
.hero-our-place.scrolled {
    background-image: url('assets/photos/phot_our_place_desktop.jpg') !important;
    /* Ewentualnie: url('assets/photos/phot_our_place_unrolled.jpg') */
}

/* 3. Aktywny link w menu (Podkreślenie i kolor) */
.navbar .nav-group a.active {
    color: #064C65 !important; /* Twój kolor */
    font-weight: 700; /* Opcjonalnie: pogrubienie */
    
    /* Podkreślenie */
    border-bottom: 2px solid #064C65;
    padding-bottom: 4px; /* Odstęp kreski od tekstu */
}

/* Po scrollu (na białym tle) kolor też musi być widoczny */
.navbar.scrolled .nav-group a.active {
    color: #064C65 !important;
    border-bottom: 2px solid #064C65;
}
/* ============================================== */
/* === SEKCJA INFO CARDS (ŻÓŁTE KARTY) === */
/* ============================================== */

.info-section {
    padding-top: 80px;
    padding-left: 24px;
    padding-right: 24px;
    
    /* ZMIANA: Zmniejszamy dół do 0, bo odstęp zrobimy w sekcji niżej */
    padding-bottom: 0; 
    
    background-color: #FAFCFF; 
}

/* Reszta pozostaje bez zmian... */
.info-container {
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    gap: 40px;     
    justify-content: center;
}
/* Wygląd pojedynczej karty */
.info-card {
    background-color: #F9E4BC; /* Żółte tło kart */
    flex: 1; 
    padding: 60px 40px;
    border-radius: 20px;
    text-align: center;
    color: var(--color-navy);
}

/* Nagłówki w kartach */
.info-card h3 {
    font-family: var(--font-body);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 32px;
    color: var(--color-navy);
}

/* Opis w pierwszej karcie */
.info-desc {
    font-family: var(--font-body);
    line-height: 1.8;
    margin-bottom: 40px;
    font-size: 1rem;
    color: var(--text-dark);
}

/* Sekcja godzin Check-in / Check-out */
.check-times {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.time-box {
    display: flex;
    flex-direction: column;
}

.time-box .label {
    font-weight: 700;
    margin-bottom: 8px;
    
    /* ZMIANA: Zmieniamy 'uppercase' na 'none'. */
    /* Dzięki temu tekst wyświetli się tak, jak jest wpisany w HTML (Check-in) */
    text-transform: none; 
    
    font-size: 1 rem;
}

/* Lista detali w drugiej karcie */
.details-list {
    list-style: none;
    padding: 0;
    text-align: left;
    display: inline-block;
    width: 100%;
    max-width: 400px; 
}

.details-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 8px;
}

.detail-label {
    font-weight: 600;
}

.detail-content {
    display: flex;
    align-items: flex-start; /* Wyrównanie ikony do górnej linii tekstu */
    justify-content: flex-end; /* Wyrównanie do prawej */
    column-gap: 10px; /* Bazowy odstęp 10px */
}

/* Wycentrowanie ikony dla pojedynczych wartości (np. guests) */
.detail-content.icon-center {
    align-items: center;
}

/* Korekta pozycji ikony guests - lekko w górę */
.detail-content.icon-center .icon {
    margin-top: -2px;
}

/* Korekta dla ikony double bed - SVG ma dużo wewnętrznego paddingu */
.detail-content.icon-bed {
    gap: 8px !important; /* Odstęp 8px między ikoną a tekstem */
}

.detail-content.icon-bed .icon {
    position: static !important; /* reset przesunięcia */
    margin-right: 0 !important;
}

.detail-value {
    font-weight: 400;
    text-align: right; /* Wyrównanie do prawej */
    line-height: 1.3; /* Zmniejszona interlinia */
    margin: 0;
    padding: 0;
    width: max-content; /* Szerokość dopasowana do treści - ikona bliżej tekstu */
}

/* Tylko desktop: etykiety "Camera da letto 1/2" w jednej linii na stronie our-place-it */
@media (min-width: 769px) {
    .info-card-details-it .detail-label br {
        display: none;
    }
}

/* Ikony */
.icon {
    width: 24px;
    height: 24px;
    object-fit: contain; /* To zapobiega zniekształceniu ikon */
    flex-shrink: 0; /* Ikona nie zmniejsza się */
    padding: 0;
}

/* Responsywność */
@media (max-width: 900px) {
    .info-container {
        flex-direction: column; 
    }
    
    .info-card {
        padding: 40px 24px;
    }
    
    .check-times {
        gap: 30px;
    }
    
    /* Wyrównanie ikon i wartości do prawej na mobile */
    .detail-content {
        justify-content: flex-end;
    }
}
/* ============================================== */
/* === KOREKTA AMENITIES I NOWA SEKCJA GALLERY === */
/* ============================================== */

.amenities-section {
    position: relative; 
    overflow: hidden !important; 
    z-index: 1;
    
    background-color: #FAFCFF; 
    
    padding-top: 64px;
    padding-left: 24px;
    padding-right: 24px;
    
    /* ZMIANA: Ustawiamy dół na 64px. */
    /* To stworzy idealny odstęp do nagłówka "Gallery" poniżej */
    /* (Wcześniej było 80px) */
    padding-bottom: 64px !important; 
}

.gallery-section {
    background-color: #FAFCFF; /* To samo tło, żeby płynnie przeszło */
    
    /* Padding górny ZERO, bo odstęp 64px zrobiła nam sekcja wyżej */
    padding-top: 0;
    
    /* Padding dolny na przyszłość (dla zdjęć) */
    padding-bottom: 80px; 
    padding-left: 24px;
    padding-right: 24px;
}

/* Opcjonalnie: Kontener na przyszłe zdjęcia (na razie pusty) */
.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
}

.amenities-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2; /* Ciasna linia, żeby nie dodawać sztucznego odstępu */
    color: #064C65;
    text-align: center;
    text-transform: none;
    
    /* 2. ODSTĘP DOLNY (Od nagłówka do ikon) */
    /* Celujemy w wizualne 48px. */
    /* Dajemy 28px marginesu + ok. 20px pustego miejsca wewnątrz kafelka = ~48px */
    margin-bottom: 28px !important; 
    
    /* Resetujemy górę */
    margin-top: 0 !important;
}

.amenities-container {
    max-width: 1025px;
    margin: 0 auto;
    
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px 20px; 
    
    /* USUWAMY WSZYSTKIE UJEMNE MARGINESY - TO ONE PSUŁY SPÓJNOŚĆ */
    margin-top: 0 !important; 
}

/* Pojedyncza karta */
.amenity-item {
    width: 153px;
    height: 112px;
    flex: 0 0 153px; /* Sztywna szerokość */
    
    padding: 8px;
    
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center; /* To tworzy wewnętrzną pustkę na górze i dole */
    gap: 8px;
}

.amenity-item img {
    height: 48px;
    width: auto;
    display: block;
}

.amenity-item p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 145%;
    color: #064C65;
    text-align: center;
    white-space: nowrap;
}

/* === RESPONSYWNOŚĆ === */
@media (max-width: 1100px) {
    .amenities-container {
        max-width: 100%; 
    }
}

/* --- MOBILE (Telefony) --- */
@media (max-width: 768px) {
    .amenities-title {
        /* Na telefonie zmniejszamy odstępy o połowę */
        margin-bottom: 16px !important;
        font-size: 24px; 
    }
    
    .amenities-section {
        /* Mniejszy odstęp od żółtych boksów na telefonie */
        padding-top: 40px; 
    }
}
/* ============================================== */
/* === RYBKI W SEKCJI AMENITIES (FINALNE ROZWIĄZANIE) === */
/* ============================================== */

.amenities-section {
    position: relative; 
    
    /* KLUCZOWA ZMIANA: Zmieniamy na 'visible'. */
    /* Dzięki temu rybki mogą wystawać poza granice sekcji i nie zostaną ucięte */
    overflow: visible !important; 
    
    /* Ustawiamy bazowy indeks */
    z-index: 1; 
}

/* Styl rybek */
.fish-decor {
    position: absolute;
    
    /* ZMIANA: Bardzo wysoki indeks, żeby pływały NAD wszystkim (tłem i ikonami) */
    z-index: 100; 
    
    opacity: 0.1; 
    pointer-events: none; /* Kliknięcia przenikają przez rybki */
    width: 300px;
    height: auto;
}

/* --- RYBKA LEWA (DOLNY LEWY RÓG) --- */
.fish-grid-left {
    top: auto;
    
    /* Ustawiamy ją tak, by wystawała dołem, ale była widoczna. */
    /* Skoro usunęliśmy 'overflow: hidden', teraz będzie ją widać! */
    bottom: 50px;       
    
    /* Odległość od środka */
    left: calc(50% - 720px); 
    
    transform: scaleX(-1); /* Patrzy w prawo */
}

/* --- RYBKA PRAWA (GÓRNY PRAWY RÓG) --- */
.fish-grid-right {
    /* Ustawiamy na górze, przy tytule */
    top: 10px;         
    bottom: auto;
    
    /* Odległość od środka */
    right: calc(50% - 720px);
    
    transform: none; /* Patrzy w lewo */
}

/* --- POPRAWKA DLA LAPTOPÓW --- */
@media (max-width: 1500px) {
    .fish-grid-left {
        left: -40px; 
    }
    .fish-grid-right {
        right: -40px; 
    }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .fish-decor {
        display: none !important;
    }
}
/* ============================================== */
/* === SEKCJA GALLERY (Grid zdjęć) === */
/* ============================================== */

/* Kontener galerii */
.gallery-container {
    /* Zwiększamy max-width, żeby pomieścić szeroki układ zdjęć (ok. 1300px) */
    max-width: 1300px; 
    margin: 0 auto;
}

/* Siatka (Grid) */
.gallery-grid {
    display: grid;
    /* KLUCZ DO SUKCESU: Tworzymy 6 równych kolumn */
    grid-template-columns: repeat(6, 1fr);
    /* Ustalamy sztywną wysokość rzędów zgodnie z projektem (281px) */
    grid-auto-rows: 281px;
    /* Odstęp między zdjęciami (32px) */
    gap: 32px;
}

/* Pojedynczy kafel ze zdjęciem */
.gallery-item {
    position: relative;
    overflow: hidden; /* Na wypadek gdyby zdjęcie wystawało */
    border-radius: 4px; /* Opcjonalnie: lekkie zaokrąglenie rogów */
}

/* --- Klasy definiujące szerokość --- */

/* Zdjęcie poziome (zajmuje 2 z 6 kolumn) */
.gallery-item.horizontal {
    grid-column: span 2;
}

/* Zdjęcie pionowe (zajmuje 1 z 6 kolumn) */
.gallery-item.vertical {
    grid-column: span 1;
}

/* Stylizacja samego obrazka wewnątrz kafla */
.gallery-item img {
    width: 100%;
    height: 100%;
    /* KLUCZOWE: 'cover' sprawia, że zdjęcie wypełnia cały kafel bez zniekształceń (zostanie przycięte jeśli proporcje są inne) */
    object-fit: cover; 
    display: block;
    transition: transform 0.3s ease; /* Opcjonalnie: płynne powiększanie */
}

/* Opcjonalnie: Efekt po najechaniu myszką */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* --- RESPONSYWNOŚĆ --- */

/* Na tabletach (poniżej 1024px) zmieniamy układ na prostszy (2 kolumny) */
@media (max-width: 1024px) {
    .gallery-grid {
        /* Zmieniamy na 2 kolumny */
        grid-template-columns: repeat(2, 1fr);
        /* Pozwalamy rzędom dopasować wysokość automatycznie */
        grid-auto-rows: auto;
        gap: 16px; /* Mniejszy odstęp */
    }

    /* Na tablecie wszystkie zdjęcia zajmują po 1 (z 2) kolumn */
    .gallery-item.horizontal,
    .gallery-item.vertical {
        grid-column: span 1;
        height: 300px; /* Ustalamy jakąś rozsądną wysokość na tablecie */
    }
}

/* ============================================== */
/* === GALERIA MOBILE (Poprawione marginesy) === */
/* ============================================== */

@media (max-width: 768px) {
    
    /* 1. Nagłówek Galerii */
    .gallery-section .amenities-title {
        font-size: 25px !important;      /* Rozmiar 25px */
        margin-bottom: 16px !important;  /* Odstęp 16px od siatki */
    }

    /* 2. Marginesy boczne sekcji */
    .gallery-section {
        /* ZMIANA: Zmniejszamy z 72px na 25px */
        padding-left: 25px !important;
        padding-right: 25px !important;
        
        padding-bottom: 60px !important;
    }

    /* 3. Siatka (Grid) - 2 kolumny */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px; /* Odstęp między zdjęciami */
        grid-auto-rows: auto; 
    }

    /* 4. Wygląd zdjęć */
    .gallery-item.horizontal,
    .gallery-item.vertical {
        grid-column: span 1;
        /* Ustawiamy sztywną wysokość ok. 163px */
        height: 163.4px; 
        width: 100%;
    }
}

/* ============================================== */
/* === LIGHTBOX CSS (POPRAWIONY) === */
/* ============================================== */

.lightbox {
    position: fixed;
    z-index: 20000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 12, 18, 0.85);
    
    /* KLUCZOWE DLA MOBILE: Blokuje przewijanie strony pod spodem */
    touch-action: none;
    
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 85%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    object-fit: contain;
    
    /* DODAJ TO: Płynne przejście przy zmianie zdjęcia */
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

/* Klasa pomocnicza do animacji zmiany zdjęcia */
.lightbox-content img.fade-out {
    opacity: 0.5;
}

/* --- PRZYCISK ZAMKNIJ (X) --- */
.close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    
    /* ZMIANA: Zmniejszamy na Desktopie do 30px (żeby pasował do strzałek) */
    width: 30px;
    height: 30px;
    
    cursor: pointer;
    z-index: 20005; 
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('assets/ikony/ui_close_initial_desktop.svg');
    transition: transform 0.1s;
}

.close-btn:active {
    background-image: url('assets/ikony/ui_close_pressed_desktop.svg');
    transform: scale(0.9);
}

/* --- STRZAŁKI NAWIGACJI (Styl BAZOWY - Desktop) --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* ROZMIAR DESKTOP: 30px */
    width: 30px;
    height: 30px;
    
    cursor: pointer;
    z-index: 20005;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent; /* Brak tła na desktopie */
    
    transition: transform 0.1s, opacity 0.2s;
}

.nav-btn:active {
    transform: translateY(-50%) scale(0.9);
}

/* Pozycja strzałek na Desktopie (Szeroko) */
.prev-btn { 
    left: 40px; 
    background-image: url('assets/ikony/ui_arrow_left_initial_desktop.svg'); 
}
.prev-btn:active { 
    background-image: url('assets/ikony/ui_arrow_left_pressed_desktop.svg'); 
}

.next-btn { 
    right: 40px; 
    background-image: url('assets/ikony/ui_arrow_right_initial_desktop.svg'); 
}
.next-btn:active { 
    background-image: url('assets/ikony/ui_arrow_right_pressed_desktop.svg'); 
}


/* === MOBILE (Telefony - poniżej 768px) === */
@media (max-width: 768px) {
    
    .lightbox-content { max-width: 100%; }
    .lightbox-content img { max-height: 70vh; border-radius: 0; }

    /* --- CLOSE BTN MOBILE --- */
    .close-btn {
        /* ZMIANA: Jeszcze mniejszy na mobile (24px) */
        width: 24px;
        height: 24px;
        background-image: url('assets/ikony/ui_close_initial_mobile.svg');
    }
    .close-btn:active {
        background-image: url('assets/ikony/ui_close_pressed_mobile.svg');
    }

    /* --- STRZAŁKI MOBILE --- */
    .nav-btn {
        /* ZMIANA: Zmniejszamy ikonę do 20px */
        width: 20px;
        height: 20px;
        
        /* Mniejsze tło (kółeczko) */
        background-color: rgba(6, 12, 18, 0.5); 
        padding: 6px; /* Mniejszy padding */
        box-sizing: content-box; 
        border-radius: 50%;
    }

    /* Ikony Desktop (wymuszone), blisko krawędzi */
    .prev-btn { 
        left: 10px; 
        background-image: url('assets/ikony/ui_arrow_left_initial_desktop.svg'); 
    }
    .prev-btn:active { 
        background-image: url('assets/ikony/ui_arrow_left_pressed_desktop.svg'); 
    }

    .next-btn { 
        right: 10px; 
        background-image: url('assets/ikony/ui_arrow_right_initial_desktop.svg'); 
    }
    .next-btn:active { 
        background-image: url('assets/ikony/ui_arrow_right_pressed_desktop.svg'); 
    }
}

/* ==========================================================================
   SEKCJA RECENZJI (WERSJA FINALNA - WYRÓWNANA)
   ========================================================================== */

.reviews-section {
    background-color: #064C65;
    padding-top: 24px;
    padding-bottom: 60px;
    overflow: hidden;
}

.reviews-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 400;
    margin: 0 0 32px 0;
    text-align: center;
    width: 100%;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 32px;
    }
}

/* --- SLIDER / KONTENER KART --- */
.reviews-slider {
    display: flex;
    gap: 32px;
    /* Każda karta ma własną wysokość – rośnie tylko ta z rozwiniętą recenzją */
    align-items: flex-start;
    
    /* Ustawienia Mobile */
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

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

/* Ustawienia Desktop */
@media (min-width: 1200px) {
    .reviews-slider {
        justify-content: center;
        overflow-x: visible;
        flex-wrap: wrap; 
        /* Na desktopie też pozwalamy, aby karty miały różną wysokość */
        align-items: flex-start;
    }
}

/* --- KARTA RECENZJI --- */
.review-card {
    background-color: #FAFCFF;
    border-radius: 4px;
    padding: 16px;
    
    width: 304px;
    min-width: 304px;
    /* Wszystkie karty mają tę samą minimalną wysokość,
       dzięki czemu przed rozwinięciem są równej długości */
    min-height: 260px;
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px; /* Odstępy 8px między elementami */
    
    scroll-snap-align: start;
    height: auto; 
}

/* --- FORMATOWANIE TEKSTU (TO WYRÓWNUJE PRZYCISKI) --- */
.text-body.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 4;      /* Ucinamy zawsze po 4. linii */
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    /* Narzucamy minimalną wysokość dla tekstu */
    /* Dzięki temu "Read more" zawsze zaczyna się w tym samym miejscu */
    min-height: 85px;           
}

/* --- POZOSTAŁE STYLE (RESET MARGINESÓW) --- */

.author-name {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.review-source {
    font-size: 12px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.review-content {
    margin: 0;
}

/* Reset marginesów dla paragrafu */
.review-content p {
    margin: 0; 
    font-size: 14px;
    line-height: 145%;
}

.read-more-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
    margin: 0;
}

/* Stopka tłumaczenia zawsze na dole */
.translation-footer {
    font-size: 12px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    margin-top: auto; /* To wypycha stopkę na sam dół karty */
}

/* Linki i ikony */
.google-link {
    color: #064C65;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stars {
    display: flex;
    gap: 2px;
}

.see-original-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    color: #064C65;
    cursor: pointer;
    font-weight: 600;
}
/* ==========================================================================
   SEKCJA CONTACT CTA (DOŁĄCZ DO NAS NAD MORZEM)
   ========================================================================== */

.contact-cta-section {
    /* Tło dla MOBILE (domyślnie) */
    background-image: url('assets/photos/contact_box_mobile.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Wysokość sekcji - używamy paddingu, żeby dać oddech góra/dół */
    padding: 100px 20px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    font-family: 'Montserrat', sans-serif;
    color: #FAFCFF; /* Kolor tekstów */
}

/* Contact box na stronie location - gap 64px od sekcji powyżej */
main > .contact-cta-section {
    padding-top: 164px; /* 100px bazowy + 64px gap = 164px */
}

/* Tło dla DESKTOPU */
@media (min-width: 768px) {
    .contact-cta-section {
        background-image: url('assets/photos/contact_box_desktop.jpg');
        padding: 140px 20px; /* Trochę więcej oddechu na dużym ekranie */
    }
}

.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* To załatwia odstępy 16px między WSZYSTKIMI elementami (napis, guzik, or, telefon) */
    gap: 16px; 
}

/* Główny nagłówek */
.cta-content h2 {
    font-size: 25px; /* Mobile */
    line-height: 145%;
    font-weight: 400; /* Regular */
    margin: 0;
    color: #FAFCFF;
}

@media (min-width: 768px) {
    .cta-content h2 {
        font-size: 32px; /* Desktop */
    }
}

/* Przycisk (Jasne tło, żółta ramka) */
.btn-cta-light {
    background-color: #FAFCFF; /* Jasne tło */
    color: #060C12; /* Ciemny tekst dla kontrastu */
    border: 2px solid #FFD700; /* Żółta/Złota ramka (dopasuj kolor do tego z homepage) */
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 8px; /* Opcjonalne zaokrąglenie */
    display: inline-block;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
}

.btn-cta-light:hover {
    transform: scale(1.05); /* Lekkie powiększenie po najechaniu */
}

/* Separator "or" / "lub" / "o" - POPRAWIONY ROZMIAR */
.cta-separator {
    font-family: 'Montserrat', sans-serif;
    line-height: 145%;
    font-weight: 400;
    color: #FAFCFF;
    
    /* ZMIANA: Rozmiar Mobile */
    font-size: 25px; 
}

@media (min-width: 768px) {
    .cta-separator {
        /* ZMIANA: Rozmiar Desktop */
        font-size: 32px; 
    }
}

/* Numer telefonu */
.phone-link {
    font-size: 25px; /* Mobile - taki sam jak nagłówek */
    line-height: 145%;
    color: #FAFCFF;
    text-decoration: underline;
    font-weight: 400;
}

@media (min-width: 768px) {
    .phone-link {
        font-size: 32px; /* Desktop - taki sam jak nagłówek */
    }
}
/* ==========================================================================
   SEKCJA ABOUT US + RYBKA (WERSJA ABSOLUTNA - MUSI DZIAŁAĆ)
   ========================================================================== */

   /* 1. MOBILE - Domyślne zdjęcie ORAZ zdjęcie po scrollu */
.hero-about-us, 
.hero-about-us.scrolled { 
    /* !important jest konieczne, żeby nie wskoczyło tło z homepage */
    background-image: url('assets/photos/photo_about_us_mobile.jpg') !important;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 2. DESKTOP - Podmiana zdjęcia na duże po scrollu */
@media (min-width: 768px) {
    .hero-about-us, 
    .hero-about-us.scrolled { 
        background-image: url('assets/photos/photo_about_us_desktop.jpg') !important;
    }
}

   /* 1. SEKCJA Z TEKSTEM (Trzyma odstęp 64px) */
.about-section {
    padding-top: 64px;
    
    /* Sztywny odstęp 64px od dołu. Rybka go nie zepsuje. */
    padding-bottom: 64px !important; 
    
    background-color: #FAFCFF;
    position: relative; 
    z-index: 2; 
}

.about-container {
    max-width: 1200px; 
    margin: 0 auto;   
    padding: 0 20px;  
    font-family: 'Montserrat', sans-serif;
    color: #000000;
}

.about-container p {
    font-size: 16px;
    line-height: 160%; 
    margin-bottom: 24px; 
    text-align: left; 
}

/* 2. KONTENER RYBKI (Jako punkt odniesienia, bez wymiarów) */
.decor-wrapper-right {
    max-width: 1200px;
    margin: 0 auto;
    
    /* Wysokość 0 - nie rozpycha strony */
    height: 0; 
    
    /* Pozycjonowanie względne - żeby rybka wiedziała od czego się odbić */
    position: relative; 
    
    /* Pozwalamy rybce wystawać */
    overflow: visible; 
    z-index: 10; /* Bardzo wysoki indeks - rybka musi być NA WIERZCHU */
}

/* 3. SAMA RYBKA (Ustawiona "na sztywno") */
.decor-wrapper-right .fish-decor {
    /* Pozycjonowanie absolutne względem kontenera .decor-wrapper-right */
    position: absolute;
    
    /* Ustawienie: */
    bottom: 120px; /* Podnosimy ją o 20px od linii łączenia sekcji */
    right: -150px; /* Przesuwamy w prawo o 100px poza linię tekstu */
    
    width: 300px;
    height: auto;
    display: block;
    opacity: 0.1;        /* Blade tło */
    pointer-events: none;
}

/* Klasa odwracająca (wyłączona - rybka patrzy w prawo) */
.fish-flipped {
    transform: none; 
}

/* 4. UKRYWANIE NA MOBILE */
@media (max-width: 768px) {
    .decor-wrapper-right {
        display: none !important; 
    }
}
/* ==========================================================================
   STRONA AREA (OKOLICA)
   ========================================================================== */

/* --- 1. HERO SECTION (ZDJĘCIA) --- */

/* MOBILE - Domyślnie */
.hero-area, 
.hero-area.scrolled { 
    /* Wymuszamy zdjęcie mobilne */
    background-image: url('assets/photos/photo_area_mobile.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* DESKTOP - Powyżej 768px */
@media (min-width: 768px) {
    .hero-area, 
    .hero-area.scrolled { 
        /* Wymuszamy zdjęcie desktopowe */
        background-image: url('assets/photos/photo_area_desktop.jpg') !important;
    }
}

/* --- 2. SEKCJA TEKSTOWA (PORTO RECANATI) --- */

.area-intro {
    background-color: #FAFCFF;
    
    /* ODLEGŁOŚĆ OD HERO (MOBILE): 48px */
    padding-top: 48px;
    padding-bottom: 60px;
}

.area-container {
    /* ZMIANA: Zwiększamy szerokość do 1200px (standard reszty strony) */
    max-width: 1200px; 
    
    margin: 0 auto;
    padding: 0 20px;
    
    /* Tekst wewnątrz wyrównany do lewej */
    text-align: left; 
}

/* NAGŁÓWEK "Porto Recanati" */
.area-container h2 {
    font-family: 'Montserrat', sans-serif;
    color: #060C12;
    font-weight: 400;
    line-height: 145%;
    margin: 0;
    
    /* WYMUSZENIE ŚRODKA TYLKO DLA NAGŁÓWKA */
    text-align: center; 
    
    /* ROZMIAR MOBILE: 25px */
    font-size: 25px;
}

/* TEKST POD NAGŁÓWKIEM */
.area-container p {
    font-family: 'Montserrat', sans-serif;
    color: #060C12;
    font-size: 16px;
    line-height: 145%;
    
    /* ODLEGŁOŚĆ OD NAGŁÓWKA: 16px */
    margin-top: 16px;
    margin-bottom: 0;
    
    /* Tekst dziedziczy 'text-align: left' z kontenera, ale dla pewności: */
    text-align: left; 
}

/* --- MEDIA QUERY DLA DESKTOPU --- */
@media (min-width: 768px) {
    
    .area-intro {
        /* ODLEGŁOŚĆ OD HERO (DESKTOP): 64px */
        padding-top: 64px;
    }
    
    .area-container h2 {
        /* ROZMIAR DESKTOP: 32px */
        font-size: 32px;
    }
}
/* ==========================================================================
   SIATKA IKON (AREA - 5 KART W RZĘDZIE - UKŁAD POZIOMY)
   ========================================================================== */

.attractions-grid {
    display: grid;
    margin-top: 48px; /* Odstęp od tekstu powyżej */
    gap: 24px;
    
    /* Mobile: 1 kolumna */
    grid-template-columns: 1fr;
}

/* Pojedyncza karta */
.attraction-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* --- NAGŁÓWEK KARTY (Ikona + Tytuł obok siebie) --- */
.card-header {
    display: flex;
    align-items: center; /* Wyrównanie w pionie do środka */
    gap: 8px; /* Odstęp 8px między ikoną a napisem */
}

/* Ikona */
.card-header img {
    /* Ustalamy stałą wielkość ikony, np. 32px lub 40px, żeby pasowała do tekstu */
    height: 32px; 
    width: auto;
    display: block;
}

/* Tytuł (np. Beaches) */
.card-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 145%;
    color: #064C65;
    font-weight: 600;
    margin: 0;
}

/* --- TREŚĆ KARTY (Lista lub Paragraf pod spodem) --- */
.card-body {
    /* Odstęp 16px od nagłówka */
    margin-top: 16px;
    margin-bottom: 0;
    padding: 0;
    
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 145%;
    color: #060C12;
}

/* Styl wypunktowania dla list */
ul.card-body {
    list-style-type: none; 
}

ul.card-body li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 4px;
}

ul.card-body li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #060C12;
}

/* ==========================================================================
   SIATKA IKON (AREA - UKŁAD RESPONSIVE)
   ========================================================================== */

.attractions-grid {
    display: grid;
    margin-top: 48px; /* Odstęp od tekstu powyżej */
    
    /* MOBILE (Domyślnie) */
    /* Układ 2 kolumn dla mobile */
    grid-template-columns: repeat(2, 1fr);
    
    /* Odstępy: 32px między rzędami, 16px między kolumnami */
    gap: 32px 16px;
}

/* --- DESKTOP (min-width: 1024px) --- */
@media (min-width: 1024px) {
    .attractions-grid {
        /* Wymuszamy 5 równych kolumn w jednym rzędzie */
        grid-template-columns: repeat(5, 1fr); 
        
        /* Odstęp 24px między kartami na desktopie */
        gap: 24px;
        
        align-items: start;
    }
}
/* ==========================================================================
   SEKCJA MARCHE (TEKST NA CIEMNYM TLE)
   ========================================================================== */

.marche-section {
    background-color: #064C65; /* Ciemne tło */
    color: #FAFCFF;            /* Jasny tekst */
    
    /* Padding góra/dół: 48px */
    padding-top: 48px;
    padding-bottom: 48px;
}

.marche-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left; /* Tekst wyrównany do lewej */
}

/* NAGŁÓWEK "Marche" */
.marche-container h2 {
    font-family: 'Montserrat', sans-serif;
    color: #FAFCFF;
    font-weight: 400;
    line-height: 145%;
    margin: 0;
    
    /* Wyśrodkowanie nagłówka */
    text-align: center;
    
    /* Odstęp od tekstu poniżej: 16px */
    margin-bottom: 16px;

    /* Rozmiar Mobile (dla spójności z resztą strony) */
    font-size: 25px;
}

/* AKAPITY TEKSTU */
.marche-container p {
    font-family: 'Montserrat', sans-serif;
    color: #FAFCFF;
    font-size: 16px;
    line-height: 160%; /* Troszkę większa interlinia dla czytelności długiego tekstu */
    
    margin-top: 0;
    margin-bottom: 24px; /* Odstęp między akapitami */
}

.marche-container p:last-child {
    margin-bottom: 0;
}

/* --- DESKTOP --- */
@media (min-width: 768px) {
    .marche-container h2 {
        /* Rozmiar Desktop: 32px (zgodnie z wytycznymi) */
        font-size: 32px;
    }
}
/* ==========================================================================
   DEKORACJE RYBKI DLA STRONY AREA (POPRAWIONE - BLIŻEJ I ODWRÓCONE)
   ========================================================================== */

/* 1. Ustawiamy sekcję jako bazę */
.area-intro {
    position: relative; 
    /* Zmieniamy na visible, żeby rybki nie były ucięte, jeśli lekko wystają */
    overflow: visible;   
    z-index: 1;
}

/* 2. Wspólne cechy rybek Area */
.fish-area-top,
.fish-area-bottom {
    position: absolute;
    width: 300px;       
    height: auto;
    opacity: 0.1;       
    pointer-events: none;
    z-index: 0;         
}

/* --- RYBKA GÓRNA (Prawa strona) --- */
.fish-area-top {
    top: 5px;         
    
    /* ZMIANA POZYCJI: */
    /* Kotwiczymy ją względem środka. 50% to środek, odejmujemy ok. 700px, */
    /* żeby trafiła idealnie obok kontenera z tekstem (który ma 1200px) */
    right: calc(50% - 780px);       
    
    /* ZMIANA OBROTU: */
    /* Ma patrzeć w PRAWO -> czyli usuwamy lustrzane odbicie (transform: none) */
    transform: none; 
}

/* --- RYBKA DOLNA (Lewa strona) --- */
.fish-area-bottom {
    bottom: 5px;      
    
    /* ZMIANA POZYCJI: */
    /* Przybliżamy do tekstu z lewej strony */
    left: calc(50% - 800px);        
    
    /* ZMIANA OBROTU: */
    /* Ma patrzeć w LEWO -> dodajemy lustrzane odbicie */
    transform: scaleX(-1); 
}

/* --- POPRAWKA DLA LAPTOPÓW (Szerokość 1200-1500px) --- */
/* Żeby rybki nie weszły na tekst na średnich ekranach */
@media (max-width: 1600px) {
    .fish-area-top {
        right: -60px; /* Przyklejamy do krawędzi, bo calc() może wejść na tekst */
    }
    .fish-area-bottom {
        left: -60px;
    }
}

/* --- RESPONSYWNOŚĆ (Chowamy na telefonie/tablecie) --- */
@media (max-width: 1024px) {
    .fish-area-top,
    .fish-area-bottom {
        display: none;
    }
}

/* ==========================================================================
   SEKCJA SLIDER (NAPRAWA WIDOCZNOŚCI TŁA I GRADIENTU)
   ========================================================================== */

.slider-section {
    position: relative;
    width: 100%;
    height: 900px; /* Wysokość, którą ustaliliśmy wcześniej */
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* WAŻNE: Sekcja nadrzędna musi być przezroczysta */
    background-color: transparent;
}

/* --- 1. WARSTWA TŁA (ZDJĘCIE - NA SAMYM SPODZIE) --- */
.slider-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Płynne przejście przy zmianie zdjęcia */
    transition: background-image 0.5s ease-in-out;
    
    /* Indeks 0 - najniższa warstwa */
    z-index: 0;
    
    /* Zdjęcie startowe (Ancona) - upewnij się, że ścieżka jest poprawna */
    background-image: url('assets/photos/photo_ancona_area_desktop.jpg');
}

/* --- 2. WARSTWA GRADIENTU (NAKŁADKA) --- */
.slider-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Indeks 1 - nad zdjęciem, ale pod kartami */
    z-index: 1;
    
    /* WAŻNE: Przepuszczamy kliknięcia myszką do kart pod spodem */
    pointer-events: none;
    
    /* POPRAWIONY GRADIENT LINIOWY:
       - Góra (0%): Pełny kolor ciemny morski (rgb(6, 76, 101))
       - Dół (100%): Ten sam kolor, ale całkowicie przezroczysty (rgba(..., 0))
    */
    background: linear-gradient(to bottom, rgb(6, 76, 101) 0%, rgba(6, 76, 101, 0) 100%);
}

/* --- 3. UKŁAD KART (NA WIERZCHU) --- */
.slider-track-container {
    position: relative;
    /* Indeks 2 - najwyższa warstwa, żeby karty były klikalne */
    z-index: 2; 
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    overflow-x: hidden; /* Ukrywamy pasek przewijania */
}

.slider-track {
    display: flex;
    gap: 24px;
    /* Padding 0 jest ważny, bo JS centruje matematycznie */
    padding: 0 !important;
    width: max-content;
    height: 449px;
    /* Wyłączamy CSS snap, bo JS przejmuje kontrolę */
    scroll-snap-type: none !important;
}

/* --- 4. POJEDYNCZA KARTA --- */
.slider-card {
    width: 632px;
    height: 449px;
    flex-shrink: 0;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Biała ramka nieaktywnej */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    cursor: pointer;
    scroll-snap-align: none !important;
}

/* Nagłówek karty */
.card-header-bar {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.4s ease;
}

.card-header-bar h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    line-height: 145%;
    font-weight: 400;
    margin: 0;
    color: #FFFFFF; /* Domyślnie biały tekst */
    transition: color 0.4s ease;
}

/* Obrazek w karcie */
.card-image-wrapper {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Domyślnie ukryty */
    transition: opacity 0.4s ease;
}

/* --- STAN AKTYWNY KARTY --- */
.slider-card.active {
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.slider-card.active .card-header-bar {
    background-color: #FFFFFF; /* Białe tło nagłówka */
    border-bottom: none;
}

.slider-card.active .card-header-bar h3 {
    color: #060C12; /* Ciemny tekst */
}

.slider-card.active .card-image-wrapper img {
    opacity: 1; /* Pokaż obrazek */
}

/* --- KONTROLKI (STRZAŁKI) --- */
.slider-controls {
    position: relative;
    z-index: 10;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}

.slider-arrow {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

/* ==========================================================================
   RESPONSYWNOŚĆ (MOBILE - FIX TŁA)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* --- 1. WYMUSZENIE WYSOKOŚCI SEKCI SLIDERA --- */
    /* To jest kluczowe - bez tego tło nie ma się na czym wyświetlić */
    .slider-section {
        height: 700px !important; /* Wymuszona wysokość na mobile */
        min-height: 700px;        /* Dodatkowe zabezpieczenie */
    }

    /* Upewniamy się, że warstwy tła rozciągają się na całą tę wysokość */
    .slider-bg-layer,
    .slider-gradient-overlay {
        height: 100% !important;
        width: 100% !important;
        top: 0;
        left: 0;
    }

    /* --- 2. DOPASOWANIE KART DO MOBILE --- */
    .slider-track {
        height: 400px; /* Dopasowanie wysokości ścieżki do kart */
    }

    .slider-card {
        width: 300px;  /* Węższe karty na telefon */
        height: 400px; /* Niższe karty */
    }

    /* Mniejszy font nagłówka na karcie */
    .card-header-bar h3 {
        font-size: 24px;
    }

    /* --- 3. INNE POPRAWKI MOBILE (Teksty i nagłówki) --- */
    .area-container h2,
    .marche-container h2 {
        font-size: 28px; /* Trochę mniejsze nagłówki sekcji */
    }

    /* Ukrycie rybek na mobile, żeby nie zasłaniały */
    .fish-area-top,
    .fish-area-bottom {
        display: none;
    }
}
/* ==========================================================================
   GLOBALNE USTAWIENIA HERO NA MOBILE (WSZYSTKIE STRONY)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Lista klas dla pewności (Homepage, Our Place, About Us, Area + przyszłe) */
    .hero,
    .hero-our-place,
    .hero-about-us,
    .hero-area {
        
        /* 1. WYSOKOŚĆ: 65% EKRANU */
        /* To sprawia, że widać kawałek treści poniżej */
        height: 65vh !important; 
        
        /* Zabezpieczenie dla bardzo niskich telefonów */
        min-height: 400px; 

        /* 2. CENTROWANIE TREŚCI */
        /* Ponieważ sekcja jest niższa, tekst musi być idealnie na środku */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        
        /* 3. RESET MARGINESÓW */
        /* Usuwamy stare paddingi, które wypychały tekst na dół lub w bok */
        padding-bottom: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }

    /* Opcjonalnie: Dopasowanie wielkości tekstu w krótszym Hero */
    .hero h1 {
        font-size: 2.5rem; /* Troszkę mniejszy nagłówek, żeby się ładnie mieścił */
    }
}
/* ==========================================================================
   KADROWANIE ZDJĘĆ HERO NA MOBILE (DOSTOSUJ WARTOŚCI)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. HOMEPAGE (np. łódka jest na dole) */
    .hero {
        /* Pierwsza liczba (50%) to poziom - środek.
           Druga liczba (100%) to pion - POKAZUJE SAM DÓŁ ZDJĘCIA. */
        background-position: 50% 100% !important;
    }

    /* 2. ABOUT US (np. twarze są u góry) */
    .hero-about-us {
        /* 0% = POKAZUJE SAMĄ GÓRĘ ZDJĘCIA */
        background-position: 50% 0% !important;
    }

    /* ==========================================================================
   KADROWANIE HERO - TYLKO DLA STRONY "OUR PLACE"
   ========================================================================== */

@media (max-width: 768px) {
    .hero-our-place {
        /* Pierwsza liczba (50%) to środek w poziomie. Zostawiamy.
           Druga liczba to PION. Zmieniaj ją, aż trafisz w idealny fragment. */
           
        background-position: 50% 50% !important;
    }
}

    /* 4. AREA (np. chcesz widzieć trochę niżej niż środek) */
    .hero-area {
        /* 20% = Góra, 80% = Dół. Tutaj ustawiamy np. 30% od góry */
        background-position: 50% 30% !important;
    }
}
/* ============================================== */
/* === NAPRAWA OTWIERANIA MENU (FORCE FIX) === */
/* ============================================== */

/* 1. Upewniamy się, że klasa .active na pewno pokazuje menu */
.mobile-menu-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* 2. Upewniamy się, że burger jest "klikalny" (jest na wierzchu) */
.mobile-burger {
    z-index: 20005 !important; /* Wyżej niż navbar */
    position: relative;        /* Żeby z-index zadziałał */
    cursor: pointer;
}

/* 3. Upewniamy się, że overlay jest na pewno na całym ekranie */
.mobile-menu-overlay {
    z-index: 20000 !important;
}
/* ============================================== */
/* === STRONA LOCATION - TREŚĆ === */
/* ============================================== */

.location-details-section {
    width: 100%;
    /* Odległość od nagłówka Hero (48px) */
    padding-top: 48px; 
    /* Odległość od stopki (żeby nie było zbyt ciasno) */
    padding-bottom: 80px; 
    text-align: center;
}

.location-container {
    max-width: 1200px; /* Zwiększone żeby pomieścić mapę i przycisk */
    margin: 0 auto;
    padding: 0 24px;
    position: relative; /* Dla pozycjonowania rybki */
}

/* Rybka dekoracyjna na stronie location */
.location-fish-decor {
    position: absolute;
    right: -50px; /* Przesunięcie bardziej w prawo */
    top: -40px; /* Przesunięcie wyżej */
    opacity: 0.1; /* 10% opacity */
    z-index: 1;
    pointer-events: none;
    width: 300px;
    height: auto;
}

/* Ukryj rybkę na mobile */
@media (max-width: 768px) {
    .location-fish-decor {
        display: none !important;
    }
}

/* Wrapper dla mapy i przycisku */
.location-content-wrapper {
    display: flex;
    flex-direction: column; /* Układ pionowy - przycisk nad mapą */
    align-items: center; /* Przycisk wyśrodkowany */
    gap: 0;
}

/* Wrapper dla mapy i tekstu (poziomy layout) */
.location-map-text-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Rozciągnij oba elementy do tej samej wysokości */
    gap: 24px; /* Odstęp 24px między mapą a tekstem */
    margin-top: 64px; /* Odstęp 64px między przyciskiem a mapą */
    width: 100%;
}

/* Mapa po lewej stronie */
.location-map {
    flex: 0 0 636px; /* Sztywna szerokość 636px */
    display: flex;
    align-items: stretch;
}

.location-map iframe {
    width: 636px;
    height: 100%; /* Wypełnij całą dostępną wysokość */
    border: 0;
    border-radius: 8px; /* Zaokrąglone rogi */
}

/* Tekst po prawej stronie mapy */
.location-info-text {
    flex: 1;
    max-width: 500px;
    text-align: left; /* Wyrównanie tekstu do lewej */
}

/* Główny tekst opisu - Montserrat regular 16px/145% */
.location-description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: 145%;
    color: #1D2B45;
    margin: 0 0 16px 0; /* Zmniejszony gap 16px między paragrafami */
}

.location-description:last-of-type {
    margin-bottom: 32px; /* Odstęp 32px przed następną sekcją */
}

/* Sekcje informacyjne */
.location-info-section {
    margin-bottom: 32px; /* Gap 32px między sekcjami */
}

.location-info-section:first-of-type {
    margin-bottom: 16px; /* Odstęp 16px między Parking a How to get to */
}

.location-info-section:last-child {
    margin-bottom: 0;
}

/* Tytuły sekcji - Montserrat semibold 18px/145% */
.location-info-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Semibold */
    font-size: 18px;
    line-height: 145%;
    color: #1D2B45;
    margin: 0 0 8px 0;
}

/* Treść sekcji */
.location-info-content {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: 145%;
    color: #1D2B45;
    margin: 0;
}

/* Elementy listy (By car, By train, etc.) - Montserrat regular 16px/145% */
.location-info-item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular - tekst po dwukropku */
    font-size: 16px;
    line-height: 145%;
    color: #1D2B45;
    margin: 0 0 8px 0;
}

.location-info-item:last-child {
    margin-bottom: 0;
}

.location-info-item strong {
    font-weight: 500; /* Medium - tylko "By car", "By train" etc. */
}

/* Błąd walidacji w polu formularza kontaktowego */
.contact-field.error input {
    border-color: #BF2924;
    background-color: #FFFFFF; /* w błędzie też białe tło */
}

.contact-error-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 145%;
    color: #BF2924;
    margin: 4px 0 0 0;
    display: none;
}

.contact-field.error .contact-error-text {
    display: block;
}

/* Przycisk wyśrodkowany */
.location-button-wrapper {
    display: flex;
    justify-content: center; /* Wyśrodkowanie przycisku */
    width: 100%;
    padding-top: 0;
}

/* Styl adresu */
.address-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px; /* Rozmiar 16px */
    line-height: 1.5;
    text-transform: uppercase; /* WIELKIE LITERY */
    color: #1D2B45; /* Ciemny granat */
    
    /* Odległość między tekstem a przyciskiem (16px) */
    margin-bottom: 16px; 
    margin-top: 0;
}

/* Styl żółtego przycisku */
.btn-directions {
    display: inline-block;
    background-color: #F7D18E; /* Kolor przycisku */
    color: #1D2B45; /* Ciemny tekst */
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    
    padding: 14px 32px; /* Rozmiar przycisku */
    border-radius: 8px; /* Zaokrąglone rogi 8px */
    transition: background-color 0.3s ease;
}

.btn-directions:hover {
    background-color: #f5c87a; /* Lekko ciemniejszy po najechaniu */
}

/* Contact intro (strona contact) */
.contact-intro-section {
    background-color: #FAFCFF;
    padding: 64px 0 32px 0;
}

.contact-intro-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
}

.contact-intro-container {
    max-width: 526px; /* szerokość zgodnie z makietą */
    margin: 0;
}

.contact-intro-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 32px;
    line-height: 145%;
    color: #060C12;
    text-align: center;
    margin: 0 0 16px 0;
}

.contact-intro-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
    color: #060C12;
    margin: 0;
    text-align: center;
}

/* Szybkie kontakty (WhatsApp / Email) pod tekstem intro */
.contact-quick-links {
    margin-top: 48px;
    display: flex;
    gap: 24px;
}

.contact-quick-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.contact-quick-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.contact-quick-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Semibold */
    font-size: 18px;
    line-height: 145%;
    color: #064C65;
    margin: 0;
}

.contact-quick-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
    color: #060C12;
    text-decoration: underline;
}

.contact-quick-link:hover {
    text-decoration: underline;
}

.contact-fish-wrapper {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.contact-fish-big {
    width: 100%;
    max-width: 400px;
    height: auto;
    opacity: 0.1;
    transform: scaleX(-1); /* odwrócenie, żeby rybka była zwrócona w prawo */
}

/* Formularz kontaktowy po prawej */
.contact-form-container {
    max-width: 660px;
    flex: 0 0 660px;
}

.contact-form-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 32px;
    line-height: 145%;
    color: #060C12;
    margin: 0 0 16px 0;
    text-align: center; /* Wyśrodkowanie nagłówka nad formularzem */
}

.contact-form-box {
    width: 100%;
    min-height: 519px;
    padding: 32px;
    border-radius: 8px;
    border: 1px solid #CFDBE0;
    box-shadow: 0 2px 6px 0 #CFDBE0;
    box-sizing: border-box;
    background-color: #FAFCFF;
}

.contact-form-lead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
    color: #060C12;
    margin: 0 0 24px 0;
}

.contact-form-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.contact-form-row-full {
    flex-direction: column;
}

.contact-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-field-full {
    width: 100%;
}

.contact-field label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Semibold */
    font-size: 18px;
    line-height: 145%;
    color: #064C65;
    margin-bottom: 4px;
}

.contact-field input,
.contact-field textarea {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 145%;
    color: #060C12;
    border-radius: 8px;
    border: 1px solid #CFDBE0;
    padding: 8px;
    box-sizing: border-box;
    background-color: #FFFFFF; /* zawsze białe tło */
}

/* Kolor obramowania po kliknięciu (focus) taki sam jak na desktopie */
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: #064C65; /* przyciemniona ramka przy focusie (desktop i mobile) */
}

/* Wymuszenie białego tła także przy stanach :valid / :invalid przeglądarki */
.contact-field input:valid,
.contact-field input:invalid,
.contact-field textarea:valid,
.contact-field textarea:invalid {
    background-color: #FFFFFF !important;
}

.contact-field input {
    height: 30px;
}

.contact-field textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form-consent-row {
    margin-bottom: 24px;
}

.contact-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 145%;
    color: #060C12;
    cursor: pointer;
}

.contact-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    background-image: url('assets/ikony/ckeckbox_off.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.contact-checkbox input:checked + .checkbox-custom {
    background-image: url('assets/ikony/ckeckbox_on.svg');
}

.contact-consent-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 145%;
    color: #060C12;
}

.privacy-link {
    text-decoration: underline;
    color: #060C12;
}

.contact-form-submit-row {
    display: flex;
    justify-content: center; /* Wyśrodkowanie przycisku SEND wewnątrz formularza */
    width: 100%;
}

.contact-submit-btn {
    width: 206px;
    height: 40px;
    border-radius: 8px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    cursor: not-allowed;
    background-color: #F0E7D7;
    color: #FAFCFF;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-submit-btn.enabled {
    background-color: #F7D18E;
    color: #060C12;
    cursor: pointer;
}

/* Modal "Thank you for contacting us" (strona contact) */
.contact-thankyou-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 18, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.contact-thankyou-overlay.active {
    display: flex;
}

.contact-thankyou-box {
    width: 287px;
    height: 160px;
    background-color: #064C65;
    border-radius: 8px;
    position: relative;
    padding: 24px 24px 24px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contact-thankyou-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.contact-thankyou-close img {
    width: 24px;
    height: 24px;
    display: block;
}

.contact-thankyou-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
    color: #FAFCFF;
    margin: 0;
}

/* Responsywność dla adresu na małych ekranach */
@media (max-width: 768px) {
    .address-text {
        font-size: 16px; /* Nieco mniejszy na telefonie */
    }
    
    /* Mniejsze logo w stopce na mobile (50% wysokości) */
    .footer-logo img {
        height: 70px;
    }
    
    /* Kontakt intro na mobile - pełna szerokość i wyśrodkowanie */
    .contact-intro-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .contact-intro-title,
    .contact-intro-text {
        text-align: center;
    }

    /* H2 w formularzu i sekcji kontakt – 25px, Montserrat regular na mobile */
    .contact-intro-title,
    .contact-form-title {
        font-size: 25px;
        font-weight: 400;
    }

    /* h2 w wersji mobile – 25px, Montserrat regular */
    .contact-intro-title,
    .contact-form-title {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 25px;
        line-height: 145%;
    }

    /* Układ sekcji kontaktu w mobile: treść nad formularzem */
    .contact-intro-layout {
        flex-direction: column;
        align-items: center;
        gap: 48px; /* odstęp między blokiem z boksami a formularzem */
    }

    /* Boksy kontaktowe w mobile: obok siebie, stałe wymiary */
    .contact-quick-links {
        justify-content: center;
        gap: 16px;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .contact-quick-box {
        width: 173px;
        height: 139px;
    }

    /* Formularz kontaktowy w mobile: szerokość 345, wysokość ~709, padding 32 */
    .contact-form-container {
        width: 345px;
        max-width: 100%;
        margin: 0 auto;
    }

    .contact-form-box {
        width: 100%;
        min-height: 709px;
        padding: 32px; /* padding 32 wewnątrz formularza */
        box-sizing: border-box;
    }

    /* Odstępy w formularzu mobilnym: 16px między elementami */
    .contact-form-lead {
        margin: 0 0 16px 0;
    }

    .contact-form-row {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    /* Przycisk w formularzu kontaktowym idealnie na środku (mobile) */
    .contact-form-submit-row {
        display: block;
        text-align: center;
        width: 100%;
    }

    /* Ukrywamy dekoracyjną rybkę w wersji mobile na stronach kontaktu */
    .contact-fish-wrapper {
        display: none;
    }
    
    /* Na mobile układamy mapę i tekst jeden pod drugim */
    .location-map-text-wrapper {
        flex-direction: column;
        gap: 24px;
        margin-top: 32px; /* Mniejszy odstęp na mobile */
    }
    
    .location-map {
        flex: 1 1 auto;
        width: 100%;
    }
    
    .location-map iframe {
        width: 100%;
        height: 300px; /* Mniejsza wysokość na mobile */
    }
    
    .location-info-text {
        max-width: 100%;
    }
    
    .location-button-wrapper {
        width: 100%;
        justify-content: center;
    }
    
    /* Wymiary przycisku w mobile */
    .btn-directions {
        width: 345px;
        height: 39px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    
    /* Wymiary przycisku w contact box w mobile */
    .btn-cta-light {
        width: 345px;
        height: 39px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}