/* ==========================================================================
   CUSTOM STYLES – Glasdekor (Shoptet 768015, šablona Samba)
   Verze: 6.0
   Autor: Jakub (refactor + oprava buttonů, responzivity, pozicování)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --banner-bg:       rgba(10, 58, 48, 0.55);
  --banner-bg-solid: rgba(10, 58, 48, 0.90);
  --banner-border:   rgba(200, 183, 159, 0.40);
  --banner-radius:   12px;
  --btn-bg:          #c8a36a;
  --btn-hover:       #ad8550;
  --btn-radius:      7px;
  --text-light:      #ffffff;
  --text-muted:      rgba(255, 255, 255, 0.92);
  --shadow:          0 4px 20px rgba(0, 0, 0, 0.18);
}


/* ==========================================================================
   2. HLAVIČKA – kompaktnější
   ========================================================================== */
.container.navigation-wrapper.header-top-wrapper {
  padding-top:    6px !important;
  padding-bottom: 6px !important;
  min-height:     0 !important;
}
.header-top-wrapper h1,
.header-top-wrapper .site-name {
  margin: 0 !important;
}


/* ==========================================================================
   3. SDÍLENÝ GLASSMORPHISM SKIN
   (carousel, next-to-carousel, middle, footer bannery)
   ========================================================================== */

/* ── Wrapper ── */
.next-to-carousel-banners .banner-wrapper,
.middle-banners .banner-wrapper,
.footer-banners .banner-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

.next-to-carousel-banners .banner-wrapper > a,
.middle-banners .banner-wrapper > a,
.footer-banners .banner-wrapper > a {
  display:  block !important;
  position: relative !important;
}

/* ── Glass box – společné vlastnosti ── */
.carousel .extended-banner-texts,
.next-to-carousel-banners .extended-banner-texts,
.middle-banners .extended-banner-texts,
.footer-banners .extended-banner-texts {
  background:              var(--banner-bg) !important;
  border:                  1.5px solid var(--banner-border) !important;
  border-radius:           var(--banner-radius) !important;
  box-shadow:              var(--shadow) !important;
  backdrop-filter:         blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-sizing:              border-box !important;
}

/* ── Nadpis ── */
.carousel .extended-banner-texts .extended-banner-title,
.next-to-carousel-banners .extended-banner-texts .extended-banner-title,
.middle-banners .extended-banner-texts .extended-banner-title,
.footer-banners .extended-banner-texts .extended-banner-title {
  display:     block !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color:       var(--text-light) !important;
}

/* ── Popis ── */
.carousel .extended-banner-texts .extended-banner-text,
.next-to-carousel-banners .extended-banner-texts .extended-banner-text,
.middle-banners .extended-banner-texts .extended-banner-text,
.footer-banners .extended-banner-texts .extended-banner-text {
  display: block !important;
  color:   var(--text-muted) !important;
}

/* ── Tlačítko – společné ── */
.carousel .extended-banner-texts .extended-banner-link,
.next-to-carousel-banners .extended-banner-texts .extended-banner-link,
.middle-banners .extended-banner-texts .extended-banner-link,
.footer-banners .extended-banner-texts .extended-banner-link {
  display:       block !important;
  background:    var(--btn-bg) !important;
  border-color:  var(--btn-bg) !important;
  color:         var(--text-light) !important;
  border-radius: var(--btn-radius) !important;
  font-weight:   600 !important;
  text-align:    center !important;
  cursor:        pointer !important;
  transition:    background 0.18s ease !important;
}

/* ── Tlačítko – hover (sdílený) ── */
.carousel .extended-banner-texts .extended-banner-link:hover,
.next-to-carousel-banners .banner-wrapper > a:hover .extended-banner-link,
.middle-banners .banner-wrapper > a:hover .extended-banner-link,
.footer-banners .banner-wrapper > a:hover .extended-banner-link {
  background:   var(--btn-hover) !important;
  border-color: var(--btn-hover) !important;
}


/* ==========================================================================
   4. HERO CAROUSEL – pouze layout (skin řeší sekce 3)
   ========================================================================== */
/* Layout přebírá šablona – bez overridů */


/* ==========================================================================
   5. TOP BANNERY (next-to-carousel) – specifické styly
   ========================================================================== */
.next-to-carousel-banners .extended-banner-texts {
  position:  absolute !important;
  left:      6% !important;
  top:       50% !important;
  transform: translateY(-50%) !important;
  z-index:   10 !important;
  width:     clamp(200px, 72%, 360px) !important;
  padding:   18px 28px 16px !important;
  text-align: left !important;
}

.next-to-carousel-banners .extended-banner-texts .extended-banner-title {
  font-size: clamp(14px, 1.4vw, 18px) !important;
  margin:    0 0 5px !important;
}

.next-to-carousel-banners .extended-banner-texts .extended-banner-text {
  font-size:   12px !important;
  line-height: 1.4 !important;
  margin:      0 0 12px !important;
}

.next-to-carousel-banners .extended-banner-texts .extended-banner-link {
  padding:   8px 18px !important;
  font-size: 12px !important;
}


