/* ============================================================
   BASTLIK.CZ — Redesign bannerů na HOMEPAGE (v15)
   Záhlaví (<style>). K tomu JS bastlik-hp-banners-6.js do Zápatí.

   Přepínač (desktop): pevné bílé pole (výška = carousel), uvnitř
   normálně velká tlačítka obtažená vnějším rámečkem, který se
   velikostí přizpůsobí počtu bannerů.
   Scope: .banners-row (jen homepage). Prefix --bstlbn-.
   ============================================================ */

.banners-row{
  --bstlbn-navy:#16233a;
  --bstlbn-blue:#007bff;
  --bstlbn-border:#e5e7eb;
  --bstlbn-bg-soft:#f9fafb;
  --bstlbn-radius:16px;
  --bstlbn-ratio:1.69;            /* velký banner cca 1100:650 */
  --bstlbn-bottom-ratio:2.7;      /* spodní bannery ve dvojici — úzké/na šířku */
  --bstlbn-solo-ratio:6.5;        /* spodní banner SÁM — nižší/na šířku (~40% výšky) */
  --bstlbn-bottom-nudge:16px;      /* posun spodních bannerů dolů (dorovnání mezery) */
  --bstlbn-nav-w:320px;           /* šířka přepínače vedle carouselu */
  --bstlbn-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--bstlbn-font);
  display:grid !important;
  grid-template-columns:1fr var(--bstlbn-nav-w);
  gap:20px !important;
  margin:0 0 32px 0 !important;
  align-items:start;
}

/* explicitní umístění (bulletproof pořadí) — DESKTOP */
.banners-row > .col-sm-8{
  grid-column:1; grid-row:1;
  width:auto !important; float:none !important; padding:0 !important; margin:0 !important;
}
.banners-row > .bstl-banner-nav{ grid-column:2; grid-row:1; }
.banners-row > .col-sm-4{
  grid-column:1 / -1; grid-row:2;
  width:auto !important; float:none !important; padding:0 !important;
  margin:var(--bstlbn-bottom-nudge) 0 0 0 !important;   /* posun dolů */
}

/* ROBUSTNĚ: umísti podle OBSAHU, ne podle Shoptet tříd.
   Drží i když Shoptet změní třídu sloupce (např. při 0 spodních
   bannerech se .col-sm-8 změní na .col-sm-12). */
.banners-row > #carousel,
.banners-row > :has(#carousel){
  grid-column:1 !important; grid-row:1 !important;
  width:auto !important; float:none !important; padding:0 !important; margin:0 !important;
}
.banners-row > .bstl-banner-nav{ grid-column:2 !important; grid-row:1 !important; }
.banners-row > :has(.next-to-carousel-banners){
  grid-column:1 / -1 !important; grid-row:2 !important;
  width:auto !important; float:none !important; padding:0 !important;
  margin:var(--bstlbn-bottom-nudge) 0 0 0 !important;
}

/* ---------- Velký banner (carousel) ---------- */
.banners-row #carousel{
  position:relative;
  border-radius:var(--bstlbn-radius);
  overflow:hidden;
  aspect-ratio:var(--bstlbn-ratio);
  height:auto !important;   /* přebij výšku, kterou vnucuje Shoptet (jinak ořez) */
  background:var(--bstlbn-bg-soft);
  padding:0 !important;     /* pryč se zbytkovým Shoptet paddingem (bílý proužek) */
}
/* inner/item roztáhnout na PLNOU šířku i výšku carouselu (žádný ořez zprava) */
.banners-row #carousel .carousel-inner,
.banners-row #carousel .item,
.banners-row #carousel .item > a{
  height:100% !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;   /* zabít Shoptet inline min-height:513px (roztahoval carousel) */
  margin:0 !important;
  padding:0 !important;
}
.banners-row #carousel .item > a{ display:block; }
.banners-row #carousel .item img{
  width:100% !important; height:100% !important;
  object-fit:cover; object-position:center; border-radius:0 !important;
}
.banners-row #carousel .carousel-control{ display:none !important; }
/* rychlé přepnutí slidu */
.banners-row #carousel .carousel-inner > .item{
  transition:transform .35s ease-in-out, left .35s ease-in-out, right .35s ease-in-out, opacity .35s ease-in-out !important;
}

