/* ==========================================================================
   STYLIZACJA GŁÓWNEJ TREŚCI STRONY (#page) - STYL BUTIKOWY
   ========================================================================== */

#page {
    background-color: #faf9f7; /* Miękkie, spójne tło nawiązujące do headera */
    color: #4b5563;
}

/* Główny kontener sekcji tekstowej (odpowiednik max-width: 1500px i marginesów) */
#page .content:not(.short) > div {
    max-width: 1300px !important; /* Spójna szerokość z resztą strony (.s1300) */
    margin: 0 auto !important;
    padding: 0 40px;
}

/* Sub-header / Nadtytuł (np. OSW Sportowiec • Krynica-Zdrój) */
/*#page .content:not(.short) > div > div:first-child {
    color: #dfc585 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}*/



#page h2 span {
    color: #dfc585 !important; /* Podkreślenie Krynicy-Zdroju na złoto */
}

/* Ozdobna złota linia pod nagłówkiem */
#page .content:not(.short) > div > div[style*="width: 80px"] {
    width: 70px !important;
    height: 3px !important;
    background: #dfc585 !important;
    border-radius: 999px;
    margin-bottom: 30px !important;
}

/* Akapity tekstowe */
#page p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: #555555 !important;
    margin-bottom: 25px !important;
    max-width: 1100px; /* Optymalna szerokość linii tekstu dla wygody czytania */
}

#page img[src*="files/"]:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-3px);
}

/* Kontener dla odznak */
#page div[style*="display: flex"] {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px !important;
}

/* Responsywność dla mniejszych ekranów */
@media (max-width: 768px) {
    #page .content:not(.short) > div {
        padding: 0 20px;
    }
}

/* ==========================================================================
   NOWY UKŁAD SEKCJI OFERT (#box-offers) - DWURZĘDOWY
   ========================================================================== */

#box-offers {
    background-color: #faf9f7 !important;
    padding: 80px 0 !important;
    border-top: 1px solid rgba(223, 197, 133, 0.2);
    width: 100% !important;
}

#box-offers .container.s1300 {
    max-width: 1350px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
}

/* Górny rząd (Lewa: nagłówek, Prawa: duży przycisk kafelek) */
.box-offers-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 50px !important;
    width: 100% !important;
}

/* Lewa kolumna z nagłówkiem */
.box-offers-top .left {
    flex: 1 !important;
}

.box-offers-top .hero-heading .title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(38px, 4.5vw, 52px) !important;
    color: #1a1a1a !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

.box-offers-top .hero-heading .title strong {
    color: #dfc585 !important;
    display: block !important;
    font-weight: 700 !important;
}

/* Prawa kolumna – DUŻY PRZYCISK KAFELEK ZE ZDJĘCIEM */
.box-offers-top .right {
    flex: 1 !important;
    max-width: 600px;
    width: 100%;
}

.offer-banner-cta {
    position: relative;
    display: block !important;
    height: 180px !important; /* Wysokość dopasowana do wysokości nagłówka */
    border-radius: 16px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    /* Możesz podmienić poniższy link do zdjęcia na dowolne klimatyczne zdjęcie z folderu */
    background-image: url('files/templates/1920.png'); 
    background-size: cover !important;
    background-position: center !important;
    border: 2px solid #dfc585 !important;
    box-shadow: 0 10px 30px rgba(223, 197, 133, 0.2) !important;
    transition: all 0.4s ease !important;
}

/* Przyciemniająca nakładka na przycisku, żeby tekst był czytelny */
.offer-banner-cta .cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 23, 0.75), rgba(44, 40, 35, 0.65));
    transition: background 0.3s ease;
    z-index: 1;
}

/* Wnętrze przycisku (tekst i strzałka) */
.offer-banner-cta .cta-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.offer-banner-cta .cta-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #dfc585 !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
}

.offer-banner-cta .cta-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.offer-banner-cta .cta-arrow {
    font-size: 20px;
    color: #dfc585;
    transition: transform 0.3s ease;
}

