/*
    Front office - bloky karet kategorií.
    Prefix tříd: dmcategorycards- | CSS proměnné: --dmcategorycards-*

    Vzhled se ladí VÝHRADNĚ přes proměnné níže - web si je přebije ve svém CSS
    (nebo na .dmcategorycards-block) bez zásahu do modulu. Počet sloupců
    a rozměr obrázku plní šablona z nastavení bloku inline stylem.

    Žádné externí fonty ani knihovny (výkon / Core Web Vitals).
*/

.dmcategorycards-block {
    /* Rozměr karty z nastavení bloku - plní šablona inline */
    --dmcategorycards-card-width: 300px;
    --dmcategorycards-img-height: 220px;

    /* Vzhled - k přebití webem */
    --dmcategorycards-gap: 20px;
    --dmcategorycards-radius: 8px;
    --dmcategorycards-bg: #f6f6f6;
    --dmcategorycards-card-bg: #ffffff;
    --dmcategorycards-border: #e5e5e5;
    --dmcategorycards-text: #232323;
    --dmcategorycards-text-muted: #7a7a7a;
    --dmcategorycards-accent: #2fb5d2;
    --dmcategorycards-title-size: 2rem;
    --dmcategorycards-transition: 0.2s ease;

    /* auto = centrování v režimu "šířka stránky" (.container) - margin 0 by
       přebil margin:auto tématu (modulové CSS se načítá později); full-bleed
       si margin-left stejně počítá vlastním pravidlem níž */
    margin: 0 auto 2.5rem;
}

/* ==================== Šířka na stránce (full-bleed) ====================
   Vzor dmslider (.dmslider--bleed). */

/*
    Vylomení z užšího sloupce: šířka se počítá z viewportu a blok se vycentruje
    na střed okna. Rozložení je čistě CSS (fallback 100vw se vykreslí hned při
    prvním paintu, žádný skok layoutu / CLS) - front.js jen doladí
    --dmcategorycards-vw na šířku okna BEZ svislého scrollbaru (100vw ho
    počítá s sebou, blok by přetekl a udělal vodorovné rolování).
    POZOR: nefunguje, když má předek overflow: hidden - blok se ořízne.
*/
.dmcategorycards-block--full {
    --dmcategorycards-bleed-pad: 20px;

    width: calc(var(--dmcategorycards-vw, 100vw) - 2 * var(--dmcategorycards-bleed-pad));
    max-width: none;
    margin-left: calc(50% - var(--dmcategorycards-vw, 100vw) / 2 + var(--dmcategorycards-bleed-pad));
    margin-right: 0;
}

.dmcategorycards-title {
    margin: 0 0 0.25rem;
    color: var(--dmcategorycards-text);
    font-size: var(--dmcategorycards-title-size);
    font-weight: 700;
}

.dmcategorycards-subtitle {
    margin: 0 0 1.25rem;
    color: var(--dmcategorycards-text-muted);
}

.dmcategorycards-title + .dmcategorycards-viewport,
.dmcategorycards-subtitle + .dmcategorycards-viewport {
    margin-top: 1.5rem;
}

/* ==================== Mřížka / pás ==================== */

.dmcategorycards-viewport {
    position: relative;
}

/*
    Počet sloupců se nenastavuje: auto-fit vysází tolik stejně širokých
    sloupců, kolik se jich vejde při minimální šířce karty, a zbytek místa
    mezi ně rozdělí (1fr). Karta se tak nikdy neuřízne a při změně šířky okna
    (i po sbalení menu) se počet přepočítá sám, bez JS a bez breakpointů.
    min() ohlídá úzký mobil - karta nesmí být širší než dostupné místo.
*/
.dmcategorycards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--dmcategorycards-card-width), 100%), 1fr));
    gap: var(--dmcategorycards-gap);
}

