/* =============================================================
   MIDDLE BANNER – Shoptet layout
   Soubor: middle-banner.css
   Vložení: <link rel="stylesheet" href="middle-banner.css">
   ============================================================= */

/* ===== DESKTOP – layout banneru ===== */
.type-index .middle-banners-wrapper .container {
  max-width: 1600px !important;
  width: 95% !important;
}

.type-index .middle-banners-wrapper .banner-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 80px !important;
}

.type-index .middle-banners-wrapper .extended-banner-texts {
  width: 40% !important;
}

.type-index .middle-banners-wrapper .banner-wrapper img {
  width: 60% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ===== DESKTOP – pořadí elementů v textech ===== */
.type-index .middle-banners-wrapper .extended-banner-texts {
  display: flex !important;
  flex-direction: column !important;
}

.type-index .middle-banners-wrapper .extended-banner-texts h2,
.type-index .middle-banners-wrapper .extended-banner-texts h3,
.type-index .middle-banners-wrapper .extended-banner-texts .h2,
.type-index .middle-banners-wrapper .extended-banner-texts .h3 {
  order: 1 !important;
}

.type-index .middle-banners-wrapper .extended-banner-texts .btn,
.type-index .middle-banners-wrapper .extended-banner-texts .button,
.type-index .middle-banners-wrapper .extended-banner-texts a[class*="btn"] {
  order: 2 !important;
  margin-top: 20px !important;
  margin-bottom: 25px !important;
}

.type-index .middle-banners-wrapper .extended-banner-texts p {
  order: 3 !important;
}

/* ===== MOBIL ===== */
@media (max-width: 767px) {
  .type-index .row.banners-content.body-banners .banner-wrapper {
    display: block !important;
  }

  .type-index .row.banners-content.body-banners .banner-wrapper > a {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    pointer-events: none !important;
  }

  .type-index .row.banners-content.body-banners .extended-banner-texts {
    display: contents !important;
  }

  .type-index .row.banners-content.body-banners .extended-banner-title {
    order: 1 !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .type-index .row.banners-content.body-banners .banner-wrapper > a > img {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .type-index .row.banners-content.body-banners .extended-banner-text {
    order: 3 !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  .type-index .row.banners-content.body-banners .extended-banner-link {
    order: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 16px auto 8px auto !important;
    padding: 12px 27px !important;
    min-height: 41px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
  }
}