/* Efekt po najechaniu myszką na duży kafelek */
.offer-banner-cta:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px rgba(223, 197, 133, 0.35) !important;
}

.offer-banner-cta:hover .cta-arrow {
    transform: translateX(8px); /* Delikatny ruch strzałki w prawo */
}

/* Dolny rząd – Opis na całą szerokość pod spodem */
.box-offers-bottom {
    width: 100% !important;
}

.box-offers-bottom .desc {
    font-family: 'Montserrat', sans-serif !important;
    color: #555555 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    max-width: 1000px !important;
    margin: 0 !important;
}

/* Responsywność dla telefonów i mniejszych tabletów */
@media (max-width: 992px) {
    .box-offers-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
    }
    .box-offers-top .right {
        max-width: 100% !important;
    }
    .offer-banner-cta {
        height: 150px !important;
    }
}

/* ==========================================================================
   SEKCJA #box-offers Z PARALAKSĄ DLA NOWEGO UKŁADU
   ========================================================================== */

#box-offers {
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important; /* Efekt stałego tła / paralaksy */
    background-repeat: no-repeat !important;
    padding: 100px 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Przyciemniająca nakładka na całą sekcję */
#box-offers .parallax-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(26, 24, 21, 0.65) !important; /* 65% przyciemnienia dla idealnej czytelności */
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Upewniamy się, że wnętrze stopki i kontener są nad nakładką */
#box-offers footer {
    position: relative !important;
    z-index: 2 !important;
}

#box-offers .container.s1300 {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1350px !important;
    margin: 0 auto !important;
}

/* Górny rząd: układ lewa / prawa */
.box-offers-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 60px !important;
    width: 100% !important;
}

/* Lewa kolumna (Nagłówek + Opis) */
.box-offers-top .left {
    flex: 1.1 !important;
}

.box-offers-top .hero-heading .title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(38px, 4.5vw, 52px) !important;
    color: #ffffff !important; /* Biały nagłówek na ciemnym tle paralaksy */
    line-height: 1.15 !important;
    margin: 0 0 20px 0 !important;
}

.box-offers-top .hero-heading .title strong {
    color: #dfc585 !important; /* Złoty akcent */
    display: block !important;
    font-weight: 700 !important;
}

.box-offers-top .desc {
    font-family: 'Montserrat', sans-serif !important;
    color: #f4f0ec !important; /* Jasny, miękki kolor opisu */
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    max-width: 650px;
}

/* Prawa kolumna – duży przycisk-kafelek */
.box-offers-top .right {
    flex: 0.9 !important;
    width: 100%;
}

.offer-banner-cta {
    position: relative;
    display: block !important;
    height: 180px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #dfc585 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.4s ease !important;
}

.offer-banner-cta .cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 26, 23, 0.5);
    z-index: 1;
}

.offer-banner-cta .cta-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.offer-banner-cta .cta-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #dfc585 !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
}

.offer-banner-cta .cta-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.offer-banner-cta .cta-arrow {
    font-size: 20px;
    color: #dfc585;
    transition: transform 0.3s ease;
}

.offer-banner-cta:hover {
    transform: translateY(-4px) !important;
    background: rgba(223, 197, 133, 0.15);
    box-shadow: 0 15px 35px rgba(223, 197, 133, 0.35) !important;
}

.offer-banner-cta:hover .cta-arrow {
    transform: translateX(8px);
}



/* Responsywność dla telefonów i tabletów */
@media (max-width: 992px) {
    .box-offers-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 40px !important;
    }
    #box-offers {
        background-attachment: scroll !important; /* Na telefonach wyłączamy fixed z uwagi na wsparcie przeglądarek mobilnych */
    }
}

/* ==========================================================================
   NOWY DESIGN KART ATUTÓW - "BOUTIQUE EDITORIAL CARDS"
   ========================================================================== */

.box-offers-bottom {
    width: 100% !important;
    background-color: #faf9f7;
    padding: 30px 0 !important;
}

/* Nagłówek sekcji */
.advantages-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 55px auto;
}

