/* ============================================================
   ETERNIS — shared.css (STATE-ONLY)
   Reguły stanu dla interactive.js (zamiennik React useState).
   Ładowane PO compiled.css — nadpisuje stany "always-mounted".
   ZASADA: tylko state (display/opacity/visibility), zero layoutu.
   ============================================================ */

/* ====== Body scroll lock (otwarte mobilne menu) ====== */
body.menu-open,
body.modal-open { overflow: hidden; }

/* ====== Mobilne menu (Header overlay) ======
   W React montowane warunkowo (AnimatePresence). W WP zawsze w DOM —
   domyślnie ukryte, JS dodaje .is-open. */
.Header_overlay {
    display: none;
    opacity: 0;
    transition: opacity var(--dur-med, 0.6s) var(--ease-expo, ease-out);
}
.Header_overlay.is-open {
    display: flex;
    opacity: 1;
}

/* ====== Header "light" (nad ciemnym hero front-page) ======
   W React Logo dostaje onDark, a Button klasę on-dark gdy `light`.
   Tu odwzorowane przez stan .Header_light (JS) — bez przebudowy markupu. */
.Header_header.Header_light .Logo_logo { filter: brightness(0) invert(1); }
.Header_header.Header_light .Header_cta .Button_secondary {
    color: var(--offwhite);
    border-color: var(--offwhite);
}
.Header_header.Header_light .Header_cta .Button_secondary:hover {
    background: var(--offwhite);
    color: var(--night);
}

/* ====== ContactForm — przełączanie formularz / podziękowanie ======
   W React AnimatePresence swap. W WP oba w DOM, JS toggluje .is-submitted
   na kontenerze .ContactForm_shell. */
.js-form-thanks { display: none; }
.ContactForm_shell.is-submitted .js-contact-form { display: none; }
.ContactForm_shell.is-submitted .js-form-thanks { display: flex; }

/* ====== Generyczne hooki (10 standardowych handlerów) ======
   W tym projekcie nieużywane (brak elementów), ale interactive.js jest
   idempotentny i bezpieczny — reguły zostają na wypadek rozszerzeń. */

/* Accordion */
.js-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 0;
}

/* Modal */
.js-modal { display: none; }
.js-modal.is-open { display: flex; }

/* Tabs */
.js-tab-content { display: none; }
.js-tab-content.is-active { display: block; }

/* Back to top */
.js-back-to-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.js-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Hero slideshow */
.js-hero-slide {
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.js-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Sticky panel */
.js-sticky-panel { transition: transform 0.3s ease; }
.js-sticky-panel.is-collapsed { transform: translateX(calc(100% - 40px)); }

/* ====== Rich content (ACF wysiwyg: ProseSection / ProcessStages) ======
   Odwzorowuje .u-body / .u-list dla treści edytowanej w TinyMCE. */
.eternis-rich > * + * { margin-top: 1.25em; }
.eternis-rich p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    opacity: 0.88;
}
.eternis-rich ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.eternis-rich ul li {
    position: relative;
    padding-left: 26px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.88;
}
.eternis-rich ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    background: currentColor;
    opacity: 0.55;
}

/* ProseSection: lista z ACF (.eternis-rich ul) — każdy element wyśrodkowany,
   kropka tuż obok wyrazu. */
.ProseSection_inner .eternis-rich ul {
    width: 100%;
    text-align: center;
}
.ProseSection_inner .eternis-rich ul li {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* ProseSection wariant "lead" — trochę większe akapity wprowadzające / podsumowanie.
   Obejmuje treść z ACF (.eternis-rich) ORAZ fallback (.u-body/.u-list). */
.ProseSection_lead .eternis-rich p,
.ProseSection_lead .eternis-rich ul li,
.ProseSection_lead .u-body,
.ProseSection_lead .u-list li {
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.7;
}

/* ====== Contact Form 7 — układ jak natywny ContactForm ======
   CF7 owija pola w <span class="wpcf7-form-control-wrap"> i generuje własny <form>. */
.ContactForm_shell .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.5vw, 40px);
}
.ContactForm_shell .ContactForm_field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
.ContactForm_shell .wpcf7-response-output {
    margin: 4px 0 0;
    padding: 12px 16px;
    border-color: var(--rule);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
}
.ContactForm_shell .wpcf7-not-valid-tip {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
}
.ContactForm_shell .wpcf7-spinner { margin: 0 0 0 12px; }

