/* =========================================================
   LUXURY SPA WARSZAWA
   GŁÓWNY ARKUSZ STYLÓW

   Motyw:
   - czerń
   - burgund
   - złoto
   - zmrożone szkło

   Obsługiwane klasy HTML:
   .hero
   .hours
   .call-button
   .tiles
   .tile.thumb
   .tile.thumb img
   .tile.thumb span
   .seo-text
   footer
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {

   --color-black: #050505;
    --color-burgundy: #2a0711;
    --color-burgundy-light: #5b1730;

    --color-neon: #d94f86;
    --color-neon-soft: rgba(217, 79, 134, 0.44);

    --color-gold: #d4af37;
    --color-gold-light: #f2d675;
    --color-gold-dark: #9a741d;

    --color-text: #f7f2e9;
    --color-text-muted: rgba(247, 242, 233, 0.76);

    --glass-background: rgba(255, 255, 255, 0.08);
    --glass-background-strong: rgba(255, 255, 255, 0.11);
    --glass-border: rgba(255, 255, 255, 0.18);

    --radius-large: 30px;
    --radius-medium: 18px;
    --radius-small: 14px;
    --radius-pill: 999px;

    --page-width: 1180px;
    --content-width: 1000px;
    --text-width: 900px;

    --transition-fast: 180ms ease;
    --transition-medium: 300ms ease;
    --transition-slow: 420ms ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-y: auto;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}


/* =========================================================
   3. BODY
   ========================================================= */

body {

    /* Typografia */
    font-family:
        Inter,
        Arial,
        sans-serif;
    overflow-y: visible;

    color: var(--color-text);

    /* Tło strony */

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.48)
        ),
        url("/img/tlo.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

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

p {
    line-height: 1.8;
}


/* =========================================================
   5. HERO
   ========================================================= */

.hero {

    /* Pozycjonowanie */
    position: relative;
    overflow: hidden;

    /* Rozmiar */
    width: min(
        calc(100% - 40px),
        var(--page-width)
    );

    margin: 36px auto 0;

    padding:
        clamp(48px, 8vw, 96px)
        clamp(24px, 6vw, 80px);

    /* Wyrównanie */
    text-align: center;

    /* Szkło */
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.035)
        ),
        rgba(15, 5, 8, 0.64);

    backdrop-filter:
        blur(22px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(135%);

    /* Obramowanie */
    border:
        1px solid
        var(--glass-border);

    border-radius:
        var(--radius-large);

    /* Cień */
    box-shadow:
        var(--shadow-glass);
}


/* Złota poświata w prawym górnym rogu */

.hero::before {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -170px;
    right: -130px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(242, 214, 117, 0.25),
            transparent 68%
        );
}


/* Burgundowa poświata w lewym dolnym rogu */

.hero::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -130px;
    bottom: -180px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(92, 16, 36, 0.50),
            transparent 70%
        );
}


/* Elementy nad poświatami */

.hero h1,
.hero p,
.hero .hours,
.hero .call-button {

    position: relative;
    z-index: 1;
}


/* Tytuł główny */

.hero h1 {

    margin: 0;

    font-size:
        clamp(3rem, 7vw, 6.4rem);

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.04em;

    background:
        linear-gradient(
            110deg,
            var(--color-gold-dark),
            var(--color-gold-light) 42%,
            #fff3b0 56%,
            var(--color-gold)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow:
        0 10px 35px
        rgba(212, 175, 55, 0.10);
}


/* Tekst w hero */

.hero p {

    max-width: 720px;

    margin: 24px auto 0;

    color:
        var(--color-text-muted);

    font-size:
        clamp(1rem, 1.6vw, 1.18rem);

    line-height: 1.8;
}


/* Godziny otwarcia */

.hero .hours {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 18px;

    color:
        var(--color-gold-light);

    font-size: 0.92rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.hero .hours::before {

    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--color-gold);

    box-shadow:
        0 0 16px
        rgba(212, 175, 55, 0.72);
}


/* =========================================================
   6. BUTTONS
   ========================================================= */

.hero .call-button,
a.call-button {

    /* Układ */
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    margin-top: 28px;

    padding: 0 28px;

    /* Wygląd */
    color: #160d05;

    text-decoration: none;

    font-weight: 700;

    letter-spacing: 0.04em;

    background:
        linear-gradient(
            135deg,
            var(--color-gold-dark),
            var(--color-gold-light)
        );

    /* Obramowanie */
    border:
        1px solid
        rgba(255, 241, 190, 0.56);

    border-radius:
        var(--radius-pill);

    /* Cień */
    box-shadow:
        0 14px 32px
        rgba(212, 175, 55, 0.22);

    /* Animacja */
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}


.hero .call-button:hover,
a.call-button:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.07);

    box-shadow:
        var(--shadow-gold);
}


