/* =========================================================================
   GALA DŘEVO – rozložení úvodních bannerů
   Vlož do: Vzhled a obsah → Editor vzhledu → Vlastní CSS
   (nebo do HTML kódu v hlavičce obalené do <style> ... </style>)

   Vyžaduje doprovodný JS, který přesune první 2 bannery do pravého sloupce.

   DESKTOP  slider 2/3 vlevo + 2 malé bannery 1/3 vpravo, přes celou šířku okna;
            ostatní bannery pod tím po 3 v containeru
   MOBIL    slider přes celou šířku na doraz k okrajům, pod ním bannery pod sebou
   ========================================================================= */

/* -------------------------------------------------------------------------
   DESKTOP / TABLET (od 992 px)
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {

  /* blok se sliderem přes celou šířku okna */
  .before-carousel .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
  }

  /* --- řádek: slider vlevo + 2 malé bannery vpravo --- */
  /* aspect-ratio drží výšku řádku bez JS. 3.74 je kompromis mezi poměrem
     slideru (1920x600 = 3.2:1) a dvou bannerů nad sebou (750x380 = 1.97:1) –
     výšky se jinak nepotkají a něco by se muselo oříznout naplno.
     Menší číslo = vyšší řádek (slider se ořízne víc, bannery míň). */
  .banners-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin: 0 !important;
    aspect-ratio: 3.74;
  }

  .banners-row > .col-sm-8 {
    flex: 0 0 calc(66.6667% - 10px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    float: none !important;
  }

  .banners-row > .col-sm-4 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* slider vyplní výšku řádku */
  .banners-row #carousel {
    height: 100% !important;
    border-radius: 20px;
    overflow: hidden;
  }
  .banners-row .carousel-inner {
    height: 100% !important;
    min-height: 0 !important;
  }
  .banners-row .carousel-inner > .item {
    height: 100% !important;
  }
  .banners-row .carousel-inner > .item > a {
    display: block !important;
    height: 100% !important;
    position: relative !important;
  }
  .banners-row .carousel-inner img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .banners-row .carousel-control {
    width: 70px !important;
  }

  /* dva malé bannery vpravo – každý přesně půlka výšky řádku */
  .banners-row > .col-sm-4 > .banner-wrapper {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .banners-row > .col-sm-4 > .banner-wrapper > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    border-radius: 20px;
    overflow: hidden;
  }
  .banners-row > .col-sm-4 > .banner-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* --- bannery pod sliderem: po 3 na řádek, zarovnané s obsahem stránky --- */
  .next-to-carousel-banners {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
  }
  .next-to-carousel-banners > .banner-wrapper {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    padding: 10px !important;
  }
  .next-to-carousel-banners > .banner-wrapper > a {
    display: block !important;
    width: 100% !important;
  }
  .next-to-carousel-banners > .banner-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* -------------------------------------------------------------------------
   MOBIL (do 991 px)
   slider na doraz k okrajům bez zaoblení, pod ním bannery pod sebou
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {

  .banners-row {
    display: block !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }
  .banners-row > .col-sm-8,
  .banners-row > .col-sm-4 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
  }

  /* slider přes celou šířku, bez odsazení a bez zaoblení */
  .before-carousel .container,
  .banners-row > .col-sm-8 {
    padding: 0 !important;
  }
  .banners-row #carousel,
  .banners-row .carousel-inner,
  .banners-row .carousel-inner > .item,
  .banners-row .carousel-inner > .item > a {
    height: auto !important;
    border-radius: 0 !important;
  }
  .banners-row .carousel-inner img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* puntíky slideru pod obrázkem, ne přes něj */
  .banners-row #carousel {
    padding-bottom: 42px !important;
  }
  .banners-row .carousel-indicators {
    bottom: 10px !important;
  }

  /* dva bannery pod sliderem – plná šířka s postranními okraji, zaoblené */
  .banners-row > .col-sm-4 {
    padding: 20px 15px 0 !important;
  }
  .banners-row > .col-sm-4 > .banner-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 15px !important;
  }
  .banners-row > .col-sm-4 > .banner-wrapper > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 20px;
    overflow: hidden;
  }
  .banners-row > .col-sm-4 > .banner-wrapper img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}