/* BARON BUBLINA – BARONOVY TRIKY – FINÁLNÍ VLNA V2
   Pro Shoptet Apollo. Nahradí předchozí vlna.css, nevyžaduje HTML změny.
   Ověřené prvky: .homepage-blog-wrapper, .homepage-group-title, #newsWrapper.
   Recenze, bannery ani jiné sekce neupravuje.
*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

.in-index .homepage-blog-wrapper {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(260px, 35%) minmax(0, 1fr) !important;
  grid-template-areas: "bb-heading bb-cards" "bb-heading bb-footer" !important;
  gap: 0 clamp(16px, 2vw, 34px) !important;
  align-items: center;
  min-height: 455px;
  padding: 28px 24px 28px 30px !important;
  margin: 44px 0 48px !important;
  background: #F3FAFF !important;
  border-radius: 32px !important;
  box-shadow: 0 12px 30px rgba(8, 58, 105, .11) !important;
  overflow: hidden !important;
}

/* Nepravidelná modrá vlna a průsvitné bubliny */
.in-index .homepage-blog-wrapper::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 42% !important;
  height: 100% !important;
  z-index: 0 !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20570%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22ocean%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220.86%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23063E87%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%230077BC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2353C7EE%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3CradialGradient%20id%3D%22soap%22%20cx%3D%2232%25%22%20cy%3D%2227%25%22%20r%3D%2276%25%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%20stop-opacity%3D%22.67%22%2F%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22%23C6F8FF%22%20stop-opacity%3D%22.12%22%2F%3E%3Cstop%20offset%3D%22.68%22%20stop-color%3D%22%237FE3FF%22%20stop-opacity%3D%22.10%22%2F%3E%3Cstop%20offset%3D%22.87%22%20stop-color%3D%22%23CFF4FF%22%20stop-opacity%3D%22.76%22%2F%3E%3Cstop%20offset%3D%22.96%22%20stop-color%3D%22%2380D5FF%22%20stop-opacity%3D%22.52%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFFFFF%22%20stop-opacity%3D%22.19%22%2F%3E%3C%2FradialGradient%3E%0A%20%3ClinearGradient%20id%3D%22shine%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%20stop-opacity%3D%22.93%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFFFFF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M0%200%20H387%20C515%20-5%20617%2059%20592%20171%20C572%20257%20525%20292%20546%20367%20C568%20442%20618%20494%20636%20570%20H0%20Z%22%20fill%3D%22url%28%23ocean%29%22%2F%3E%0A%3Cg%20fill%3D%22url%28%23soap%29%22%20stroke%3D%22%23E8FAFF%22%20stroke-width%3D%222.8%22%20stroke-opacity%3D%22.64%22%3E%0A%20%3Ccircle%20cx%3D%22520%22%20cy%3D%2282%22%20r%3D%2266%22%2F%3E%3Ccircle%20cx%3D%22144%22%20cy%3D%22488%22%20r%3D%2282%22%2F%3E%3Ccircle%20cx%3D%2281%22%20cy%3D%22107%22%20r%3D%2222%22%2F%3E%3Ccircle%20cx%3D%22523%22%20cy%3D%22450%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%22594%22%20cy%3D%22301%22%20r%3D%2219%22%2F%3E%3Ccircle%20cx%3D%22271%22%20cy%3D%2247%22%20r%3D%2215%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22url%28%23shine%29%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%3E%0A%20%3Cpath%20d%3D%22M489%2047%20Q507%2024%20533%2029%22%2F%3E%3Cpath%20d%3D%22M99%20458%20Q112%20428%20140%20417%22%2F%3E%3Cpath%20d%3D%22M64%2095%20Q71%2088%2078%2088%22%2F%3E%3Cpath%20d%3D%22M508%20437%20Q517%20427%20527%20427%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-opacity%3D%22.33%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%20550%20Q130%20520%20248%20560%22%2F%3E%3Cpath%20d%3D%22M0%20565%20Q145%20531%20270%20569%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") left center / 100% 100% no-repeat !important;
  pointer-events: none !important;
}
.in-index .homepage-blog-wrapper::after { content: none !important; display: none !important; }