/* =========================================================
   7. TILES
   ========================================================= */

.tiles {

    /* Rozmiar */
    width: min(
        calc(100% - 40px),
        var(--content-width)
    );

    margin: 36px auto 0;

    /* Grid */
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


/* Pojedynczy kafelek */

.tile.thumb {

    /* Pozycjonowanie */
    position: relative;

    isolation: isolate;

    overflow: hidden;

    /* Rozmiar */
    min-height: 240px;

    /* Wygląd */
    color:
        var(--color-text);

    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.035)
        ),
        rgba(16, 5, 9, 0.62);

    /* Szkło */
    backdrop-filter:
        blur(18px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(130%);

    /* Obramowanie */
    border:
        1px solid
        var(--glass-border);

    border-radius:
        var(--radius-medium);

    /* Cień */
    box-shadow:
        var(--shadow-glass);


    /* Animacja */
    transition:
        transform var(--transition-medium),
        border-color var(--transition-medium),
        box-shadow var(--transition-medium);
}


/* Przyciemnienie zdjęcia */

.tile.thumb::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.88),
            transparent 58%
        ),
        linear-gradient(
            135deg,
            rgba(74, 16, 32, 0.34),
            transparent 48%
        );
}


/* Wewnętrzna szklana krawędź */

.tile.thumb::after {

    content: "";

    position: absolute;

    inset: 1px;

    z-index: 3;

    pointer-events: none;

    border-radius:
        calc(var(--radius-medium) - 1px);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.10);
}


/* Zdjęcie w kafelku */

.tile.thumb img {

    width: 100%;
    height: 240px;

    object-fit: cover;

    filter:
        brightness(0.58)
        saturate(0.82);

    transform:
        scale(1.001);

    transition:
        transform var(--transition-slow),
        filter var(--transition-slow);
}


/* Podpis na kafelku */

.tile.thumb span {

    /* Pozycjonowanie */
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    z-index: 4;

    /* Rozmiar */
    padding: 14px 18px;

    /* Tekst */
    color:
        var(--color-gold-light);

    text-align: center;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(1.35rem, 2.4vw, 2rem);

    font-weight: 600;

    /* Szkło */
    background:
        rgba(9, 4, 6, 0.48);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    /* Obramowanie */
    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius:
        var(--radius-small);

    /* Animacja */
    transition:
        color var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium);
}


/* =========================================================
   8. HOVER
   Hover działa tylko tam, gdzie urządzenie faktycznie
   obsługuje kursor myszy.
   Dzięki temu nie blokuje przewijania na telefonie.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .tile.thumb:hover {

        transform:
            translateY(-6px);

        border-color:
            var(--glass-gold-border);

        box-shadow:
            0 30px 78px
            rgba(0, 0, 0, 0.54),

            0 12px 32px
            rgba(212, 175, 55, 0.12);
    }


    .tile.thumb:hover img {

        filter:
            brightness(0.82)
            saturate(1);

        transform:
            scale(1.055);
    }


    .tile.thumb:hover span {

        color: #160d05;

        background:
            linear-gradient(
                135deg,
                var(--color-gold-dark),
                var(--color-gold-light)
            );

        border-color:
            rgba(255, 244, 201, 0.48);
    }
}


/* Fokus klawiatury */

.tile.thumb:focus-visible,
.call-button:focus-visible {

    outline:
        2px solid
        var(--color-gold-light);

    outline-offset: 4px;
}


/* =========================================================
   9. SEO TEXT
   ========================================================= */

.seo-text {

    /* Rozmiar */
    width: min(
        calc(100% - 40px),
        var(--text-width)
    );

    margin: 42px auto 0;

    padding:
        clamp(34px, 5vw, 60px);

    /* Tekst */
    text-align: center;

    /* Szkło */
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        ),
        rgba(14, 4, 8, 0.60);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    /* Obramowanie */
    border:
        1px solid
        var(--glass-border);

    border-radius:
        var(--radius-large);

    /* Cień */
    box-shadow:
        var(--shadow-glass);
}


