@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:wght@600&display=swap');

/* Theme Name: Bebnikat Theme 
Author: Marta 
Version: 1.1 
*/

h1, h2 {
    font-family: "Playfair Display", serif;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Inter, sans-serif;
    background: #0b0b0b;
    color: #fff;
    overflow-x: hidden;
}

/* GRAIN TEXTURE */
body:before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    opacity: .04;
    pointer-events: none;
    z-index: 9999;
}

/* HERO SLIDER BACKGROUNDS */
.hero-slider {
    position: relative;
    height: 100vh;
    min-height: 850px; /* Zapobiega zgniataniu na małych laptopach */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-slider:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5));
    pointer-events: none;
    z-index: 2;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slideFade 18s infinite, zoomHero 18s infinite;
    z-index: 1;
}

.hero-slide:nth-child(1) { background-image: url("/wp-content/uploads/2026/02/PHOTO-2026-02-15-14-52-21.jpg"); animation-delay: 0s; }
.hero-slide:nth-child(2) { background-image: url("/wp-content/uploads/2026/02/c82a0076-6d54-41ad-88c2-402648b87c32.jpg"); animation-delay: 6s; }
.hero-slide:nth-child(3) { background-image: url("/wp-content/uploads/2026/02/e58402dc-0273-43e4-9656-4c4e76e87527.jpg"); animation-delay: 12s; }

@keyframes slideFade { 0%{opacity:0} 10%{opacity:1} 30%{opacity:1} 40%{opacity:0} 100%{opacity:0} }
@keyframes zoomHero { 0%{transform:scale(1)} 100%{transform:scale(1.05)} }

/* HERO BOX - STABILNY KONTENER */
.hero-text {
    position: relative;
    z-index: 10;
    text-align: center;
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(20px);
    padding: 60px 50px;
    border-radius: 32px;
    max-width: 800px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 90px rgba(0,0,0,0.7);
    margin-bottom: 40px; /* Daje stały odstęp od przycisków */
}

.hero-kicker { display: block; letter-spacing: 4px; font-size: 12px; opacity: .7; margin-bottom: 15px; text-transform: uppercase; }
.hero-text h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 15px; line-height: 1.1; }
.hero-text p { font-size: clamp(16px, 2vw, 20px); margin-bottom: 25px; opacity: 0.9; }

/* EVENT BUTTONS - NAPRAWA ROZJAZDU */
.hero-events {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Pozwala przyciskom przeskoczyć do nowej linii zamiast wybuchać */
    max-width: 1200px;
    width: 95%;
}

.hero-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px; /* Zmniejszone z 85px - to był powód rozjazdu! */
    min-width: 180px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    font-size: 18px;
    text-decoration: none;
    color: #fff;
    transition: all .3s ease;
    cursor: pointer;
}

.hero-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.5);
}

/* FEATURES & PHOTO GRID */
.section-title { text-align: center; font-size: 36px; margin: 80px 0 40px; }

.features {
    max-width: 1200px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 0 30px;
    text-align: center;
}

.feature {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px 30px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.photo-grid {
    max-width: 1200px;
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 0 30px;
}

.photo-grid img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* SEO SECTION */
.seo-text {
    max-width: 800px;
    margin: 100px auto;
    padding: 60px 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* FLOATING CTA */
.floating-cta {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(20px);
    padding: 12px 25px;
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 10000;
}

.floating-cta a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }

/* MOBILE FIXES */
@media(max-width: 768px) {
    .hero-slider { height: auto; min-height: 100vh; padding: 100px 0; }
    .hero-text { padding: 30px 20px; width: 85%; }
    .hero-events { flex-direction: column; align-items: center; width: 100%; }
    .hero-card { width: 80%; }
    .photo-grid { grid-template-columns: 1fr; }
}

/* UKRYCIE MENU WP */
nav, .menu, .main-navigation, .wp-block-navigation { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:wght@600&display=swap');



/* Theme Name: Bebnikat Theme 

Author: Marta 

Version: 1.1 

*/



h1, h2 {

    font-family: "Playfair Display", serif;

}



html, body {

    margin: 0;

    padding: 0;

    font-family: Inter, sans-serif;

    background: #0b0b0b;

    color: #fff;

    overflow-x: hidden;

}



/* GRAIN TEXTURE */

body:before {

    content: "";

    position: fixed;

    inset: 0;

    background-image: url("https://grainy-gradients.vercel.app/noise.svg");

    opacity: .04;

    pointer-events: none;

    z-index: 9999;

}



/* HERO SLIDER BACKGROUNDS */

.hero-slider {

    position: relative;

    height: 100vh;

    min-height: 850px; /* Zapobiega zgniataniu na małych laptopach */

    width: 100vw;

    margin-left: calc(-50vw + 50%);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.hero-slider:after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5));

    pointer-events: none;

    z-index: 2;

}



.hero-slide {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0;

    animation: slideFade 18s infinite, zoomHero 18s infinite;

    z-index: 1;

}



