/* Úvod a kategorie: hero, dlaždice kategorií, galerie s vlastními daty. Načítá se jen na úvodu a v kategoriích. */

/* Hero */
.hero { padding: var(--m-6) 0 var(--m-5); overflow: hidden; }
.hero__obal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--m-6); align-items: center; }
.hero__nadpis { font-size: var(--t-4xl); margin-bottom: var(--m-3); }
.hero__perex { font-size: var(--t-l); color: var(--inkoust-2); max-width: 32em; margin-bottom: var(--m-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--m-3); margin-bottom: var(--m-5); }
.hero__karty { aspect-ratio: 5 / 4; width: 100%; }
.hero__karty > .vejir__karta { --vypln: .62; }
.hero__karty > .vejir__karta:nth-child(1) { --x: -18cqw; --y: -10cqh; --r: -10deg; }
.hero__karty > .vejir__karta:nth-child(2) { --x: 17cqw; --y: -8cqh; --r: 7deg; }
.hero__karty > .vejir__karta:nth-child(3) { --x: 2cqw; --y: 14cqh; --r: -2deg; }
.hero__karty.vejir--5 > .vejir__karta { --vypln: .5; }
.hero__karty.vejir--5 > .vejir__karta:nth-child(1) { --x: -22cqw; --y: -22cqh; --r: -9deg; }
.hero__karty.vejir--5 > .vejir__karta:nth-child(2) { --x: 10cqw; --y: -24cqh; --r: 6deg; }
.hero__karty.vejir--5 > .vejir__karta:nth-child(3) { --x: 34cqw; --y: 8cqh; --r: 10deg; }
.hero__karty.vejir--5 > .vejir__karta:nth-child(4) { --x: -34cqw; --y: 22cqh; --r: -10deg; }
.hero__karty.vejir--5 > .vejir__karta:nth-child(5) { --x: -2cqw; --y: 16cqh; --r: -2deg; }
.hero__karty .vejir__karta { box-shadow: var(--stin-2); }
@media (hover: hover) {
  .hero__karty > .vejir__karta:hover { --s: 1.14; --r: 0deg; z-index: 5; box-shadow: var(--stin-3); }
  .hero__karty:hover > .vejir__karta:not(:hover) { filter: saturate(.85) brightness(.97); }
}
@media (max-width: 860px) {
  .hero { padding-top: var(--m-5); }
  .hero__obal { grid-template-columns: 1fr; gap: var(--m-2); }
  .hero__karty { aspect-ratio: 16 / 9; max-width: 520px; margin: 0 auto; order: -1; }
  .hero__perex { font-size: var(--t-m); }
  .hero__cta .tlacitko { flex: 1 1 200px; }
}

/* Živé karty (galerie s vlastními daty) */
.galerie__karta img, .hero__karta img, .vejir__karta img { transition: opacity .25s; }
.galerie__platno { opacity: 0; transition: opacity .25s; }
.galerie__karta--ziva .galerie__platno { opacity: 1; }
.galerie__karta--ziva img { opacity: 0; }
.galerie__karta--ziva { background: transparent; }