/*
    Listování: místo zalomení do dalších řádků jeden vodorovný pás.
    Bez JS drží karty svou šířku z nastavení (poslední pak může vykukovat -
    běžné chování karuselu a čitelný signál, že je kam posouvat).
*/
.dmcategorycards-viewport--carousel .dmcategorycards-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(var(--dmcategorycards-card-width), 100%);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/*
    S JS je to přesné: front.js spočítá, kolik CELÝCH karet se vejde, zapíše
    to do --dmcategorycards-columns a označí pás atributem. Šířka stopy se pak
    dopočítá na přesný zlomek, takže na kraji nezůstane useknutá karta.
    (auto-fit v jednořádkovém pásu nefunguje a CSS neumí zaokrouhlit dolů.)
*/
.dmcategorycards-viewport--carousel[data-dmcategorycards-fitted] .dmcategorycards-list {
    grid-auto-columns: calc(
        (100% - (var(--dmcategorycards-columns) - 1) * var(--dmcategorycards-gap))
        / var(--dmcategorycards-columns)
    );
}

.dmcategorycards-viewport--carousel .dmcategorycards-list::-webkit-scrollbar {
    display: none;
}

.dmcategorycards-viewport--carousel .dmcategorycards-list > * {
    scroll-snap-align: start;
}

/* Uživatel s vypnutými animacemi nechce ani plynulé posouvání */
@media (prefers-reduced-motion: reduce) {
    .dmcategorycards-viewport--carousel .dmcategorycards-list {
        scroll-behavior: auto;
    }
}

/* ==================== Šipky listování ==================== */

.dmcategorycards-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: var(--dmcategorycards-accent);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: opacity var(--dmcategorycards-transition);
}

.dmcategorycards-arrow:hover {
    opacity: 0.85;
}

.dmcategorycards-arrow[hidden] {
    display: none;
}

.dmcategorycards-arrow--prev {
    left: -20px;
}

.dmcategorycards-arrow--next {
    right: -20px;
}

/* Full-bleed blok sahá až k okraji okna - přesah šipek -20px by vyrobil
   vodorovný posuv stránky (obsah "za rohem"), proto jedou dovnitř */
.dmcategorycards-block--full .dmcategorycards-arrow--prev {
    left: 8px;
}

.dmcategorycards-block--full .dmcategorycards-arrow--next {
    right: 8px;
}

/* Šipka jako CSS tvar - žádný ikonový font ani SVG navíc */
.dmcategorycards-arrow-icon {
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.dmcategorycards-arrow--next .dmcategorycards-arrow-icon {
    transform: translateX(-2px) rotate(45deg);
}

.dmcategorycards-arrow--prev .dmcategorycards-arrow-icon {
    transform: translateX(2px) rotate(-135deg);
}

/* ==================== Položka (společná pro obě varianty) ====================
   Značkování je pro obě varianty stejné, liší se jen vzhledem podle třídy
   bloku. Podkategorie se vypisují VŽDY, když jsou u snímku vybrané -
   na variantě vzhledu to nezávisí. */

.dmcategorycards-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dmcategorycards-item-link {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--dmcategorycards-text);
    text-decoration: none;
}

.dmcategorycards-item-link:hover,
.dmcategorycards-item-link:focus {
    color: var(--dmcategorycards-text);
    text-decoration: none;
}

/*
    Plochu obrázku držím rezervovanou i před jeho stažením (a i když položka
    obrázek nemá) - blok pak nepodskočí, až se dotáhne. Výška je z nastavení
    bloku, šířka se přizpůsobí sloupci.
*/
.dmcategorycards-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--dmcategorycards-img-height);
    padding: 0.75rem;
    border-radius: var(--dmcategorycards-radius);
    background: var(--dmcategorycards-bg);
    transition: transform var(--dmcategorycards-transition);
}

/* Obrázek je generovaný "contain" na průhledné pozadí - nesmí se znovu ořezat */
.dmcategorycards-item-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dmcategorycards-item-name {
    font-weight: 600;
}

