/*
 * Melli Galerie vzorků — frontend i editor styly.
 *
 * Plochý design: ostré rohy karet, krémová pozadí, jemný hover na fotce.
 * Grid samotný řeší Tailwind utility z helperu mellicz_render_swatch_grid()
 * (WindPress runtime), zde jen doplňkové kontejnerové styly a hover, které
 * je vhodné mít deterministicky bez ohledu na purge.
 *
 * Barvy přes CSS proměnné (tokeny z TASK-002) — žádné hardcoded HEX.
 */

.melli-swatch-gallery {
  padding-block: var(--spacing-2xl, 4rem);
}

.melli-swatch-gallery__inner {
  width: 100%;
}

.melli-swatch-gallery__heading {
  margin: 0 0 var(--spacing-lg, 1.5rem);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-base-content, #333333);
}

/* Karta vzorku — ostré rohy, jemný stín, hover zvětší fotku. */
.mellicz-swatch-card {
  border-radius: 0;
}

/*
 * Foto vzorku ve <figure> uvnitř .card — poměr stran (aspect-ratio) řídí
 * customizer „Karty a grid" přes pravidlo `.card figure { aspect-ratio }`
 * (TASK-030-fix-1, parent css-generator.php). Foto figure vyplní celé
 * (object-cover z helperu), proto height:100% místo původního height:auto.
 */
.mellicz-swatch-card__media {
  position: relative;
  overflow: hidden;
}

.mellicz-swatch-card__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Editor placeholder — vizuální odlišení od frontendu. */
.melli-swatch-gallery-editor {
  width: 100%;
}

/*
 * Accordion cenových kategorií vzorníku látek (TASK-043-fix-1).
 *
 * Nativní <details>/<summary> — zavřená kategorie nestáhne obrázky uvnitř
 * (výkonová optimalizace). Plochý design: vlastní marker (▸/▾) místo nativního
 * trojúhelníku, ostré rohy, žádný JS.
 */

/* Skrýt nativní marker prohlížeče (WebKit i standardní list-style). */
.mellicz-swatch-category > summary {
  list-style: none;
}
.mellicz-swatch-category > summary::-webkit-details-marker {
  display: none;
}

/* Vlastní plochý marker (šipka) před nadpisem; rotuje při otevření. */
.mellicz-swatch-category > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-right: var(--spacing-2xs, 0.5rem);
  align-self: center;
  border-style: solid;
  border-width: 0.32em 0 0.32em 0.42em;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.15s ease;
}
.mellicz-swatch-category[open] > summary::before {
  transform: rotate(90deg);
}