/* ==========================================================================
   6. MIDDLE BANNERY – specifické styly
   ========================================================================== */
.middle-banners .banner-wrapper img {
  display:         block !important;
  width:           100% !important;
  max-height:      520px !important;
  object-fit:      cover !important;
  object-position: center center !important;
}

.middle-banners .extended-banner-texts {
  position:  absolute !important;
  left:      6% !important;
  top:       50% !important;
  transform: translateY(-50%) !important;
  z-index:   10 !important;
  width:     clamp(240px, 32%, 420px) !important;
  padding:   18px 28px 16px !important;
}

.middle-banners .extended-banner-texts .extended-banner-title {
  font-size: clamp(18px, 2vw, 26px) !important;
  margin:    0 0 10px !important;
}

.middle-banners .extended-banner-texts .extended-banner-text {
  font-size:   13px !important;
  line-height: 1.55 !important;
  margin:      0 0 18px !important;
}

.middle-banners .extended-banner-texts .extended-banner-link {
  padding:   12px 24px !important;
  font-size: 13px !important;
}


/* ==========================================================================
   7. FOOTER BANNERY – specifické styly
   ========================================================================== */
.footer-banners .banner-wrapper img {
  display:    block !important;
  width:      100% !important;
  object-fit: cover !important;
}

.footer-banners .extended-banner-texts {
  position:   absolute !important;
  left:       50% !important;
  top:        50% !important;
  transform:  translate(-50%, -50%) !important;
  z-index:    10 !important;
  width:      clamp(240px, 42%, 480px) !important;
  padding:    24px 28px 20px !important;
  text-align: center !important;
}

.footer-banners .extended-banner-texts .extended-banner-title {
  font-size: clamp(18px, 2vw, 26px) !important;
  margin:    0 0 10px !important;
}

.footer-banners .extended-banner-texts .extended-banner-text {
  font-size:   14px !important;
  line-height: 1.5 !important;
  margin:      0 0 16px !important;
}

.footer-banners .extended-banner-texts .extended-banner-link {
  padding:   12px 26px !important;
  font-size: 14px !important;
}


/* ==========================================================================
   8. SEKCE HODNOCENÍ – vlastní pozadí
   ========================================================================== */
.container-full-width.homepage-latest-contribution {
  background-image:    url("https://768015.myshoptet.com/user/documents/upload/N%C3%A1vrh%20bez%20n%C3%A1zvu%20%288%29.png") !important;
  background-size:     cover !important;
  background-position: center !important;
  background-repeat:   no-repeat !important;
  padding:             60px 0 !important;
}


/* ==========================================================================
   9. RESPONZIVITA
   ========================================================================== */

@media (min-width: 1200px) {
  .carousel .extended-banner-texts {
    min-height: 40% !important;
  }
  .carousel .extended-banner-texts .extended-banner-title {
    font-size: 38px !important;
  }
}

@media (min-width: 992px) {
  .carousel .extended-banner-texts {
    bottom:    unset !important;
    top:       50% !important;
    transform: translateY(-50%) !important;
  }
}

/* ── Tablet portrait ≤ 1024px ── */
@media (max-width: 1024px) {
  .next-to-carousel-banners .extended-banner-texts {
    padding: 14px 16px 12px !important;
  }
}

/* ── Mobil ≤ 768px ── */
@media (max-width: 768px) {

  /* Flex column – obrázek nad textem (všechny bannery včetně carousel) */
  .carousel .banner-wrapper > a,
  .next-to-carousel-banners .banner-wrapper > a,
  .middle-banners .banner-wrapper > a,
  .footer-banners .banner-wrapper > a {
    display:        flex !important;
    flex-direction: column !important;
  }

  /* Společný reset pozicování + solid pozadí pro všechny bannery */
  .carousel .extended-banner-texts,
  .next-to-carousel-banners .extended-banner-texts,
  .middle-banners .extended-banner-texts,
  .footer-banners .extended-banner-texts {
    position:                static !important;
    left:                    auto !important;
    top:                     auto !important;
    transform:               none !important;
    width:                   100% !important;
    margin:                  0 !important;
    border-radius:           0 !important;
    background:              var(--banner-bg-solid) !important;
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
    padding:                 16px 20px 14px !important;
    box-shadow:              none !important;
    border:                  none !important;
    border-top:              2px solid var(--btn-bg) !important;
    text-align:              left !important;
  }

  .container-full-width.homepage-latest-contribution {
    padding: 36px 0 !important;
  }
}

/* ── Malý mobil ≤ 480px ── */
@media (max-width: 480px) {

  .next-to-carousel-banners .extended-banner-texts .extended-banner-link,
  .middle-banners .extended-banner-texts .extended-banner-link,
  .footer-banners .extended-banner-texts .extended-banner-link,
  .carousel .extended-banner-texts .extended-banner-link {
    padding:   10px 18px !important;
    font-size: 13px !important;
  }

  .container.navigation-wrapper.header-top-wrapper {
    padding-top:    3px !important;
    padding-bottom: 3px !important;
  }
}