.advantages-subtitle {
    display: block;
    color: #dfc585 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.advantages-title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(32px, 4vw, 44px) !important;
    color: #1a1a1a !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}

.advantages-desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #666666 !important;
    max-width: 680px;
    margin: 0 auto !important;
}

/* Siatka kart – układ 2 kolumny na desktopie dla bardziej "wydłużonego", luksusowego wyglądu */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
}

/* Pojedyncza karta w stylu luksusowego panelu */
.advantage-card {
    position: relative;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px 35px !important;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Efekt świetlnej linii na górze karty po najechaniu */
.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #dfc585;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.advantage-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 45px rgba(223, 197, 133, 0.15) !important;
    border-color: rgba(223, 197, 133, 0.4) !important;
}

.advantage-card:hover::before {
    transform: scaleX(1);
}

/* Kwadratowa lub miękka ikona z lewej strony */
.advantage-icon {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4efe9 !important;
    border-radius: 12px !important; /* Delikatnie zaokrąglony kwadrat zamiast koła */
    transition: all 0.4s ease;
}

.advantage-card:hover .advantage-icon {
    background: #dfc585 !important;
}

.advantage-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: filter 0.4s ease;
}

.advantage-card:hover .advantage-icon img {
    filter: brightness(0) invert(1);
}

/* Tekst w karcie */
.advantage-card h3 {
    font-family: 'Montserrat', sans-serif !important;
    margin: 0 !important;
    color: #1a1a1a !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    line-height: 1.4 !important;
}

/* Dodatkowy smaczek: numeracja w tle karty (opcjonalnie, wygląda super elegancko) */
.advantage-card::after {
    content: attr(data-num);
    position: absolute;
    right: 20px;
    bottom: -10px;
    font-family: 'Playfair Display', serif;
    font-size: 70px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.02);
    pointer-events: none;
    transition: color 0.4s ease;
}

.advantage-card:hover::after {
    color: rgba(223, 197, 133, 0.08);
}

/* Responsywność */
@media (max-width: 992px) {
    .advantages-grid {
        grid-template-columns: 1fr; /* Na telefonach i mniejszych tabletach wracamy do 1 kolumny, żeby karty miały pełną szerokość */
    }
}

/* ==========================================================================
   NOWOCZESNY BOKS SZKLANY NA PARALAKSIE (.hero-glass-box)
   ========================================================================== */

/* Nagłówek w boksie */
.hero-glass-box h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(32px, 3.5vw, 40px) !important;
    line-height: 1.15 !important;
    margin: 0 0 18px 0 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.hero-glass-box h2 span {
    color: #dfc585 !important; /* Złoty akcent */
}

/* Ozdobna linia pod nagłówkiem */
.hero-glass-box .hero-line {
    width: 60px !important;
    height: 3px !important;
    background: #dfc585 !important;
    border-radius: 999px;
    margin: 0 0 22px 0 !important;
}

/* Tekst / opis */
.hero-glass-box p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #f4f0ec !important; /* Miękka, jasna biel dla idealnej czytelności */
    margin: 0 0 30px 0 !important;
}

/* Przycisk rezerwacji */
.btn-hero-reserve {
    display: inline-block !important;
    background: #dfc585 !important; /* Złote tło przycisku */
    color: #1a1a1a !important; /* Ciemny, elegancki tekst na złocie */
    text-decoration: none !important;
    padding: 15px 32px !important;
    border-radius: 50px !important; /* Kształt pastylki */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 25px rgba(223, 197, 133, 0.3) !important;
    border: 2px solid #dfc585 !important;
    transition: all 0.3s ease !important;
}

.btn-hero-reserve:hover {
    background: #ffffff !important; /* Po najechaniu przycisk robi się biały */
    color: #1a1a1a !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.2);
}

/* Responsywność dla telefonów */
@media (max-width: 768px) {
    .hero-glass-box {
        padding: 30px 20px !important;
        margin: 0 15px;
    }
}

