/* ==============================
   1. RESET + BOX-SIZING
   ============================== */

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

html {
    scroll-behavior: smooth;
}

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

/* ==============================
   2. ZMIENNE GLOBALNE (KOLORY, TYPO, SPACING)
   ============================== */

:root {
    /* Kolory inspirowane logo – ciepłe, „spa”, eleganckie */
    --color-bg-page: #fff9f4;
    --color-bg-alt: #fdf3eb;
    --color-surface: #ffffff;

    --color-primary: #d4876c;       /* główny kolor – przyciski, linki */
    --color-primary-dark: #b76a52;  /* hover */
    --color-primary-soft: #f6c9ae;  /* delikatne tła */

    --color-accent-rose: #e0a4a3;   /* akcenty, ikonki */
    --color-accent-mint: #8ac3b3;   /* drobne akcenty „medyczne” */

    --color-heading: #241814;
    --color-text: #4d3b33;
    --color-muted: #8f7a70;

    --color-border-subtle: #f0dfd4;
    --color-border-strong: #e0c6b4;

    --shadow-soft: 0 18px 45px rgba(15, 10, 6, 0.06);
    --shadow-subtle: 0 10px 25px rgba(15, 10, 6, 0.04);

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --transition-fast: 150ms ease-out;
    --transition-normal: 220ms ease-out;

    --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Playfair Display", "Times New Roman", serif;

    /* Skala odstępów (REM -> zależne od font-size) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
}

/* ==============================
   3. BAZA: BODY, TYPOGRAFIA, LINKI
   ============================== */

body {
    font-family: var(--font-ui);
    background: var(--color-bg-page);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* Nagłówki – elegancka typografia */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
}

h1 {
    font-size: clamp(2.5rem, 3vw + 1rem, 3.4rem);
    line-height: 1.1;
}

h2 {
    font-size: clamp(2rem, 2.5vw + 1rem, 2.6rem);
    margin-bottom: var(--space-4);
}

h3 {
    font-size: 1.4rem;
    margin-bottom: var(--space-2);
}

p {
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

/* Linki ogólne */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--color-primary-dark);
}

/* Przyciski w formularzach itp. */
button {
    font-family: inherit;
    font-size: 1rem;
    border: none;
    background: none;
    cursor: pointer;
}

/* ==============================
   4. LAYOUT: CONTAINER, SEKCJE, GRID
   ============================== */

/* Szerokość treści */
.container {
    width: min(1120px, 100% - 3rem);
    margin-inline: auto;
}

/* Ogólne sekcje – użyjesz np. .section.section--light */
.section {
    padding-block: var(--space-7);
}

.section--tight {
    padding-block: var(--space-5);
}

.section--light {
    background: var(--color-bg-page);
}

.section--surface {
    background: var(--color-surface);
}

.section--alt {
    background: var(--color-bg-alt);
}

/* Nagłówek sekcji (tytuł + mały opis) */
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-6);
}

.section-header p {
    color: var(--color-muted);
}

/* Uniwersalna siatka */
.grid {
    display: grid;
    gap: var(--space-5);
}

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

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Na mobile siatka zawsze spada do 1 kolumny */
@media (max-width: 768px) {
    .grid--2,
    .grid--3 {
        grid-template-columns: 1fr;
    }

    .section {
        padding-block: var(--space-6);
    }
}

/* Proste helpery */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Stack dla pionowego układania elementów */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ==============================
   5. NAWIGACJA / TOPBAR (ogólnie)
   ============================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 249, 244, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(224, 198, 180, 0.35);
}

.navbar-inner {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo + nazwa */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Linki nawigacji */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.95rem;
}

.nav-link {
    color: var(--color-muted);
    position: relative;
    padding-block: 4px;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link--active::after {
    width: 100%;
    /* podkreślenie pod aktywnym linkiem */
}

/* Mobile – prosty burger możesz dorobić później */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* na początek, później zmienisz na menu mobilne */
    }
}

/* ==============================
   6. PRZYCISKI
   ============================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition:
            background-color var(--transition-normal),
            color var(--transition-normal),
            box-shadow var(--transition-normal),
            transform var(--transition-fast);
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary-soft);
    outline-offset: 2px;
}

/* Główny przycisk – np. "Umów wizytę" */
.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* Przyciski jasne na białym tle */
.btn-ghost {
    background: #ffffff;
    color: var(--color-primary);
    border-color: var(--color-border-strong);
}

.btn-ghost:hover {
    background: var(--color-primary-soft);
    color: var(--color-heading);
}

/* Mały wariant – np. w kartach */
.btn-sm {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
}

/* ==============================
   7. KARTY / BOX-IKI
   ============================== */

.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(240, 223, 212, 0.7);
}

/* Lżejsza karta np. w stopce */
.card--subtle {
    box-shadow: var(--shadow-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

/* Ikona w kółku – jak w kartach usług */
.card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}

/* Separator listy w kartach */
.card-list {
    list-style: none;
    display: grid;
    gap: 0.35rem;
    margin-top: var(--space-2);
    color: var(--color-muted);
}

.card-list li::before {
    content: "✔";
    margin-right: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-primary);
}

/* ==============================
   8. HERO / NAGŁÓWEK LANDINGU (ogólne style)
   ============================== */

/* Układ 2 kolumn – tekst + obrazek */
.hero {
    padding-block: var(--space-8);
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-7);
}

.hero-kicker {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent-rose);
    margin-bottom: var(--space-3);
}

.hero-title {
    margin-bottom: var(--space-4);
}

.hero-lead {
    font-size: 1rem;
    max-width: 34rem;
    color: var(--color-muted);
    margin-bottom: var(--space-5);
}

.hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero-image {
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

/* Mobile – hero w kolumnie */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-block: var(--space-6);
    }
}

/* ==============================
   9. STOPKA
   ============================== */

.footer {
    background: #f6e8dd;
    padding-block: var(--space-6);
    margin-top: var(--space-7);
    border-top: 1px solid rgba(224, 198, 180, 0.7);
    font-size: 0.9rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.footer-title {
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--color-heading);
}

.footer-links {
    list-style: none;
    display: grid;
    gap: 0.35rem;
}

.footer-links a {
    color: var(--color-muted);
}

.footer-links a:hover {
    color: var(--color-primary-dark);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-muted);
    border-top: 1px solid rgba(240, 223, 212, 0.8);
    padding-top: var(--space-3);
}

/* Social ikonki w stopce */
.social-links {
    display: flex;
    gap: 0.75rem;
}

/* Responsywna stopka */
@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 249, 244, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(224, 198, 180, 0.35);
}
.nav-link {
    color: var(--color-muted);
}
.nav-link:hover::after {
    width: 100%;
}

/* ==============================
   FOOTER – CIEMNY, ELEGANCKI, SPA
   ============================== */

.site-footer {
    background: linear-gradient(
            to bottom,
            #4a352c 0%,
            #3b2a23 100%
    );
    padding-block: var(--space-7);
    margin-top: var(--space-7);
}

/* GRID */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-5);
}

/* TYTUŁY */
.footer-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
    color: #fff3ec;
}

/* TEKST */
.footer-text {
    color: #e6d6cc;
    font-size: 0.9rem;
    line-height: 1.6;
}

.site-footer p,
.site-footer a {
    font-size: 0.9rem;
    color: #e6d6cc;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-primary-soft);
}

/* IKONY */
.site-footer i {
    margin-right: 0.4rem;
    color: var(--color-primary-soft);
}

/* MAPA */
.footer-map {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.footer-map iframe {
    width: 100%;
    height: 150px;
    border: 0;
}

/* SOCIAL */
.footer-socials {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition:
            transform var(--transition-fast),
            background-color var(--transition-fast),
            color var(--transition-fast);
}

.footer-socials a:hover {
    background: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

/* CTA */
.footer-cta {
    width: 100%;
}

/* DOLNA BELKA */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.85rem;
    color: #d6c2b6;
}

.footer-bottom a {
    color: #d6c2b6;
}

.footer-bottom a:hover {
    color: var(--color-primary-soft);
}

/* ==============================
   RESPONSYWNOŚĆ
   ============================== */

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==============================
   FOOTER – MOBILE FIX
   ============================== */

/* ogólnie: trochę mniej paddingu na telefonie */
@media (max-width: 600px) {
    .site-footer{
        padding-block: var(--space-6);
    }

    /* ładniejsze „sekcje” w jednej kolumnie */
    .footer-grid{
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .footer-grid > div{
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    }

    /* kolejność: najpierw kontakt + social/cta, potem brand, potem mapa */
    .footer-grid > div:nth-child(2){ order: 1; } /* Kontakt */
    .footer-grid > div:nth-child(4){ order: 2; } /* Social */
    .footer-grid > div:nth-child(1){ order: 3; } /* Brand */
    .footer-grid > div:nth-child(3){ order: 4; } /* Mapa */

    /* tytuły bardziej „klikalne” i zwarte */
    .footer-title{
        font-size: 1.05rem;
        margin-bottom: var(--space-2);
    }

    /* kontakt: ikonka i tekst w jednej linii + większe odstępy */
    .site-footer p{
        margin-bottom: 0.85rem;
    }

    .site-footer p i{
        width: 1.25rem;
        display: inline-flex;
        justify-content: center;
        margin-right: 0.5rem;
    }

    /* mapa: większa na telefonie */
    .footer-map iframe{
        height: 220px;
    }

    /* social + CTA na środku, bo to wygląda najlepiej na mobile */
    .footer-socials{
        justify-content: center;
    }

    .footer-cta{
        margin-top: var(--space-3);
    }

    /* dolna belka – center i luz */
    .footer-bottom{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-2);
    }
}

/* ==============================
   CENNIK – PODSTRONA PODLOGIA
   ============================== */

.cennik-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.cennik-cta{
    white-space:nowrap;
}

.cennik-list{
    border-top: 1px solid rgba(224,198,180,.45);
}

.cennik-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: var(--space-4);
    padding: .75rem 0;
    border-bottom: 1px solid rgba(224,198,180,.35);
}

.cennik-name{
    font-weight:500;
    color: var(--color-text);
    max-width: 80%;
}

.cennik-price{
    font-weight:700;
    color: var(--color-heading);
    white-space:nowrap;
}

.cennik-note{
    margin-top: var(--space-4);
    color: var(--color-muted);
    font-size: .9rem;
    display:flex;
    align-items:flex-start;
    gap: .5rem;
}

@media (max-width: 768px){
    .cennik-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .cennik-cta{
        width:100%;
    }

    .cennik-name{
        max-width: 70%;
    }
}

/* offset pod sticky topbar (72px) + mały zapas */
:root { --scroll-offset: 92px; }

section[id] { scroll-margin-top: var(--scroll-offset); }
/* opcjonalnie jeśli czasem scrollujesz do innych elementów niż <section> */
[id] { scroll-margin-top: var(--scroll-offset); }

#mobileMenu {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

#mobileMenu .nav-link {
    width: 100%;
    padding: 0.75rem 1rem;
}

#mobileMenu .btn {
    width: 100%;
    border-radius: 999px;
}