/* Jemné zvýraznění summary při najetí (flat, bez zaoblení). */
.mellicz-swatch-category > summary:hover .mellicz-swatch-category__heading {
  color: var(--color-primary, #9d0a0f);
}

/*
 * Vnořený accordion KOLEKCE (TASK-043-fix-2).
 *
 * Každá kolekce je vnořený <details>: <summary> = cover dlaždice 1 barvy +
 * nadpis + parametry; rozbaleno = mřížka všech variant + lightbox. Zavřená
 * kolekce nestáhne obrázky variant (jen 1 cover náhled). Plochý design.
 */

/* Skrýt nativní marker prohlížeče u kolekce. */
.mellicz-collection > summary {
  list-style: none;
}
.mellicz-collection > summary::-webkit-details-marker {
  display: none;
}

/*
 * KLÍČOVÉ pro výkon (fix-2): obsah ZAVŘENÉ kolekce (mřížka variant) vyřadit
 * z renderingu přes content-visibility: hidden. Samotný zavřený vnořený
 * <details> (uvnitř OTEVŘENÉ kategorie) totiž v některých prohlížečích
 * lazy obrázky variant přesto stáhne (obsah je jen výškově collapsed, ne
 * vyřazený z layoutu). content-visibility:hidden přeskočí rendering i fetch
 * lazy obrázků, dokud se kolekce nerozbalí → initial load = jen cover náhledy.
 */
.mellicz-collection:not([open]) > .mellicz-collection__body {
  content-visibility: hidden;
}

/*
 * Cover dlaždice 1 barvy v summary — pevná velikost náhledu.
 * Šířka přes proměnnou (--mellicz-collection-cover-w) → STEJNÝ rozměr coveru
 * sbaleno i rozbaleno (fix-4 req. 1: cover se po rozbalení nezvětšuje).
 */
.mellicz-collection {
  --mellicz-collection-cover-w: 96px;
}
.mellicz-collection__cover {
  width: var(--mellicz-collection-cover-w, 96px);
}
.mellicz-collection__cover-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Jemné zvýraznění nadpisu kolekce při najetí na summary. */
.mellicz-collection > summary:hover .mellicz-collection__title {
  color: var(--color-primary, #9d0a0f);
}

/*
 * Indikace rozbalení kolekce — plochý znak +/− za nadpisem (currentColor).
 * Bez zaoblení; rotace/změna při [open].
 */
.mellicz-collection__title::after {
  content: " +";
  color: var(--color-base-content, #333);
  opacity: 0.4;
  font-weight: 400;
}
.mellicz-collection[open] > summary .mellicz-collection__title::after {
  content: " −";
}

/*
 * Přepínač zobrazení MŘÍŽKA / SEZNAM (TASK-043-fix-2).
 *
 * Layout KOLEKCÍ uvnitř kategorie. JS přepíná modifikátor na containeru
 * .mellicz-fabric-view (--grid / --list); cílíme na kolekce v kategorii
 * (.mellicz-swatch-category__collections).
 *
 * MŘÍŽKA (default): kompaktní — víc cover dlaždic ve sloupcích vedle sebe.
 *   Cover + nadpis nad sebou, parametry skryté (kompaktní karta).
 * SEZNAM: kolekce pod sebou v řádcích, cover vlevo, nadpis + parametry vpravo.
 */

/* --- MŘÍŽKA: kolekce jako kompaktní dlaždice ve sloupcích --- */
.mellicz-fabric-view--grid .mellicz-swatch-category__collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md, 1rem);
}
@media (min-width: 640px) {
  .mellicz-fabric-view--grid .mellicz-swatch-category__collections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .mellicz-fabric-view--grid .mellicz-swatch-category__collections {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* V mřížce (SBALENO): cover nad nadpisem (sloupec), cover přes celou šířku dlaždice. */
.mellicz-fabric-view--grid .mellicz-collection__summary {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2xs, 0.5rem);
}
.mellicz-fabric-view--grid .mellicz-collection__cover {
  width: 100%;
}
/* V mřížce (sbaleno) parametry skryjeme — kompaktní karta jen s coverem a názvem. */
.mellicz-fabric-view--grid .mellicz-collection__material {
  display: none;
}
.mellicz-fabric-view--grid .mellicz-collection__title {
  font-size: 1rem;
  margin-bottom: 0;
}
/* Rozbalený obsah v mřížce přesahuje šířku dlaždice → roztáhneme přes celý řádek. */
.mellicz-fabric-view--grid .mellicz-collection[open] {
  grid-column: 1 / -1;
}

/*
 * MŘÍŽKA – ROZBALENÁ kolekce (TASK-043-fix-3 → fix-4 → fix-5 → fix-6 → fix-7 → fix-8).
 *
 * CÍL (fix-8): thumbnaily barev ZAROVNANÉ DO SLOUPCŮ (stejné x-pozice napříč
 * řádky) — žádné „schody" z fix-7 (float + inline-block dlaždice se nezarovnaly).
 *
 * ZVOLENÉ ŘEŠENÍ (alternativa povolená zadáním — viz handoff „Zdůvodnění"):
 *   cover ~240px vlevo + text vpravo = horní pruh (summary flex, beze změny DOM),
 *   POD nimi thumbnaily jako JEDEN CSS GRID na plnou šířku.
 *
 * Proč NE „grid se zabraným coverem" (cover jako grid item span 3×2 + dense flow):
 *   Reálné testy (Playwright, Chromium) prokázaly, že tato technika je zde
 *   nepoužitelná ze 3 nezávislých důvodů:
 *     1. `.mellicz-collection[open]` je `<details>` element — `<details>` jako
 *        GRID CONTAINER má v Chromiu rozbitý auto-placement: grid items se
 *        skládají SVISLE do 1 sloupce místo do mřížky (ověřeno: na obyčejném
 *        <div> stejný grid funguje, na <details> ne).
 *     2. `display: contents` na <summary>/__body/__grid (aby cover+text+dlaždice
 *        byly grid items téže mřížky) navíc grid placement rozbíjí i samostatně
 *        (známý engine bug — contents-promoted items se neumístí do sloupců).
 *     3. cover span 3×2 + `auto-fill minmax(90px,1fr)` kolaboval na 3 nekonzistentní
 *        sloupce a cover na 144px (ne 240) — křehká interakce span × auto-fill.
 *   Grid NA `.mellicz-collection__grid` (DIV, NE details) naopak funguje spolehlivě
 *   → zarovnané sloupce. Proto thumbnaily grid = plná šířka POD coverem+textem.
 *   Tím odpadá obtékání pod cover (test b), ale jsou splněny zarovnání (a),
 *   bez prázdného místa (c) i ≥8 sloupců (d) — a hlavně je to STABILNÍ.
 *
 * Cover ~240px = fixní šířka přes proměnnou. Sbalený stav (96px), seznam i dřeva
 * proměnnou/grid NEDĚDÍ (scoped na `--grid [open]`).
 */
.mellicz-fabric-view--grid .mellicz-collection[open] {
  --mellicz-collection-cover-w: 240px;
  --mellicz-collection-gap: var(--spacing-lg, 1.5rem);
  display: block;
  text-align: left;
  /* Kotva pro absolutní cover. */
  position: relative;
  /* Aby nízká kolekce (málo barev) neuřízla absolutní 240px cover. */
  min-height: var(--mellicz-collection-cover-w);
}
/*
 * COVER = absolutní ČTVEREC vlevo nahoře (TASK-043-fix-9, finální).
 *
 * Klíč: cover je absolutní → NEpřispívá do výšky <summary>. Proto se summary smrskne
 * na výšku TEXTU (název+parametry) a thumbnaily (__body) vyjedou NAHORU hned pod text
 * (vedle coveru), místo aby spadly pod celý 240px cover. Funguje automaticky pro
 * libovolnou délku popisků (žádný JS, žádné dopočítávání margin-top, žádný resize
 * listener). Pod coverem vlevo zůstává prázdno (VĚDOMĚ OK). Cover zůstává původní
 * ČTVEREC (aspect-square z PHP) — NEroztahovat, NEořezávat. Klik na cover (uvnitř
 * <summary>) dál togglesuje kolekci.
 */
.mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-collection__cover-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mellicz-collection-cover-w, 240px);
}
.mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-collection__cover {
  width: 100%;
}
/* Summary jako blok; text odsazený doprava za absolutní cover (cover-w + gap). */
.mellicz-fabric-view--grid .mellicz-collection[open] > .mellicz-collection__summary {
  display: block;
  padding-left: calc(var(--mellicz-collection-cover-w) + var(--mellicz-collection-gap));
}
.mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-collection__head {
  min-width: 0;
  text-align: left;
}
.mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-collection__title {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-2xs, 0.5rem);
}
.mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-collection__material {
  display: block;
}
/*
 * Thumbnaily (body) = blok v PRAVÉM sloupci, odsazený stejně jako summary (cover-w +
 * gap). Díky absolutnímu coveru začínají hned pod textem (vedle coveru), ne pod ním.
 */
