/* Piekary Residence – landing „Dlaczego Piekary Residence”
   Kolory i fonty odczytane z makiety Canvy (piekary-residence-canva-spec.md). */

/* ---------- Fonty (OFL, hostowane lokalnie) ---------- */

@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/playfair-display-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/playfair-display-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/playfair-display-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/playfair-display-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/playfair-display-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/playfair-display-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/playfair-display-latin-700-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/playfair-display-latin-ext-700-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/montserrat-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/montserrat-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/montserrat-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Figtree zastepuje Body Grotesque z Canvy (brak licencji webowej) */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/figtree-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/figtree-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokeny ---------- */

:root {
    --papier: #f2f1ed;
    --bialy: #ffffff;
    --tekst: #1b1b1b;
    --tekst-2: #4a4a4a;
    --tekst-3: #767676;
    --linia: #e3e0d9;
    --karta: #f6f6f5;
    --granat: #031f26;
    --losos: #c58e7a;     /* linki w stopce */
    --miedz: #9b5a44;     /* przyciski – kontrast z bialym 5,3:1 */
    --miedz-ciemna: #7c4534;

    --font-naglowek: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-srodtytul: "Montserrat", system-ui, sans-serif;
    --font-tekst: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

    --kontener: 1180px;
    --kontener-waski: 780px;
    --margines: clamp(16px, 4vw, 40px);
    --odstep-sekcji: clamp(56px, 8vw, 112px);
    --szczelina: 8px;
    --naglowek-h: 68px;
}

/* ---------- Baza ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--naglowek-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bialy);
    color: var(--tekst);
    font-family: var(--font-tekst);
    font-size: 1.0625rem;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
figure, blockquote { margin: 0; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }

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

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

.pomin {
    position: absolute; left: 12px; top: -100px; z-index: 100;
    padding: 10px 16px;
    background: var(--granat); color: #fff;
    &:focus { top: 12px; }
}

.kontener {
    width: min(100% - 2 * var(--margines), var(--kontener));
    margin-inline: auto;
}
.kontener--waski { width: min(100% - 2 * var(--margines), var(--kontener-waski)); }

.sekcja { padding-block: var(--odstep-sekcji); }
.sekcja--biala { background: var(--bialy); }

/* sasiednie sekcje na tym samym tle nie dubluja odstepu */
.sekcja--papier + .sekcja--papier,
.sekcja--biala + .sekcja--biala,
.sekcja--biala + .kotwica + .sekcja--biala { padding-top: 0; }
.sekcja--papier {
    /* faktura czerpanego papieru z makiety, kafel bez szwow */
    background: var(--papier) url(../img/papier.jpg) repeat left top / 800px auto;
}

