/* ============================================================
   Katalog vystavovatelů – opravy vzhledu (1.9.10)
   Načítá se SAMOSTATNĚ přes wp_enqueue_style s verzí filemtime (inc/katalog.php),
   priorita 30 + závislost custom-frontend-styles → v kaskádě AŽ ZA additionalStyle.css
   a Webflow exportem. NE přes @import (ten jde bez ?ver= a Cloudflare ho drží v cache).
   Selektory cílí jen na markup katalogu (custom-endpoints.js šablony a blok
   custom/block-katalog-vystavovatelu); jiné bloky třídy nepoužívají.
   ============================================================ */

/* Bod 1 A – loga vystavovatelů (karta seznamu i detail; obojí nese .company-detail-katalog-link-new).
   Dřív: img width:100% + object-fit:cover v obalu, který flex smrštil → na 375 px logo 33×7 px,
   na 326 px 0×0 a vysoká loga oříznutá. Nově: obal se nesmršťuje, logo se vejde celé. */
.company-detail-katalog-link-new .logo {
    flex: 0 0 auto;
    max-width: 40%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.company-detail-katalog-link-new .logo img {
    width: auto;
    max-width: min(176px, 100%);
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

/* Textový sloupec vedle loga smí být užší než nejdelší slovo (jinak vytlačí logo). Platí pro sloupce,
   které jsou přímými potomky .flex-row uvnitř karty/detailu (ne pro každé .flex-column). Postroj 1.9.10:
   v detailu se kromě loga nic nezměnilo (desktop 0 px, mobil jen rozměr loga). */
.company-detail-katalog-link-new .flex-row > .flex-column {
    min-width: 0;
}

.company-detail-katalog-link-new .company-name {
    overflow-wrap: anywhere;
}

/* Bod 1 A + L3 – loga značek ve filtru: dřív pevně 40×40 (additionalStyle.css), v P až 96×48, od L3 omezená jen
   výškou: 40 px (pod 768 px 32 px), šířka podle poměru stran, nejvýš polovina boxu (.img níže). contain = celé logo
   bez ořezu a deformace; když je logo širší než polovina boxu, zmenší se celé (výška obsahu pak < 40 px).
   display:block – bez řádkového boxu kolem obrázku (logo přesně na svislém středu boxu). */
.catalog-filter-detail--box.brand-filter .img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 40px;
    object-fit: contain;
    object-position: right center;
}

@media screen and (max-width: 767px) {
    .catalog-filter-detail--box.brand-filter .img img {
        height: 32px;
    }
}

/* Značka bez loga (třídu přidává JS katalogu od J1): jen název, bez prázdného místa po obrázku.
   Dokud JS třídu nepřidává, pravidlo nic nedělá. */
.catalog-filter-detail--box.brand-filter--bez-loga .img {
    display: none;
}

/* L1 + L3 – název značky ve filtru vždy u levého okraje boxu: logo (je-li) až za názvem, vpravo (JS dává logo
   v DOM před název, pořadí jen přes order). Mezera název ↔ logo = gap boxu 16 px (additionalStyle.css).
   L3: obal loga nejvýš polovina boxu a nesmršťuje se – dlouhý název se zalomí, logo se kvůli němu nezmenší. */
.catalog-filter-detail--box.brand-filter > .img {
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    max-width: 50%;
}

.catalog-filter-detail--box.brand-filter > .list-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* L1 – karta a detail firmy bez řádku „Hala - stánek“ s logem (třídu abf-bez-haly přidává JS katalogu):
   logo obtéká název i popis, takže pod názvem nezůstane prázdné místo do výšky loga (až 80 px).
   JS dává logo v DOM před název (s order:2 pro flex bez tohoto CSS). Karty a detail s halou se nemění. */

/* Karta (seznam): vždy. Mezera logo ↔ text 16 px = gap-16px původní flex-row. */
.company-detail-katalog-link-new.abf-bez-haly {
    display: flow-root;
}

.company-detail-katalog-link-new.abf-bez-haly > .flex-row {
    display: contents;
}

.company-detail-katalog-link-new.abf-bez-haly > .flex-row > .logo {
    float: right;
    margin: 0 0 0 16px;
}

/* Karta: mezera název → popis = gap-16px karty (detail má mezeru 0, popis má vlastní padding).
   Na popisu, ne na názvu: karta bez popisu (nebo s logem odstraněným po chybě načtení) se nezvětší. */
.company-detail-katalog-link-new.abf-bez-haly > .paragraph.under-list {
    margin-top: 16px;
}

/* L2 + P2 (U3) – karta pod 768 px: popis se nikdy nerozdělí na „řádek vedle loga + zbytek celou šířkou pod logem“
   (osiřelý řádek, nález L2-1).
   561–767 px (tablet na výšku, P2 U3): display:flow-root = nový formátovací kontext, který plovoucí logo neobtéká.
   Začíná-li box popisu (včetně 8 px paddingu .shady-text) vedle loga, je popis celý SLOUPEC vlevo od loga (všechny
   řádky stejně široké, pod logem zůstane volno – karta jako dva sloupce: text | logo). Začíná-li až pod logem (nízké
   logo, dlouhý název), má popis celou šířku karty (mezera pod logem ≥ 8 px + půl řádku; měřeno nejméně 11 px).
   Do 560 px (L2, beze změny): vedle loga jen název, popis celou šířkou pod logem. clear by margin-top pohltil
   (popis by se lepil na logo), proto mezera jako padding: 16 px (= gap-16px původní karty) + 8 px vlastního paddingu
   .shady-text → text popisu začíná 24 px pod spodkem loga nebo názvu (podle toho, co je níž), stejně jako před L1.
   flow-root platí na všech šířkách do 767 px (do 560 px ho clear:both jen posune pod logo – vzhled stejný jako L2,
   změřeno), aby mezi 560 a 561 px (zlomkové šířky při zvětšení) nevzniklo pásmo s obtékáním. Od 768 px beze změny (L1);
   zlomkové šířky 767–768 px mají jako celý plugin a Webflow (hranice 767/768) chování desktopu, beze změny proti L2.
   Selektor jen pro karty seznamu (li.companies-list-item; detail má abf-bez-haly na jiném prvku). */
@media screen and (max-width: 767px) {
    .companies-list-item > .company-detail-katalog-link-new.abf-bez-haly > .paragraph.under-list {
        display: flow-root;
    }
}

@media screen and (max-width: 560px) {
    .companies-list-item > .company-detail-katalog-link-new.abf-bez-haly > .paragraph.under-list {
        clear: both;
        margin-top: 0;
        padding-top: 24px;
    }
}

/* P2 (U4) – logo karty v seznamu pod 768 px menší: výška nejvýš 56 px (dřív 80), šířka nejvýš 124 px (dřív 176,
   stejný poměr 0,7) – celé logo (contain), poměr stran beze změny. U krátkého názvu (ABF, MG) tak pod názvem
   nezůstává velké prázdné místo do výšky loga a delší názvy mají vedle loga víc místa. Jen karty seznamu
   (li.companies-list-item), detail firmy a filtr značek beze změny; od 768 px beze změny. */
@media screen and (max-width: 767px) {
    .companies-list-item > .company-detail-katalog-link-new .logo img {
        max-width: min(124px, 100%);
        max-height: 56px;
    }
}

/* P2 (U5) – dlouhé názvy karet seznamu pod 768 px: zalomení jen mezi slovy; uvnitř slova jen slovo širší než celá
   karta (dlouhá složenina, adresa webu, úsek s pevnými mezerami). Čisté CSS, bez JS, pro VŠECHNY seznamy karet
   (hlavní, detail státu/značky/oboru, hala v plánu, FOR GARDEN i seznamy vložené později) – selektor nezávisí
   na seznamu, jen na kartě li.companies-list-item > a.company-detail-katalog-link-new.
   Proč dřív „LANDTECHNI / K“: sloupec názvu (.flex-column, flex = vlastní formátovací kontext) stojí vedle plovoucího
   loga; overflow-wrap:anywhere (bod 1 A) zmenší jeho min-content na jeden znak, takže sloupec zůstane vedle loga
   a slovo se zlomí kdekoli.
   - Karta bez haly s logem (.abf-bez-haly, logo float vpravo): min-width:min-content sloupce = nejdelší slovo
     názvu, ale nejvýš šířka karty (max-width 100cqw názvu; karta je kontejner). Nevejde-li se nejdelší slovo vedle
     loga, sloupec (BFC) se celý posune pod logo a má plnou šířku karty; slovo širší než karta zlomí break-word.
     (break-word nemění min-content, anywhere ano – proto break-word.)
   - Karta s halou nebo bez loga (flex řádek název | logo): wrap-reverse – nevejde-li se nejdelší slovo vedle loga,
     logo přejde na řádek NAD název (vpravo), název má plnou šířku. Slovo širší než karta zlomí break-word.
   Měřeno v Chromiu i WebKitu (P2b/rozhodnuti-U5.md): 0 přetečení, 0 zbytečných zlomů uprostřed slova; ≥ 768 px
   beze změny. Bez podpory container queries (Safari < 16, Chrome < 105, Firefox < 110) zůstává anywhere (bod 1 A):
   zlom uprostřed slova, ale nikdy přetečení. Inline-size containment karty: karta nepřispívá obsahem do
   max-content rodiče – v zobrazení haly v plánu má proto seznam na 741–767 px stejnou šířku jako plán haly (574 px
   místo 590 px na 767 px; ohlášeno). */
@supports (container-type: inline-size) and (max-width: 1cqw) {
    @media screen and (max-width: 767px) {
        .companies-list-item > .company-detail-katalog-link-new {
            container-type: inline-size;
        }

        .companies-list-item > .company-detail-katalog-link-new .company-name {
            overflow-wrap: break-word;
        }

        .companies-list-item > .company-detail-katalog-link-new.abf-bez-haly > .flex-row > .flex-column {
            min-width: min-content;
        }

        .companies-list-item > .company-detail-katalog-link-new.abf-bez-haly .company-name {
            max-width: 100cqw;
        }

        .companies-list-item > .company-detail-katalog-link-new:not(.abf-bez-haly) > .flex-row {
            flex-wrap: wrap-reverse;
        }

        .companies-list-item > .company-detail-katalog-link-new:not(.abf-bez-haly) > .flex-row > .flex-column {
            flex: 1 1 0%;
            min-width: auto;
            max-width: 100%;
        }

        .companies-list-item > .company-detail-katalog-link-new:not(.abf-bez-haly) > .flex-row > .logo {
            margin-left: auto;
        }
    }
}

/* Detail firmy: jen od 768 px. Mezera logo ↔ text 0 = flex-row hlavičky detailu nemá gap, název se proto
   láme stejně jako dřív. Pod 768 px zůstává původní flex (logo vpravo vedle názvu): úzký sloupec popisu vedle
   loga by tam hlavičku spíš prodloužil (opravné kolo 1, měření hlaviček všech firem 375/326 px). */
@media screen and (min-width: 768px) {
    .company-detail-wrapper-new #readHeight > .abf-bez-haly {
        display: flow-root;
    }

    .company-detail-wrapper-new #readHeight > .abf-bez-haly > .flex-row {
        display: contents;
    }

    .company-detail-wrapper-new #readHeight > .abf-bez-haly > .flex-row > .logo {
        float: right;
        margin: 0;
    }
}