.hero-slide:nth-child(1) { background-image: url("/wp-content/uploads/2026/02/PHOTO-2026-02-15-14-52-21.jpg"); animation-delay: 0s; }

.hero-slide:nth-child(2) { background-image: url("/wp-content/uploads/2026/02/c82a0076-6d54-41ad-88c2-402648b87c32.jpg"); animation-delay: 6s; }

.hero-slide:nth-child(3) { background-image: url("/wp-content/uploads/2026/02/e58402dc-0273-43e4-9656-4c4e76e87527.jpg"); animation-delay: 12s; }



@keyframes slideFade { 0%{opacity:0} 10%{opacity:1} 30%{opacity:1} 40%{opacity:0} 100%{opacity:0} }

@keyframes zoomHero { 0%{transform:scale(1)} 100%{transform:scale(1.05)} }



/* HERO BOX - STABILNY KONTENER */

.hero-text {

    position: relative;

    z-index: 10;

    text-align: center;

    background: rgba(20, 20, 20, 0.4);

    backdrop-filter: blur(20px);

    padding: 60px 50px;

    border-radius: 32px;

    max-width: 800px;

    width: 90%;

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow: 0 30px 90px rgba(0,0,0,0.7);

    margin-bottom: 40px; /* Daje stały odstęp od przycisków */

}



.hero-kicker { display: block; letter-spacing: 4px; font-size: 12px; opacity: .7; margin-bottom: 15px; text-transform: uppercase; }

.hero-text h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 15px; line-height: 1.1; }

.hero-text p { font-size: clamp(16px, 2vw, 20px); margin-bottom: 25px; opacity: 0.9; }



/* EVENT BUTTONS - NAPRAWA ROZJAZDU */

.hero-events {

    position: relative;

    z-index: 10;

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap; /* Pozwala przyciskom przeskoczyć do nowej linii zamiast wybuchać */

    max-width: 1200px;

    width: 95%;

}



.hero-card {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px 40px; /* Zmniejszone z 85px - to był powód rozjazdu! */

    min-width: 180px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(20px);

    font-size: 18px;

    text-decoration: none;

    color: #fff;

    transition: all .3s ease;

    cursor: pointer;

}



.hero-card:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: translateY(-5px);

    border-color: rgba(255, 255, 255, 0.5);

}



/* FEATURES & PHOTO GRID */

.section-title { text-align: center; font-size: 36px; margin: 80px 0 40px; }



.features {

    max-width: 1200px;

    margin: 0 auto 60px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    padding: 0 30px;

    text-align: center;

}



.feature {

    background: rgba(255, 255, 255, 0.05);

    padding: 40px 30px;

    border-radius: 26px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

}



.photo-grid {

    max-width: 1200px;

    margin: 60px auto;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

    padding: 0 30px;

}



.photo-grid img {

    width: 100%;

    height: 300px;

    object-fit: cover;

    border-radius: 18px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.4);

}



/* SEO SECTION */

.seo-text {

    max-width: 800px;

    margin: 100px auto;

    padding: 60px 40px;

    text-align: center;

    background: rgba(255, 255, 255, 0.02);

    border-radius: 28px;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



/* FLOATING CTA */

.floating-cta {

    position: fixed;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0,0,0,0.8);

    backdrop-filter: blur(20px);

    padding: 12px 25px;

    border-radius: 40px;

    border: 1px solid rgba(255,255,255,0.2);

    z-index: 10000;

}



.floating-cta a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }



/* MOBILE FIXES */

@media(max-width: 768px) {

    .hero-slider { height: auto; min-height: 100vh; padding: 100px 0; }

    .hero-text { padding: 30px 20px; width: 85%; }

    .hero-events { flex-direction: column; align-items: center; width: 100%; }

    .hero-card { width: 80%; }

    .photo-grid { grid-template-columns: 1fr; }

}



/* UKRYCIE MENU WP */

nav, .menu, .main-navigation, .wp-block-navigation { display: none !important; }/* =========================================

   STYLE PODSTRONY (BEZPIECZNE + POPRAWKI)

   ========================================= */



.marta-subpage-fix { position: relative; width: 100%; z-index: 10; }



.subpage-navigation { position: absolute; top: 40px; right: 50px; z-index: 1001; }

.nav-crystal-box {

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(20px);

    padding: 12px 30px;

    border-radius: 50px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    display: flex; gap: 20px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.5);

}

.nav-crystal-box a { color: #fff !important; text-decoration: none !important; font-size: 14px; font-weight: 500; }



.subpage-18-main { max-width: 1000px; margin: 0 auto; padding: 100px 25px; text-align: center; }



/* WIDEO */

.video-container-marta {

    position: relative; width: 100%; max-width: 750px; margin: 40px auto;

    border-radius: 25px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15);

}

.hero-video { width: 100%; height: auto; display: block; }

.hero-text-overlay {

    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    background: rgba(20, 20, 20, 0.4); backdrop-filter: blur(20px);

    padding: 30px; border-radius: 20px; width: 80%;

}



