/* ==========================================================================
   AUME – 14) Jak vznikají šperky AUME                               [v1.0]
   Sekce se třemi kroky (návrh → výroba → balení) v detailu produktu,
   vkládá se nad "Podobné produkty" (viz 14-jak-vznikaji.js).

   Barvy a tvary jsou převzaté z custom.css webu:
   pozadí --color-bg-light, text --color-text-dark, nadpis Salina 200/34 px
   stejně jako u "Podobné produkty" – a ŽÁDNÉ zaoblení, šablona má rohy ostré.

   Obrázky patří do /user/documents/upload/assets/ (vznik-navrh.webp,
   vznik-vyroba.webp, vznik-baleni.webp, každý 700×500 px).
   ========================================================================== */

/* Béžový pás jde přes celou šířku okna, i když sekce sedí uvnitř kontejneru
   detailu (na 1440 px je kontejner široký 1378 a začíná na 24 px).
.aume-vznik {
    margin-top: 48px;
    margin-bottom: 8px;
    margin-left: calc(-1 * var(--aume-vznik-vlevo, 0px));
    margin-right: calc(-1 * var(--aume-vznik-vpravo, 0px));
    padding: 48px 24px 52px;
    background: var(--color-bg-light, #f7f5f1);
    font-family: "Red Hat Display", sans-serif;
    color: var(--color-text-dark, #222222);
}

/* Salina je na webu jen v jednom řezu (ExtraLight, váha 200) – definuje ji
   @font-face v custom.css. Bez uvedené váhy by prohlížeč řez dopočítával sám
   a nadpis by byl tučnější než ostatní nadpisy sekcí. */
.aume-vznik__nadpis {
    margin: 0 0 40px;
    font-family: "Salina", serif;
    font-weight: 200;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: inherit;
}

.aume-vznik__mrizka {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 1180px;
    margin: 0 auto;
}

.aume-vznik__krok {
    margin: 0;
}

/* Poměr stran drží rámeček, ne obrázek. Dokud se fotka nenačte (je lazy),
   místo už je vyhrazené a obsah pod sekcí nikam neposkočí. */
.aume-vznik__obr {
    position: relative;
    aspect-ratio: 7 / 5;
    overflow: hidden;
    background: #ffffff;
}

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

/* Odstavec i s tučnými částmi je opsaný z popisu produktu (viz JS).
   Barva i tučné se schválně nepřebíjejí – <strong> si bere váhu ze šablony
   úplně stejně jako v popisu, takže obojí vypadá totožně. */
/* Mezera pod fotkou se musí vynutit přes !important. Šablona má na odstavce
   pravidlo `#content p { margin: 0 0 22px }` a ID přebije jakoukoli třídu –
   bez toho je margin-top nula a text se lepí přímo na fotku. */
.aume-vznik__text {
    margin: 12px 0 0 !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: inherit;
}

/* --- Čárky pod slidrem ---------------------------------------------------- */
/* Ukazatel pozice ve slidru. Na desktopu a v detailu produktu se nezobrazuje.
   Vzhled je opsaný od slideru u sekce Inspirace: tenké vodorovné čárky,
   aktivní tmavá – ne kolečka. */

.aume-vznik__tecky {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.aume-vznik__tecka {
    width: 32px;
    height: 2px;
    padding: 10px 0;
    /* plocha na klepnutí je 22 px vysoká, vidět jsou z ní 2 px čáry */
    background: none;
    border: 0;
    box-sizing: content-box;
    background-clip: content-box;
    background-color: #D6D2CA;
    cursor: pointer;
    transition: background-color .2s ease;
}

.aume-vznik__tecka[aria-current="true"] {
    background-color: var(--color-text-dark, #222222);
}

/* --- Homepage ------------------------------------------------------------- */
/* Na úvodní stránce je pás bílý (sedí pod fotorecenzemi, kde by béžová
   plocha rozbila rytmus stránky) a na mobilu se ze tří kroků stane slider. */

background: #ffffff;
margin-top: 16px;
padding-top: 32px;
padding-bottom: 36px;
}

/* --- Tablet: fotka vedle textu ------------------------------------------- */
/* Tři sloupce by tu byly moc úzké, jeden přes celou šířku zase moc velký.
   Text je v obalu .aume-vznik__obsah schválně – kdyby byl přímo v mřížce,
   šlo by o samostatnou buňku a při víc prvcích by spadl pod fotku. */

@media (min-width: 600px) and (max-width: 991px) {
    .aume-vznik__krok {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 28px;
        align-items: center;
    }

    @supports (display: grid) {
        .aume-vznik__text {
            margin-top: 0 !important;
        }
    }
}

/* --- Desktop: tři kroky vedle sebe --------------------------------------- */

@media (min-width: 992px) {
    .aume-vznik {
        padding: 64px 40px 68px;
    }

    .aume-vznik--home {
        padding-top: 40px;
        padding-bottom: 44px;
    }

    .aume-vznik__nadpis {
        margin-bottom: 48px;
    }

    .aume-vznik__mrizka {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 599px) {

    /* jen svislé odsazení – vodorovné drží roztažení pásu, viz výše */
    .aume-vznik {
        margin-top: 32px;
        margin-bottom: 4px;
        padding: 36px 20px 40px;
    }

    .aume-vznik__nadpis {
        margin-bottom: 28px;
        font-size: 28px;
    }

    .aume-vznik__mrizka {
        gap: 32px;
    }

    /* Na mobilu byla díra nad sekcí 88 px (20 + 32 + 36), teď 52 px. */
    .aume-vznik--home {
        margin-top: 8px;
        padding-top: 24px;
        padding-bottom: 28px;
    }

    /* --- Slider na mobilní homepage --------------------------------------- */
    /* Posouvání dělá scroll-snap prohlížeče, ne knihovna. Na stránce sice
       Flickity i Swiper jsou, ale oba je tam tahá cizí doplněk – kdyby ho
       někdo vypnul, slider by zmizel s ním. Nativní řešení nemá co spadnout,
       má správnou setrvačnost na iOS a nepotřebuje čekat na init. */

    .aume-vznik--home {
        /* odsazení se stěhuje na dráhu, aby slidy mohly dojet až k okraji */
        padding-left: 0;
        padding-right: 0;
    }

    .aume-vznik--home .aume-vznik__nadpis {
        padding: 0 20px;
    }

    .aume-vznik--home .aume-vznik__mrizka {
        display: flex;
        padding: 0 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .aume-vznik--home .aume-vznik__mrizka::-webkit-scrollbar {
        display: none;
    }

    /* O kousek užší než dráha, aby byl vidět kraj dalšího kroku – to je
       jediné, co zákazníkovi napoví, že se dá posouvat. */
    .aume-vznik--home .aume-vznik__krok {
        flex: 0 0 calc(100% - 52px);
        scroll-snap-align: start;
    }

    /* Odsazení mezi slidy je margin, ne gap. Gap ve flexboxu umí až
       Safari 14.1 a Chrome 84 – na starším telefonu by se slidy dotýkaly. */
    .aume-vznik--home .aume-vznik__krok+.aume-vznik__krok {
        margin-left: 12px;
    }

    .aume-vznik--home .aume-vznik__tecky {
        display: flex;
    }
}