/* ============================================================
   hp-main-carousel.css
   Tufty – HP hlavní carousel banner
   Scope: body.type-index / .type-index #carousel
   Mobile:  max-width 767px
   Desktop: min-width 768px
   ============================================================ */


/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 767px) {

  /* --- odstranění paddingu a marginu wrapperů --- */
  body.type-index.mobile .container,
  body.type-index.mobile #content-wrapper,
  body.type-index.mobile .content-wrapper,
  body.type-index.mobile .content-wrapper-in,
  body.type-index.mobile main#content,
  body.type-index.mobile .banners-row,
  body.type-index.mobile .banners-row .col-sm-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- mezera nad carousel --- */
  body.type-index.mobile .banners-row {
    margin-top: -21px !important;
  }

  /* --- carousel kontejner --- */
  body.type-index.mobile #carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --- obrázek --- */
  body.type-index.mobile #carousel img {
    width: 100% !important;
    display: block !important;
    position: relative !important;
    z-index: 0 !important;
  }

  /* --- anchor — static aby title byl relativní k .extended-banner-texts --- */
  body.type-index.mobile #carousel .item a,
  body.type-index.mobile #carousel .item.active a {
    position: static !important;
    display: block !important;
  }

  /* --- texts wrapper --- */
  body.type-index.mobile #carousel .extended-banner-texts {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
  }

  /* --- hlavní nadpis — absolutně přes obrázek, fixní pozice --- */
  body.type-index.mobile #carousel .extended-banner-title {
    position: absolute !important;
    top: -90px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .8) !important;
    z-index: 2 !important;
  }

  /* --- podtext — pod bannerem, normální flow --- */
  body.type-index.mobile #carousel .extended-banner-text {
    position: relative !important;
    display: block !important;
    margin: 16px 20px 0 20px !important;
    text-align: center !important;
    color: #333 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* --- pillbox CTA — pod podtextem, na střed --- */
  body.type-index.mobile #carousel .extended-banner-link {
    position: relative !important;
    display: block !important;
    width: fit-content !important;
    margin: 12px auto 20px auto !important;
    background: #333 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

}


/* ============================================================
   DESKTOP — základní (768px–1399px)
   ============================================================ */
@media (min-width: 768px) {

  /* --- overlay gradient vlevo dole --- */
  .type-index #carousel .item a {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  .type-index #carousel .item a::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: radial-gradient(
      ellipse 120% 130% at -12% 88%,
      rgba(0, 0, 0, .55) 0%,
      rgba(0, 0, 0, .45) 14%,
      rgba(0, 0, 0, .30) 36%,
      rgba(0, 0, 0, .12) 60%,
      transparent 82%
    ) !important;
  }

  /* --- texts wrapper --- */
  .type-index #carousel .extended-banner-texts,
  .type-index #carousel .carousel-slide-caption {
    position: absolute !important;
    right: auto !important;
    top: auto !important;
    bottom: 14% !important;
    width: 44% !important;
    max-width: 660px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    text-align: left !important;
  }

  /* --- viditelnost elementů --- */
  .type-index #carousel .extended-banner-title,
  .type-index #carousel .extended-banner-text,
  .type-index #carousel .extended-banner-link {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* --- nadpis --- */
  .type-index #carousel .extended-banner-title {
    display: block !important;
    color: #fff !important;
    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .55) !important;
  }

  /* --- podtext --- */
  .type-index #carousel .extended-banner-text {
    display: block !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5) !important;
  }

  /* --- pillbox CTA --- */
  .type-index #carousel .extended-banner-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111 !important;
    background: #fff !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* --- carousel indicators --- */
  .type-index #carousel .carousel-indicators {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 28px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 15 !important;
    text-align: center !important;
  }

  .type-index #carousel .carousel-indicators li {
    background-color: #fff !important;
    opacity: 0.6 !important;
    border: none !important;
  }

  .type-index #carousel .carousel-indicators li.active {
    background-color: #ff804d !important;
    opacity: 1 !important;
  }

  /* --- pozice texts wrapper pro klasický desktop --- */
  .type-index #carousel .extended-banner-texts,
  .type-index #carousel .carousel-slide-caption {
    left: 4.8% !important;
  }

}


/* ============================================================
   DESKTOP — větší (1400px–1799px)
   ============================================================ */
@media (min-width: 1400px) and (max-width: 1799px) {

  .type-index #carousel .extended-banner-texts,
  .type-index #carousel .carousel-slide-caption {
    left: 10% !important;
    bottom: 14% !important;
  }

  .type-index #carousel .extended-banner-title {
    font-size: 37px !important;
  }

  .type-index #carousel .extended-banner-text {
    font-size: 16px !important;
  }

}


/* ============================================================
   DESKTOP — široká obrazovka (1800px–2199px)
   ============================================================ */
@media (min-width: 1800px) and (max-width: 2199px) {

  .type-index #carousel .extended-banner-texts,
  .type-index #carousel .carousel-slide-caption {
    left: 13% !important;
    bottom: 14% !important;
  }

  .type-index #carousel .extended-banner-title {
    font-size: 40px !important;
  }

  .type-index #carousel .extended-banner-text {
    font-size: 17px !important;
  }

}


/* ============================================================
   DESKTOP — ultra-wide (2200px+)
   ============================================================ */
@media (min-width: 2200px) {

  .type-index #carousel .extended-banner-texts,
  .type-index #carousel .carousel-slide-caption {
    left: 15% !important;
    bottom: 14% !important;
  }

  .type-index #carousel .extended-banner-title {
    font-size: 42px !important;
  }

  .type-index #carousel .extended-banner-text {
    font-size: 17px !important;
  }

}