/* L1 – stát v adrese (hlavní i pobočka) je odkaz na filtr STÁTY: barva jako obory a značky v detailu,
   v textu adresy navíc podtržení při najetí a fokusu (odliší se od okolního textu nejen barvou). */
.company-info-list-text a.catalog-filter-link[data-filter-type="country"]:hover,
.company-info-list-text a.catalog-filter-link[data-filter-type="country"]:focus-visible {
    text-decoration: underline;
}

/* L2 (nahrazuje zálohu 2 A) – pozadí brandwrapperu (obrázek pozadí bloku katalogu) se na tabletu a telefonu
   nezobrazuje: na úzké obrazovce z něj byl vidět jen výřez nebo úzký proužek kolem obsahu (rozhodnutí 7. 10.).
   Obrázek je v inline stylu bloku (save()), proto !important. Reklamní obrázek bloku (img.ad-image) se nemění.
   Desktop (≥ 992 px) beze změny. */
@media (max-width: 991px) {
    .wp-block-custom-block-bgimg {
        background-image: none !important;
    }
}

/* ── PR6 – záložky souběžných katalogů podle návrhu („složkové“ karty) ──
   Markup: custom-endpoints.js šablony (renderCatalogSourceTabs) – jen když má web víc katalogů
   (option veletrh_catalog_sources): .content-container--katalog-vystavovatelu >
   .catalog-source-tabs-shell > .catalog-source-tabs[role=tablist] > button.catalog-source-tab[.is-active].
   Návrh (snímek okna 1512 px, měřítko 0,711, PR6-zalozky/SPEC.md): Lato 600 20 px verzálky, karta 48 px,
   odsazení textu 32 px, mezera 9 px, horní rohy jako blok; aktivní karta má výplň bloku a plynule do něj
   přechází, neaktivní jsou bílé s tenkým rámečkem bez spodní čáry; 1. karta u levé hrany bloku.
   Přebíjí dnešní pilulky v additionalStyle.css (13 px, rohy 8 px, aktivní červená) – ty zůstávají jen
   jako záloha pro případ, že by katalog.css chyběl. Vše omezeno na kontejner katalogu.
   Karty jsou vždy v jedné řadě (druhá řada by se od bloku odtrhla); když se nevejdou, obal se posouvá
   vodorovně (prstem, trackpadem, Shift+kolečko; Tab posune fokusovanou kartu do pohledu). Na dotykových
   zařízeních je posuvník skrytý (ležel by mezi kartami a blokem); s myší zůstává tenký posuvník, aby bylo
   vidět, že karet je víc – objeví se jen při přetečení, tj. ve vzácném případě 3+ dlouhých názvů pod 992 px.
   Obrys fokusu je uvnitř karty – obal s overflow by vnější obrys ořízl.
   Řez 600: sytost textu podle kalibrovaného měření ověřovatele 1,02–1,03 vůči návrhu (700 = 0,92); Lato 600
   je v kitu Typekit (npe6ecj, řezy 100–900), prohlížeč ho stáhne, až ho karta použije.
   Pojistka proti vlasové čáře pod aktivní kartou (WebKit při zvětšení 125 %: spodek karty i horní hrana
   bloku padnou na půl pixelu displeje a oba okraje se vyhladí do bílé): aktivní karta přesahuje stínem
   1 px v barvě bloku přes jeho horní hranu. Obal má proto 1 px dole navíc (padding) a stejně tolik záporný
   okraj, aby stín neořízl overflow a nic pod ním se neposunulo. */