/* ---------- Přepínač slidů — DESKTOP ---------- */
/* pevné bílé pole (výška = carousel) */
.bstl-banner-nav{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:#fff;
  border-radius:var(--bstlbn-radius);
  box-shadow:0 4px 20px rgba(22,34,56,.05);
  padding:12px;
}
/* vnitřní rámeček — obtahuje tlačítka, velikost dle počtu */
.bstl-banner-nav-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid var(--bstlbn-border);
  border-radius:14px;
  padding:8px;
}
/* tlačítka — normální velikost */
.bstl-banner-nav-item{
  text-align:left;
  padding:14px 18px;
  border:none;
  border-radius:10px;
  background:#fff;
  font-family:var(--bstlbn-font);
  font-size:15.5px;
  font-weight:600;
  color:var(--bstlbn-navy);
  cursor:pointer;
  line-height:1.3;
  transition:background .12s ease, color .12s ease;
}
.bstl-banner-nav-item:hover{ background:var(--bstlbn-bg-soft); color:var(--bstlbn-blue); }
.bstl-banner-nav-item.active{ background:var(--bstlbn-navy); color:#fff; }

/* ---------- Spodní bannery (0/1/2) — adaptivní ----------
   2 bannery = půl na půl, 1 banner = celá šířka,
   0 bannerů = kontejner se skryje (žádná mezera). */
.banners-row .next-to-carousel-banners{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  width:100%;
}
/* když nejsou žádné spodní bannery, nenechávej prázdné místo */
.banners-row > .col-sm-4:not(:has(.banner-wrapper)),
.banners-row .next-to-carousel-banners:empty{
  display:none !important;
  margin:0 !important;
}
.banners-row .banner-wrapper{
  margin:0 !important;
  border-radius:var(--bstlbn-radius);
  overflow:hidden;
  aspect-ratio:var(--bstlbn-bottom-ratio);
  transition:box-shadow .18s ease;
}
/* když je spodní banner SÁM (plná šířka), sniž jeho výšku (~40 %) */
.banners-row .next-to-carousel-banners .banner-wrapper:only-child{
  aspect-ratio:var(--bstlbn-solo-ratio);
}
.banners-row .banner-wrapper:hover{ box-shadow:0 10px 26px rgba(22,34,56,.10); }
.banners-row .banner-wrapper > a{ display:block; width:100%; height:100%; }
.banners-row .banner-wrapper img{
  width:100% !important; height:100% !important; display:block;
  object-fit:cover; object-position:center; border-radius:0 !important;
}

/* ============================================================
   TABLET + MOBIL — přepínač POD carousel
   Flex + order (spolehlivější než grid-row).
   Pořadí: 1) carousel  2) přepínač  3) spodní bannery
   ============================================================ */
@media (max-width:991px){
  .banners-row{ --bstlbn-solo-ratio:4.8; }   /* tablet: solo banner o něco vyšší */
  .banners-row{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    margin-left:0 !important;    /* vynulovat Bootstrap .row záporné okraje (ujíždění doleva) */
    margin-right:0 !important;
  }
  .banners-row > .col-sm-8{
    order:1 !important;
    width:auto !important; float:none !important; padding:0 !important; margin:0 !important;
  }
  .banners-row > .bstl-banner-nav{
    order:2 !important;
    width:100%;
  }
  .banners-row > .col-sm-4{
    order:3 !important;
    width:100% !important; max-width:100% !important;
    float:none !important; padding:0 !important;
    margin:16px auto 0 auto !important;   /* extra mezera nad + vycentrování */
    align-self:stretch;
  }
  /* spodní bannery napevno na plnou šířku a vycentrované */
  .banners-row .next-to-carousel-banners{
    width:100% !important;
    margin:0 auto !important;
    justify-items:stretch;
  }
  .banners-row .banner-wrapper{
    width:100% !important; max-width:100% !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  /* ROBUSTNĚ: order podle obsahu (nezávisle na Shoptet třídách) */
  .banners-row > #carousel,
  .banners-row > :has(#carousel){ order:1 !important; width:auto !important; }
  .banners-row > :has(.next-to-carousel-banners){
    order:3 !important;
    width:100% !important; max-width:100% !important;
    margin:16px auto 0 auto !important;   /* extra mezera nad + vycentrování */
  }

  .bstl-banner-nav{
    height:auto;
    background:transparent;
    box-shadow:none;
    padding:0;
  }
  .bstl-banner-nav-inner{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    border:none;
    padding:0;
    gap:8px;
  }
  .bstl-banner-nav-item{
    text-align:center;
    padding:10px 16px;
    font-size:14.5px;
    border:1px solid var(--bstlbn-border);
  }
  .bstl-banner-nav-item:hover{ border-color:var(--bstlbn-blue); }
  .bstl-banner-nav-item.active{ border-color:var(--bstlbn-navy); }
}

@media (max-width:600px){
  .banners-row{ --bstlbn-ratio:1.5; --bstlbn-bottom-ratio:2.4; --bstlbn-solo-ratio:2.6; gap:14px !important; }
  .banners-row .next-to-carousel-banners{ grid-template-columns:1fr !important; gap:14px; }
  .bstl-banner-nav-item{ flex:1 1 100%; font-size:14px; padding:11px 14px; }
}