/* ==================== Varianta "icons" - holá dlaždice ====================
   POZOR: děti se NESMÍ centrovat přes align-items: center - položka by se
   smrštila na obsah a plocha obrázku by ztratila pevnou šířku (width: 100%
   obrázku se pak počítá kruhem z jeho vlastní velikosti; iOS Safari to řeší
   kolapsem na úzký sloupec = "scucnuté" obrázky). Děti zůstávají roztažené
   na šířku sloupce, centruje se obsah: název text-align, podseznam margin. */

.dmcategorycards-block--icons .dmcategorycards-item-name {
    text-align: center;
}

/* Nadzvednutí jen u holé dlaždice - u karty se hýbe rámeček (viz níže) */
.dmcategorycards-block--icons .dmcategorycards-item-link:hover .dmcategorycards-item-image {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .dmcategorycards-block--icons .dmcategorycards-item-link:hover .dmcategorycards-item-image {
        transform: none;
    }
}

/* ==================== Varianta "cards" - karta v rámečku ==================== */

.dmcategorycards-block--cards .dmcategorycards-item {
    padding: 1.25rem;
    border: 1px solid var(--dmcategorycards-border);
    border-radius: var(--dmcategorycards-radius);
    background: var(--dmcategorycards-card-bg);
    transition: border-color var(--dmcategorycards-transition);
}

.dmcategorycards-block--cards .dmcategorycards-item:hover {
    border-color: var(--dmcategorycards-accent);
}

.dmcategorycards-block--cards .dmcategorycards-item-name {
    font-size: 1.125rem;
    font-weight: 700;
}

/* ==================== Podkategorie (obě varianty) ==================== */

.dmcategorycards-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmcategorycards-subitem {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

/*
    U vycentrované dlaždice se centruje CELÝ seznam jako blok, ne každý řádek
    zvlášť - jinak odrážky nesedí pod sebou a výpis je roztřepený.
*/
.dmcategorycards-block--icons .dmcategorycards-sublist {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dmcategorycards-subitem + .dmcategorycards-subitem {
    margin-top: 0.5rem;
}

/* Odrážka jako CSS tvar - žádný ikonový font ani obrázek navíc.
   Web si ji přebije barvou (nebo schová přes --dmcategorycards-bullet-size: 0) */
.dmcategorycards-subitem::before {
    content: "";
    flex: 0 0 auto;
    width: var(--dmcategorycards-bullet-size, 6px);
    height: var(--dmcategorycards-bullet-size, 6px);
    border-radius: 50%;
    background: var(--dmcategorycards-bullet-color, var(--dmcategorycards-accent));
}

.dmcategorycards-sublink {
    color: var(--dmcategorycards-accent);
    text-decoration: underline;
}

.dmcategorycards-sublink:hover {
    color: var(--dmcategorycards-accent);
}

/* ==================== Tlačítko pod blokem ==================== */

.dmcategorycards-actions {
    margin-top: 1.75rem;
    text-align: center;
}

.dmcategorycards-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--dmcategorycards-text);
    border-radius: var(--dmcategorycards-radius);
    color: var(--dmcategorycards-text);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--dmcategorycards-transition), color var(--dmcategorycards-transition);
}

.dmcategorycards-button:hover,
.dmcategorycards-button:focus {
    background: var(--dmcategorycards-text);
    color: #ffffff;
    text-decoration: none;
}

/* ==================== Responzivita ====================
   Počet sloupců řeší auto-fit sám (viz .dmcategorycards-list), breakpointy
   proto jen dolaďují drobnosti na mobilu. */

@media (max-width: 767px) {
    .dmcategorycards-block {
        --dmcategorycards-gap: 12px;
        --dmcategorycards-title-size: 1.5rem;
    }

    /* Na úzkém displeji by šipky u kraje překryly obsah karty */
    .dmcategorycards-arrow--prev {
        left: 0;
    }

    .dmcategorycards-arrow--next {
        right: 0;
    }
}