/* ==========================================================================
   Nasze aplikacje: warstwa integracji sekcji marek ze stroną Appifi
   - .apps-intro           wstęp w stylu Ashley (Outfit, mil-*, akcent #FF9800)
   - .apps-intro--outro    domknięcie bloku (powrót do ciemnej sekcji Appifi)
   - .app-promo            szwy między sekcjami (z --seam-top / --seam-bottom marek)
   - body.apps-frame-*     jasna rama (logo, menu, „Powrót na górę”) nad ciemnymi
                           sekcjami bloku; klasy przełącza js/apps/app-promo-shared.js

   Fonty marek (jeden link w <head>): Bricolage Grotesque, Martian Mono,
   Schibsted Grotesk, Inter, Sora, JetBrains Mono.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Szwy

   Każda sekcja dostaje dwa pasy tła (pod treścią, nad dekoracjami marki):
   - u góry: od koloru dolnej krawędzi poprzedniej sekcji (--seam-from) do
     przezroczystości, więc granica sekcji ma po obu stronach ten sam kolor,
   - u dołu: od przezroczystości do własnego --seam-bottom, żeby siatki, mapy
     i poświaty marek nie kończyły się twardą krawędzią.
   CSS nie widzi zmiennych poprzedniego rodzeństwa, więc kolor wyjścia każdej
   sekcji jest powtórzony niżej (zgodny z --seam-bottom w CSS marki).
   Przejście jest wygładzone (ease-in-out), żeby nie było widać pasma.
   -------------------------------------------------------------------------- */

