/* NOVÝ CSS PRO SEKCI PRODEJEN */
/* Tento CSS využívá stávající fonty a barvy z webu */
/* Font: Nunito (již používaný na webu) */
/* Barva nadpisů: #84482c (již používaná) */

/* Wrapper pro všechny prodejny */
.prodejny-novy-wrapper {
    margin: 2rem 0;
}

/* Hlavní box prodejny */
.prodejna-box {
    background: #d0dfe9;
    border-radius: 30px;
    padding: 25px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 23px;
}

/* Nadpis prodejny */
.prodejna-nadpis {
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    font-size: 27px;
    color: #84482c;
    text-transform: uppercase;
    letter-spacing: 0.32px;
    margin: 0;
    line-height: 1.2;
}

/* Obsah prodejny - grid: obrázek vlevo nahoře, kontakty vpravo nahoře, dolní řada s obrázky */
.prodejna-obsah {
    display: grid;
    grid-template-columns: 387px 1fr;
    grid-template-rows: 223px auto;
    gap: 25px;
    width: 100%;
    max-width: 100%;
}

/* Dolní řada s obrázky - flex layout, spanuje přes oba sloupce */
.prodejna-dolni-rada {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    gap: 17px;
    width: 100%;
    align-items: flex-start;
}

/* Obrázek prodejny - levý horní - 387px × 223px (podle Figmy) */
.prodejna-obrazek {
    grid-column: 1;
    grid-row: 1;
    width: 387px;
    height: 223px;
    border: 1px solid #b8c8d3;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.prodejna-obrazek a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.prodejna-obrazek a:hover {
    opacity: 0.9;
}

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

/* Kontaktní informace - pravý horní - šířka se přizpůsobí */
.prodejna-kontakty {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Mezera mezi kontakty */
    justify-content: center; /* Zarovnání na střed vertikálně */
    align-items: center; /* Zarovnání na střed horizontálně */
    width: 100%;
    max-width: 380px;
}

.kontakt-rada {
    display: flex;
    align-items: center; /* Zarovnání ikony a textu na střed vertikálně */
    gap: 12px;
    margin-bottom: 0;
    margin-top: 0;
    width: 100%; /* Aby se kontakty rozprostřely na celou šířku */
    justify-content: flex-start; /* Ikony a texty začínají vlevo */
}

.kontakt-rada:first-child {
    gap: 12px;
    margin-bottom: 0;
}

.kontakt-rada:nth-child(2) {
    margin-top: 0; /* Odstraněno velké odsazení */
    margin-bottom: 0;
}

.kontakt-rada:nth-child(3) {
    margin-top: 0; /* Odstraněno velké odsazení */
    margin-bottom: 0;
}

.kontakt-rada:nth-child(4) {
    margin-top: 0; /* Odstraněno velké odsazení */
    margin-bottom: 0;
}

/* SVG ikony kontaktů - všechny mají stejnou velikost 30px × 30px */
.kontakt-ikona-svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: block;
}

/* Text kontaktů */
.kontakt-text {
    font-family: "Nunito", sans-serif;
    font-size: 14.7px;
    line-height: 18.33px;
    color: #84482c;
    flex: 1;
}

.kontakt-text strong {
    font-weight: 700;
    color: #84482c;
}

.kontakt-text a {
    font-family: "Nunito", sans-serif;
    font-weight: 300;
    color: #2d4b62;
    text-decoration: underline;
}

.kontakt-text a:hover {
    color: #1a2d3d;
}

/* Dolní řada s obrázky - flex layout */
.prodejna-dolni-rada {
    display: flex;
    gap: 17px;
    width: 100%;
}

/* Druhý obrázek - levý dolní - flex-1, výška 216px (podle Figmy) */
.prodejna-obrazek-druhy {
    flex: 1 0 0;
    height: 216px;
    min-width: 0;
    border: 1px solid #b8c8d3;
    border-radius: 20px;
    overflow: hidden;
}

