/* ============================================================
   BADYLARKA — identyfikacja wizualna
   Paleta „Mech i Piwonia":
   len (tło), mech (zieleń), piwonia (róż), miód (akcent), grafit (tekst)
   Typografia: Fraunces (display) + Albert Sans (tekst)
   ============================================================ */

:root {
    --len:          #F7F3EC;
    --len-ciemny:   #EFE7DA;
    --mech:         #2E4A3B;
    --mech-glebia:  #1B2F24;
    --piwonia:      #C4707A;
    --piwonia-mgla: #EAD3D4;
    --miod:         #B98A3F;
    --grafit:       #24211C;
    --linia:        rgba(36, 33, 28, 0.14);

    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Albert Sans', -apple-system, 'Segoe UI', sans-serif;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --radius: 4px;
    --max-w: 1180px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--grafit);
    background: var(--len);
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

:focus-visible {
    outline: 2px solid var(--piwonia);
    outline-offset: 3px;
}

/* ---------- Nawigacja ---------- */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(247, 243, 236, 0.92);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease);
}

.nav.przewinieto { border-bottom-color: var(--linia); }

.nav__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav__logo {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--mech-glebia);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav__logo svg { flex-shrink: 0; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.nav__links a {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--grafit);
    transition: color 0.2s var(--ease);
}

.nav__links a:hover { color: var(--piwonia); }

.nav__cta {
    background: var(--mech);
    color: var(--len) !important;
    padding: 11px 22px;
    border-radius: 999px;
    transition: background 0.25s var(--ease);
}

.nav__cta:hover { background: var(--mech-glebia); color: var(--len) !important; }

.nav__burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--grafit);
    margin: 5px 0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ---------- Hero ---------- */

.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 130px 0 80px;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--piwonia);
    margin-bottom: 22px;
}

.hero__eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--piwonia);
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 480;
    font-size: clamp(2.6rem, 5.6vw, 4.4rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--mech-glebia);
    margin-bottom: 26px;
}

.hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--piwonia);
}

.hero__lead {
    font-size: 1.18rem;
    max-width: 34em;
    color: rgba(36, 33, 28, 0.82);
    margin-bottom: 38px;
}

.hero__akcje { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--pelny { background: var(--mech); color: var(--len); }
.btn--pelny:hover { background: var(--mech-glebia); }

.btn--obrys { border-color: var(--grafit); color: var(--grafit); background: transparent; }
.btn--obrys:hover { border-color: var(--piwonia); color: var(--piwonia); }

/* Sygnatura: ilustracja badyli */
.hero__badyle {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero__badyle svg {
    width: 100%;
    max-width: 430px;
    height: auto;
}

.badyl-rys { stroke: var(--mech); }
.badyl-kwiat { fill: var(--piwonia); }
.badyl-kwiat--jasny { fill: var(--piwonia-mgla); }
.badyl-listek { fill: var(--mech); opacity: 0.85; }

.rosnie path, .rosnie circle, .rosnie ellipse {
    transform-origin: 50% 100%;
}

@keyframes wyrastanie {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rosnie g { animation: wyrastanie 0.9s var(--ease) both; }
.rosnie g:nth-child(2) { animation-delay: 0.15s; }
.rosnie g:nth-child(3) { animation-delay: 0.3s; }
.rosnie g:nth-child(4) { animation-delay: 0.45s; }
.rosnie g:nth-child(5) { animation-delay: 0.6s; }

/* ---------- Sekcje ---------- */

.sekcja { padding: 104px 0; }

.sekcja--mech {
    background: var(--mech-glebia);
    color: var(--len);
}

.sekcja--len-ciemny { background: var(--len-ciemny); }

.sekcja__naglowek { max-width: 640px; margin-bottom: 60px; }

.sekcja__naglowek--srodek { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--piwonia);
    margin-bottom: 14px;
}

.sekcja--mech .eyebrow { color: var(--piwonia-mgla); }

.sekcja h2 {
    font-family: var(--font-display);
    font-weight: 480;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--mech-glebia);
    margin-bottom: 16px;
}

.sekcja--mech h2 { color: var(--len); }

.sekcja__opis {
    font-size: 1.1rem;
    color: rgba(36, 33, 28, 0.78);
}

.sekcja--mech .sekcja__opis { color: rgba(247, 243, 236, 0.78); }

/* ---------- O nas ---------- */

.onas__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.onas__tekst p + p { margin-top: 18px; }

.onas__cechy {
    margin-top: 32px;
    display: grid;
    gap: 14px;
    list-style: none;
}

.onas__cechy li {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.onas__cechy li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--piwonia);
    transform: translateY(-1px);
}