.seo-text h2 {

    margin: 0 0 20px;

    color:
        var(--color-gold-light);

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height: 1.1;
}


.seo-text p {

    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        clamp(1rem, 1.4vw, 1.08rem);

    line-height: 1.9;
}


.seo-text p + p {

    margin-top: 18px;
}


/* =========================================================
   10. FOOTER
   ========================================================= */

footer {

    /* Rozmiar */
    width: min(
        calc(100% - 40px),
        var(--page-width)
    );

    margin: 42px auto 0;

    padding: 24px 18px;

    /* Tekst */
    color:
        rgba(247, 242, 233, 0.48);

    text-align: center;

    font-size: 0.80rem;

    letter-spacing: 0.08em;

    /* Wygląd */
    background:
        rgba(255, 255, 255, 0.025);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-top:
        1px solid
        rgba(212, 175, 55, 0.18);
}


/* =========================================================
   11. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 820px) {

    .tiles {

        grid-template-columns: 1fr;
    }


    .tile.thumb,
    .tile.thumb img {

        min-height: 220px;
        height: 220px;
    }
}


/* =========================================================
   12. RESPONSIVE — PHONE
   ========================================================= */

@media (max-width: 560px) {

    .hero,
    .tiles,
    .seo-text,
    footer {

        width:
            calc(100% - 24px);
    }


    .hero {

        margin-top: 12px;

        padding:
            44px 22px;

        border-radius: 22px;
    }


    .hero h1 {

        font-size:
            clamp(2.5rem, 13vw, 4rem);
    }


    .hero p {

        line-height: 1.65;
    }


    .hero .hours {

        display: flex;

        line-height: 1.5;
    }


    .hero .call-button,
    a.call-button {

        width: 100%;
    }


    .tiles {

        margin-top: 18px;

        gap: 16px;
    }


    .tile.thumb {

        min-height: 185px;

        border-radius: 18px;
    }


    .tile.thumb img {

        height: 185px;
    }


    .tile.thumb span {

        left: 12px;
        right: 12px;
        bottom: 12px;

        padding: 12px 14px;

        border-radius: 13px;
    }


    .seo-text {

        margin-top: 18px;

        padding: 30px 22px;

        border-radius: 22px;
    }


    footer {

        margin-top: 18px;

        padding: 22px 12px;

        font-size: 0.72rem;

        line-height: 1.6;
    }
}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }
}


/* Masazystki */

.goddess-section {
    margin-top: 80px;
}

/* LAYOUT */
.goddess-layout {
    margin: 0 auto;
    padding: 100px 24px;
}


.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card {
    background: rgba(15,15,18,.65);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.35);
    box-shadow: 0 0 25px rgba(0,0,0,.7);
    transition: .4s ease;
}

    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 0 35px rgba(255,40,40,.45);
    }

/* ZDJĘCIE */
.card-image {
    width:100%;
    height: 320px;
    overflow: hidden;
}

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s ease;
    }

.card:hover img {
    transform: scale(1.08);
}

/* TREŚĆ */
.card-body {
    padding: 20px;
    text-align: center;
}

    .card-body h3 {
        margin: 10px 0 5px;
        font-size: 26px;
        color: #d4af37;
        letter-spacing: 1px;
    }

    .card-body p {
        font-size: 15px;
        color: #ddd;
        opacity: .85;
    }

