/* Laboratoř rozvržení výpisu (zatím jen kroužky). Jedno HTML, dvě podoby – přepíná se atributem na : data-listing-layout="a" filtry jako sbalená lišta nad výpisem data-listing-layout="c" filtry v bočním sloupci vedle karet Základ souboru je varianta A. Varianta C se dopisuje až v media query od 992 px – na telefonu totiž boční sloupec nemá kam jít, takže se i „céčko" chová jako lišta. Díky tomu není potřeba nic psát dvakrát. */ .listing-section { padding: 2rem 0 3rem; } .listing-layout { display: block; } /* ── Panel filtrů: lišta ─────────────────────────────────────────────────── */ .listing-side { position: relative; background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f8 100%); border: 1px solid rgba(0,0,0,.07); border-radius: 16px; padding: .9rem 1.1rem; margin-bottom: 1.5rem; overflow: hidden; } .listing-side::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, linear-gradient(90deg, var(--primary, #e67e22), #f4a022, #e67e22)); opacity: .5; } .lf-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .lf-search { flex: 1 1 260px; max-width: 460px; } .lf-search .form-control, .lf-search .input-group-text { border-color: #e0e3ea; } .lf-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem; border-radius: 50px; border: 1.5px solid #e0e3ea; background: #fff; color: #555; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1); box-shadow: 0 1px 3px rgba(0,0,0,.04); } .lf-toggle:hover { border-color: var(--primary, #e67e22); color: var(--primary, #e67e22); background: #fff8f0; } html[data-lf-open="1"] .listing-side .lf-toggle { border-color: transparent; background: var(--accent, linear-gradient(135deg, var(--primary, #e67e22), #f4a022)); color: var(--accent-ink, #fff); } .lf-toggle-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 10px; background: var(--primary, #e67e22); color: #fff; font-size: .7rem; font-weight: 800; } html[data-lf-open="1"] .listing-side .lf-toggle-count { background: rgba(255,255,255,.28); } .lf-toggle-chevron { font-size: .65rem; transition: transform .2s; } html[data-lf-open="1"] .listing-side .lf-toggle-chevron { transform: rotate(180deg); } /* Tělo filtrů – v liště schované, dokud se nerozklikne */ .lf-body { display: none; } html[data-lf-open="1"] .listing-side .lf-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.1rem 2rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(0,0,0,.07); } .lf-group, .lf-group--flat { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; } .lf-group-head { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; } .lf-group-head::-webkit-details-marker { display: none; } .lf-group .filter-label { margin-bottom: 0; } .lf-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 .3rem; border-radius: 9px; background: var(--primary, #e67e22); color: #fff; font-size: .62rem; font-weight: 800; } .lf-group-chevron { font-size: .6rem; color: #b0b4c3; transition: transform .2s; } .lf-group[open] > .lf-group-head .lf-group-chevron { transform: rotate(180deg); } /* V liště jsou skupiny vždy rozbalené, summary slouží jen jako popisek. */ .lf-group-head { pointer-events: none; } .lf-group-chevron { display: none; } /* ── Vybrané filtry ──────────────────────────────────────────────────────── */ .lf-active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(0,0,0,.07); } .lf-active-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 50px; background: var(--accent, linear-gradient(135deg, var(--primary, #e67e22), #f4a022)); color: var(--accent-ink, #fff); font-size: .76rem; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(230,126,34,.2); transition: filter .2s, transform .2s; } .lf-active-chip:hover { color: var(--accent-ink, #fff); filter: brightness(1.06); transform: translateY(-1px); } .lf-active-chip i { font-size: .68rem; opacity: .8; } .lf-active-clear { font-size: .76rem; font-weight: 700; color: #8b8fa3; text-decoration: underline; margin-left: .25rem; } .lf-active-clear:hover { color: var(--primary, #e67e22); } /* ── Mřížka karet ────────────────────────────────────────────────────────── */ /* CSS grid místo bootstrapových sloupců: počet sloupců se dopočítá ze šířky kontejneru, takže totéž HTML sedí i tehdy, když filtry ukrojí 290 px vlevo. */ .cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .cc-grid-item { display: flex; flex-direction: column; } .cc-grid-item > .cc-card { flex: 1 1 auto; } /* ── Varianta C: boční sloupec (od 992 px) ───────────────────────────────── */ @media (min-width: 992px) { html[data-listing-layout="c"] .listing-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; gap: 2rem; } html[data-listing-layout="c"] .listing-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; margin-bottom: 0; background: #fff; border: 1px solid #e9ecef; border-radius: 16px; padding: 1rem 1.1rem; } html[data-listing-layout="c"] .lf-bar { display: block; } html[data-listing-layout="c"] .lf-search { max-width: none; } html[data-listing-layout="c"] .lf-toggle { display: none; } html[data-listing-layout="c"] .listing-side .lf-body { display: block; margin-top: .9rem; padding-top: 0; border-top: 0; } html[data-listing-layout="c"] .lf-group, html[data-listing-layout="c"] .lf-group--flat { display: block; border-top: 1px solid #eef0f4; padding: .7rem 0; } html[data-listing-layout="c"] .lf-group:first-child { border-top: 0; padding-top: 0; } /* Ve sloupci se skupiny rozbalují a sbalují – proto zpátky kurzor i šipka. */ html[data-listing-layout="c"] .lf-group-head { pointer-events: auto; justify-content: space-between; width: 100%; } html[data-listing-layout="c"] .lf-group-head .filter-label { flex: 1 1 auto; } html[data-listing-layout="c"] .lf-group-chevron { display: inline-block; } html[data-listing-layout="c"] .lf-group .filter-chips, html[data-listing-layout="c"] .lf-group--flat .filter-chips { margin-top: .55rem; } html[data-listing-layout="c"] .lf-active { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid #eef0f4; } html[data-listing-layout="c"] .cc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } } /* ── Připínátko (vidí jen redakce) ───────────────────────────────────────── */ .layout-pin { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; display: flex; align-items: center; gap: .3rem; padding: .35rem .45rem; border-radius: 999px; background: rgba(28,30,38,.94); box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: .76rem; color: #fff; } .layout-pin.is-hidden { display: none; } .layout-pin-title { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .4rem 0 .55rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .62rem; color: rgba(255,255,255,.6); } .layout-pin-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .76rem; font-weight: 700; cursor: pointer; transition: background .2s; } .layout-pin-btn:hover { background: rgba(255,255,255,.2); } .layout-pin-key { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px; background: rgba(255,255,255,.18); font-size: .62rem; font-weight: 900; } html[data-listing-layout="a"] .layout-pin-btn[data-layout-set="a"], html[data-listing-layout="c"] .layout-pin-btn[data-layout-set="c"] { background: var(--primary, #e67e22); } .layout-pin-hide { border: 0; background: none; color: rgba(255,255,255,.45); font-size: .72rem; padding: .3rem .45rem; cursor: pointer; } .layout-pin-hide:hover { color: #fff; } @media (max-width: 575.98px) { .layout-pin { right: .5rem; bottom: .5rem; } .layout-pin-title { display: none; } .cc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } } /* Tisk: filtry ani připínátko na papír nepatří (v cinnosti.css je totéž pro .filter-bar). */ @media print { .listing-side, .layout-pin { display: none !important; } .cc-grid { grid-template-columns: repeat(2, 1fr); } }