.ramka-foto {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--piwonia-mgla), var(--len-ciemny) 55%, #DCE4DA);
}

.ramka-foto::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(46, 74, 59, 0.35);
    border-radius: 2px;
    pointer-events: none;
}

.ramka-foto img { width: 100%; height: 100%; object-fit: cover; }

.ramka-foto__brak {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--mech);
    text-align: center;
    padding: 24px;
    font-size: 0.95rem;
}

/* ---------- Oferta ---------- */

.oferta__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.karta {
    background: var(--len);
    border: 1px solid var(--linia);
    border-radius: var(--radius);
    padding: 34px 30px 38px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.karta:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 112, 122, 0.5);
    box-shadow: 0 18px 40px -22px rgba(27, 47, 36, 0.35);
}

.karta__ikona {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--piwonia-mgla);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mech);
}

.karta h3 {
    font-family: var(--font-display);
    font-weight: 520;
    font-size: 1.4rem;
    color: var(--mech-glebia);
}

.karta p { color: rgba(36, 33, 28, 0.75); font-size: 0.98rem; }

.karta__lista {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.95rem;
}

.karta__lista li { display: flex; gap: 10px; align-items: baseline; }
.karta__lista li::before {
    content: "—";
    color: var(--piwonia);
    flex-shrink: 0;
}

/* Karta wyróżniona: fotografia */
.karta--foto {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    background: var(--mech);
    border: none;
    color: var(--len);
    padding: 48px;
    margin-top: 10px;
}

.karta--foto:hover { transform: none; box-shadow: 0 24px 50px -24px rgba(27, 47, 36, 0.55); }

.karta--foto h3 { color: var(--len); font-size: 1.7rem; }
.karta--foto p { color: rgba(247, 243, 236, 0.82); }
.karta--foto .karta__lista li::before { color: var(--piwonia-mgla); }
.karta--foto .karta__ikona { background: rgba(247, 243, 236, 0.14); color: var(--piwonia-mgla); }

.karta--foto .ramka-foto { aspect-ratio: 3 / 2; background: linear-gradient(160deg, #3A5A48, #22392C); }
.karta--foto .ramka-foto::after { border-color: rgba(247, 243, 236, 0.35); }
.karta--foto .ramka-foto__brak { color: var(--piwonia-mgla); }

/* ---------- Jak pracujemy ---------- */

.kroki {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    counter-reset: krok;
}

.krok { position: relative; padding-top: 18px; }

.krok::before {
    counter-increment: krok;
    content: "0" counter(krok);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 3.6rem;
    font-weight: 400;
    color: rgba(247, 243, 236, 0.16);
    position: absolute;
    top: -28px;
    left: -6px;
    line-height: 1;
}

.krok h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    margin-bottom: 10px;
    color: var(--len);
    position: relative;
}

.krok p { color: rgba(247, 243, 236, 0.75); font-size: 0.98rem; position: relative; }

/* ---------- Galeria ---------- */

.galeria__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.galeria__el {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--len-ciemny);
    border: none;
    padding: 0;
    cursor: zoom-in;
}

.galeria__el img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.galeria__el:hover img { transform: scale(1.045); }

.galeria__podpis {
    position: absolute;
    inset: auto 0 0 0;
    padding: 32px 16px 14px;
    background: linear-gradient(to top, rgba(27, 47, 36, 0.72), transparent);
    color: var(--len);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    text-align: left;
}

.galeria__el:hover .galeria__podpis,
.galeria__el:focus-visible .galeria__podpis { opacity: 1; }

.galeria__pusta {
    border: 1px dashed var(--linia);
    border-radius: var(--radius);
    padding: 70px 24px;
    text-align: center;
    color: rgba(36, 33, 28, 0.6);
}

.galeria__ig {
    margin-top: 36px;
    text-align: center;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(27, 47, 36, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.lightbox.otwarty { display: flex; }

.lightbox img {
    max-width: min(92vw, 1000px);
    max-height: 86vh;
    border-radius: var(--radius);
}

.lightbox__zamknij {
    position: absolute;
    top: 22px;
    right: 26px;
    background: none;
    border: none;
    color: var(--len);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
}

/* ---------- Formularz zapytania ---------- */

.zapytanie__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
}

.zapytanie__info h2 { margin-bottom: 18px; }

.zapytanie__kontakt {
    margin-top: 34px;
    display: grid;
    gap: 16px;
}

.zapytanie__kontakt a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 600;
    color: var(--mech-glebia);
    transition: color 0.2s var(--ease);
}