/* ====== Panel rezerwacji Calendly (Kontakt) — w miejsce atrapy kalendarza ====== */
.eternis-booking {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    text-align: center;
}
.eternis-booking__label {
    display: block;
    opacity: 0.7;
    margin-bottom: 4px;
}
.eternis-booking .Button_btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* SVG inline (logo/Star) */
.icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============================================================
   ANIMAE — override kolorystyczny (bordo + chłodny beż)
   Mapowanie: ciemne bloki / przyciski / stopka = --bordo (było --night/czerń).
   --night pełni teraz rolę koloru TEKSTU (--ink). Tekst na bordo = --offwhite.
   Ładowane po compiled.css → nadpisuje reguły komponentów. Struktura bez zmian.
   ============================================================ */

/* Przyciski */
.Button_primary { background: var(--bordo); color: var(--offwhite); border-color: var(--bordo); }
.Button_primary:hover { background: transparent; color: var(--bordo); }
.Button_secondary { color: var(--bordo); border-color: var(--bordo); }
.Button_secondary:hover { background: var(--bordo); color: var(--offwhite); }
.Button_ghost { border-bottom-color: var(--bordo); }
.Button_ghost:hover { opacity: 0.6; }

/* Ciemne bloki → bordo */
.Footer_footer { background: var(--bordo); }
.DarkBlock_dark { background: var(--bordo); }
.ProcessStages_section { background: var(--bordo); }
.Layout_skip { background: var(--bordo); border-color: var(--bordo); }

/* Hero scrim — bordowy podton + wyśrodkowane przyciemnienie pod tekstem,
   dla czytelności jasnego tekstu nad jasnymi zdjęciami (np. sierść/łapa).
   Radial (pod tekstem) na wierzchu, liniowy pod spodem — brzegi pozostają jaśniejsze. */
.PageHero_scrim {
    background:
        radial-gradient(115% 62% at 50% 52%, rgba(16,5,9,0.58) 0%, rgba(16,5,9,0.12) 62%, rgba(16,5,9,0) 82%),
        linear-gradient(180deg, rgba(26,9,13,0.40), rgba(40,13,20,0.52) 52%, rgba(40,13,20,0.64));
}
/* Delikatny cień pod tekstem hero (overlay) — legibility bez przyciemniania całości. */
.PageHero_overlay .PageHero_content {
    text-shadow: 0 1px 28px rgba(18,6,10,0.55), 0 1px 4px rgba(18,6,10,0.35);
}

/* Akcenty stanu (kalendarz/rezerwacja) → bordo */
.CalendlyPlaceholder_selected,
.CalendlyPlaceholder_slotActive { background: var(--bordo); border-color: var(--bordo); }
.CalendlyPlaceholder_calLink:hover .CalendlyPlaceholder_cal { border-color: var(--bordo); }

/* Zaznaczenie tekstu */
::selection { background: var(--bordo); color: var(--offwhite); }

/* Header — wersja "light" nad ciemnym hero: przywróć jasny wariant CTA (bordo→offwhite) */
.Header_header.Header_light .Header_cta .Button_secondary {
    color: var(--offwhite);
    border-color: var(--offwhite);
}
.Header_header.Header_light .Header_cta .Button_secondary:hover {
    background: var(--offwhite);
    color: var(--bordo);
}

/* ============================================================
   ANIMAE — wordmark tekstowy (zastępuje logo SVG ETERNIS)
   Ta sama typografia co nagłówki (Cormorant Garamond), szeroki tracking.
   Kolor dziedziczony (currentColor) → automatycznie działa na jasnym tle,
   na ciemnym hero (Header_light) i w stopce (offwhite).
   ============================================================ */
.Logo_wordmarkText {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    line-height: 1;
    white-space: nowrap;
    color: currentColor;
    text-indent: 0.34em; /* równoważy tracking po prawej */
    align-self: flex-start;
}
.Logo_wordmarkText.Logo_sm { font-size: clamp(21px, 3.4vw, 27px); height: auto; }
.Logo_wordmarkText.Logo_md { font-size: clamp(25px, 4vw, 33px); height: auto; }

/* ============================================================
   ANIMAE — ikony szlifów w kartach (Oferta → Szlify)
   Ikona nad nazwą szlifu; wysokość znormalizowana (kształty wyrównane),
   szerokość automatyczna. Bez ramki (przezroczyste PNG na tle sekcji).
   ============================================================ */
.FeatureGrid_cardIcon {
    display: block;
    height: clamp(116px, 13vw, 166px);
    width: auto;
    max-width: 100%;
    margin: clamp(10px, 1.5vw, 18px) auto clamp(12px, 1.6vw, 20px);
    -webkit-user-select: none;
    user-select: none;
}
/* Karta z ikoną: nieco luźniejszy odstęp od górnej linii. */
.FeatureGrid_cardIcons { gap: 6px; }