/* ============================================================================
   rozcestnik.css — dlaždicový rozcestník na homepage shop.woodparket.cz
   ---------------------------------------------------------------------------
   Přestaví Shoptet karusel z „slidy se střídají přes sebe" na „dlaždice stojí
   vedle sebe a posouvají se do strany". Patří k němu rozcestnik.js.
   Bannery: formát 4:5 (1080 × 1350 px).
   Vytvořeno 2. 9. 2026.
   ========================================================================= */

/* --- co se dá měnit ------------------------------------------------------ */
:root{
  --dlazdic: 3;      /* kolik dlaždic je vidět vedle sebe — 3, aby byly texty
                        čitelné i pro staršího člověka (Pavel 2. 9. 2026);
                        při 4 vycházel nadpis pod 20 px a bylo to moc malé */
  --mezera: 12px;    /* mezera mezi dlaždicemi */
  --vykuk: 80px;     /* kolik px z další dlaždice vykukuje zprava, aby bylo
                        poznat, že se dá posouvat */
}
@media (max-width:1100px){ :root{ --dlazdic:2; } }
@media (max-width:650px) { :root{ --dlazdic:1; --vykuk:70px; } }

/* --- pás dlaždic --------------------------------------------------------- */

/* karusel nesmí ořezávat obsah, jinak nejsou vidět šipky po stranách */
.wide-carousel{ overflow:visible; }
#carousel{ position:relative; }

/* z bootstrapového karuselu uděláme vodorovný posuvník bez viditelné lišty */
#carousel .carousel-inner{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:var(--mezera);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;   /* dlaždice zapadnou na místo */
  scroll-behavior:smooth;
  width:100%;
  min-height:auto !important;
  scrollbar-width:none;           /* Firefox */
  -ms-overflow-style:none;
}
#carousel .carousel-inner::-webkit-scrollbar{ display:none; }  /* Chrome, Safari */

/* kdo má v systému vypnuté animace, dostane posun skokem místo plynulého */
@media (prefers-reduced-motion:reduce){
  #carousel .carousel-inner{ scroll-behavior:auto; }
}

/* jedna dlaždice — Shoptet je normálně schovává (display:none), tady je
   zviditelníme a spočítáme šířku tak, aby jich do řádku padl zadaný počet */
#carousel .carousel-inner > .item{
  display:block !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  transition:none !important;
  flex:0 0 auto;
  scroll-snap-align:start;
  /* max() = pojistka, aby šířka nikdy nevyšla záporná na velmi úzkém displeji */
  width:max(140px, calc((100% - var(--mezera) * (var(--dlazdic) - 1) - var(--vykuk)) / var(--dlazdic)));
}

/* obrázek v dlaždici — pevný poměr 4:5, ať se layout nerozjede ani tehdy,
   když někdo nahraje banner v jiném rozměru */
#carousel .carousel-inner > .item > a{
  display:block;
  overflow:hidden;
  border-radius:6px;
  background:#323C48;
  aspect-ratio:4/5;
}
#carousel .carousel-inner > .item > a > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
#carousel .carousel-inner > .item > a:hover > img{ transform:scale(1.03); }

/* --- šipky --------------------------------------------------------------- */

/* místo šedých poloprůhledných pruhů zelená kolečka po stranách */
#carousel .carousel-control{
  width:46px;
  height:46px;
  top:50%;
  bottom:auto;
  margin-top:-23px;
  opacity:1 !important;
  background:none;
  text-shadow:none;
}
#carousel .carousel-control.left{ left:-16px; right:auto; }
#carousel .carousel-control.right{ right:-16px; left:auto; }
#carousel .carousel-control:before{
  position:static !important;
  display:block;
  width:46px;
  height:46px;
  line-height:46px;
  margin:0 !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  background:#73AA44;          /* zelená z tlačítek na webu */
  color:#fff;
  font-size:17px;
  border-radius:50%;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}
#carousel .carousel-control:hover:before{ background:#5F9236; }

/* šipka zmizí, když už se tím směrem není kam posunout (třídu dává rozcestnik.js) */
#carousel .carousel-control.je-na-kraji{ display:none; }

/* na mobilu šipky pryč — posouvá se prstem a přes jednu dlaždici by překážely */
@media (max-width:650px){
  #carousel .carousel-control{ display:none; }
}