/* Dlaždice kategorií po skupinách */
.skupina + .skupina { margin-top: var(--m-7); }
.skupina__hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--m-1) var(--m-4); margin-bottom: var(--m-4); }
.skupina__nadpis { margin: 0; font-size: var(--t-xl); }
.skupina__perex { margin: 0; color: var(--inkoust-2); font-size: var(--t-s); }
.dlazdice-kategorii { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--m-4); list-style: none; margin: 0; padding: 0; }
.dlazdice-kategorii > li { display: flex; }
.dlazdice { flex: 1; display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--bila); text-decoration: none; color: var(--inkoust); box-shadow: var(--stin-1); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.dlazdice:hover { color: var(--inkoust); box-shadow: var(--stin-2); transform: translateY(-2px); }
.dlazdice__scena { display: block; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 60%, var(--slunce-svetle), var(--papir-2) 70%); }
.dlazdice:hover .vejir--2 > .vejir__karta:nth-child(1), .dlazdice:hover .vejir--3 > .vejir__karta:nth-child(1) { --r: -11deg; --x: -19cqw; }
.dlazdice:hover .vejir--2 > .vejir__karta:nth-child(2), .dlazdice:hover .vejir--3 > .vejir__karta:nth-child(2) { --r: 10deg; --x: 19cqw; }
.dlazdice:hover .vejir--1 > .vejir__karta { --r: 2deg; }
.dlazdice__text { display: flex; flex-direction: column; gap: 2px; padding: var(--m-3) var(--m-4) var(--m-4); flex: 1; }
.dlazdice__nazev { font: 800 var(--t-l)/1.2 var(--pismo-nadpis); }
.dlazdice__perex { font-size: var(--t-s); color: var(--inkoust-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dlazdice__pocet { margin-top: auto; padding-top: var(--m-2); font-size: var(--t-xs); font-weight: 800; color: var(--akcent-tmavy); }
.dlazdice__pocet::after { content: " →"; }
@media (max-width: 560px) {
  .dlazdice-kategorii { grid-template-columns: 1fr 1fr; gap: var(--m-3); }
  .dlazdice__text { padding: var(--m-2) var(--m-3) var(--m-3); }
  .dlazdice__nazev { font-size: var(--t-m); }
  .dlazdice__perex { display: none; }
}

/* Galerie šablon: jednotné kartičky s náhledem ve stejně vysokém rámečku */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--m-5) var(--m-4); list-style: none; margin: 0; padding: 0; }
.galerie > li { display: flex; }
.galerie__polozka { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--m-2) var(--m-2) var(--m-3); border-radius: var(--r-l); text-decoration: none; color: var(--inkoust); transition: background-color .2s; }
.galerie__polozka:hover { color: var(--inkoust); background: var(--bila); }
.sekce--pruh .galerie__polozka:hover { background: var(--papir); }
.galerie__polozka .nahled { margin-bottom: var(--m-2); }
.galerie__polozka .nahled__produkt { transition: transform .25s cubic-bezier(.3, .9, .3, 1.2), box-shadow .25s; }
.galerie__polozka:hover .nahled__produkt { transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--stin-2); }
.galerie__polozka:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* Otočení na rub při najetí myší: celá karta se otočí a v půlce otáčky se ukáže rub (zrcadlený zpět, aby se četl). */
.galerie__rub { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0s .18s; background: var(--bila); }
.nahled__produkt--cire .galerie__rub { background: transparent; }
.galerie__rub > img, .galerie__rub > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.galerie__karta--osa-y .galerie__rub { transform: scaleX(-1); }
.galerie__karta--osa-x .galerie__rub { transform: scaleY(-1); }
.galerie__karta--ziva .galerie__rub > img { opacity: 1; }
.galerie__rub > canvas { opacity: 0; }
.galerie__karta .galerie__rub--ziva > img { opacity: 0; }
.galerie__karta .galerie__rub--ziva > canvas { opacity: 1; }
.galerie__polozka .galerie__karta--rub { transition: transform .45s cubic-bezier(.45, .05, .25, 1), box-shadow .25s; }
@media (hover: hover) {
  .galerie__polozka:hover .galerie__karta--osa-y { transform: perspective(900px) translateY(-4px) rotateY(180deg); }
  .galerie__polozka:hover .galerie__karta--osa-x { transform: perspective(900px) translateY(-4px) rotateX(180deg); }
  .galerie__polozka:hover .galerie__rub { opacity: 1; }
}
.galerie__kategorie { font-size: var(--t-xs); font-weight: 700; color: var(--inkoust-2); text-transform: uppercase; letter-spacing: .06em; }
.galerie__nazev { font-weight: 800; line-height: 1.3; }
.galerie__cena { font-size: var(--t-s); color: var(--inkoust-2); }
.galerie__polozka::after { content: "Vyplnit a objednat →"; margin-top: auto; padding-top: var(--m-1); font-size: var(--t-s); font-weight: 800; color: var(--akcent-tmavy); }
@media (max-width: 560px) {
  .galerie { grid-template-columns: 1fr 1fr; gap: var(--m-3) var(--m-2); }
  .galerie__polozka { padding: var(--m-1) var(--m-1) var(--m-2); }
  .galerie__nazev { font-size: var(--t-s); }
  .galerie__cena, .galerie__polozka::after { font-size: var(--t-xs); }
}