.tytul-sekcji {
    font-family: var(--font-naglowek);
    font-weight: 700;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.2;
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.tytul-sekcji--wersaliki > span:first-child { text-transform: uppercase; letter-spacing: .01em; }
.tytul-sekcji__druga { display: block; font-weight: 400; }

.tekst {
    color: var(--tekst-2);
    > :last-child { margin-bottom: 0; }
    a { color: var(--miedz); }
}

.przycisk {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: 14px 28px;
    border-radius: 2px;
    background: var(--miedz);
    color: #fff;
    font-family: var(--font-srodtytul);
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background-color .2s;
    &:hover { background: var(--miedz-ciemna); }
}

.etykieta {
    position: absolute;
    top: 10px; left: 10px;
    padding: 2px 8px;
    background: rgb(0 0 0 / .72);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* zdjecia otwierane w lightboxie */
a[data-lightbox] {
    display: block;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;
    img { transition: transform .5s ease; }
    &:hover img { transform: scale(1.03); }
}

/* brakujaca tresc od klienta – tylko dla zalogowanych */
.todo-tresc {
    margin: 16px 0;
    padding: 12px 16px;
    border: 2px dashed #c0392b;
    background: #fff4f2;
    color: #7a1f14;
    font-size: .875rem;
    line-height: 1.5;
    strong { display: block; }
    small { display: block; margin-top: 4px; opacity: .75; }
}

/* ---------- Naglowek ---------- */

.naglowek {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #ececec;
    transition: box-shadow .3s;
    &.naglowek--przewiniety { box-shadow: 0 4px 18px rgb(0 0 0 / .06); }
}

.admin-bar .naglowek { top: var(--wp-admin--admin-bar--height, 32px); }

.naglowek__wnetrze {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: min(100% - 2 * var(--margines), 1320px);
    height: var(--naglowek-h);
    margin-inline: auto;
}

.naglowek__logo img { width: auto; height: 46px; }

.naglowek__menu {
    justify-self: center;
    ul {
        display: flex;
        gap: clamp(14px, 6vw, 96px);
        margin: 0; padding: 0;
        list-style: none;
    }
    a {
        position: relative;
        display: block;
        padding-block: 8px;
        font-size: .9375rem;
        color: var(--tekst);
        text-decoration: none;
        &::after {
            content: "";
            position: absolute; left: 0; right: 0; bottom: 2px;
            height: 1px;
            background: currentColor;
            transform: scaleX(0);
            transition: transform .25s;
        }
        &:hover::after, &[aria-current="true"]::after { transform: scaleX(1); }
        &[aria-current="true"] { color: var(--miedz); }
    }
}

/* na waskich ekranach menu przesuwa sie do prawej krawedzi */
@media (max-width: 560px) {
    .naglowek__wnetrze { grid-template-columns: auto 1fr; }
    .naglowek__menu { justify-self: end; }
    .naglowek__logo img { height: 38px; }
    .naglowek__menu a { font-size: .875rem; }
}

/* ---------- 1. Hero: suwak przed/po ---------- */

.porownanie {
    --pos: 50%;
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - var(--naglowek-h) - 40px);
    min-height: 320px;
    width: 100%;
    overflow: hidden;
    background: #222;
    user-select: none;
    touch-action: pan-y;
}

@media (prefers-reduced-motion: no-preference) {
    .js .porownanie { --pos: 100%; }
}

@media (max-width: 700px) {
    .porownanie { aspect-ratio: 4 / 3; }
}

.porownanie__zdjecie {
    position: absolute;
    inset: 0;
    img { width: 100%; height: 100%; object-fit: cover; }
}

.porownanie__zdjecie--przed { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.porownanie__linia {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 12px rgb(0 0 0 / .35);
    pointer-events: none;
}

.porownanie__uchwyt {
    position: absolute;
    top: 50%; left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgb(17 17 17 / .85);
    color: #fff;
    transform: translate(-50%, -50%);
    .ikona { width: 18px; height: 18px; margin-inline: -3px; }
}

.porownanie__etykieta {
    position: absolute;
    top: 50%;
    padding: 4px 10px;
    background: rgb(0 0 0 / .82);
    color: #fff;
    font-family: var(--font-srodtytul);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(-50%);
}
.porownanie__etykieta--przed { right: 42px; }
.porownanie__etykieta--po { left: 42px; }

@media (max-width: 560px) {
    .porownanie__etykieta { top: auto; bottom: 16px; transform: none; font-size: .6875rem; }
    .porownanie__uchwyt { width: 44px; height: 44px; }
}

/* przezroczysty input range na calej powierzchni: mysz, dotyk i klawiatura za darmo */
.porownanie__suwak {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}

.porownanie:has(.porownanie__suwak:focus-visible) .porownanie__uchwyt {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.hero__zdjecie img { width: 100%; max-height: 80svh; object-fit: cover; }

.hero__wstep {
    padding-block: clamp(48px, 7vw, 96px) var(--odstep-sekcji);
}

.hero__tytul {
    font-family: var(--font-naglowek);
    font-weight: 700;
    font-size: clamp(2rem, 1.1rem + 3.4vw, 3.4rem);
    line-height: 1.15;
    text-align: center;
}

.hero__podtytul {
    margin: .4em 0 clamp(28px, 4vw, 44px);
    font-family: var(--font-naglowek);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
    line-height: 1.3;
    text-align: center;
}

/* ---------- 2. Przed i po ---------- */

.przed-po__pary {
    display: grid;
    gap: var(--szczelina);
}

.para {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--szczelina);
}

.para__zdjecie {
    position: relative;
    aspect-ratio: 3 / 2;
    img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- 3–4. Galerie (mozaika) ---------- */

.galeria:has(+ .galeria) { padding-bottom: 0; }
.galeria + .galeria { padding-top: clamp(24px, 4vw, 48px); }

.mozaika {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(130px, 21vw, 300px);
    grid-auto-flow: dense;
    gap: var(--szczelina);
    margin: 0; padding: 0;
    list-style: none;

    li { grid-column: span 3; min-width: 0; }
    li:nth-child(6n + 3), li:nth-child(6n + 6) { grid-column: span 4; }
    li:nth-child(6n + 4), li:nth-child(6n + 5) { grid-column: span 2; }
    li:last-child:nth-child(odd) { grid-column: 1 / -1; }

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

@media (max-width: 560px) {
    .mozaika { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
    .mozaika li, .mozaika li:nth-child(n) { grid-column: span 1; }
    /* rytm: jedno zdjecie na cala szerokosc, potem dwa obok siebie */
    .mozaika li:nth-child(3n + 1),
    .mozaika li:last-child:nth-child(3n + 2) { grid-column: 1 / -1; }
}

/* ---------- 5, 7, 8, 9. Sekcje magazynowe ---------- */

.magazyn__siatka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 5vw, 72px);
    align-items: start;
}

.magazyn__naglowek {
    grid-column: 2;
    text-align: left;
    margin-bottom: clamp(24px, 3vw, 36px);
}

.magazyn__lewa {
    grid-column: 1;
    position: sticky;
    top: calc(var(--naglowek-h) + 24px);
}

.magazyn__prawa { grid-column: 2; }

/* bez naglowka obie kolumny zaczynaja sie w tym samym rzedzie */
.magazyn__siatka > .magazyn__lewa,
.magazyn__siatka > .magazyn__prawa { grid-row: 2; }
.magazyn__siatka:not(:has(.magazyn__naglowek)) > * { grid-row: 1; }

.magazyn__zdjecie {
    aspect-ratio: 2 / 3;
    img { width: 100%; height: 100%; object-fit: cover; }
}

.ozdobnik {
    width: 72%;
    margin-top: 28px;
    color: var(--tekst);
}

.blok + .blok { margin-top: clamp(36px, 4vw, 56px); }

.blok__zdjecie {
    aspect-ratio: 3 / 2;
    margin-bottom: 24px;
    img { width: 100%; height: 100%; object-fit: cover; }
}

.blok__srodtytul {
    margin-bottom: .6em;
    font-family: var(--font-srodtytul);
    font-weight: 700;
    font-size: clamp(1.125rem, 1rem + .6vw, 1.4rem);
    line-height: 1.3;
}

.blok .przycisk { margin-top: 24px; }

@media (max-width: 800px) {
    .magazyn__siatka { display: block; }
    .magazyn__naglowek { text-align: center; }
    .magazyn__lewa { position: static; margin-bottom: 36px; }
    .magazyn__zdjecie { aspect-ratio: 4 / 5; }
}

/* ---------- 6. U stolarza ---------- */

.stolarz__detal {
    width: min(100%, 560px);
    aspect-ratio: 3 / 2;
    margin-left: auto;
    margin-bottom: clamp(32px, 4vw, 48px);
    img { width: 100%; height: 100%; object-fit: cover; }
}

.stolarz__tekst { max-width: var(--kontener-waski); margin: 0 auto 36px; }

.stolarz__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(12px, 2vw, 24px);
    margin: 0; padding: 0;
    list-style: none;
    li { aspect-ratio: 3 / 4; }
    img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- 10. Mapa, opinie, media ---------- */

.opinie { padding-bottom: var(--odstep-sekcji); }
.opinie .tytul-sekcji { margin-top: var(--odstep-sekcji); }

.mapa iframe {
    width: 100%;
    height: clamp(280px, 36vw, 440px);
    border: 0;
}

.karuzela__tor {
    --widoczne: 3;
    --odstep: 24px;
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--widoczne) - 1) * var(--odstep)) / var(--widoczne));
    gap: var(--odstep);
    margin: 0; padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
}