.content-container--katalog-vystavovatelu > .catalog-source-tabs-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 -1px;
    padding: 0 0 1px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--30-gray, #b5b9bd) transparent;
}

@media (hover: none) and (pointer: coarse) {
    .content-container--katalog-vystavovatelu > .catalog-source-tabs-shell {
        scrollbar-width: none;
    }

    .content-container--katalog-vystavovatelu > .catalog-source-tabs-shell::-webkit-scrollbar {
        display: none;
    }
}

.content-container--katalog-vystavovatelu .catalog-source-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 9px;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

.content-container--katalog-vystavovatelu .catalog-source-tab {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 48px;
    margin: 0;
    padding: 0 32px;
    border: 1px solid #e8e8e8;
    border-bottom-width: 0;
    border-radius: var(--button-radius, 6px) var(--button-radius, 6px) 0 0;
    background-color: #fff;
    color: #191919;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.content-container--katalog-vystavovatelu .catalog-source-tab:hover {
    border-color: var(--30-gray, #b5b9bd);
    color: #191919;
}

/* aktivní = výplň bloku (.newsletter-card-wrapper: var(--3-gray)), rámeček ve stejné barvě → žádná čára */
.content-container--katalog-vystavovatelu .catalog-source-tab.is-active,
.content-container--katalog-vystavovatelu .catalog-source-tab.is-active:hover {
    background-color: var(--3-gray, #f9f9f9);
    border-color: var(--3-gray, #f9f9f9);
    box-shadow: 0 1px 0 0 var(--3-gray, #f9f9f9);
    color: #191919;
    cursor: default;
}

.content-container--katalog-vystavovatelu .catalog-source-tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -5px;
}

/* Safari 15.0–15.3 :focus-visible nezná – tam obrys při každém fokusu (jinak by vnější obrys ořízl obal). */
@supports not selector(:focus-visible) {
    .content-container--katalog-vystavovatelu .catalog-source-tab:focus {
        outline: 2px solid currentColor;
        outline-offset: -5px;
    }
}

/* Blok pod kartami: levý horní roh rovně (první karta stojí na rohu), pravý zůstává zaoblený. */
.content-container--katalog-vystavovatelu > .catalog-source-tabs-shell + .newsletter-card-wrapper {
    border-top-left-radius: 0;
}

/* Tři a víc katalogů: blok je na webu široký nejvýš 992 px (v návrhu ~1180 px), takže by se tři dlouhé
   názvy z návrhu (HOLIDAY WORLD & REGION WORLD …) ve 20 px nevešly. Kompaktnější karty je udrží v jedné
   řadě bez posouvání (3 názvy z návrhu v Lato: ~881 px; do 1200 px ~833 px, blok tam má 872–893 px).
   Dva katalogy (e-SALON) beze změny. */
@media screen and (min-width: 768px) {
    .content-container--katalog-vystavovatelu .catalog-source-tab:first-child:nth-last-child(n+3),
    .content-container--katalog-vystavovatelu .catalog-source-tab:first-child:nth-last-child(n+3) ~ .catalog-source-tab {
        padding: 0 24px;
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .content-container--katalog-vystavovatelu .catalog-source-tab:first-child:nth-last-child(n+3),
    .content-container--katalog-vystavovatelu .catalog-source-tab:first-child:nth-last-child(n+3) ~ .catalog-source-tab {
        padding: 0 16px;
    }
}

/* Telefon (návrh mobil nemá): menší karty, dál v jedné řadě, při přetečení vodorovné posouvání. */
@media screen and (max-width: 767px) {
    .content-container--katalog-vystavovatelu .catalog-source-tabs {
        gap: 6px;
    }

    .content-container--katalog-vystavovatelu .catalog-source-tab {
        height: 40px;
        padding: 0 16px;
        font-size: 16px;
        line-height: 20px;
    }
}

/* Tmavý režim (dark.css jen při option abf_dark_mode): blok má var(--abf-surface-1), stránka var(--abf-canvas).
   dark.css dává kartě i bloku surface-1 + rámeček --abf-line selektorem html[data-theme] :is(…) se
   specifičností (0,3,1) → zde (0,4,1) a víc, aby nezáleželo na pořadí souborů. */
html[data-theme="dark"] .content-container--katalog-vystavovatelu .catalog-source-tabs .catalog-source-tab {
    background-color: var(--abf-canvas, #0e0e0f);
    border-color: var(--abf-line, #33333a);
    color: var(--abf-text, #f2f2f3);
}

html[data-theme="dark"] .content-container--katalog-vystavovatelu .catalog-source-tabs .catalog-source-tab:hover {
    border-color: var(--abf-line-strong, #43434b);
}

html[data-theme="dark"] .content-container--katalog-vystavovatelu .catalog-source-tabs .catalog-source-tab.is-active,
html[data-theme="dark"] .content-container--katalog-vystavovatelu .catalog-source-tabs .catalog-source-tab.is-active:hover {
    background-color: var(--abf-surface-1, #171719);
    border-color: var(--abf-surface-1, #171719);
    box-shadow: 0 1px 0 0 var(--abf-surface-1, #171719);
}

/* ── U10 – katalog jako první obsah stránky pod fixní hlavičkou (princip A1, layout.css) ──
   Hlavička .navbar je fixní (120 / ≤ 1200 px 74 / ≤ 479 px 70 px; skript šablony header-scroll.js ji
   od 992 px nahoře zvětší na 120 px). Sekce katalogu (#detail, jen blok custom/block-katalog-vystavovatelu)
   má Webflow padding-top 120 / 100 / 60 px, takže horní hrana karet (nebo bloku) ležela pod hlavičkou:
   992–1200 px o 20 px, 480–767 px o 14 px, ≤ 479 px o 10 px; ≥ 1201 px se jí dotýkala.
   Stejně jako A1: mezera hlavička → obsah = výška hlavičky (token --abf-navbar-height) + 60 px; v pásmu
   992–1200 px, kde skript hlavičku zvětšuje, vyjde 14 px (jako u A1 a úvodních pruhů).
   Odchylka od A1: padding-top místo margin-top – sekce nese obrázek pozadí bloku (inline background-image),
   s margin-top by se obrázek posunul pod hlavičku. Platí JEN pro katalog, který je prvním obsahem
   (před ním za hlavičkou není nic kromě style/script/link/noscript/template); katalog pod úvodním pruhem
   nebo pod jiným blokem se nemění. Selektor bez :has() (Safari 15.0–15.3). */
.navbar.w-nav ~ #detail:not(.navbar.w-nav ~ :not(style, script, link, noscript, template) ~ #detail),
.navbar.w-nav ~ .content-area:not(.navbar.w-nav ~ :not(style, script, link, noscript, template) ~ .content-area) > #detail:not(:not(style, script, link, noscript, template) ~ #detail) {
    padding-top: calc(var(--abf-navbar-height, 120px) + 60px);
}