/* ==========================================================================
   POPRAWIONA SEKCJA POWITALNA (.welcome-section) - SPÓJNA TYPOGRAFIA
   ========================================================================== */

.welcome-section {
    background-color: #faf9f7 !important; /* Spójne, ciepłe tło z resztą podstrony */
    padding: 0 0 50px 0 !important;
    position: relative;
    width: 100%;
    text-align: left;
}

.welcome-section .container.s1300 {
    max-width: 1100px !important; /* Optymalna szerokość ułatwiająca czytanie */
    margin: 0 auto !important;
    padding: 0 25px;
}

.welcome-content {
    width: 100%;
}

/* Nadtytuł (Subtytuł) */
.welcome-subtitle {
    display: block;
    color: #dfc585 !important; /* Butikowy złoty akcent */
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif !important;
}

/* Główny nagłówek H2 – wymuszamy elegancką szeryfową czcionkę */
.welcome-section h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.2 !important;
    margin: 0 0 15px 0 !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}

.welcome-section h2 span {
    color: #dfc585 !important; /* Złote wyróżnienie */
}

/* Ozdobna złota linia */
.welcome-line {
    width: 60px !important;
    height: 3px !important;
    background: #dfc585 !important;
    border-radius: 999px;
    margin-bottom: 30px !important;
}

/* Akapity tekstowe – wymuszamy czysty Montserrat */
.welcome-lead {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.85 !important;
    color: #2c2825 !important;
    margin-bottom: 20px !important;
    font-weight: 400 !important;
}

.welcome-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #666666 !important;
    margin-bottom: 35px !important;
    font-weight: 400 !important;
}

/* Sekcja z odznakami i nagrodami */
.welcome-badges {
    display: flex !important;
    gap: 30px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 35px !important;
    padding-top: 30px;
    border-top: 1px solid rgba(223, 197, 133, 0.2); /* Delikatna złota linia oddzielająca odznaki */
}

.welcome-badges img {
    max-height: 95px !important;
    width: auto !important;
    display: block !important;
    filter: grayscale(10%) contrast(105%);
    transition: all 0.3s ease;
    opacity: 0.9;
}

.welcome-badges img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-3px);
}


/* ==========================================================================
   KARTY KATEGORIE ZE ZDJĘCIEM W TLE (.quick-categories-section)
   ========================================================================== */

.quick-categories-section {
    background-color: #faf9f7 !important;
    position: relative;
    z-index: 5; 
}

.quick-categories-section .container.s1300 {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 25px;
}

/* Siatka 4 kolumn */
.quick-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
}

/* Klikalny kafelek ze zdjęciem w tle (zmieniony z tagu a na div) */
.category-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 16px !important;
    overflow: hidden !important;
    cursor: pointer !important; /* Kursor dłoni wskazujący, że element jest klikalny */
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid rgba(223, 197, 133, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Przyciemniająca nakładka z płynnym gradientem */
.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(26, 24, 21, 0.5) 0%, rgba(26, 24, 21, 0.85) 100%);
    z-index: 1;
    transition: background 0.3s ease;
}

/* Zawartość karty nad nakładką */
.category-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
}

/* Górny rząd: Numer po jednej stronie, badge po drugiej */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cat-num {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: #dfc585;
}

.cat-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Środek i dół: Tytuł, opis i link ze strzałką */
.category-body h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.category-body p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #e6e2db !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
    opacity: 0.9;
}

.category-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #dfc585 !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.category-link .arrow {
    transition: transform 0.3s ease;
}

/* Efekty po najechaniu myszką (Hover) */
.category-card:hover {
    transform: translateY(-6px) !important;
    border-color: #dfc585 !important;
    box-shadow: 0 18px 40px rgba(223, 197, 133, 0.3) !important;
}

.category-card:hover .category-overlay {
    background: linear-gradient(180deg, rgba(26, 24, 21, 0.4) 0%, rgba(26, 24, 21, 0.75) 100%);
}

.category-card:hover .category-link .arrow {
    transform: translateX(6px);
}