.mellicz-fabric-view--grid .mellicz-collection[open] > .mellicz-collection__body {
  margin-left: calc(var(--mellicz-collection-cover-w) + var(--mellicz-collection-gap));
}
/* Mobil: cover na celou šířku nahoře, pak text, pak thumbnaily (stack). */
@media (max-width: 767px) {
  /* Zrušit absolutní cover → zpět do toku, čtverec na celou šířku nahoře. */
  .mellicz-fabric-view--grid .mellicz-collection[open] {
    min-height: 0;
  }
  .mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-collection__cover-wrap {
    position: static;
    width: 100%;
    max-width: var(--mellicz-collection-cover-w, 240px);
  }
  /* Summary stack (cover → text), bez odsazení. */
  .mellicz-fabric-view--grid .mellicz-collection[open] > .mellicz-collection__summary {
    padding-left: 0;
  }
  /* Na mobilu je stack → zrušit desktopové odsazení thumbnailů do pravého sloupce. */
  .mellicz-fabric-view--grid .mellicz-collection[open] > .mellicz-collection__body {
    margin-left: 0;
  }
}

/*
 * SKRYTÍ ostatních kolekcí ve STEJNÉM gridovém řádku (fix-4 req. 3).
 *
 * Když se kolekce otevře, JS (swatch-view-toggle.js) přidá třídu
 * `is-row-hidden` sourozencům, kteří byli ve stejném vizuálním řádku mřížky →
 * rozbalená kolekce vypadá, že patří řádku jen jí (nezůstane mezera vpravo/vlevo).
 * Jen v mřížce; v seznamu jsou kolekce pod sebou (řádek = 1 kolekce).
 */
