/* Baron Bublina – Baronovy triky / Apollo – vlnité pozadí a bubliny
   Samostatná úprava, navazuje na původní CSS; sekce se stále načítá ze Shoptetu.
   CSS třídy .homepage-blog-wrapper, .homepage-group-title, #newsWrapper
   jsou potvrzené ze screenshotu inspektoru.
*/
@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 {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(225px, 33%) minmax(0, 1fr);
  grid-template-areas: "bb-title bb-articles" "bb-title bb-more";
  column-gap: clamp(16px, 2.5vw, 36px);
  align-items: center;
  min-height: 370px;
  padding: 32px 28px 32px 30px !important;
  margin: 42px 0 48px !important;
  border-radius: 32px !important;
  background: #F5FBFF !important;
  box-shadow: 0 12px 32px rgba(4, 58, 104, .09);
  overflow: hidden !important;
}

/* Vlnitá levá plocha s modrými bublinami – bez dalších obrázků */
.in-index .homepage-blog-wrapper::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 38%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22730%22%20height%3D%22510%22%20viewBox%3D%220%200%20730%20510%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23053E81%22%2F%3E%3Cstop%20offset%3D%220.46%22%20stop-color%3D%22%23086DB4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2319A6D8%22%2F%3E%3C%2FlinearGradient%3E%0A%3CradialGradient%20id%3D%22bubble%22%20cx%3D%2228%25%22%20cy%3D%2225%25%22%20r%3D%2272%25%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.62%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%239eeaff%22%20stop-opacity%3D%22.16%22%2F%3E%3Cstop%20offset%3D%22.72%22%20stop-color%3D%22%2321bcf4%22%20stop-opacity%3D%22.22%22%2F%3E%3Cstop%20offset%3D%22.90%22%20stop-color%3D%22%23d6f8ff%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238cdeff%22%20stop-opacity%3D%22.22%22%2F%3E%3C%2FradialGradient%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M0%200H528C622%200%20683%2029%20704%2094C722%20152%20665%20183%20657%20234C649%20289%20703%20346%20696%20403C686%20474%20632%20510%20527%20510H0Z%22%20fill%3D%22url%28%23blue%29%22%2F%3E%0A%3Cg%20fill%3D%22url%28%23bubble%29%22%20stroke%3D%22%23d9f8ff%22%20stroke-opacity%3D%22.50%22%20stroke-width%3D%223%22%3E%0A%3Ccircle%20cx%3D%22590%22%20cy%3D%2267%22%20r%3D%2245%22%2F%3E%3Ccircle%20cx%3D%22678%22%20cy%3D%22162%22%20r%3D%2230%22%2F%3E%0A%3Ccircle%20cx%3D%2284%22%20cy%3D%22405%22%20r%3D%2252%22%2F%3E%3Ccircle%20cx%3D%22601%22%20cy%3D%22435%22%20r%3D%2235%22%2F%3E%0A%3Ccircle%20cx%3D%22125%22%20cy%3D%2288%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22575%22%20cy%3D%22295%22%20r%3D%2216%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.72%22%3E%3Cpath%20d%3D%22M563%2047q-15%208-18%2025%22%2F%3E%3Cpath%20d%3D%22M50%20377q-15%209-16%2026%22%2F%3E%3Cpath%20d%3D%22M653%20145q-7%203-9%2011%22%2F%3E%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.6%22%3E%3Cpath%20d%3D%22M170%2068l5%2014%2015%205-15%205-5%2014-5-14-15-5%2015-5z%22%2F%3E%3Cpath%20d%3D%22M622%20375l4%2012%2012%204-12%204-4%2012-4-12-12-4%2012-4z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-position: left center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.in-index .homepage-blog-wrapper::after {display: none !important;}

/* Levý název – skutečný nadpis dál spravuje Shoptet */
.in-index .homepage-blog-wrapper > .homepage-group-title {
  grid-area: bb-title;
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 340px;
  margin: 0 auto !important;
  padding: 25px 24px !important;
  background: transparent !important;
  color: #fff !important;
  font: 700 clamp(29px, 3.25vw, 52px)/1.06 'Fredoka', sans-serif !important;
  letter-spacing: -.8px;
  text-align: center !important;
  text-shadow: 0 2px 6px rgba(0, 30, 71, .12);
}
.in-index .homepage-blog-wrapper > .homepage-group-title::before {
  content: '♛';
  display: block;
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: normal;
  line-height: 1;
  color: #FFCC29;
  margin-bottom: 11px;
  text-shadow: none;
}
.in-index .homepage-blog-wrapper > .homepage-group-title::after {
  content: 'Praktické tipy, které vám usnadní úklid.';
  display: block;
  max-width: 240px;
  margin: 17px auto 0;
  color: #fff;
  font: 600 17px/1.4 'Nunito', sans-serif;
  letter-spacing: 0;
  text-shadow: none;
}

