/* SKUPINA WIDGETu PRO ZOBRAZENí SKLADU */
/* Kontejner widgetu: Použijeme Flexbox pro rozdělení 50/50 nebo 40/60 */
.machine-widget {
    display: flex;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 8px;
}

/* 1. Levá strana - Galerie */
.image-gallery {
    flex: 1; /* Zabere polovinu prostoru */
    padding-right: 20px;
}

.main-image-container img {
    width: 100%;
    height: auto;
    max-height: 400px; /* Omezte výšku pro hezký vzhled */
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
}

.thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

.thumbnails img {
    width: 80px; /* Velikost náhledu */
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    opacity: 0.7;
}

.thumbnails img:hover,
.thumbnails img.active {
    border-color: #007bff; /* Modrý rámeček pro aktivní/hover obrázek */
    opacity: 1;
}

/* 2. Pravá strana - Obsah */
.text-content {
    flex: 1; /* Zabere druhou polovinu prostoru */
    padding-left: 20px;
}

#machine-name {
    color: #333;
    border-bottom: 2px solid #0a192f;
    padding-bottom: 10px;
    margin-top: 0;
}
.spacer-v {
    height: 20px; /* Nastavte si libovolnou výšku mezery */
}


/* SOUBOR: style/machines_style.css */

/* --- MOBILNÍ ZOBRAZENÍ (max-width: 800px) --- */
/* --- NASTAVENÍ PRO MOBIL (do 850px) --- */
@media (max-width: 850px) {
    
    .machine-widget {
        flex-direction: column; /* Důležité: Přepne řazení POD SEBE */
        gap: 20px;
    }

    /* TEXT - Chceme ho na 100% a NAHOŘE */
    .machine-widget .text-content {
        width: 100%;   /* Roztáhne se na celou šířku mobilu */
        flex: auto;    /* Zrušíme poměry z PC */
        order: -1;     /* Posune text úplně nahoru (před obrázek) */
    }

    /* OBRÁZEK - Chceme ho na 100% a DOLE */
    .machine-widget .image-gallery {
        width: 100%;   /* Roztáhne se na celou šířku mobilu */
        flex: auto;    /* Zrušíme poměry z PC */
        order: 0;      /* Zůstane dole */
    }

    /* Pojistka pro samotný obrázek uvnitř */
    .machine-widget img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* --- STYLY PRO VLASTNOSTI STROJE (GRID) --- */

.vlastnosti-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Rozdělí na dva sloupce 50:50 */
    gap: 10px 20px;                 /* Mezery mezi řádky a sloupci */
    margin-bottom: 25px;            /* Odstup dolů */
    width: 100%;
}

.vlastnost-polozka {
    display: flex;
    align-items: center;            /* Zarovná fajfku a text na střed řádku */
    font-size: 1rem;
    color: #333;
}

.modra-fajfka {
    color: #003366;                 /* Tmavě modrá */
    font-weight: bold;
    font-size: 1.2rem;
    margin-right: 10px;             /* Mezera mezi fajfkou a textem */
    flex-shrink: 0;                 /* Aby se fajfka nezmenšila, když je text dlouhý */
}

/* RESPONZIVITA: Na mobilu (pod 600px) dáme vše pod sebe */
@media (max-width: 600px) {
    .vlastnosti-grid {
        grid-template-columns: 1fr; /* Pouze jeden sloupec */
    }
}

#detail-sekce h3 {
    color: #0056b3;
    margin-top: 0;
}