.mellicz-fabric-view--grid .mellicz-collection.is-row-hidden {
  display: none;
}

/* --- SEZNAM: kolekce v řádcích pod sebou, cover vlevo + info vpravo --- */
.mellicz-fabric-view--list .mellicz-swatch-category__collections {
  display: flex;
  flex-direction: column;
  /* Oddělení kolekcí řeší vlasová linka + symetrický padding níže (ne gap). */
  gap: 0;
}
/*
 * Optické oddělení kolekcí v seznamu (TASK-043-fix-9): jemná linka base-300 +
 * symetrický vertikální padding. Když je otevřeno víc kolekcí pod sebou, jinak
 * splývají. Flat design (1px, ostrá, jako border-b u kategorií). První bez horního
 * paddingu, poslední bez spodní linky/paddingu.
 */
.mellicz-fabric-view--list .mellicz-swatch-category__collections > .mellicz-collection {
  padding-block: var(--spacing-md, 1rem);
  border-bottom: 1px solid var(--color-base-300, #e5e5e5);
}
.mellicz-fabric-view--list .mellicz-swatch-category__collections > .mellicz-collection:first-child {
  padding-top: 0;
}
.mellicz-fabric-view--list .mellicz-swatch-category__collections > .mellicz-collection:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.mellicz-fabric-view--list .mellicz-collection__summary {
  flex-direction: row;
  align-items: center;
}
.mellicz-fabric-view--list .mellicz-collection__cover {
  width: var(--mellicz-collection-cover-w, 96px);
}

/*
 * Název varianty v lightboxu (TASK-043-fix-4 req. 4).
 *
 * Popisek vkládá melli-child JS (swatch-lightbox-caption.js) do parentova
 * #rw-lightbox (parent read-only). Umístíme ho nad čítač „N/M" (čítač je
 * v parentu na bottom-4), uprostřed dole, plochý design (ostré rohy).
 */
.mellicz-lightbox-caption {
  position: absolute;
  bottom: 2.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 90vw;
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * MALÉ THUMBNAILY ROZBALENÝCH VARIANT (TASK-043-fix-3 → fix-7 → fix-8).
 *
 * Po rozkliknutí kolekce byly varianty velké (mřížka 2–3 sloupce z inline
 * Tailwind tříd). Feedback: udělat z nich KOMPAKTNÍ thumbnaily — víc na řádek.
 * Zdroj obrázku zůstává thumbnail 150×150, lightbox beze změny (full po kliknutí).
 *
 * SEZNAM (--list): kolekce jsou pod sebou → klasický auto-fill GRID (vyplní
 *   plnou šířku řádku, víc sloupců). Beze změny od fix-3.
 *
 * MŘÍŽKA rozbaleno (--grid [open], fix-8): thumbnaily = JEDEN auto-fill GRID
 *   na .__grid DIV (NE na <details>, který má rozbitý grid auto-placement).
 *   Plná šířka POD coverem+textem → zarovnané sloupce (stejné x napříč řádky),
 *   bez schodů, bez prázdného místa. Grid na DIV je v Chromiu stabilní (ověřeno).
 *   `!important` přebíjí inline Tailwind `grid-cols-2 md:grid-cols-3` z PHP
 *   (zachované kvůli editoru/fallbacku), ať platí jednotná auto-fill mřížka.
 */
.mellicz-fabric-view--list .mellicz-collection__grid,
.mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-collection__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  gap: var(--spacing-xs, 0.75rem);
}
/* Název varianty pod thumbnailem menší (kompaktní) v list i grid rozbaleno. */
.mellicz-fabric-view--list .mellicz-collection__grid .mellicz-variant__name,
.mellicz-fabric-view--grid .mellicz-collection[open] .mellicz-variant__name {
  font-size: 0.6875rem;
  line-height: 1.2;
  padding: var(--spacing-3xs, 0.25rem);
}