/* CRYSTAL BUTTONY */

.features-buttons-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 80px; }

.feature-crystal-button {

    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 15px 20px; border-radius: 15px; backdrop-filter: blur(15px);

    transition: all 0.3s ease;

}

.feature-crystal-button:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); }



/* --- GALERIA 2x2 Z PODSKOKIEM --- */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 20px; max-width: 800px; margin: 40px auto;

}

.gallery-item {

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sprężysty skok */

}

.gallery-item:hover {

    transform: translateY(-12px) scale(1.03); /* PODSKOK I LEKKIE POWIĘKSZENIE */

}

.gallery-item img {

    width: 100%; height: 220px !important;

    object-fit: cover; display: block;

}



/* --- LIGHTBOX (NAPRAWIONY) --- */

.lightbox-overlay {

    position: fixed !important;

    inset: 0 !important;

    background: rgba(0, 0, 0, 0.95) !important;

    display: none !important;

    justify-content: center !important;

    align-items: center !important;

    z-index: 999999 !important;

    backdrop-filter: blur(15px);

}

.lightbox-overlay.show { display: flex !important; }

.lightbox-overlay img { max-width: 90vw !important; max-height: 85vh !important; border-radius: 10px; }

#lightbox-close {

    position: absolute !important; top: 20px !important; right: 30px !important;

    color: white !important; font-size: 50px !important;

    background: none !important; border: none !important; cursor: pointer !important;

}
/* --- TYLKO DLA PODSTRONY KONTAKT --- */
.page-id-kontakt .marta-subpage-fix {
    padding-top: 100px;
    background: #0b0b0b !important;
}

.contact-section-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

.route-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.route-flex img {
    width: 450px;
    border-radius: 25px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.5);
}

.route-description {
    font-size: 18px;
    line-height: 1.7;
    text-align: left;
}

.map-wide {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    filter: grayscale(1) invert(0.92) contrast(1.2); /* Efekt ciemnej mapy */
    margin-bottom: 60px;
}

.wa-contact-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
}

.wa-card {
    background: rgba(255,255,255,0.05);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    min-width: 260px;
    text-align: center;
}

.wa-crystal-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(37, 211, 102, 0.1);
    color: #25d366 !important;
    border: 1px solid rgba(37, 211, 102, 0.3);
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.wa-crystal-btn:hover {
    background: rgba(37, 211, 102, 0.2);
    transform: translateY(-3px);
}

.socials-footer {
    text-align: center;
    padding: 40px 0 100px;
}

.socials-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.social-circle {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    text-decoration: none;
    transition: 0.3s;
}

.social-circle:hover { background: white; color: black !important; }

@media (max-width: 768px) {
    .route-flex { flex-direction: column; text-align: center; }
    .route-flex img { width: 100%; }
    .wa-contact-grid { flex-direction: column; align-items: center; }
}
/* WIDEO W TLE CAŁEJ SEKCJI */
.background-video-18 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Pod spodem treści */
    filter: brightness(0.3) contrast(1.2); /* Przyciemnione, by napisy były czytelne */
}

/* FIX DLA WRAPPERA - musi być przezroczysty, by widzieć wideo */
.marta-subpage-fix {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* ULTRA CRYSTAL BOX - TERAZ WIDAĆ LUDZI! */
.hero-text-overlay {
    background: rgba(255, 255, 255, 0.05) !important; /* Prawie brak tła */
    backdrop-filter: blur(20px) !important; /* Mocny efekt mrożonego szkła */
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important;
    width: 85% !important;
}

/* PRZYCISKI CECH (Jacuzzi, Ognisko itp.) */
.feature-crystal-button {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

.feature-crystal-button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
/* --- WSPÓLNA BAZA DLA WSZYSTKICH SUBSTRON --- */
.marta-subpage-fix {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- TŁO DLA 18-STEK (CIEMNE, MROCZNE) --- */
.page-id-2358 .marta-subpage-fix { /* Podmień 2358 na ID strony 18-stek jeśli znasz, lub zostaw ogólną klasę */
    background: 
      linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.9)), 
      url('https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat fixed !important;
}

/* --- TŁO DLA INTEGRACJI (JAŚNIEJSZE, LEŚNE) --- */
.marta-subpage-integracje {
    background: 
      linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.4)), 
      url('https://images.pexels.com/photos/1037199/pexels-photo-1037199.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat fixed !important;
}

/* --- UNIWERSALNY KRYSZTAŁOWY BOX (BEZ FILTRÓW BRIGHTNESS!) --- */
.hero-text-overlay {
    background: rgba(255, 255, 255, 0.05) !important; 
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    width: 70% !important;
    margin: 0 auto;
}

.hero-text-overlay p {
    font-size: 18px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    line-height: 1.5;
    margin: 0;
}

/* --- PRZYCISKI CECH (DELIKATNE SZKŁO) --- */
.feature-crystal-button {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 10px 20px;
    border-radius: 50px;
    color: white;
    transition: all 0.3s ease;
}