/* ===========================================
   WORKA.CZ – úvodní stránka: bannery a karty výhod v jednotném stylu
   oblé rohy jako karty · bannery vpravo zarovnané s velkým bannerem · karty na celou šířku
   Jen vzhled. Načítat v ZÁHLAVÍ:
   <link rel="stylesheet" href="/user/documents/upload/uvodni-stranka.css?v=1">
   =========================================== */

/* velký banner (karusel) – oblé rohy, jemný stín */
.carousel, .carousel-inner { border-radius: 16px !important; overflow: hidden !important; }
.carousel { box-shadow: 0 4px 16px rgba(0,0,0,.10) !important; }
.carousel-inner .item img { display: block; }
/* šipky karuselu – bílá kolečka místo hranatých pruhů */
.carousel .carousel-control,
.carousel :is(.left, .right).carousel-control {
  top: 50% !important; bottom: auto !important;
  width: 44px !important; height: 44px !important; margin-top: -22px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  opacity: 1 !important;
  display: flex !important; align-items: center; justify-content: center;
}
.carousel .carousel-control.left { left: 14px !important; }
.carousel .carousel-control.right { right: 14px !important; }
.carousel .carousel-control:hover { background: #fff !important; }

/* menší bannery vedle karuselu – oblé rohy, stín */
.banners-row :is(.banner-wrapper, .extended-banner-link, a):has(> img),
.banners-row img:not(.carousel-inner img) {
  border-radius: 16px !important;
}
.banners-row :is(.banner-wrapper, .extended-banner-link, a):has(> img) {
  display: block; overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}

/* karty výhod (30+ let, Originální zboží…) – přes celou šířku řádku s bannery */
.benefitBanner__data .worka-banner-servis {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* šipky karuselu – ikona uprostřed kolečka a tmavá (vpravo byla mimo / bílá na bílém) */
.carousel .carousel-control > *:not(.sr-only) {
  position: static !important; inset: auto !important;
  margin: 0 !important; transform: none !important;
  width: auto !important; height: auto !important;
  color: #1a1a1a !important; text-shadow: none !important;
}
.carousel .carousel-control, .carousel .carousel-control::before, .carousel .carousel-control > *::before { color: #1a1a1a !important; text-shadow: none !important; }
.carousel .carousel-control svg, .carousel .carousel-control svg * { fill: currentColor !important; }

@media (min-width: 768px) {
  /* bannery vpravo přesně na výšku velkého banneru */
  .banners-row { display: flex !important; align-items: stretch !important; }
  .banners-row > .col-sm-4 { display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 24px; }
  .banners-row > .col-sm-4 > * { flex: 1 1 0 !important; min-height: 0 !important; margin: 0 !important; display: block; overflow: hidden !important; border-radius: 16px !important; }
  .banners-row > .col-sm-4 > * :is(a, picture) { display: block; height: 100% !important; }
  .banners-row > .col-sm-4 > * img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 16px !important; }
}

@media (min-width: 992px) {
  /* karty výhod: 4 stejné sloupce se stejnou mezerou, poslední končí v linii s bannery */
  :has(> .benefitBanner__item) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  .benefitBanner__item { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; }
  .benefitBanner__content { padding: 0 !important; width: 100% !important; }
  .benefitBanner__data { width: 100% !important; }
}

/* text „Předchozí / Následující“ jen pro čtečky – zase skrytý */
.carousel .carousel-control .sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ostatní bannery na úvodní stránce (Fiskars, Wolfcraft…) – stejné zaoblení a stín */
:is(.banner-wrapper, .banners-content .banner, .extended-banner-link, a.extended-empty, .banner-category, [class*="banner"] > a):has(> img),
:is(.banner-wrapper, .banners-content .banner, .extended-banner-link, a.extended-empty, .banner-category, [class*="banner"] > a):has(> picture) {
  display: block;
  overflow: hidden !important;
  border-radius: 16px !important;
}
:is(.banner-wrapper, .banners-content, .extended-banner-link, a.extended-empty, .banner-category) img,
[class*="banner"] > a > img { border-radius: 16px !important; }
.banners-content :is(.banner-wrapper, .banner), .banner-wrapper { box-shadow: 0 4px 16px rgba(0,0,0,.10); border-radius: 16px !important; }