.zapytanie__kontakt a:hover { color: var(--piwonia); }

.formularz {
    background: #FFFFFF;
    border: 1px solid var(--linia);
    border-radius: 8px;
    padding: 42px;
    display: grid;
    gap: 22px;
}

.formularz__rzad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.pole { display: grid; gap: 8px; }

.pole label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mech-glebia);
}

.pole label .wymagane { color: var(--piwonia); }

.pole input,
.pole select,
.pole textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--grafit);
    background: var(--len);
    border: 1px solid var(--linia);
    border-radius: var(--radius);
    padding: 13px 15px;
    width: 100%;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.pole textarea { resize: vertical; min-height: 130px; }

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
    outline: none;
    border-color: var(--mech);
    box-shadow: 0 0 0 3px rgba(46, 74, 59, 0.12);
}

.pole--zgoda {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
    font-size: 0.88rem;
    color: rgba(36, 33, 28, 0.75);
}

.pole--zgoda input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--mech);
}

.pole--zgoda a { color: var(--mech); }

/* Honeypot — ukryte przed ludźmi */
.pole--hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.komunikat {
    padding: 16px 20px;
    border-radius: var(--radius);
    font-size: 0.97rem;
}

.komunikat--ok { background: #E4EFE6; color: #1E4429; border: 1px solid #BAD5C1; }
.komunikat--blad { background: #F7E3E3; color: #7A2A2A; border: 1px solid #E3BCBC; }

/* ---------- Stopka ---------- */

.stopka {
    background: var(--mech-glebia);
    color: rgba(247, 243, 236, 0.75);
    padding: 64px 0 34px;
}

.stopka__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(247, 243, 236, 0.14);
}

.stopka__logo {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--len);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stopka h4 {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--piwonia-mgla);
    margin-bottom: 16px;
}

.stopka ul { list-style: none; display: grid; gap: 10px; }

.stopka a { color: rgba(247, 243, 236, 0.75); text-decoration: none; transition: color 0.2s var(--ease); }
.stopka a:hover { color: var(--len); }

.stopka__dol {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 28px;
    font-size: 0.86rem;
    color: rgba(247, 243, 236, 0.5);
}

/* ---------- Animacje przy przewijaniu ---------- */

.odslon {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.odslon.widoczny { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .odslon { opacity: 1; transform: none; }
}

/* ---------- Responsywność ---------- */

@media (max-width: 980px) {
    .hero__grid { grid-template-columns: 1fr; gap: 44px; }
    .hero__badyle { order: -1; }
    .hero__badyle svg { max-width: 300px; }
    .hero { padding-top: 110px; }

    .oferta__grid { grid-template-columns: 1fr 1fr; }
    .karta--foto { grid-template-columns: 1fr; padding: 36px 28px; }

    .onas__grid,
    .zapytanie__grid { grid-template-columns: 1fr; gap: 44px; }

    .kroki { grid-template-columns: 1fr; gap: 52px; }

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

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

@media (max-width: 700px) {
    .sekcja { padding: 76px 0; }

    .nav__links {
        position: fixed;
        top: 76px;
        left: 0; right: 0; bottom: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        background: var(--len);
        padding: 32px 24px;
        display: none;
    }

    .nav__links.otwarte { display: flex; }

    .nav__links li { width: 100%; }
    .nav__links a { display: block; padding: 14px 4px; font-size: 1.15rem; border-bottom: 1px solid var(--linia); }
    .nav__cta { text-align: center; border-radius: var(--radius); margin-top: 12px; border-bottom: none !important; }

    .nav__burger { display: block; }

    body.menu-otwarte { overflow: hidden; }
    body.menu-otwarte .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.menu-otwarte .nav__burger span:nth-child(2) { opacity: 0; }
    body.menu-otwarte .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .oferta__grid { grid-template-columns: 1fr; }
    .galeria__grid { grid-template-columns: 1fr; }
    .formularz { padding: 28px 22px; }
    .formularz__rzad { grid-template-columns: 1fr; }
    .stopka__grid { grid-template-columns: 1fr; }
}