/* Nadpis je živý text; bez korunky, s čitelným podtitulem. */
.in-index .homepage-blog-wrapper > .homepage-group-title {
  box-sizing: border-box !important;
  grid-area: bb-heading !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 340px !important;
  min-height: 370px !important;
  margin: 0 !important;
  padding: 20px 20px 30px !important;
  text-align: center !important;
  color: #fff !important;
  font: 700 clamp(35px, 3.5vw, 58px)/1.08 'Fredoka', sans-serif !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  background: transparent !important;
  text-shadow: 0 2px 10px rgba(0, 33, 77, .12);
}
.in-index .homepage-blog-wrapper > .homepage-group-title::before {
  content: none !important;
  display: none !important;
}
.in-index .homepage-blog-wrapper > .homepage-group-title::after {
  content: "Praktické tipy, které vám usnadní úklid." !important;
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 18px auto 0 !important;
  padding: 24px 0 0 !important;
  background: linear-gradient(#FFCF27, #FFCF27) center top / 94px 6px no-repeat !important;
  border: 0 !important;
  color: #fff !important;
  font: 600 clamp(15px, 1.35vw, 19px)/1.42 'Nunito', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

/* Přehled skutečných článků – není to statický obrázek. */
.in-index .homepage-blog-wrapper > #newsWrapper {
  grid-area: bb-cards !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  align-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}
.in-index .homepage-blog-wrapper > #newsWrapper > * {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 520px !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
  background: #fff !important;
  border: 1px solid #E4F0F8 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 26px rgba(17, 75, 116, .13) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.in-index .homepage-blog-wrapper > #newsWrapper > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(17, 75, 116, .18) !important;
}
.in-index .homepage-blog-wrapper #newsWrapper img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 270px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
.in-index .homepage-blog-wrapper #newsWrapper h3,
.in-index .homepage-blog-wrapper #newsWrapper h4,
.in-index .homepage-blog-wrapper #newsWrapper .title {
  padding: 12px 18px 0 !important;
  margin: 0 0 8px !important;
  font: 600 clamp(19px, 1.55vw, 25px)/1.22 'Fredoka', 'Nunito', sans-serif !important;
  color: #0B326B !important;
}
.in-index .homepage-blog-wrapper #newsWrapper p,
.in-index .homepage-blog-wrapper #newsWrapper .description,
.in-index .homepage-blog-wrapper #newsWrapper .perex {
  margin: 0 0 16px !important;
  padding: 0 18px !important;
  font: 400 14px/1.55 'Nunito', sans-serif !important;
  color: #52677A !important;
}
.in-index .homepage-blog-wrapper #newsWrapper a:not(.btn) { color: #0B326B; }

/* Vynucení bílé barvy textu v tlačítkách – ve staré verzi byly nečitelné. */
.in-index .homepage-blog-wrapper #newsWrapper :is(a.btn, .btn, a.button, .read-more, a[class*="button"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start;
  margin: auto 18px 6px !important;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 100px !important;
  background: linear-gradient(135deg, #087BBB, #073771) !important;
  box-shadow: 0 5px 12px rgba(11, 63, 116, .15) !important;
  font: 800 13px/1.3 'Nunito', sans-serif !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.in-index .homepage-blog-wrapper #newsWrapper :is(a.btn, .btn, a.button, .read-more, a[class*="button"]) * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.in-index .homepage-blog-wrapper #newsWrapper :is(a.btn, .btn, a.button, .read-more, a[class*="button"]):hover {
  background: #07609A !important;
}

.in-index .homepage-blog-wrapper > .text-center {
  grid-area: bb-footer !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 18px 0 0 !important;
  text-align: center !important;
}
.in-index .homepage-blog-wrapper > .text-center a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 9px 24px !important;
  background: #FFFFFF !important;
  border-radius: 100px !important;
  color: #0B326B !important;
  font: 800 14px/1.3 'Nunito', sans-serif !important;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(11, 63, 116, .10) !important;
}

@media (max-width: 1050px) {
 .in-index .homepage-blog-wrapper {
   grid-template-columns: minmax(230px, 36%) minmax(0,1fr) !important;
   padding: 24px 18px !important;
 }
 .in-index .homepage-blog-wrapper::before {width: 44% !important;}
 .in-index .homepage-blog-wrapper > .homepage-group-title {
   padding: 16px 8px !important;
   font-size: clamp(33px,3.9vw,46px) !important;
 }
 .in-index .homepage-blog-wrapper > #newsWrapper {gap: 12px !important;}
}
@media (max-width: 767px) {
 .in-index .homepage-blog-wrapper {
   display: flex !important;
   flex-direction: column !important;
   align-items: stretch !important;
   gap: 18px !important;
   min-height: 0 !important;
   margin: 30px 0 36px !important;
   padding: 16px 14px 22px !important;
   border-radius: 24px !important;
 }
 .in-index .homepage-blog-wrapper::before {
   width: 100% !important;
   height: 255px !important;
   background-size: 100% 100% !important;
 }
 .in-index .homepage-blog-wrapper > .homepage-group-title {
   width: 100% !important;
   max-width: none !important;
   min-height: 220px !important;
   padding: 15px 32px 24px !important;
   font-size: 40px !important;
 }
 .in-index .homepage-blog-wrapper > .homepage-group-title::after {
   font-size: 15px !important;
   margin-top: 10px !important;
   padding-top: 16px !important;
 }
 .in-index .homepage-blog-wrapper > #newsWrapper {
   grid-template-columns: 1fr !important;
   gap: 16px !important;
 }
 .in-index .homepage-blog-wrapper > #newsWrapper > * {max-width: none !important;}
 .in-index .homepage-blog-wrapper > .text-center {margin-top: 0 !important;}
}