@media (max-width: 960px) { .karuzela__tor { --widoczne: 2; } }
@media (max-width: 600px) { .karuzela__tor { --widoczne: 1; --odstep: 16px; } }

.opinia {
    scroll-snap-align: start;
    figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        padding: 32px 28px 28px;
        background: var(--karta);
        text-align: center;
    }
}

.opinia__zdjecie {
    width: 64px; height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.opinia__cytat p {
    margin-bottom: 20px;
    font-style: italic;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--tekst-2);
}

.opinia__podpis {
    margin-top: auto;
    font-size: .8125rem;
    color: var(--tekst-3);
}

.karuzela__sterowanie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.karuzela__strzalka {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    padding: 0;
    border: 1px solid #d6d6d6;
    border-radius: 50%;
    background: #fff;
    color: var(--tekst);
    cursor: pointer;
    .ikona { width: 18px; height: 18px; }
    &:disabled { opacity: .35; cursor: default; }
    &:not(:disabled):hover { border-color: var(--miedz); color: var(--miedz); }
}

.karuzela__kropki { display: flex; gap: 6px; }

.karuzela__kropka {
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #cfcfcf;
    cursor: pointer;
    transition: width .25s, background-color .25s;
    /* wiekszy obszar klikniecia przy malej kropce */
    position: relative;
    &::before { content: ""; position: absolute; inset: -10px -4px; }
    &[aria-current="true"] { width: 22px; background: var(--miedz); }
}

