/* Úvodní stránka (templates/web/homepage.html.twig) – načítá ji jen úvod přes {% block page_styles %}.
   Třídy home-* (vlastní sekce); .products/.recipes/.partners přebírají vzhled z main.css.
   main.css má * { font-size: 1.02em } – v každém zanoření by písmo rostlo, proto uvnitř home-* sekcí
   font-size: inherit a velikosti nadpisů v rem. Barvy z :root v main.css. */

main [class^="home-"] *, main [class*=" home-"] * { font-size: inherit; }

main .home-hero, main .home-pillars, main .home-shop, main .home-steps, main .home-farm, main .home-visit {
    padding: 4em 10em;
}
main .home-hero h1 { font-size: 2.6rem; }
main [class^="home-"] h2, main [class*=" home-"] h2 { font-size: 1.9rem; text-transform: uppercase; margin-bottom: .5em; }
main .home-pillars h2 { font-size: 1.15rem; text-transform: none; margin: .6em 0 .3em; }
main [class^="home-"] h3 { font-size: 1.25rem; margin-bottom: .4em; }
main .home-numbers dt { font-size: 1.45rem; }

/* Tlačítka vedle .button z main.css */
.home-actions { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; margin-top: 1.4em; }
.home-actions .button { display: inline-block; text-decoration: none; }
.home-button-light, .home-button-outline {
    display: inline-block; padding: .5em 1.2em; border-radius: .3em; text-decoration: none; font-weight: 500;
    transition: background-color .3s, color .3s;
}
.home-button-light { color: #fff; border: 2px solid #fff; }
.home-button-light:hover, .home-button-light:focus-visible { background: #fff; color: var(--active-bg-color); }
.home-button-outline { color: var(--active-bg-color); border: 2px solid var(--active-bg-color); }
.home-button-outline:hover, .home-button-outline:focus-visible { background: var(--active-bg-color); color: #fff; }

/* 1) Úvodní pás – fotka prodejny se ztmavením zleva, text vlevo */
main .home-hero {
    min-height: 34em;
    display: flex; align-items: center;
    color: #fff;
    background-color: #2b2b2b;
    background-image: linear-gradient(90deg, rgba(10, 25, 50, .88) 0%, rgba(10, 25, 50, .70) 45%, rgba(10, 25, 50, .25) 100%),
        url('../images/uvod/prodejna-1280.jpg');
    background-image: linear-gradient(90deg, rgba(10, 25, 50, .88) 0%, rgba(10, 25, 50, .70) 45%, rgba(10, 25, 50, .25) 100%),
        image-set(url('../images/uvod/prodejna-1920.webp') type('image/webp'), url('../images/uvod/prodejna-1280.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
}
.home-hero-inner { max-width: 36em; position: relative; z-index: 1; }

/* Animace „vstup do prodejny“: přiblížení ke dveřím → prolnutí do panoramatu interiéru, které se pomalu otáčí →
   zpět na venkovní fotku (pozadí sekce), jen jednou. Spouští ji skript v homepage.html.twig až po načtení stránky a panoramatu
   (třída is-playing) – nebrzdí první vykreslení; bez JS a při „omezit pohyb“ zůstane statická fotka.
   Vrstva .home-hero-out má stejný obrázek i výřez jako pozadí sekce a na konci se vrací pod panorama (to pak
   zmizí), takže animace skončí na stejném obrázku, jaký je bez ní. Ztmavení dělá ::after (nad pozadím sekce by bylo dvojí). */
main .home-hero { position: relative; overflow: hidden; }
.home-hero-anim { position: absolute; inset: 0; display: none; }
.home-hero.is-playing .home-hero-anim { display: block; }
.home-hero-anim::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 25, 50, .88) 0%, rgba(10, 25, 50, .70) 45%, rgba(10, 25, 50, .25) 100%);
}
.home-hero-out, .home-hero-in { position: absolute; inset: 0; background-repeat: no-repeat; will-change: transform, opacity; }
.home-hero-out {
    background-image: url('../images/uvod/prodejna-1280.jpg');
    background-image: image-set(url('../images/uvod/prodejna-1920.webp') type('image/webp'), url('../images/uvod/prodejna-1280.jpg') type('image/jpeg'));
    background-size: cover; background-position: center;
    transform-origin: 50% 58%; /* dveře */
    animation: home-hero-out 22s ease-in-out 1 both;
}
.home-hero-in {
    background-image: url('../images/uvod/interier-panorama.webp');
    /* pás = pravá polovina panoramatu (od zadní stěny k automatu a Milkbotu u vchodu), 1,9× širší než vysoký;
       výška ≥ 75vw → ~1,4× širší než okno, takže se je kam posouvat (strop a podlaha se oříznou) */
    background-size: auto max(100%, 75vw);
    background-position: 0 50%;
    opacity: 0;
    animation: home-hero-in 22s linear 1 both;
}
@keyframes home-hero-out {
    0%, 4% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .9, .6); }
    24% { transform: scale(3); opacity: 1; }
    30% { transform: scale(3.4); opacity: 0; }
    31%, 84% { transform: scale(1); opacity: 0; }
    90%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes home-hero-in {
    0%, 20% { opacity: 0; transform: scale(1.25); background-position: 0 50%; }
    30% { opacity: 1; transform: scale(1.06); }
    36% { transform: scale(1); background-position: 0 50%; animation-timing-function: ease-in-out; }
    88% { opacity: 1; background-position: 100% 50%; }
    97%, 100% { opacity: 0; background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .home-hero-anim { display: none !important; } }
.home-hero h1 { line-height: 1.15; margin: .35em 0 .45em; }
.home-lead { font-size: 1.15rem !important; line-height: 1.55; color: #f1f1f1; }
.home-badge {
    display: inline-flex; align-items: center; gap: .55em;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 2em; padding: .35em 1em; font-weight: 500; letter-spacing: .02em;
}
.home-badge-dot { width: .65em; height: .65em; border-radius: 50%; background: #4cd07d; box-shadow: 0 0 0 0 rgba(76, 208, 125, .7); animation: home-pulse 2s infinite; }
@keyframes home-pulse { 70% { box-shadow: 0 0 0 .6em rgba(76, 208, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 208, 125, 0); } }
@media (prefers-reduced-motion: reduce) { .home-badge-dot { animation: none; } }

/* 2) Tři důvody */
main .home-pillars {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5em;
    background: var(--bg-section-1); text-align: center;
}
.home-pillars svg, .home-pillars img { width: 3em; height: 3em; fill: var(--active-bg-color); }
.home-pillars p { line-height: 1.5; color: #333; }
.home-pillars a { color: var(--active-bg-color); }

/* 3) Co v prodejně koupíte – karty */
main .home-shop { background: var(--bg-section-2); }
.home-intro { margin-bottom: 2em; line-height: 1.5; }
.home-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; }
.home-card { background: #fff; border-radius: .8em; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); display: flex; flex-direction: column; }
.home-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.home-card-body { padding: 1.1em 1.2em 1.3em; display: flex; flex-direction: column; gap: .5em; line-height: 1.45; }
.home-card-body a { color: var(--active-bg-color); font-weight: 500; }
.home-card-text { background: #fff; }
.home-card-text h3 + p { margin-top: -.1em; }
.home-card-text .home-facts { margin-bottom: .8em; }
.home-facts { list-style: none; font-size: .92rem !important; color: #444; display: flex; flex-direction: column; gap: .25em; }
.home-facts li { padding-left: 1.1em; position: relative; }
.home-facts li::before { content: ''; position: absolute; left: 0; top: .5em; width: .45em; height: .45em; border-radius: 50%; background: var(--active-bg-color); }

/* 4) Jak nakoupit – očíslované kroky */
main .home-steps { background: #fff; }
/* střídání pozadí sekcí na úvodu (products/recipes jinak z main.css) */
main .recipes { background-color: var(--bg-section-1); }
.home-steps ol { list-style: none; counter-reset: krok; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; margin-top: 1em; }
.home-steps li { counter-increment: krok; position: relative; padding-top: 3.2em; line-height: 1.5; }
.home-steps li::before {
    content: counter(krok); position: absolute; top: 0; left: 0;
    width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center;
    background: var(--active-bg-color); color: #fff; font-weight: 700;
}

/* 5) Výrobky – vzhled z main.css (.products), jen tlačítka vedle sebe */
.products .home-actions { justify-content: center; margin-top: 0; }
.products article img { aspect-ratio: 3 / 4; object-fit: cover; }

/* 6) Škodův statek */
main .home-farm { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3em; align-items: center; background: var(--bg-section-2); }
.home-farm-text p { line-height: 1.6; margin-bottom: .9em; }
.home-numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8em; margin: 1.5em 0 .5em; }
.home-numbers div { background: #fff; border-radius: .6em; padding: .8em .6em; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.home-numbers dt { font-weight: 700; color: var(--active-bg-color); line-height: 1.1; white-space: nowrap; }
.home-numbers dd { font-size: .9rem !important; color: #444; margin-top: .25em; }
.home-farm-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.home-farm-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .8em; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.home-farm-photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* 8) Kde nás najdete */
main .home-visit { background: var(--bg-section-1); text-align: center; }
.home-visit p { line-height: 1.6; margin-bottom: .6em; }
.home-visit .home-address { font-size: 1.25rem !important; }
.home-visit a { color: var(--active-bg-color); }
.home-visit .home-actions { justify-content: center; }

/* Responzivní – zlomy jako main.css (1250 / 750 px) */
@media (max-width: 1250px) {
    main .home-hero, main .home-pillars, main .home-shop, main .home-steps, main .home-farm, main .home-visit { padding: 4em 3em; }
    .home-cards { grid-template-columns: repeat(2, 1fr); }
    main .home-farm { grid-template-columns: 1fr; }
    .home-numbers { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 750px) {
    main .home-hero, main .home-pillars, main .home-shop, main .home-steps, main .home-farm, main .home-visit { padding: 3em 1.5em; }
    main .home-hero {
        min-height: 0;
        background-image: linear-gradient(180deg, rgba(10, 25, 50, .74), rgba(10, 25, 50, .68)), url('../images/uvod/prodejna-1280.jpg');
        background-image: linear-gradient(180deg, rgba(10, 25, 50, .74), rgba(10, 25, 50, .68)),
            image-set(url('../images/uvod/prodejna-800.webp') type('image/webp'), url('../images/uvod/prodejna-1280.jpg') type('image/jpeg'));
    }
    .home-hero-anim::after { background: linear-gradient(180deg, rgba(10, 25, 50, .74), rgba(10, 25, 50, .68)); }
    .home-hero-out {
        background-image: url('../images/uvod/prodejna-1280.jpg');
        background-image: image-set(url('../images/uvod/prodejna-800.webp') type('image/webp'), url('../images/uvod/prodejna-1280.jpg') type('image/jpeg'));
        transform-origin: 9% 49%; /* dveře ve čtvercovém výřezu pro mobil */
    }
    main .home-hero h1 { font-size: 1.9rem; }
    main [class^="home-"] h2, main [class*=" home-"] h2 { font-size: 1.5rem; }
    main .home-pillars h2 { font-size: 1.15rem; }
    main .home-pillars, .home-steps ol { grid-template-columns: 1fr; gap: 1.8em; }
    .home-cards { grid-template-columns: 1fr; }
    .home-numbers { grid-template-columns: repeat(2, 1fr); }
}