/* ═══════════════════════════════════════════════════════════════════
   Popup „Ruszyły zapisy” (partials/camp-popup.php) na /przysucha i /radom.

   Kolory idą za motywem obozu (data/camp.php 'theme', klasa cpop--…):
   unity = czerń i limonka strony studia (od 14.10), zloto = czerń i złoto
   jak plakat (wcześniejsza wersja, niżej .cpop--zloto). Plakat po lewej
   zostaje oryginalny w obu.

   Komputer: okno na środku z plakatem z lewej, przyciemnione i rozmyte tło.
   Telefon: karta od dołu, bez plakatu; tło jeszcze ciemniejsze i mocniej
   rozmyte, żeby skupić uwagę. Wyjątek: kto przyszedł prosto z Google /
   Binga, dostaje kartę bez przyciemnienia (.cpop--lekki) — Google źle
   ocenia na telefonach okna zasłaniające stronę zaraz po wejściu
   z wyszukiwarki, a /przysucha i /radom to główne strony w wynikach.
   ═══════════════════════════════════════════════════════════════════ */

.cpop {
    --cpop-tlo:          var(--background);
    --cpop-karta:        var(--card);
    --cpop-akcent:       var(--primary);
    --cpop-akcent-jasny: var(--primary);         /* drobny tekst w akcencie */
    --cpop-ciemny-tekst: var(--primary-foreground);
    --cpop-jasny-tekst:  var(--foreground);
    --cpop-szary:        oklch(0.72 0 0);
    --cpop-linia:        oklch(1 0 0 / 12%);

    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;          /* klikalne są tylko tło (komputer) i okno */
}

/* Motyw złoty ('theme' => 'zloto'): czerń i złoto jak na plakacie. */
.cpop--zloto {
    --cpop-tlo:          oklch(0.15 0.006 75);
    --cpop-karta:        oklch(0.19 0.010 75);
    --cpop-akcent:       oklch(0.80 0.14 84);
    --cpop-akcent-jasny: oklch(0.87 0.10 88);
    --cpop-ciemny-tekst: oklch(0.17 0.02 70);
    --cpop-jasny-tekst:  oklch(0.97 0.012 90);
    --cpop-szary:        oklch(0.76 0.02 85);
    --cpop-linia:        oklch(0.90 0.05 85 / 14%);
}

.cpop__tlo {
    position: absolute;
    inset: 0;
    display: none;
    background: oklch(0 0 0 / 62%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: auto;
}

.cpop__okno {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--cpop-tlo);
    border-top: 1px solid color-mix(in oklab, var(--cpop-akcent) 45%, transparent);
    box-shadow: 0 -20px 60px -20px oklch(0 0 0 / 80%);
    color: var(--cpop-jasny-tekst);
    padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%);
    transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: auto;
    outline: none;
}
.cpop.is-open .cpop__okno { transform: none; }

.cpop__x {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: color-mix(in oklab, var(--cpop-tlo) 70%, transparent);
    border: 1px solid var(--cpop-linia);
    color: var(--cpop-jasny-tekst);
}
.cpop__x svg { width: 1.125rem; height: 1.125rem; }
.cpop__x:hover { border-color: var(--cpop-akcent); color: var(--cpop-akcent); }

.cpop__plakat { display: none; }

.cpop__logo { display: block; width: 4.5rem; height: auto; }
.cpop__nad {
    display: inline-block;
    margin-top: 0.875rem;
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cpop-akcent-jasny);
}
.cpop__tytul {
    margin-top: 0.375rem;
    font-size: 1.125rem;
    line-height: 1;
    text-transform: uppercase;
}
/* Bez poświaty (14.10) — jak tytuł na stronie obozu: uwaga ma iść na przycisk. */
.cpop__tytul span {
    display: block;
    margin-top: 0.25rem;
    font-size: 2rem;
    color: var(--cpop-akcent);
}
/* Złoto: gradient jak na plakacie zamiast jednolitego koloru. */
.cpop--zloto .cpop__tytul span {
    background: linear-gradient(180deg, oklch(0.96 0.07 95) 0%, oklch(0.85 0.15 86) 48%, oklch(0.64 0.13 72) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cpop__opis {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--cpop-szary);
}
.cpop__fakty {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
}
.cpop__fakty li {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--cpop-linia);
    background: var(--cpop-karta);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cpop__licznik {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cpop-akcent);
}
.cpop__licznik::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.cpop__licznik--hot { color: oklch(0.68 0.20 25); }