/* Box „vyzkoušejte se svými údaji“ (úvod i kategorie, _pages/kategorie/tpl/_zkus.tpl). Teplé žluté pozadí ho odliší
   od stránky, nelepí se: galerie je krátká a lepivý pruh zakrýval karty. Na mobilu je sbalený do jednoho tlačítka. */
.zkus { margin-block: var(--m-2) var(--m-6); }
.zkus__box { display: grid; gap: var(--m-4); padding: var(--m-5); border-radius: var(--r-l); background: var(--slunce-pozadi); border: 1px solid var(--slunce-hrana); box-shadow: var(--stin-1); }
.zkus__hlava { display: flex; align-items: center; gap: var(--m-4); }
.zkus__ikona { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--slunce); color: var(--inkoust); box-shadow: inset 0 0 0 2px var(--slunce-hrana); transform: rotate(-6deg); }
.zkus__uvod { flex: 1; min-width: 0; }
.zkus__nadpis { margin: 0; font-size: var(--t-xl); line-height: 1.15; }
.zkus__text { margin: 2px 0 0; font-size: var(--t-s); color: var(--inkoust-2); }
.zkus__pole { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--m-3) var(--m-4); }
.zkus__pole .pole { flex: 1 1 200px; gap: 4px; margin: 0; }
.zkus__pole .pole label, .zkus__pole .pole__popisek { font-size: var(--t-s); }
.zkus__pole .pole--soubor { flex: 0 0 auto; }
.zkus__foto { position: relative; min-width: 190px; }
.zkus__foto:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }
.zkus__pata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-2) var(--m-4); }
.zkus__pata:has(> .zkus__stav:empty):has(> .zkus__smazat[hidden]) { display: none; }
.zkus__stav { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px 4px 8px; border-radius: var(--r-kruh); background: var(--uspech-pozadi); color: var(--uspech); font-size: var(--t-s); font-weight: 800; line-height: 1.3; }
.zkus__stav::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.5' fill='none' stroke='%2305634b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.zkus__stav[data-druh="info"] { background: var(--info-pozadi); color: var(--info); }
.zkus__stav[data-druh="chyba"] { background: var(--chyba-pozadi); color: var(--chyba); }
.zkus__stav[data-druh="info"]::before, .zkus__stav[data-druh="chyba"]::before { display: none; }
.zkus__stav:empty { display: none; }
.zkus__smazat { margin-left: auto; min-height: 40px; color: var(--inkoust-2); font-weight: 700; }
.zkus__otevrit, .zkus__sbalit { display: none; }
@media (min-width: 861px) {
  .zkus--kompaktni .zkus__box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--m-6); }
  .zkus--kompaktni .zkus__hlava { align-self: center; }
  .zkus--kompaktni .zkus__pata { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .zkus { margin-block: 0 var(--m-4); }
  .zkus__box { padding: var(--m-4); gap: var(--m-3); border-radius: var(--r-m); }
  .zkus__ikona { width: 44px; height: 44px; }
  .zkus__ikona--mala { width: 32px; height: 32px; }
  .zkus__nadpis { font-size: var(--t-l); }
  .zkus__pole .pole, .zkus__pole .pole--soubor, .zkus__foto { flex: 1 1 100%; width: 100%; }
  .zkus__hlava { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--m-2) var(--m-3); }
  .zkus__uvod { display: contents; }
  .zkus__nadpis { grid-area: 1 / 2; }
  .zkus__text { grid-area: 2 / 1 / 3 / -1; margin: 0; }
  .zkus__sbalit { grid-area: 1 / 3; }
  .zkus--js .zkus__otevrit { display: flex; align-items: center; gap: var(--m-3); width: 100%; min-height: 56px; padding: var(--m-2) var(--m-4) var(--m-2) var(--m-2); border: 1px solid var(--slunce-hrana); border-radius: var(--r-kruh); background: var(--slunce-pozadi); box-shadow: var(--stin-1); font: 800 var(--t-m)/1.2 var(--pismo); color: var(--inkoust); text-align: left; cursor: pointer; }
  .zkus__otevrit-text { flex: 1; }
  .zkus--js .zkus__sbalit { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 var(--m-3); border: 0; border-radius: var(--r-kruh); background: none; font: 700 var(--t-s)/1 var(--pismo); color: var(--inkoust-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .zkus--js:not(.zkus--otevreny) .zkus__box, .zkus--otevreny .zkus__otevrit { display: none; }
}

/* Kategorie: filtrační štítky podkategorií (Mazlíčci: Vše, Pes, Kočka, Další zvířata), obyčejné odkazy bez JS */
.kat-filtr { margin-top: var(--m-4); }
.kat-filtr__seznam { display: flex; flex-wrap: wrap; gap: var(--m-2); list-style: none; margin: 0; padding: 0; }
.kat-filtr__stitek { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--m-4); border: 2px solid var(--linka-pole); border-radius: var(--r-kruh); background: var(--bila); color: var(--inkoust); font-weight: 800; font-size: var(--t-s); text-decoration: none; }
.kat-filtr__stitek:hover { border-color: var(--inkoust); color: var(--inkoust); }
.kat-filtr__stitek[aria-current] { border-color: var(--inkoust); background: var(--inkoust); color: var(--bila); }