.prodejna-obrazek-druhy a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.prodejna-obrazek-druhy a:hover {
    opacity: 0.9;
}

.prodejna-obrazek-druhy img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mapa - pravý dolní - flex-1, aspect ratio 324.62/181 (podle Figmy) */
.prodejna-mapa {
    flex: 1 0 0;
    min-width: 0;
    aspect-ratio: 324.62 / 181;
    border: 1px solid #b8c8d3;
    border-radius: 20px;
    overflow: hidden;
}

.prodejna-mapa a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.prodejna-mapa a:hover {
    opacity: 0.9;
}

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

/* Další obrázky pod hlavním obsahem */
.prodejna-dalsi-obrazky {
    display: flex;
    gap: 25px;
    justify-content: space-between;
    margin-top: 0;
}

.prodejna-dalsi-obrazek {
    flex: 1;
    height: 223px;
    border: 1px solid #b8c8d3;
    border-radius: 20px;
    overflow: hidden;
}

.prodejna-dalsi-obrazek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responzivní design - Tablet */
@media screen and (max-width: 991px) {
    .prodejna-obsah {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    
    .prodejna-obrazek {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 250px;
    }
    
    .prodejna-kontakty {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
    }
    
    .prodejna-dolni-rada {
        grid-column: 1;
        grid-row: 3;
        flex-direction: column;
        gap: 25px;
    }
    
    .prodejna-obrazek-druhy {
        width: 100%;
        height: auto;
        min-height: 250px;
    }
    
    .prodejna-mapa {
        width: 100%;
        height: auto;
        min-height: 250px;
        aspect-ratio: auto;
    }
    
    .prodejna-dalsi-obrazky {
        flex-wrap: wrap;
    }
    
    .prodejna-dalsi-obrazek {
        flex: 1 1 calc(50% - 12.5px);
        min-width: 200px;
    }
}

/* Responzivní design - Mobilní verze */
@media screen and (max-width: 640px) {
    .prodejna-box {
        padding: 20px;
        border-radius: 20px;
    }
    
    .prodejna-nadpis {
        font-size: 20.571px;
        letter-spacing: 0.3657px;
    }
    
    .prodejna-obsah {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 25px;
    }
    
    .prodejna-obrazek {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 185px;
    }
    
    .prodejna-kontakty {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
    }
    
    .kontakt-rada {
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .kontakt-rada:first-child {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .kontakt-rada:nth-child(2) {
        margin-top: 0; /* Odstraněno velké odsazení */
        margin-bottom: 0;
    }
    
    .kontakt-rada:nth-child(3) {
        margin-top: 0; /* Odstraněno velké odsazení */
        margin-bottom: 0;
    }
    
    .kontakt-rada:nth-child(4) {
        margin-top: 0; /* Odstraněno velké odsazení */
        margin-bottom: 0;
    }
    
    .kontakt-text {
        font-size: 14.7px;
    }
    
    .prodejna-dolni-rada {
        grid-column: 1;
        grid-row: 3;
        flex-direction: column;
        gap: 25px;
    }
    
    .prodejna-obrazek-druhy {
        width: 100%;
        height: auto;
        min-height: 185px;
    }
    
    .prodejna-mapa {
        width: 100%;
        height: auto;
        min-height: 185px;
        aspect-ratio: auto;
    }
    
    .prodejna-dalsi-obrazky {
        flex-direction: row;
        gap: 15px;
    }
    
    .prodejna-dalsi-obrazek {
        flex: 1;
        height: 85px;
        min-width: 0;
    }
    
    .prodejna-dalsi-obrazek:last-child {
        height: 84px;
    }
}

/* SVG ikony jsou nyní použity místo Font Awesome - všechny mají stejnou velikost 30px × 30px */

/* Lightbox galerie - styly pro klikatelné obrázky */
.prodejna-lightbox-link {
    text-decoration: none;
}

.prodejna-lightbox-link:focus {
    outline: 2px solid #84482c;
    outline-offset: 2px;
}