/* ==========================================================================
   Stasacucine — home.css
   Sekcje strony głównej: hero, realizacje (+ galeria), proces, FAQ, kontakt,
   modal konsultacji. Kalkulator i materiały mają własne pliki.
   ========================================================================== */

@layer components {

    /* Wejście sekcji przy przewijaniu (tylko gdy JS działa i ruch jest dozwolony) */
    @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
        [data-reveal]:not(.in-view) { opacity: 0; translate: 0 26px; }
        [data-reveal] { transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
    }

    /* -------------------------------------------------------------------- Hero */
    .hero {
        position: relative;
        isolation: isolate;
        display: grid;
        place-items: center;
        min-height: 100svh;
        padding: calc(var(--header-h) + 3rem) 0 6rem;
        text-align: center;
        overflow: clip;
    }
    .hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(ellipse at 50% 45%, rgb(10 10 11 / 0.25), transparent 70%),
            linear-gradient(180deg, rgb(10 10 11 / 0.7) 0%, rgb(10 10 11 / 0.42) 45%, rgb(10 10 11 / 0.78) 85%, var(--bg) 100%);
    }
    .hero-content { max-width: 60rem; animation: rise 0.9s var(--ease) both; }
    .hero-title {
        font-size: var(--fs-h1);
        font-weight: 500;
        line-height: 1.16;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-shadow: 0 4px 24px rgb(0 0 0 / 0.55);
    }
    .hero-line { display: block; }
    .hero-line.highlight { color: var(--accent-hi); text-shadow: 0 0 44px rgb(200 184 138 / 0.5), 0 4px 24px rgb(0 0 0 / 0.5); }
    .hero-subtitle {
        max-width: 40rem;
        margin: 1.6rem auto 2.6rem;
        font-size: var(--fs-lg);
        letter-spacing: 0.02em;
        color: var(--text-2);
        text-shadow: 0 2px 12px rgb(0 0 0 / 0.6);
    }
    .hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
    @media (max-width: 479.98px) { .hero-buttons .btn { width: 100%; } }

    .hero-scroll {
        position: absolute;
        bottom: 1.75rem;
        left: 50%;
        translate: -50% 0;
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgb(255 255 255 / 0.06);
        backdrop-filter: blur(8px);
        color: var(--text);
        text-decoration: none;
        animation: bob 2.2s ease-in-out infinite;
        transition: opacity var(--dur), visibility 0s;
    }
    .hero-scroll.is-hidden { opacity: 0; visibility: hidden; }
    .hero-scroll:hover { color: var(--accent-hi); border-color: var(--accent-line); }
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } }
    @keyframes bob { 50% { transform: translateY(6px); } }

    /* -------------------------------------------------------------- Realizacje */
    .projects-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 2.5rem; }
    .filter-btn {
        min-height: 2.75rem;
        padding: 0.55rem 1.4rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        color: var(--text-2);
        font-size: var(--fs-sm);
        font-weight: 500;
        transition: color var(--dur), background-color var(--dur), border-color var(--dur);
    }
    .filter-btn:hover { color: var(--text); border-color: var(--accent-line); }
    .filter-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

    .projects-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
    .project-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--surface);
        transition: transform 0.4s var(--ease), border-color var(--dur), box-shadow 0.4s var(--ease);
        animation: card-in 0.45s var(--ease) both;
    }
    .project-card:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: var(--shadow-2); }
    @keyframes card-in { from { opacity: 0; transform: translateY(16px); } }

    .project-image { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
    .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
    .project-card:hover .project-image img { transform: scale(1.06); }
    .project-overlay {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: end start;
        padding: 1.1rem;
        background: linear-gradient(180deg, transparent 55%, rgb(10 10 11 / 0.82));
    }
    .project-overlay .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.5rem 1rem;
        border-radius: var(--r-pill);
        background: rgb(10 10 11 / 0.7);
        backdrop-filter: blur(8px);
        border: 1px solid var(--line-strong);
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: 0.04em;
    }
    .project-overlay .pill i { color: var(--accent); }

    .project-info { display: flex; flex-direction: column; gap: 0.85rem; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
    .project-info h3 { font-size: var(--fs-h3); letter-spacing: 0.06em; }
    .project-info > p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }
    .project-details { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: auto 0 0; padding: 0.5rem 0 0; list-style: none; }
    .detail-item {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.32rem 0.75rem;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: var(--surface-2);
        color: var(--text-2);
        font-size: 0.78rem;
    }
    .detail-item i { color: var(--accent); font-size: 0.75rem; }

    /* ------------------------------------------------------------------ Galeria */
    .gallery { --modal-w: 68rem; }
    .gallery-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        width: min(100vw - 1.5rem, 68rem);
        height: min(100dvh - 1.5rem, 58rem);
        overflow: hidden;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-lg);
        background: var(--surface);
        box-shadow: var(--shadow-2);
    }
    .gallery-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 4.5rem 1rem 1.5rem; }
    .gallery-head h2 { font-size: var(--fs-h3); letter-spacing: 0.06em; }
    .gallery-desc {
        margin-top: 0.4rem;
        max-width: 60ch;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--text-2);
        font-size: var(--fs-sm);
    }
    .gallery-stage { position: relative; min-height: 0; background: var(--bg-deep); touch-action: pan-y; }
    .gallery-viewport { position: absolute; inset: 0; overflow: hidden; }
    .gallery-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        transform-origin: center;
        transition: transform 0.25s var(--ease);
    }
    .gallery-image.is-gesture { transition: none; }
    .gallery-stage .watermark {
        position: absolute;
        right: 1.25rem;
        bottom: 4.25rem;
        width: 5.5rem;
        height: 5.5rem;
        object-fit: contain;
        opacity: 0.7;
        filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5));
        pointer-events: none;
        user-select: none;
    }
    .gallery-nav {
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 3.25rem;
        height: 3.25rem;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgb(10 10 11 / 0.7);
        backdrop-filter: blur(8px);
        transition: background-color var(--dur), color var(--dur), scale var(--dur) var(--ease);
    }
    .gallery-nav:hover { background: var(--accent); color: var(--on-accent); scale: 1.08; }
    .gallery-prev { left: 1rem; }
    .gallery-next { right: 1rem; }
    .gallery-bar { position: absolute; inset: auto 0 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem; background: linear-gradient(0deg, rgb(10 10 11 / 0.7), transparent); }
    .gallery-counter { padding: 0.35rem 0.85rem; border-radius: var(--r-pill); background: rgb(10 10 11 / 0.7); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; }
    .gallery-fs {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgb(10 10 11 / 0.7);
        backdrop-filter: blur(8px);
        transition: background-color var(--dur), color var(--dur);
    }
    .gallery-fs:hover { background: var(--accent); color: var(--on-accent); }
    .gallery-thumbs { display: flex; gap: 0.6rem; padding: 0.9rem 1.25rem; overflow-x: auto; scrollbar-width: thin; border-top: 1px solid var(--line); }
    .gallery-thumbs[hidden] { display: none; }
    .gallery-thumb {
        flex: none;
        width: 4.75rem;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border: 2px solid transparent;
        border-radius: var(--r-sm);
        opacity: 0.55;
        transition: opacity var(--dur), border-color var(--dur);
    }
    .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .gallery-thumb:hover { opacity: 0.9; }
    .gallery-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); }
    .gallery-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.25rem 1.1rem; }
    .gallery-meta:empty { display: none; }
    .gallery-panel.is-fullscreen .gallery-stage { touch-action: none; }
    .gallery-panel.is-fullscreen { width: 100vw; height: 100dvh; border: 0; border-radius: 0; grid-template-rows: minmax(0, 1fr); }
    .gallery-panel.is-fullscreen :is(.gallery-head, .gallery-thumbs, .gallery-meta) { display: none; }
    .gallery-panel.is-fullscreen .gallery-close { display: none; }
    @media (max-width: 639.98px) {
        .gallery-panel { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
        .gallery-nav { width: 2.75rem; height: 2.75rem; }
        .gallery-stage .watermark { width: 4rem; height: 4rem; bottom: 4rem; }
        .gallery-thumb { width: 3.75rem; }
    }

    /* ------------------------------------------------------------------ Proces */
    .process { position: relative; display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; counter-reset: step; }
    .process::before {
        content: "";
        position: absolute;
        top: 2.25rem;
        left: calc(100% / 12);
        right: calc(100% / 12);
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent-line) 12%, var(--accent-line) 88%, transparent);
    }
    .process-step:nth-child(2) { --i: 1; } .process-step:nth-child(3) { --i: 2; } .process-step:nth-child(4) { --i: 3; }
    .process-step:nth-child(5) { --i: 4; } .process-step:nth-child(6) { --i: 5; }
    .process-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
    .step-marker {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 4.5rem;
        height: 4.5rem;
        border: 1px solid var(--accent-line);
        border-radius: 50%;
        background: var(--surface);
        color: var(--accent-hi);
        font-size: 1.35rem;
        box-shadow: 0 0 0 6px var(--bg);
    }
    .section--alt .step-marker { box-shadow: 0 0 0 6px var(--bg-deep); }
    .step-number {
        position: absolute;
        top: -0.4rem;
        right: -0.4rem;
        display: grid;
        place-items: center;
        min-width: 1.75rem;
        height: 1.75rem;
        border-radius: var(--r-pill);
        background: var(--accent);
        color: var(--on-accent);
        font-size: 0.7rem;
        font-weight: 700;
    }
    .process-step h3 { font-size: 1.05rem; }
    .process-step p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
    .step-time {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: auto;
        padding: 0.3rem 0.8rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        color: var(--text-2);
        font-size: 0.75rem;
    }
    .step-time i { color: var(--accent); }

    @media (max-width: 999.98px) {
        .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .process::before { display: none; }
    }
    @media (max-width: 639.98px) {
        .process { grid-template-columns: 1fr; gap: 1.75rem; padding-left: 0; }
        .process::before {
            display: block;
            top: 2.25rem;
            bottom: 2.25rem;
            left: 2.25rem;
            right: auto;
            width: 1px;
            height: auto;
            background: linear-gradient(180deg, transparent, var(--accent-line) 8%, var(--accent-line) 92%, transparent);
        }
        .process-step { display: grid; grid-template-columns: 4.5rem 1fr; align-items: start; gap: 0 1.25rem; text-align: left; }
        .process-step .step-marker { grid-row: 1 / span 3; }
        .process-step .step-time { justify-self: start; margin-top: 0.5rem; }
    }

    .care-note { max-width: 46rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding-top: 2.5rem; border-top: 1px solid var(--line); text-align: center; }
    .care-note .label { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .care-note p { color: var(--text-2); line-height: 1.85; }
    .care-note strong { color: var(--accent-hi); }

    .estimate {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 1.5rem 2rem;
        max-width: 60rem;
        margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
        padding: clamp(1.5rem, 3vw, 2.25rem);
        border: 1px solid var(--accent-line);
        border-radius: var(--r-lg);
        background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface);
        box-shadow: var(--glow);
    }
    .estimate-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.5rem; }
    .estimate h3 { font-size: var(--fs-md); font-weight: 500; color: var(--text-2); letter-spacing: 0; }
    .estimate .date { margin-top: 0.3rem; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem); font-weight: 700; color: var(--accent-hi); }
    .estimate .note { margin-top: 0.4rem; font-size: var(--fs-xs); color: var(--text-3); }
    @media (max-width: 819.98px) {
        .estimate { grid-template-columns: 1fr; text-align: center; justify-items: center; }
        .estimate .btn { white-space: normal; }
    }

    /* --------------------------------------------------------------------- FAQ */
    .faq-list { display: grid; gap: 0.85rem; max-width: 52rem; margin-inline: auto; }
    .faq-item {
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--surface);
        transition: border-color var(--dur), background-color var(--dur);
    }
    .faq-item:hover { border-color: var(--line-strong); }
    .faq-item[open] { border-color: var(--accent-line); background: var(--surface-2); }
    .faq-question {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.1rem 1.4rem;
        list-style: none;
        cursor: pointer;
        font-weight: 600;
        border-radius: var(--r-md);
    }
    .faq-question::-webkit-details-marker { display: none; }
    .faq-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hi); font-size: 0.95rem; }
    .faq-question > span[data-i18n] { flex: 1; }
    .faq-toggle { flex: none; color: var(--accent); transition: rotate var(--dur) var(--ease); }
    .faq-item[open] .faq-toggle { rotate: 45deg; }
    .faq-answer { padding: 0 1.4rem 1.35rem 5.15rem; color: var(--text-2); line-height: 1.75; }
    @media (max-width: 559.98px) { .faq-answer { padding-left: 1.4rem; } .faq-icon { display: none; } }
    @supports selector(details::details-content) {
        .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
        .faq-item[open]::details-content { block-size: auto; }
        :root { interpolate-size: allow-keywords; }
    }

    /* ----------------------------------------------------------------- Kontakt */
    .contact-wrapper { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: start; }
    @media (max-width: 959.98px) { .contact-wrapper { grid-template-columns: 1fr; } }

    .contact-quick { display: grid; gap: 1rem; }
    .quick-card {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        padding: 1.25rem 1.4rem;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--surface);
        text-decoration: none;
        transition: border-color var(--dur), transform var(--dur) var(--ease), background-color var(--dur);
    }
    a.quick-card:hover { border-color: var(--accent-line); background: var(--surface-2); transform: translateX(4px); }
    .quick-icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-hi); }
    .quick-body { min-width: 0; display: grid; gap: 0.1rem; }
    .quick-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
    .quick-value { font-weight: 600; overflow-wrap: anywhere; }
    .quick-hint { font-size: var(--fs-xs); color: var(--text-3); }
    .quick-arrow { margin-left: auto; color: var(--accent); opacity: 0; transition: opacity var(--dur); }
    a.quick-card:hover .quick-arrow { opacity: 1; }

    .contact-panel { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
    .contact-panel h3 { display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-h3); }
    .contact-panel h3 i { color: var(--accent); }
    .contact-panel > p { margin: 0.4rem 0 1.6rem; color: var(--text-2); font-size: var(--fs-sm); }
    .contact-form { display: grid; gap: 1.1rem; }
    .input-prefix { position: relative; }
    .input-prefix::before { content: "+"; position: absolute; left: 1rem; top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
    .input-prefix .input { padding-left: 1.9rem; }
}