/* PRZYCISKI */
.card-buttons {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.card-call {
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    background: linear-gradient(135deg, #d4af37, #f7d483, #d4af37);
    box-shadow: 0 0 12px rgba(255,40,40,.55);
    transition: .3s;
}

    .card-call:hover {
        filter: brightness(1.15);
        transform: scale(1.05);
    }

.card-gallery {
    padding: 10px 22px;
    border-radius: 30px;
    text-decoration: none;
    color: #d4af37;
    border: 2px solid #d4af37;
    transition: .3s;
}

    .card-gallery:hover {
        background: #d4af37;
        color: #000;
        transform: scale(1.05);
    }

/* TABLET */
@media (min-width: 600px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* DESKTOP */
@media (min-width: 1024px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Galeria */

.gallery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    .gallery-overlay.active {
        display: flex;
    }

.gallery-box {
    background: radial-gradient(circle at top, #2a0000, #000);
    padding: 10px;
    border-radius: 18px;
    max-width: 1000px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 40px rgba(255,40,40,.6);
    position: relative;
    animation: fadeIn .4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gallery-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 34px;
    color: #d4af37;
    cursor: pointer;
}

.gallery-name {
    color: #d4af37;
    font-size: 30px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.gallery-images {
    position: relative;
    height: 320px;
    overflow: hidden;
}

.gallery-track {
    display: flex;
    height: 100%;
    transition: transform 0.45s ease;
}

    .gallery-track img {
        min-width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 14px;
        box-shadow: 0 0 15px rgba(255,40,40,.4);
    }


/* ZADZWOŃ */
.gallery-call {
    display: inline-block;
    margin-top: 25px;
    padding: 14px 36px;
    border-radius: 40px;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    background: linear-gradient(135deg, #d4af37, #f7d483, #d4af37);
    box-shadow: 0 0 18px rgba(255,40,40,.7);
}

.gallery-counter {
    color: #d4af37;
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: .85;
}

/* STRZAŁKI */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(212,175,55,.6);
    color: #d4af37;
    font-size: 40px;
    width: 48px;
    height: 70px;
    border-radius: 12px;
    cursor: pointer;
    z-index: 10;
    transition: .3s;
}

    .gallery-arrow.left {
        left: -18px;
    }

    .gallery-arrow.right {
        right: -18px;
    }

    .gallery-arrow:hover {
        background: rgba(255,40,40,.4);
        box-shadow: 0 0 20px rgba(255,40,40,.6);
    }




/* Cennik */

.container {
    max-width: 700px;
    width: 100%;
    margin: 80px auto;
    background: rgba(0, 0, 0, 0.55);
    padding: 30px 40px;
    border-radius: 15px;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 35px rgba(255, 40, 40, 0.35), inset 0 0 25px rgba(212,175,55,0.20);
}


.title {
    text-align: center;
    color: #d4af37;
    font-size: 38px;
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 50, 50, 0.6);
}


@keyframes breathe {
    0% {
        box-shadow: 0 0 0 rgba(255, 40, 40, 0.3);
    }

    50% {
        box-shadow: 0 0 18px rgba(255, 40, 40, 0.55);
    }

    100% {
        box-shadow: 0 0 0 rgba(255, 40, 40, 0.3);
    }
}

.accordion-item {
    border: 1px solid rgba(212,175,55,0.45);
    background: rgba(18,18,22,0.60);
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
}

    /* PODŚWIETLENIE CZERWONE PRZY HOVER */
    .accordion-item:hover {
        box-shadow: 0 0 20px rgba(255, 50, 50, 0.55);
    }

.accordion-header {
    width: 100%;
    background: #131317;
    color: #d4af37;
    padding: 17px 20px;
    font-size: 22px;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    animation: breathe 5s infinite ease-in-out;
}

    .accordion-header.active {
        background: rgba(255, 40, 40, 0.25);
        color: #ffd5d5;
    }

    .accordion-header .arrow {
        font-size: 18px;
        transition: 0.3s ease;
        color: #d4af37;
    }

.accordion-content {
    max-height: 0;
    overflow: hidden;


}

    .accordion-content p {
        margin: 12px 0;
        padding-bottom: 5px;
        border-bottom: 1px solid #24242c;
        padding: 0 20px;
        color: #e0e0e0;
        font-size: 18px;
        transition: max-height 0.35s ease;
    }

/* PRZYCISKI – LUKSUSOWE */
.buttons_cennik {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* ZADZWOŃ – GRADIENT ROSE GOLD + RED GLOW */
.call-cennik {
    padding: 15px 30px;
    font-size: 20px;
    border-radius: 50px;
    text-decoration: none;
    background: linear-gradient(135deg, #d4af37, #f7d483, #d4af37);
    color: #000;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0 0 15px rgba(255, 60, 60, 0.55);
}

    .call-cennik:hover {
        transform: scale(1.05);
        filter: brightness(1.17);
    }

/* DOWIEDZ SIĘ WIĘCEJ */
.more-btn {
    padding: 15px 30px;
    font-size: 20px;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #d4af37;
    color: #d4af37;
    transition: 0.3s;
}

    .more-btn:hover {
        background: #d4af37;
        color: #000;
        transform: scale(1.05);
    }