.cpop__akcje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1.125rem;
}
.cpop__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--cpop-akcent);
    color: var(--cpop-ciemny-tekst);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 0 50px -12px color-mix(in oklab, var(--cpop-akcent) 70%, transparent);
    transition: transform 150ms ease;
}
.cpop__cta svg { width: 1rem; height: 1rem; }
.cpop__cta:hover { transform: scale(1.03); }
.cpop__pozniej {
    padding: 0.75rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cpop-szary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cpop__pozniej:hover { color: var(--cpop-jasny-tekst); }
.cpop__cta:focus-visible,
.cpop__pozniej:focus-visible,
.cpop__x:focus-visible { outline: 2px solid var(--cpop-akcent-jasny); outline-offset: 2px; }

/* Przewijanie strony pod oknem — zablokowane, gdy tło jest przyciemnione. */
html.cpop-open { overflow: hidden; }

/* ── Telefon: karta ma zająć mniej niż pół ekranu ── */
@media (max-width: 699px) {
    .cpop__tlo {
        display: block;
        background: oklch(0 0 0 / 72%);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        touch-action: none;                    /* przeciąganie po tle nie przewija strony */
    }
    .cpop.is-open .cpop__tlo { opacity: 1; }
    .cpop--lekki .cpop__tlo { display: none; }   /* wejście z wyszukiwarki */
    .cpop__okno { padding: 1.125rem 1.125rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .cpop__logo { display: none; }             /* tytuł i tak mówi „Cali Flow” */
    .cpop__nad { margin-top: 0; padding-right: 3rem; }
    .cpop__tytul { font-size: 1rem; }
    .cpop__tytul span { font-size: 1.625rem; }
    .cpop__opis { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.45; }
    .cpop__fakty { margin-top: 0.625rem; gap: 0.25rem; }
    .cpop__fakty li { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .cpop__licznik { margin-top: 0.625rem; font-size: 0.8125rem; }
    .cpop__akcje { margin-top: 0.75rem; }
    .cpop__cta { padding: 0.8125rem 1rem; }
}

/* ── Komputer: okno na środku, plakat z lewej, przyciemnione tło ── */
@media (min-width: 700px) {
    .cpop__tlo { display: block; }
    .cpop.is-open .cpop__tlo { opacity: 1; }

    .cpop__okno {
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        width: min(52rem, calc(100vw - 3rem));
        max-height: calc(100vh - 3rem);
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        padding: 0;
        border: 1px solid color-mix(in oklab, var(--cpop-akcent) 50%, transparent);
        box-shadow:
            0 40px 100px -30px oklch(0 0 0 / 90%),
            0 0 80px -30px color-mix(in oklab, var(--cpop-akcent) 55%, transparent);
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.97);
        transition: opacity 300ms ease, transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .cpop.is-open .cpop__okno { opacity: 1; transform: translate(-50%, -50%); }

    .cpop__plakat { display: block; background: #000; }
    .cpop__plakat img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

    .cpop__tresc { padding: 2.25rem 2.25rem 2rem; }
    .cpop__logo { width: 5.5rem; }
    .cpop__tytul { font-size: 1.375rem; }
    .cpop__tytul span { font-size: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cpop__tlo,
    .cpop__okno { transition: none; }
}

/* Niskie ekrany (np. stary iPhone SE): bez opisu — tytuł i fakty wystarczą. */
@media (max-width: 699px) and (max-height: 700px) {
    .cpop__opis { display: none; }
}