/* Kategorie: galerie, informace a další kategorie */
.kat-galerie { padding-bottom: var(--m-7); }
.kat-info__obal { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--m-7); align-items: start; }
.kat-info__obal > :only-child { grid-column: 1 / -1; max-width: 792px; }
.seo-text { font-size: var(--t-s); color: var(--inkoust-2); }
.seo-text h2 { margin-top: 1.2em; font-size: var(--t-xl); color: var(--inkoust); }
.seo-text > :first-child { margin-top: 0; }
.seo-text h3 { margin-top: 1.2em; font-size: var(--t-l); color: var(--inkoust); }
.seo-text > :last-child { margin-bottom: 0; }
.kat-info .faq details { background: var(--papir); box-shadow: none; border: 1px solid var(--linka); }
.kat-info .faq h2 { font-size: var(--t-xl); }
.kat-dalsi { padding-block: var(--m-6) 0; }
.kat-dalsi__nadpis { font-size: var(--t-l); }
.odkazy-stitky { list-style: none; display: flex; flex-wrap: wrap; gap: var(--m-2); padding: 0; margin: 0; }
.odkazy-stitky a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--m-4); border-radius: var(--r-kruh); background: var(--bila); border: 1px solid var(--linka); color: var(--inkoust); font-weight: 700; font-size: var(--t-s); text-decoration: none; }
.odkazy-stitky a:hover { border-color: var(--inkoust); color: var(--inkoust); }
@media (max-width: 860px) { .kat-info__obal { grid-template-columns: 1fr; gap: var(--m-6); } }

/* Úvod: jak to funguje */
.vlastni-cesty { margin: var(--m-5) 0 0; color: var(--inkoust-2); }

@media (prefers-reduced-motion: reduce) {
  .galerie__karta img, .galerie__platno, .galerie__polozka .nahled__produkt, .dlazdice { transition: none; }
  .galerie__polozka:hover .galerie__karta--osa-y, .galerie__polozka:hover .galerie__karta--osa-x { transform: translateY(-4px); }
  .galerie__karta .galerie__rub { transform: none; transition: opacity .2s; }
}
.seo-text > h2:first-child { font-size: var(--t-2xl); }

/* Řazení výpisu kategorie */
.kat-razeni { display: flex; align-items: center; justify-content: flex-end; gap: var(--m-2); margin: 0 0 var(--m-4); font-size: var(--t-s); font-weight: 700; color: var(--inkoust-2); }
.kat-razeni select { min-height: 44px; padding: 0 var(--m-3); border: 2px solid var(--linka-pole); border-radius: var(--r-m, 10px); background: var(--bila); color: var(--inkoust); font: inherit; font-weight: 700; }
.kat-razeni select:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Výzva na konci kategorie: vlastní design nebo vlastní grafika */
.kat-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-4); margin-top: var(--m-7); padding: var(--m-5) var(--m-6); border-radius: var(--r-l); background: var(--slunce-svetle); border: 2px dashed var(--slunce-hrana); }
.kat-cta__text h2 { margin: 0 0 var(--m-1); font-size: var(--t-xl); }
.kat-cta__text p { margin: 0; max-width: 52ch; color: var(--inkoust-2); }
.kat-cta__akce { display: flex; flex-wrap: wrap; gap: var(--m-2); }
@media (max-width: 560px) { .kat-cta { padding: var(--m-4); } .kat-cta__akce { width: 100%; } .kat-cta__akce .tlacitko { flex: 1 1 100%; } }