/*
 * Collection hero split.
 *
 * Rozdelí hlavičku kategórie (.titlebar-collection) a slider kategórií
 * (.categories-section) do dvoch stĺpcov vedľa seba — text vľavo,
 * slider vpravo, ktorý vybieha až k pravému okraju viewportu.
 *
 * Aktivuje sa iba tam, kde sú obe sekcie obalené v .collection-hero-split
 * (pozri woocommerce/taxonomy-product-cat-svadobne-obrucky.php).
 * Pod 768px zostáva pôvodné správanie — sekcie pod sebou.
 */

/* Jemné pozadie odlíši hero pás od bieleho výpisu produktov pod ním. */
.collection-hero-split {
  background-color: rgb(247 247 247 / 60%);
}

/* Karty v hero slideri majú byť 4:5 na všetkých šírkach, aj pod 768px, kde
   sekcie ešte nie sú vedľa seba a inak by platil default 1:1 zo
   categories-slider.css. Nad 768px toto prekryje médiový blok nižšie
   (rovnaký pomer dosahuje cez aspect-ratio na obalovom die — sedí to). */
.collection-hero-split #categories .swiper-slide img {
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {

  .collection-hero-split {
    display: flex;
    align-items: stretch;
  }

  /* ---------- ľavý stĺpec: nadpis + popis ---------- */

  /* 768–991px: textu treba väčší podiel, inak sa nadpis láme na 4 riadky. */
  .collection-hero-split > .titlebar-collection {
    flex: 0 0 42%;
    max-width: 42%;
    min-width: 0;
    display: flex;
  }

  /* Výška musí prejsť celým reťazcom až po .content-column, inak sa nemá
     voči čomu centrovať a stĺpec ostane nalepený na vrchu. */
  .collection-hero-split > .titlebar-collection > .container-full,
  .collection-hero-split > .titlebar-collection > .container-full > .row,
  .collection-hero-split > .titlebar-collection > .container-full > .row > .col-md-12,
  .collection-hero-split > .titlebar-collection .d-flex.flex-column.flex-md-row {
    width: 100%;
    height: 100%;
  }

  /* Šírku 30/40 % rieši už samotný split, stĺpec vypĺňa celú svoju polovicu.
     Padding 2.5rem ostáva z témy — drží zarovnanie s drobčekovou navigáciou. */
  .collection-hero-split .titlebar-collection .content-column {
    width: 100%;
    justify-content: center;
  }

  /* Hlavný obrázok kategórie (ACF hlavny_obrazok_kategorie) nemá v split
     layoute kam ísť — pravý stĺpec patrí slideru. Bez tohto sa vtlačí medzi
     text a slider a vertikálne preteče (napr. Šperky → Náušnice). Pod 768px
     ostáva pôvodné rozloženie aj s obrázkom. */
  .collection-hero-split > .titlebar-collection picture {
    display: none;
  }

  /* Bez obrázka nemá zmysel tlačiť text na spodok — mt-auto ruší split layout. */
  .collection-hero-split .titlebar-collection .content-column .lead,
  .collection-hero-split .titlebar-collection .content-column #catDesc {
    margin-top: 0 !important;
    max-width: 100%;
  }

  /* „Zistiť viac“ je tu aj na desktope (pozri skript v category-header.php),
     takže musí ísť pod popis — order-lg-2 by ho hodilo nad nadpisy. */
  .collection-hero-split .titlebar-collection .content-column #toggleDesc {
    order: 5 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
  }

  /* ---------- pravý stĺpec: slider kategórií ---------- */

  .collection-hero-split > .categories-section {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .collection-hero-split > .categories-section > .container {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Užšie karty na výšku (4:5) — inak by štvorec pri týchto šírkach
     zrazil celý pravý stĺpec na nízky pás. */
  .collection-hero-split #categories .swiper-slide > div {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .collection-hero-split #categories .swiper-slide img {
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Predinicializačné šírky — držať v súlade s breakpointmi
     v assets/js/components/swiper-categories.js (split vetva). */
  .collection-hero-split #categories .swiper-slide {
    width: calc((100% - 24px) / 2);
  }
}

@media (min-width: 992px) {

  .collection-hero-split > .titlebar-collection {
    flex-basis: 38%;
    max-width: 38%;
  }

  .collection-hero-split #categories .swiper-slide {
    width: calc((100% - 26.52px) / 2.21);
  }
}

@media (min-width: 1200px) {

  .collection-hero-split > .titlebar-collection {
    flex-basis: 30%;
    max-width: 30%;
  }

  .collection-hero-split #categories .swiper-slide {
    width: calc((100% - 35.4px) / 2.95);
  }
}

@media (min-width: 1500px) {

  .collection-hero-split #categories .swiper-slide {
    width: calc((100% - 46.08px) / 3.84);
  }
}

/* =========================================================
   SKUŠOBNE: text na kartách kategórií dole na stred
   Základ (screen.min.css:26595) drží nadpis hore vľavo a tlačidlo
   dole vľavo cez space-between + flex-start. Tu obe zarovnáme
   na spodok a na stred, "Objavovať" ide pod názov menším písmom.
   Platí len na stránkach so split layoutom.
========================================================= */

.collection-hero-split #categories .swiper-slide > div .category-content {
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}

/* Veľkosť písma sa odvíja od šírky karty, nie od šírky okna. Karty majú
   naprieč breakpointmi takmer rovnakú šírku (~245–300px), takže vw jednotky
   by nespravili nič užitočné. 1cqw = 1 % content-boxu .category-content,
   teda šírka karty mínus jej padding 2×1.25rem (~205–260px). */
.collection-hero-split #categories .category-content {
  container-type: inline-size;
}

.collection-hero-split #categories .category-content .h5 {
  margin-bottom: 0;
  font-size: 1rem;
  font-size: clamp(0.8125rem, 6.75cqw, 1.0625rem);
}

/* Tlačidlo „Objavovať“ je v split layoute nadbytočné — celá karta je odkaz na
   kategóriu (obal .swiper-slide je <a>), takže ako tlačidlo slúži samotný názov
   kategórie a klik na obrázok funguje ďalej. Bez tlačidla klesne názov na spodok
   karty — .category-content má vyššie justify-content: flex-end. */
.collection-hero-split #categories .category-content .btn {
  display: none !important;
}