/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 1024px) {
    .quick-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .quick-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   GALERIA KART STRONY / SEKCJA KATEGORII (Butikowy Styl Grid)
   ========================================================================== */

.pages-gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    max-width: 1300px !important;
    margin: 60px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
}

/* Pojedyncza karta */
.pages-gallery .page.sub.is-img {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #1a1a1a !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
    display: flex !important;
    flex-direction: column !important;
    aspect-ratio: 4 / 3 !important; /* Zachowuje idealne proporcje zdjęć */
}

.pages-gallery .page.sub.is-img:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Kontener zdjęcia */
.pages-gallery .image {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.pages-gallery .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.pages-gallery .page.sub.is-img:hover .image img {
    transform: scale(1.08) !important; /* Płynny efekt zoomu po najechaniu */
}

/* Luksusowy gradient nakładany na dół zdjęcia, aby tekst był czytelny */
.pages-gallery .image::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60% !important;
    background: linear-gradient(to top, rgba(26, 24, 21, 0.85) 0%, rgba(26, 24, 21, 0) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Podpis karty (Tytuł h2) */
.pages-gallery .title {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 25px !important;
    margin: 0 !important;
    z-index: 2 !important;
    text-align: left !important;
    color: #f5f5f5;
}

.pages-gallery .title a {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
}

.pages-gallery .pages-gallery .title a:hover,
.pages-gallery .page.sub.is-img:hover .title a {
    color: #dfc585 !important; /* Delikatne złoto po najechaniu */
}

/* --- RESPONSYWNOŚĆ DLA TELEFONÓW --- */
@media (max-width: 768px) {
    .pages-gallery {
        grid-template-columns: 1fr !important; /* Na telefonie jedna karta pod drugą */
        padding: 0 15px !important;
        gap: 20px !important;
        margin: 30px auto !important;
    }
    .pages-gallery .page.sub.is-img {
        aspect-ratio: 16 / 10 !important; /* Nieco niższe karty na telefonach dla lepszej ergonomii */
    }
}

/* ==========================================================================
   GALERIA ZDJĘĆ (.images-gallery) – STYL BUTIKOWY
   ========================================================================== */

.images-gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 25px !important;
    max-width: 1300px !important;
    margin: 50px auto !important;
    padding: 0 25px !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.images-gallery li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Karta pojedynczego zdjęcia */
.images-gallery li a {
    position: relative !important;
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #1a1a1a !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.images-gallery li a:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}

.images-gallery li img {
    width: 100% !important;
    height: 100% !important;
    object-type: cover !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.images-gallery li a:hover img {
    transform: scale(1.07) !important; /* Płynny zoom po najechaniu */
}

/* KLUCZOWE: Zabezpieczenie ikony focus/lupy, by nie blokowała kliknięcia w lightbox */
.images-gallery li a .icon-focus {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    pointer-events: none !important; /* Sprawia, że kliknięcie "przenika" przez ikonę prosto do linku */
    opacity: 0;
    background: rgba(26, 24, 21, 0.3) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%23dfc585" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>') no-repeat center center;
    transition: opacity 0.3s ease;
}

.images-gallery li a:hover .icon-focus {
    opacity: 1; /* Pojawia się elegancka złota lupa po najechaniu */
}

/* --- RESPONSYWNOŚĆ DLA TELEFONÓW --- */
@media (max-width: 768px) {
    .images-gallery {
        grid-template-columns: repeat(2, 1fr) !important; /* Na tablecie/większym telefonie 2 kolumny */
        gap: 15px !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 480px) {
    .images-gallery {
        grid-template-columns: 1fr !important; /* Na małym smartfonie 1 kolumna */
    }
}

/* ==========================================================================
   LISTA AKTUALNOŚCI / ARTYKUŁÓW (.pages-list) – STYL BUTIKOWY
   ========================================================================== */

.pages-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    max-width: 1300px !important;
    margin: 60px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
}

/* Pojedyncza karta aktualności */
.pages-list .page.sub.is-date {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 40px 35px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(223, 197, 133, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.pages-list .page.sub.is-date:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(223, 197, 133, 0.5) !important;
}

/* Data publikacji */
.pages-list .page.sub.is-date .date {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #dfc585 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
}

/* Tytuł artykułu */
.pages-list .page.sub.is-date .title {
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
}

.pages-list .page.sub.is-date .title a {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(22px, 2.5vw, 26px) !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
    display: block !important;
}

.pages-list .page.sub.is-date .title a:hover {
    color: #dfc585 !important;
}

/* Przycisk / Link "Więcej" */
.pages-list .page.sub.is-date .more {
    margin-top: auto !important;
    display: block !important;
}

.pages-list .page.sub.is-date .more a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.3s ease, gap 0.3s ease !important;
}

.pages-list .page.sub.is-date .more a:hover {
    color: #dfc585 !important;
    gap: 12px !important; /* Delikatne zsunięcie napisu w prawo po najechaniu */
}

/* --- RESPONSYWNOŚĆ DLA TELEFONÓW --- */
@media (max-width: 768px) {
    .pages-list {
        grid-template-columns: 1fr !important; /* Na małym ekranie jedna pod drugą */
        padding: 0 15px !important;
        gap: 20px !important;
        margin: 30px auto !important;
    }
    
    .pages-list .page.sub.is-date {
        padding: 30px 25px !important;
    }
}

/* Zabezpieczenie wyglądu karty będącej linkiem w PHP */
a.page.sub {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
}

/* ==========================================================================
   MINIMALISTYCZNA LISTA PODSTRON (Grid: 2-3 kolumny desktop, 1 kolumna mobile)
   ========================================================================== */

.pages-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Domyślnie 3 kolumny na dużych ekranach */
    gap: 20px !important;
    max-width: 1300px !important;
    margin: 50px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
}

/* Pojedynczy element (karta) w siatce */
.pages-list a.page.sub {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-left: 3px solid #dfc585 !important; /* Subtelny złoty znacznik po lewej stronie */
    border-radius: 8px !important;
    padding: 24px 22px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    min-height: 80px !important;
}

/* Dyskretne podświetlenie po najechaniu */
.pages-list a.page.sub:hover {
    border-color: #dfc585 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

/* Tytuł */
.pages-list a.page.sub .title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dyskretna strzałka po prawej stronie karty */
.pages-list a.page.sub::after {
    content: "→" !important;
    font-family: monospace !important;
    font-size: 16px !important;
    color: #dfc585 !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-left: 15px !important;
}

.pages-list a.page.sub:hover::after {
    transform: translateX(4px) !important;
}

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

/* Dla tabletów i mniejszych laptopów (zmniejszamy do 2 kolumn) */
@media (max-width: 992px) {
    .pages-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Dla telefonów (1 kolumna na rząd) */
@media (max-width: 768px) {
    .pages-list {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
        margin: 30px auto !important;
        gap: 15px !important;
    }
    .pages-list a.page.sub {
        padding: 18px 20px !important;
    }
    .pages-list a.page.sub .title {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   OFERTY SPECJALNE (.special-offers-grid) – STYL KART ZE ZDJĘCIEM W TLE
   ========================================================================== */

.special-offers-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    max-width: 1300px !important;
    margin: 50px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
}

/* Każda karta oferty staje się luksusowym kafelkiem ze zdjęciem w tle */
.special-offers-grid a.page.sub.is-img {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Tekst i tytuł na dole karty */
    min-height: 380px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    border: 1px solid rgba(223, 197, 133, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Ukrywamy domyślny kontener obrazka i zamiast tego używamy go jako tła lub nakładamy styl na img */
.special-offers-grid a.page.sub.is-img .image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}

.special-offers-grid a.page.sub.is-img .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Luksusowy, ciemny gradient nakładany na zdjęcie, aby tekst był idealnie czytelny */
.special-offers-grid a.page.sub.is-img::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(26, 24, 21, 0.2) 0%, rgba(26, 24, 21, 0.85) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Tytuł oferty umieszczony nad gradientem */
.special-offers-grid a.page.sub.is-img .title {
    position: relative !important;
    z-index: 2 !important;
    padding: 30px !important;
    margin: 0 !important;
}

.special-offers-grid a.page.sub.is-img .title a,
.special-offers-grid a.page.sub.is-img .title {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: block !important;
}

/* Efekty po najechaniu myszką (Hover) dopasowane do strony głównej */
.special-offers-grid a.page.sub.is-img:hover {
    transform: translateY(-6px) !important;
    border-color: #dfc585 !important;
    box-shadow: 0 18px 40px rgba(223, 197, 133, 0.3) !important;
}

.special-offers-grid a.page.sub.is-img:hover .image img {
    transform: scale(1.08) !important; /* Płynny zoom zdjęcia */
}

.special-offers-grid a.page.sub.is-img:hover .title,
.special-offers-grid a.page.sub.is-img:hover .title a {
    color: #dfc585 !important; /* Złoty akcent tekstu po najechaniu */
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 992px) {
    .special-offers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .special-offers-grid {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
        margin: 30px auto !important;
    }
    .special-offers-grid a.page.sub.is-img {
        min-height: 300px !important;
    }
}

/* ==========================================================================
   BOKS INFORMACYJNY O ZALICZKACH I REZERWACJI
   ========================================================================== */

.reservation-info-box {
    max-width: 900px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    padding: 45px 55px !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(223, 197, 133, 0.25) !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #444444 !important;
    line-height: 1.8 !important;
    box-sizing: border-box !important;
}

/* Nagłówek w boksie */
.reservation-info-box h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important;
    color: #1a1a1a !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #f0ede6 !important;
    font-weight: 600 !important;
}

/* Akapity */
.reservation-info-box p {
    margin: 0 0 15px 0 !important;
    font-size: 15px !important;
}

/* Pogrubienia (w tym numer konta i kwoty) */
.reservation-info-box strong {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

/* Stylizacja list punktowanych z formami płatności */
.reservation-info-box ul {
    margin: 20px 0 !important;
    padding-left: 20px !important;
}

.reservation-info-box li {
    margin-bottom: 10px !important;
    font-size: 15px !important;
    color: #444444 !important;
}

/* --- RESPONSYWNOŚĆ DLA TELEFONÓW --- */
@media (max-width: 768px) {
    .reservation-info-box {
        width: calc(100% - 10px) !important;
        margin: 30px 5px !important;
        padding: 30px 20px !important;
        font-size: 14px !important;
    }
    .reservation-info-box h3 {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   POPRAWIONY UKŁAD I GALERIE DLA OPISU OBIEKTU (.about-facility)
   ========================================================================== */

/* Główny kontener strony z opisem */
.about-facility {
    max-width: 1000px !important;
    margin: 40px auto !important;
    padding: 0 30px !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #444444 !important;
    line-height: 1.8 !important;
    box-sizing: border-box !important;
}

/* Usunięcie nachodzenia zdjęć i naprawa galerii wewnątrz opisu */
.about-facility .images-column,
.about-facility [class*="images-"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin: 35px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Pojedynczy element zdjęcia w galerii opisu */
.about-facility .images-column li,
.about-facility [class*="images-"] li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Link i kontener obrazka w galerii */
.about-facility .images-column li a,
.about-facility [class*="images-"] li a {
    position: relative !important;
    display: block !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #1a1a1a !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(223, 197, 133, 0.25) !important;
    box-sizing: border-box !important;
}

/* Responsywność i zabezpieczenie samych zdjęć przed wychodzeniem poza ekran */
.about-facility .images-column img,
.about-facility [class*="images-"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.about-facility .images-column li a:hover img,
.about-facility [class*="images-"] li a:hover img {
    transform: scale(1.06) !important;
}

/* Ikona lupy (focus), aby nie blokowała kliknięcia i ładnie się pojawiała */
.about-facility .images-column .icon-focus,
.about-facility [class*="images-"] .icon-focus {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    pointer-events: none !important;
    opacity: 0;
    background: rgba(26, 24, 21, 0.35) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%23dfc585" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>') no-repeat center center;
    transition: opacity 0.3s ease;
}

.about-facility .images-column li a:hover .icon-focus,
.about-facility [class*="images-"] li a:hover .icon-focus {
    opacity: 1 !important;
}

/* Nagłówki w opisie obiektu */
.about-facility > h2:first-of-type {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(28px, 3.5vw, 38px) !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
}

.about-facility h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(22px, 3vw, 28px) !important;
    color: #1a1a1a !important;
    margin-top: 50px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(223, 197, 133, 0.3) !important;
    font-weight: 600 !important;
}

.about-facility h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 18px !important;
    color: #1a1a1a !important;
    margin-top: 30px !important;
    margin-bottom: 12px !important;
    font-weight: 600 !important;
}

.about-facility p {
    font-size: 15px !important;
    margin-bottom: 18px !important;
}

/* Lista udogodnień w formie siatki */
.about-facility ul:not([class*="images-"]) {
    margin: 20px 0 30px 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}

.about-facility ul:not([class*="images-"]) li {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 3px solid #dfc585 !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

/* Przyciski w opisie */
.about-facility a.button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #1a1a1a !important;
    color: #dfc585 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 12px 26px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

.about-facility a.button:hover {
    background: #dfc585 !important;
    color: #1a1a1a !important;
    transform: translateY(-2px) !important;
}

.about-facility a.button::after {
    content: "→" !important;
    font-family: monospace !important;
    font-size: 16px !important;
}

.about-facility p:empty {
    display: none !important;
}

/* --- RESPONSYWNOŚĆ DLA TELEFONÓW --- */
@media (max-width: 768px) {
    .about-facility {
        padding: 0 15px !important;
        margin: 25px auto !important;
    }
    .about-facility .images-column,
    .about-facility [class*="images-"] {
        grid-template-columns: 1fr !important; /* Na telefonach zdjęcia idealnie jeden pod drugim, bez wychodzenia poza ekran */
        gap: 15px !important;
    }
    .about-facility ul:not([class*="images-"]) {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   UKŁAD DWUKOLUMNOWY DLA POWITANIA (.about-img)
   ========================================================================== */

.about-facility .about-img {
    display: flex !important;
    align-items: center !important; /* Wyrównanie w pionie do środka */
    gap: 40px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Lewa kolumna z tekstem */
.about-facility .about-img .left {
    flex: 1 !important;
    min-width: 0 !important; /* Zapobiega rozjeżdżaniu się flexboxa */
}

/* Usunięcie domyślnych marginesów pierwszego nagłówka w tej sekcji */
.about-facility .about-img .left h2 {
    margin-top: 0 !important;
    border-bottom: none !important; /* Bez kreski pod głównym nagłówkiem powitalnym */
    padding-bottom: 0 !important;
}

/* Prawa kolumna ze zdjęciem – dopasowana do wysokości tekstu */
.about-facility .about-img .right {
    flex: 0 0 45% !important; /* Zajmuje około 45% szerokości, zostawiając resztę na tekst */
    max-width: 450px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Stylowanie obrazka, aby idealnie pasował i nie był wyższy niż tekst */
.about-facility .about-img .right img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important; /* Ograniczenie maksymalnej wysokości do rozmiaru bloku tekstu */
    object-fit: cover !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(223, 197, 133, 0.3) !important;
    display: block !important;
}

/* --- RESPONSYWNOŚĆ DLA TABLETÓW I TELEFONÓW --- */
@media (max-width: 900px) {
    .about-facility .about-img {
        flex-direction: column !important; /* Na mniejszych ekranach zdjęcie pod tekstem lub nad nim */
        gap: 25px !important;
    }
    .about-facility .about-img .right {
        flex: unset !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .about-facility .about-img .right img {
        max-height: 300px !important; /* Zoptymalizowana wysokość na mobile */
    }
}