/* Doplňky k design systému pro CMS: skutečné obrázky místo placeholderů, stránkování, FAQ, video, formuláře */

/* Obrázky místo .ph – stejné chování jako placeholdery (README: hover zoom 1.1) */
.media-contain { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.b-product__image .media-contain, .b-category__image .media-contain { transition: transform .3s; }
.b-category__image .media-contain { mix-blend-mode: multiply; }
.b-card__media .media-cover, .b-reference__media .media-cover, .feature__media .media-cover { transition: transform .3s; height: 100%; }
.b-product:hover .b-product__image img, .b-category:hover .b-category__image img,
.b-card:hover .b-card__media img, .b-reference:hover .b-reference__media img, .feature:hover .feature__media img { transform: scale(1.1); }
.hero__media.media-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__media .media-cover, .wide-media .media-cover { height: 100%; }
.feature__media { overflow: hidden; }
.article-hero .media-cover { aspect-ratio: 16 / 9; border-radius: var(--radius-xl); height: auto; }
.gallery__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.gallery__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

/* Přístupnost */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--ink); color: var(--on-dark, #fff); border-radius: var(--radius-pill, 999px); text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }

.preview-bar { background: var(--warning); color: #000; text-align: center; font-size: 14px; font-weight: 500; padding: 6px 16px; }

/* Úvod stránky bez bloku page_intro */
.page-head--crumb { padding-bottom: 0; }

/* Popis kategorie může obsahovat HTML */
.lead--rich p + p { margin-top: .6em; }

.wide-figure { margin: 0 auto; }
.wide-figure__caption { margin-top: var(--space-2-5, 10px); color: var(--muted-strong); font-size: 14px; }

.split--reverse { flex-direction: row-reverse; }
@media (max-width: 1023px) { .split--reverse { flex-direction: column; } }

.soft-card__link { color: inherit; text-decoration: none; }
.soft-card__link:hover { text-decoration: underline; }

.contact__info--standalone { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5, 20px); }

.news-filter { margin-bottom: var(--space-7-5, 30px); }
.empty-state { color: var(--muted-strong); padding: var(--space-10, 40px) 0; }

/* Stránkování (odkazy pro roboty, tlačítko „Načíst další“ pro lidi) */
.pagination__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: var(--space-5, 20px) 0 0; font-size: 14px; }
.pagination__pages a, .pagination__pages span { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-pill, 999px); color: var(--ink); text-decoration: none; }
.pagination__pages a:hover { background: var(--surface-soft); }
.pagination__pages [aria-current] { background: var(--ink); color: var(--surface); }
.js .pagination__pages { display: none; }

/* FAQ */
.faq__list { display: flex; flex-direction: column; gap: var(--space-2-5, 10px); margin-top: var(--space-7-5, 30px); max-width: 900px; }
.faq__item { background: var(--surface-soft); border-radius: var(--radius-l, 20px); padding: var(--space-5, 20px) var(--space-6, 24px); }
.faq__q { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: 24px; line-height: 1; transition: transform .3s; }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q .h4 { margin: 0; }
.faq__a { margin-top: var(--space-4, 16px); }

/* Video (načte se až po kliknutí) */
.video-figure { margin: 0; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-xl, 30px); overflow: hidden; background: #000; }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 26px; cursor: pointer; transition: background .3s; }
.video__play:hover { background: #000; }
.prose .video { margin: var(--space-5, 20px) 0; }

/* Formuláře */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--danger); font-size: 14px; margin-top: var(--space-2-5, 10px); }
.lead-form.is-sending button[type=submit] { opacity: .6; pointer-events: none; }

.error-page { padding-block: var(--space-20, 80px); }

/* Video na pozadí banneru – zobrazí se plynule až ve chvíli, kdy skutečně hraje (do té doby obrázek) */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; pointer-events: none; }
.bg-video.is-playing { opacity: 1; }
.b-card:hover .bg-video { transform: scale(1.1); transition: opacity .6s, transform .3s; }
@media (prefers-reduced-motion: reduce) { .bg-video { display: none; } }