/* Pravá část – živé články Shoptetu, nikoliv obrázek celé sekce */
.in-index .homepage-blog-wrapper > #newsWrapper {
  grid-area: bb-articles;
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.in-index .homepage-blog-wrapper > #newsWrapper > * {
  flex: 1 1 185px;
  min-width: 0;
  max-width: 360px;
  box-sizing: border-box;
}
/* Cílení na různé podoby karet v Apollo */
.in-index .homepage-blog-wrapper #newsWrapper .news-item,
.in-index .homepage-blog-wrapper #newsWrapper > .news-item,
.in-index .homepage-blog-wrapper #newsWrapper > [class*="col-"] {
  border-radius: 19px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(11, 59, 106, .13) !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.in-index .homepage-blog-wrapper #newsWrapper .news-item:hover,
.in-index .homepage-blog-wrapper #newsWrapper > [class*="col-"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(11, 59, 106, .19) !important;
}
.in-index .homepage-blog-wrapper #newsWrapper img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1.55;
  object-fit: cover;
  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 {
  font-family: 'Fredoka', 'Nunito', sans-serif !important;
  font-size: clamp(17px, 1.45vw, 23px) !important;
  font-weight: 600 !important;
  color: #092B60 !important;
  line-height: 1.22 !important;
}
.in-index .homepage-blog-wrapper #newsWrapper a {
  color: #092B60;
  text-decoration: none;
}
.in-index .homepage-blog-wrapper > .text-center {
  grid-area: bb-more;
  position: relative;
  z-index: 1;
  margin: 18px 0 0 !important;
  text-align: center;
}
.in-index .homepage-blog-wrapper > .text-center a {
  font-family: 'Nunito', sans-serif;
  font-weight: 800 !important;
  color: #0B477B !important;
}
.in-index .homepage-blog-wrapper > .text-center a:hover {color: #078DC4 !important;}

@media (max-width: 1000px) {
  .in-index .homepage-blog-wrapper {
    grid-template-columns: minmax(190px, 37%) minmax(0, 1fr);
    padding: 22px 18px !important;
  }
  .in-index .homepage-blog-wrapper::before {width: 43%;}
  .in-index .homepage-blog-wrapper > .homepage-group-title {padding: 18px 8px !important; font-size: 35px !important;}
  .in-index .homepage-blog-wrapper > #newsWrapper > * {max-width: 300px;}
}
@media (max-width: 767px) {
  .in-index .homepage-blog-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    padding: 20px 16px 24px !important;
    margin: 28px 0 35px !important;
    border-radius: 22px !important;
    min-height: 0;
    background: #F5FBFF !important;
  }
  .in-index .homepage-blog-wrapper::before {
    width: 100%;
    height: 205px;
    background-image: linear-gradient(125deg, #073D80 0%, #0582C5 85%, #5DC9F4 100%);
    border-radius: 20px 20px 42% 24%;
    opacity: 1;
  }
  .in-index .homepage-blog-wrapper > .homepage-group-title {
    padding: 8px 10px 20px !important;
    max-width: none;
    font-size: 35px !important;
    min-height: 165px;
  }
  .in-index .homepage-blog-wrapper > .homepage-group-title::before {font-size: 38px; margin-bottom: 5px;}
  .in-index .homepage-blog-wrapper > .homepage-group-title::after {font-size: 14px; margin-top: 8px;}
  .in-index .homepage-blog-wrapper > #newsWrapper {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 1px 10px !important;
    scroll-snap-type: x proximity;
  }
  .in-index .homepage-blog-wrapper > #newsWrapper > * {
    flex: 0 0 min(82%, 275px);
    max-width: min(82%, 275px);
    scroll-snap-align: start;
  }
  .in-index .homepage-blog-wrapper > .text-center {margin-top: 0 !important;}
}