/* ================================================================
   Mobile Takeover Menu
   ----------------------------------------------------------------
   Fullscreen mobile menu (≤960px) z snap-scrollem i crossfade tła.
   Logo jako znak wodny (przezroczyste tło).
   "Przewiń" zawsze widoczne, fixed do viewportu.
   ================================================================ */

.c-mtake { display: none; }

@media (max-width: 960px) {

    html.has-mtake-open,
    html.has-mtake-open body {
        overflow: hidden;
        height: 100dvh;
        height: 100vh;
    }

    .c-mtake {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: #1a1a1a;
        color: #fff;
        font-family: 'Georgia', 'Times New Roman', serif;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0s 0s;
    }

    .c-mtake[data-state="closed"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease, visibility 0s 0.35s;
    }

    html.mtake-suppress-open .c-mtake {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
    }
    html.mtake-suppress-open.has-mtake-open,
    html.mtake-suppress-open.has-mtake-open body {
        overflow: auto;
        height: auto;
    }

    /* ============================
       Bg layer (crossfade)
       ============================ */
    .c-mtake__bg-layer {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .c-mtake__bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 0.7s ease-in-out;
        will-change: opacity;
    }

    .c-mtake__bg.is-active {
        opacity: 1;
    }

    .c-mtake__bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: inherit;
        background-size: inherit;
        background-position: inherit;
        background-repeat: inherit;
        transform: scale(1.0);
        transition: transform 12s ease-out;
    }

    .c-mtake__bg.is-active::before {
        transform: scale(1.05);
    }

    .c-mtake__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(to bottom,
                rgba(0,0,0,0.30) 0%,
                rgba(0,0,0,0.05) 30%,
                rgba(0,0,0,0.15) 60%,
                rgba(0,0,0,0.75) 100%);
        pointer-events: none;
    }

    /* ============================
       Logo jako znak wodny — bez tła, lekko prześwitujący
       Delikatny biały drop-shadow zapewnia czytelność na
       ciemniejszych miejscach zdjęcia bez wprowadzania ramki.
       ============================ */
    .c-mtake__logo {
        position: absolute;
        top: max(20px, env(safe-area-inset-top));
        left: 20px;
        z-index: 10;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        text-decoration: none;
        opacity: 0.5;
        transition: transform 0.2s ease, opacity 0.2s ease;
        /* Delikatna biała aureola wokół logo dla czytelności */
        filter:
            drop-shadow(0 1px 2px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    }

    .c-mtake__logo:active {
        transform: scale(0.97);
        opacity: 1;
    }

    .c-mtake__logo-img {
        display: block;
        max-width: 110px;
        max-height: 50px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* ============================
       Nav (scroll container)
       ============================ */
    .c-mtake__nav {
        position: absolute;
        inset: 0;
        z-index: 5;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .c-mtake__nav::-webkit-scrollbar { display: none; }
    .c-mtake__nav { scrollbar-width: none; }

    /* ============================
       Slide
       ============================ */
    .c-mtake__slide {
        position: relative;
        display: block;
        width: 100%;
        height: 100dvh;
        height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* ============================
       Label bar
       ============================ */
    .c-mtake__label {
        position: absolute;
        left: 0;
        bottom: 26%;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px 36px 22px 24px;
        background: rgba(255,255,255,0.98);
        color: #1a1a1a;
        border-radius: 0 12px 12px 0;
        transform: translateX(-110%);
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        max-width: 82%;
      	opacity: 0.85;
    }

    .c-mtake__slide.is-active .c-mtake__label {
        transform: translateX(0);
        transition-delay: 0.2s;
    }

    .c-mtake__label-number {
        font-family: 'Georgia', serif;
        font-size: 12px;
        font-style: italic;
        color: #8a8475;
        letter-spacing: 0.12em;
    }

    .c-mtake__label-text {
        font-family: 'Georgia', serif;
        font-size: 26px;
        font-weight: 400;
        letter-spacing: -0.01em;
        line-height: 1.05;
    }

    /* ============================
       CTA arrow
       ============================ */
    .c-mtake__cta {
        position: absolute;
        right: 24px;
        bottom: 28%;
        width: 56px;
        height: 56px;
        border: 1px solid rgba(255,255,255,0.55);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .c-mtake__slide.is-active .c-mtake__cta {
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.7s;
    }

    .c-mtake__cta svg {
        width: 22px;
        height: 22px;
    }

    /* ============================
       Decorative bg text
       ============================ */
    .c-mtake__decoration {
        position: absolute;
        top: 32%;
        right: -25px;
        font-family: 'Georgia', serif;
        font-style: italic;
        font-size: clamp(80px, 30vw, 150px);
        font-weight: 400;
        color: rgba(255,255,255,0.07);
        letter-spacing: -0.02em;
        line-height: 1;
        pointer-events: none;
        transform: translateX(20px);
        opacity: 0;
        transition: opacity 1.2s ease, transform 1.2s ease;
        white-space: nowrap;
    }

    .c-mtake__slide.is-active .c-mtake__decoration {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.1s;
    }

    /* ============================
       Scroll hint — ZAWSZE WIDOCZNY
       Fixed do viewportu (nie do slajdu), zawsze przy dolnej krawędzi
       ekranu, nad bezpieczną strefą iPhone X+.
       Pokazuje się na każdym slajdzie, nie tylko pierwszym.
       Ukrywany dopiero na ostatnim slajdzie (bo nie ma już dokąd przewijać).
       ============================ */
    .c-mtake__scroll-hint {
        position: fixed;
        left: 50%;
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: rgba(255,255,255,0.85);
        font-family: 'Georgia', serif;
        font-size: 10px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        animation: ao-mtake-bobble 2s ease-in-out infinite;
        pointer-events: none;
        text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }

    .c-mtake__scroll-hint-line {
        width: 1px;
        height: 28px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0.8),
            rgba(255,255,255,0));
    }

    @keyframes ao-mtake-bobble {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50%      { transform: translateX(-50%) translateY(6px); }
    }

    /* Ukryj scroll hint gdy menu zamknięte */
    .c-mtake[data-state="closed"] .c-mtake__scroll-hint {
        opacity: 0;
        visibility: hidden;
    }

    /* Ukryj scroll hint gdy aktywny jest OSTATNI slajd (nie ma już dokąd) */
    .c-mtake__slide:last-child.is-active ~ .c-mtake__scroll-hint,
    .c-mtake.is-last-slide .c-mtake__scroll-hint {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* ============================
       Dots
       ============================ */
    .c-mtake__dots {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 15;
        pointer-events: none;
    }

    .c-mtake__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,0.4);
        transition: all 0.4s ease;
    }

    .c-mtake__dot.is-active {
        background: rgba(255,255,255,1);
        transform: scale(1.6);
    }

    /* ============================
       Header tweaks
       ============================ */
    .has-mtake-open .c-header {
        background: transparent;
        box-shadow: none;
    }

    .has-mtake-open .c-header__logo,
    .has-mtake-open .c-header__socials--mobile {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .has-mtake-open .c-header__toggle {
        position: relative;
        z-index: 100;
    }

    .c-header__mobile-panel {
        display: none !important;
    }
}