/*.foto{
  height: auto;
  overflow: hidden;
  width: 252px;
  height: 242px;
  position: relative;
  float: left;
  padding: 12px;
  padding-left: 0;
  padding-right: 24px;
}*/
.foto {
    height: auto;
    overflow: hidden;
    width: 248px;
    /* width: 20%;height: 242px; */
    position: relative;
    float: left;
    padding: 12px;
    padding-left: 0;
    padding-right: 24px;
    padding-top: 0;
    margin-top: -10px;
    padding-bottom: 42px;
}
.foto a.fototh{
  display: block;
  height: 170px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
}
.foto a.fototh img{
   margin-top: 5px;
   border: none;
   padding: 0px;
   filter:alpha(opacity=95);
   opacity:.95;   
}
.foto a.fototh:hover img{
   filter:alpha(opacity=100);
   opacity:1;
}
.foto a.fototh img.s
{   
   /*width:100%;*/
   width:228px;
}
/*@media (max-width:850px) { .foto { width: 252px;} .foto a.fototh img.s{width:228px; }}*/
.foto a.fototh img.v
{   
   height:170px;
}

.foto h3{
  margin: 0px;
  padding: 5px;
  line-height: 20px;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: normal;
  text-align: center;
  background-color: #474747;
  color: #eee;  
}
.foto h3 a
{   
   width:100%; 
   height:45px;
   text-decoration: none;
   color:#eee;
   display: block;
}
.foto h3 a:hover
{   
   color:#eee;
}
 .fotogalerie{
  height: auto;
  overflow: hidden;
}
 .fotogalerie h2{
  margin-top: 25px;
  margin-bottom: 0px;
  clear: both;
  font-size: 12pt;
  font-weight: bold;
}
 .fotogalerie h3, .fotogalerie p{
   margin-top: 0px;
  font-size: 11pt;
}

/*
galerie Hospitalizační boxy
*/
/*.gallery {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    box-sizing: border-box; 
    }

.top-row {
    display: flex;
    width: 100%;
    height: 60%;  Výška pro horní řadu 
}

.left-column {
    display: flex;
    flex-direction: column;
    width: 45%;  Levá část (2 obrázky) 
}

.right-column {
    width: 55%;  Pravá část (1 obrázek) 
}

.image {
    background-color: #ccc; 
    background-size: cover;
    background-position: center;
}

#image1 {
    height: 50%;  První obrázek v levé části 
    background-image: url('https://www.pnplast.cz/fotky/galerie/detail-nerezovych-dvirek-a-kyslikoveho-boxu-m.jpg');
}

#image2 {
    height: 50%;  Druhý obrázek v levé části 
    background-image: url('https://www.pnplast.cz/fotky/galerie/hospitalizacni-box-s-vyklopnou-prepazkou-m.jpg');
}

#image3 {
    height: 100%;  Obrázek v pravé části 
    background-image: url('https://www.pnplast.cz/fotky/galerie/hospitalizacni-box-pro-veteriny-m.jpg');
}

.bottom-row {
    width: 100%;
    height: 40%;  Výška pro spodní obrázek 
}

#image4 {
    height: 100%;  Spodní obrázek 
    background-image: url('https://www.pnplast.cz/fotky/galerie/hospitalizacni-boxy-produkty-m.jpg');
}

 Responzivní styly 
@media (max-width: 600px) {
    .top-row {
        flex-direction: column;  Změna na sloupec 
        height: auto;  Výška se přizpůsobí obsahu 
    }

    .left-column, .right-column {
        width: 100%;  Celá šířka pro mobil 
    }

    .image {
        height: 300px;  Výška pro mobil 
    }

    #image1, #image2, #image3, #image4 {
        height: auto;  Výška se přizpůsobí obsahu 
    }
}*/

.hb-gallery * {
  box-sizing: border-box;
}

.hb-gallery img {
  width: 100%;
  height: auto;
  display: block;
  margin:0;
  background-color: #fff;
}
.hb-gallery {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    box-sizing: border-box; 
}
/* ===== TOP ===== */
.hb-gallery .top {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 12px;
}

.hb-gallery .top .big {
  height: 100%;
}

.hb-gallery .left {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 12px;
}

.hb-gallery .middle {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 12px;
}
.hb-gallery .middle img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.hb-gallery .middle .innerright, .hb-gallery .bottom .innerright {
  padding-right:12px;
}

/* ===== BOTTOM ===== */
.hb-gallery .bottom {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 12px;
  padding-top: 12px;
}

.hb-gallery .right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.hb-gallery .top2 {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 12px;
}

.hb-gallery .top,
.hb-gallery .bottom,
.hb-gallery .middle,
.hb-gallery .top2 
{
  min-width: 0;
}
.hb-gallery .middle a
{
  min-width: 0;
}

/* ===== IMG ===== */
.hb-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Foto1 bez ořezu */
.hb-gallery .top .big img {
  object-fit: contain;
}

.hb-gallery .bottom img {
  object-fit: cover;
}

@media (max-width: 900px) {
  .hb-gallery .top,
  .hb-gallery .bottom {
    grid-template-columns: 1fr;
  }

  .hb-gallery .middle,
  .hb-gallery .top2 {
    grid-template-columns: 1fr 1fr;
  }
  
  .hb-gallery .middle .innerright, .hb-gallery .bottom .innerright {
  padding-right:0px;
}
  
}

@media (max-width: 600px) {
  .hb-gallery .middle,
  .hb-gallery .top2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {

  /* Všechno stacknout */
  .hb-gallery .top,
  .hb-gallery .bottom,
  .hb-gallery .left,
  .hb-gallery .right {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Jen middle nech jako grid */
  .hb-gallery .middle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .hb-gallery .middle a {
    overflow: hidden;
  }

  .hb-gallery .middle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* top2 úplně rozbít (kvůli Foto7) */
  .hb-gallery .top2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* obrázky přirozeně */
  .hb-gallery img {
    width: 100%;
    height: auto;
    object-fit: contain; /* 🔥 důležité */
  }

    /* pravý blok upravíme na 2 sloupce */
  .hb-gallery .right {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 12px;
    align-items: start;
  }

  /* Foto7 vlevo */
  .hb-gallery .top2 a:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* pravý sloupec = flexibilní výška */
  .hb-gallery .top2,
  .hb-gallery .bottom-img {
    height: auto;
  }

  /* wrapper top2 zrušíme */
  .hb-gallery .top2 {
    display: contents;
  }

  /* Foto8 a Foto9 doprava */
  .hb-gallery .top2 a:last-child {
    grid-column: 2;
    grid-row: 1;
  }
  
  /* Foto8 */
  .hb-gallery .top2 a:nth-child(2) img {
    height:310px;
    object-position: bottom; 
  }
  /* Foto9 */
  .hb-gallery .bottom-img img {
    height: 254px;
    object-fit: cover;
    object-position: bottom;
    overflow: hidden;
  }

  .hb-gallery .bottom-img {
    grid-column: 2;
    grid-row: 2;
  }
}