/* Scoped styly stranky Uvod (front-page.php) - JEN cizi markup.
   Splide (@splidejs/splide, viz main.js) generuje vlastni
   .splide__pagination/li/button markup pod #js-hero-slider, ktery nejde
   ovlivnit utility tridami v sablone (JS ho navic po mountu presouva do
   #js-hero-dots). Vse ostatni na strance resi utility primo ve
   front-page.php / parts/mainpage_*.php.

   POZOR: tento soubor je nacitany plain wp_enqueue_style (neni soucasti
   build.css @layer base) - je tedy genuinne unlayered a ma prednost pred
   layer(base)/layer(theme)/layer(utilities). Zadne z pravidel nize predtim
   v puvodnim pages/mainpage/_hero-slider.css (base layer) neprohravalo s
   necim jinym - jde o 1:1 presun beze zmeny chovani. */

/* ------------------------------------------------------------------ LCP FIX
   Splide core CSS ma `.splide{visibility:hidden}` a odkryje slider az kdyz
   mount() prida `.is-initialized`. Hero obrazek je LCP prvek homepage, takze
   se sice stahl vcas, ale cekal na dobehnuti veskereho JS -> render delay
   10,6 s z celkovych 13,0 s LCP (mereno Lighthouse, mobil, pomala 4G).

   Nize je pre-init layout, ktery 1:1 kopiruje rozmery, jake Splide po mountu
   nastavi inline z options v main.js (perPage/gap/padding), takze prevzeti
   rizeni JS neni videt a nevznika layout shift:
       slideWidth = (trackContentWidth + gap) / perPage - gap
   Splide dava gap jako margin-right na slide a padding jako padding na track.
   Vsechna pravidla zanikaji ve chvili, kdy JS prida .is-initialized.
   POZOR: pri zmene options hero slideru v main.js uprav i hodnoty zde.
   ------------------------------------------------------------------------ */
.mainpage_hero_slider .splide:not(.is-initialized) {
  visibility: visible;
}

.mainpage_hero_slider .splide:not(.is-initialized) .splide__track {
  padding-right: 8%;
}

/* perPage: 4 (vychozi) */
.mainpage_hero_slider .splide:not(.is-initialized) .splide__slide {
  width: calc((100% - 3 * 2rem) / 4);
  margin-right: 2rem;
}

/* breakpoints z main.js (Splide ma vychozi mediaQuery 'max') */
@media (max-width: 1400px) { /* perPage: 3 */
  .mainpage_hero_slider .splide:not(.is-initialized) .splide__slide {
    width: calc((100% - 2 * 2rem) / 3);
  }
}

@media (max-width: 900px) { /* perPage: 2 */
  .mainpage_hero_slider .splide:not(.is-initialized) .splide__slide {
    width: calc((100% - 2rem) / 2);
  }
}

@media (max-width: 550px) { /* perPage: 1, padding right 20% */
  .mainpage_hero_slider .splide:not(.is-initialized) .splide__track {
    padding-right: 20%;
  }
  .mainpage_hero_slider .splide:not(.is-initialized) .splide__slide {
    width: 100%;
  }
}

/* Skryt vychozi Splide pagination uvnitr slideru (nez ji JS presune ven) */
.mainpage_hero_slider .splide .splide__pagination {
  display: none !important;
}

/* Tecky presunute JS mimo Splide kontejner do #js-hero-dots */
.mainpage_hero_slider .hero-slider__dots .splide__pagination {
  display: flex !important;
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mainpage_hero_slider .hero-slider__dots .splide__pagination li {
  line-height: 0;
}

.mainpage_hero_slider .hero-slider__dots .splide__pagination__page {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--transition-default);
}

.mainpage_hero_slider .hero-slider__dots .splide__pagination__page:hover {
  background-color: var(--color-text-secondary);
}

.mainpage_hero_slider .hero-slider__dots .splide__pagination__page.is-active {
  background-color: var(--color-cta);
  width: 2.4rem;
  border-radius: 0.4rem;
}

/* Presunuto z overwrites/cart-mobile-overrides.css (Task E4.1) - puvodne
   unlayered, nesouviselo s kosikem, patrilo sem (front-page.php je jediny
   konzument .mainpage_prozkoumejte). 1:1 presun, beze zmeny chovani. */
@media (max-width: 550px) {
  .mainpage_prozkoumejte .produkty {
    row-gap: 3rem !important;
    column-gap: 2rem !important;
  }
}

@media (max-width: 400px) {
  .mainpage_prozkoumejte .produkty {
    gap: 2rem !important;
  }
}