.apps-intro + .app-promo                  { --seam-from: #000000; }
.app-promo--challengeme + .app-promo,
.app-promo--challengeme + .apps-intro     { --seam-from: #05070A; }
.app-promo--appteczka + .app-promo,
.app-promo--appteczka + .apps-intro       { --seam-from: #0B1B33; }
.app-promo--hop + .app-promo,
.app-promo--hop + .apps-intro             { --seam-from: #070A12; }
.app-promo--stagedesigner + .app-promo,
.app-promo--stagedesigner + .apps-intro   { --seam-from: #07090d; }

.app-promo {
    --seam-band-top: 220px;
    --seam-band-bottom: 160px;
}

.app-promo > .container {
    position: relative;
    z-index: 1;
}

.app-promo::before,
.app-promo::after,
.apps-intro--outro::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
}

/* górny pas: kolor poprzedniej sekcji -> przezroczystość */
.app-promo::before,
.apps-intro--outro::before {
    top: 0;
    height: var(--seam-band-top, 220px);
    --c: var(--seam-from, transparent);
    background: linear-gradient(to bottom, var(--c), transparent);
    background: linear-gradient(to bottom,
        var(--c) 0%,
        color-mix(in srgb, var(--c) 98.7%, transparent) 8.1%,
        color-mix(in srgb, var(--c) 95.1%, transparent) 15.5%,
        color-mix(in srgb, var(--c) 89.6%, transparent) 22.5%,
        color-mix(in srgb, var(--c) 82.5%, transparent) 29%,
        color-mix(in srgb, var(--c) 74.1%, transparent) 35.3%,
        color-mix(in srgb, var(--c) 64.8%, transparent) 41.2%,
        color-mix(in srgb, var(--c) 55%, transparent) 47.1%,
        color-mix(in srgb, var(--c) 45%, transparent) 52.9%,
        color-mix(in srgb, var(--c) 35.2%, transparent) 58.8%,
        color-mix(in srgb, var(--c) 25.9%, transparent) 64.7%,
        color-mix(in srgb, var(--c) 17.5%, transparent) 71%,
        color-mix(in srgb, var(--c) 10.4%, transparent) 77.5%,
        color-mix(in srgb, var(--c) 4.9%, transparent) 84.5%,
        color-mix(in srgb, var(--c) 1.3%, transparent) 91.9%,
        transparent 100%);
}

/* dolny pas: przezroczystość -> własny kolor dolnej krawędzi */
.app-promo::after {
    bottom: 0;
    height: var(--seam-band-bottom, 160px);
    --c: var(--seam-bottom, transparent);
    background: linear-gradient(to top, var(--c), transparent);
    background: linear-gradient(to top,
        var(--c) 0%,
        color-mix(in srgb, var(--c) 98.7%, transparent) 8.1%,
        color-mix(in srgb, var(--c) 95.1%, transparent) 15.5%,
        color-mix(in srgb, var(--c) 89.6%, transparent) 22.5%,
        color-mix(in srgb, var(--c) 82.5%, transparent) 29%,
        color-mix(in srgb, var(--c) 74.1%, transparent) 35.3%,
        color-mix(in srgb, var(--c) 64.8%, transparent) 41.2%,
        color-mix(in srgb, var(--c) 55%, transparent) 47.1%,
        color-mix(in srgb, var(--c) 45%, transparent) 52.9%,
        color-mix(in srgb, var(--c) 35.2%, transparent) 58.8%,
        color-mix(in srgb, var(--c) 25.9%, transparent) 64.7%,
        color-mix(in srgb, var(--c) 17.5%, transparent) 71%,
        color-mix(in srgb, var(--c) 10.4%, transparent) 77.5%,
        color-mix(in srgb, var(--c) 4.9%, transparent) 84.5%,
        color-mix(in srgb, var(--c) 1.3%, transparent) 91.9%,
        transparent 100%);
}

@media screen and (max-width: 991px) {
    .app-promo {
        --seam-band-top: 150px;
        --seam-band-bottom: 110px;
    }
}

/* --------------------------------------------------------------------------
   2. Wstęp „Nasze aplikacje” (styl Ashley na ciemnym tle, jak sekcja usług)
   -------------------------------------------------------------------------- */

.apps-intro {
    position: relative;
    overflow: hidden;
    background-color: #000;
    color: rgba(255, 255, 255, 0.4);
}

.apps-intro > .container {
    position: relative;
    z-index: 1;
}

.apps-intro__inner {
    padding-top: 120px;
    padding-bottom: 30px;
}

.apps-intro__head {
    margin-bottom: 60px;
}

.apps-intro .mil-suptitle {
    margin-bottom: 40px;
}

.apps-intro__title {
    margin: 0;
}

.apps-intro__lead {
    margin: 0;
    max-width: 440px;
    font-size: 18px;
    line-height: 170%;
    color: rgba(255, 255, 255, 0.55);
}

.apps-intro__lead strong {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* lista czterech aplikacji: kotwice do sekcji */
.apps-intro__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.apps-intro__chips > li {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.apps-intro__chips > li:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.apps-intro__chip {
    --chip: #FF9800;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 28px 24px 30px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: background-color 0.4s cubic-bezier(0, 0, 0.3642, 1);
}

/* kreska w kolorze marki: zapowiedź tego, co niżej */
.apps-intro__chip::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 2px;
    background: var(--chip);
    transform: scaleX(0.14);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0, 0, 0.3642, 1);
}

.apps-intro__chip:hover,
.apps-intro__chip:focus-visible {
    background-color: rgba(255, 255, 255, 0.04);
}

.apps-intro__chip:hover::before,
.apps-intro__chip:focus-visible::before {
    transform: scaleX(1);
}

.apps-intro__chip:focus-visible {
    outline: 2px solid #FF9800;
    outline-offset: -2px;
}

.apps-intro__icon {
    flex: 0 0 auto;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.apps-intro__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apps-intro__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.apps-intro__name {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.9);
}

.apps-intro__desc {
    text-wrap: balance;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.5);
}

.apps-intro__arrow {
    flex: 0 0 auto;
    margin-left: auto;
    width: 36px;
    height: 36px;
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    transition: background-color 0.4s cubic-bezier(0, 0, 0.3642, 1), transform 0.4s cubic-bezier(0, 0, 0.3642, 1);
}

.apps-intro__arrow path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.4s;
}

.apps-intro__chip:hover .apps-intro__arrow,
.apps-intro__chip:focus-visible .apps-intro__arrow {
    background-color: #FF9800;
    transform: translateY(3px);
}

.apps-intro__chip:hover .apps-intro__arrow path,
.apps-intro__chip:focus-visible .apps-intro__arrow path {
    stroke: #000;
}

@media screen and (max-width: 1199px) {
    .apps-intro__chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .apps-intro__chips > li:nth-child(odd) {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    .apps-intro__chips > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media screen and (max-width: 991px) {
    /* siatka usług nad wstępem ma na mobile własne 90px dołu */
    .apps-intro__inner {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .apps-intro__head {
        margin-bottom: 50px;
    }
    .apps-intro__lead {
        margin-top: 30px;
        max-width: none;
    }
}

@media screen and (max-width: 575px) {
    .apps-intro__chips {
        grid-template-columns: minmax(0, 1fr);
    }
    .apps-intro__chips > li {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    .apps-intro__chip {
        padding: 18px 18px 20px;
        gap: 14px;
    }
    .apps-intro__icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }
    .apps-intro__lead {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   3. Domknięcie bloku: z powrotem w ciemnej sekcji Appifi
   -------------------------------------------------------------------------- */

.apps-intro--outro {
    --seam-band-top: 160px;
}

.apps-intro--outro .apps-intro__inner {
    padding-top: 110px;
    padding-bottom: 120px;
}

.apps-intro__outro-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.apps-intro__outro-title {
    margin: 0;
    max-width: 640px;
}

.apps-intro__outro-title .mil-thin {
    display: block;
}

.apps-intro--outro .mil-button {
    flex: 0 0 auto;
}

@media screen and (max-width: 991px) {
    .apps-intro--outro {
        --seam-band-top: 110px;
    }
    .apps-intro--outro .apps-intro__inner {
        padding-top: 80px;
        padding-bottom: 90px;
    }
    .apps-intro__outro-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding-top: 50px;
    }
}

/* --------------------------------------------------------------------------
   4. Rama szablonu nad ciemnym blokiem (desktop)

   Na desktopie logo, przycisk menu i „Powrót na górę” są czarne, a ciemne
   sekcje szablonu odwracają je filtrem backdrop. Sekcje marek mają własne
   tła, więc tu rama przechodzi na jasny wariant (ten sam, którego szablon
   używa na mobile). Na mobile rama ma własne ciemne tło i nic nie zmieniamy.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1201px) {
    body.apps-frame-top-light .mil-frame .mil-frame-top .mil-logo .mil-logo-dark {
        display: none;
    }
    body.apps-frame-top-light .mil-frame .mil-frame-top .mil-logo .mil-logo-light {
        display: inline-block;
    }
    body.apps-frame-top-light .mil-frame .mil-frame-top .mil-menu-btn span,
    body.apps-frame-top-light .mil-frame .mil-frame-top .mil-menu-btn span::before,
    body.apps-frame-top-light .mil-frame .mil-frame-top .mil-menu-btn span::after {
        background: rgb(255, 255, 255);
    }

    body.apps-frame-bottom-light .mil-frame .mil-frame-bottom .mil-current-page,
    body.apps-frame-bottom-light .mil-frame .mil-frame-bottom .mil-back-to-top .mil-link {
        color: rgb(255, 255, 255);
    }
    body.apps-frame-bottom-light .mil-frame .mil-frame-bottom .mil-back-to-top .mil-link svg {
        background-color: rgba(255, 255, 255, 0.1);
    }
    body.apps-frame-bottom-light .mil-frame .mil-frame-bottom .mil-back-to-top .mil-link svg path {
        fill: rgb(255, 255, 255);
    }
}

/* --------------------------------------------------------------------------
   5. Ograniczony ruch
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .apps-intro__chip,
    .apps-intro__chip::before,
    .apps-intro__arrow,
    .apps-intro__arrow path {
        transition: none;
    }
    .apps-intro__chip:hover .apps-intro__arrow,
    .apps-intro__chip:focus-visible .apps-intro__arrow {
        transform: none;
    }
}