.media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    margin-top: var(--odstep-sekcji);
    @media (max-width: 800px) { grid-template-columns: 1fr; }
}

.media__kolumna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    p { color: var(--tekst-2); }
    .przycisk { margin: 8px 0 28px; }
}

.media__naglowek {
    margin-bottom: .5em;
    font-family: var(--font-naglowek);
    font-weight: 700;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    line-height: 1.2;
}

/* karta linku jak podglad linku na Facebooku: obrazek 1,91:1, szary pasek z domena, tytulem i opisem */
.karta {
    --fb-tlo: #f0f2f5;
    --fb-tlo-hover: #e4e6e9;
    --fb-linia: #dadde1;
    --fb-tekst: #050505;
    --fb-tekst-2: #65676b;
    display: block;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--fb-linia);
    border-radius: 8px;
    background: var(--fb-tlo);
    color: var(--fb-tekst);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-decoration: none;
    &:hover .karta__tresc { background: var(--fb-tlo-hover); }
}

.karta__obraz {
    width: 100%;
    height: auto;
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    border-bottom: 1px solid var(--fb-linia);
}

.karta__tresc {
    display: grid;
    gap: 3px;
    padding: 10px 12px 12px;
    transition: background-color .2s;
}

.karta__domena {
    font-size: .8125rem;
    line-height: 1.25;
    color: var(--fb-tekst-2);
    text-transform: uppercase;
}

.karta__tytul,
.karta__opis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.karta__tytul {
    -webkit-line-clamp: 2;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
}

.karta__opis {
    -webkit-line-clamp: 1;
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--fb-tekst-2);
}

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

.stopka {
    background: var(--granat);
    color: #e7edee;
    font-size: .875rem;
    line-height: 1.9;
    a { color: inherit; text-decoration: none; &:hover { color: var(--losos); } }
}

.stopka__wnetrze {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    gap: clamp(28px, 5vw, 72px);
    width: min(100% - 2 * var(--margines), var(--kontener));
    margin-inline: auto;
    padding-block: 56px 40px;
}

.stopka__logo img { width: 150px; }

.stopka__firma { font-style: normal; }

.stopka__kontakt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stopka__social {
    display: flex;
    gap: 14px;
    margin: 0 0 10px; padding: 0;
    list-style: none;
    .ikona { width: 20px; height: 20px; }
}

.stopka__linki ul { margin: 0; padding: 0; list-style: none; }
.stopka__link { color: var(--losos) !important; &:hover { color: #fff !important; } }

.stopka__dol {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    width: min(100% - 2 * var(--margines), var(--kontener));
    margin-inline: auto;
    padding-block: 18px 24px;
    border-top: 1px solid rgb(255 255 255 / .12);
    color: rgb(231 237 238 / .65);
    font-size: .8125rem;
    p { margin: 0; }
}

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

/* ---------- Lightbox ---------- */

.lightbox {
    width: 100vw; height: 100dvh;
    max-width: none; max-height: none;
    margin: 0; padding: 0;
    border: 0;
    background: rgb(8 12 14 / .95);
    color: #fff;
    &::backdrop { background: transparent; }
    &[open] { display: grid; place-items: center; }
}

.lightbox__kadr {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 56px 72px;
    img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; object-fit: contain; }
    figcaption { max-width: 70ch; font-size: .875rem; text-align: center; opacity: .85; }
    @media (max-width: 600px) { padding: 56px 12px; }
}

.lightbox__przycisk {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .08);
    color: #fff;
    cursor: pointer;
    &:hover { background: rgb(255 255 255 / .2); }
    &[hidden] { display: none; }
}
.lightbox__zamknij { top: 12px; right: 12px; }
.lightbox__poprzednie { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__nastepne { right: 12px; top: 50%; translate: 0 -50%; }

@media (max-width: 600px) {
    .lightbox__poprzednie, .lightbox__nastepne { top: auto; bottom: 12px; translate: none; }
}

/* ---------- Ograniczony ruch ---------- */

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