/**
 * Sablona 2026-007 Domov - clanek (artboard 05-Clanek, zadani kap. 10). Linkuje jadro podle sekce.
 * Uzky sloupec 720, hero 16:9 v sirce 1100, H1 44 / perex 20; Produkty z clanku (komponenty/produkty-z-clanku.latte)
 * jako 3 karty vypisu v sirce 1100, na mobilu swipe; kalkulacka (styl v css/sablona.css); dalsi clanky 3 karty.
 */
.dm-clanek { --dm-cl-sirka: 720px; --dm-cl-siroky: 1100px; padding-top: 8px; }
.dm-cl-uzky { max-width: var(--dm-cl-sirka); margin: 0 auto; }

.dm-drobek { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 24px; font-size: 14px; color: var(--tpl-text-light); }
.dm-drobek a, .dm-drobek span { display: inline-flex; align-items: center; min-height: 32px; }
.dm-drobek a { flex: none; white-space: nowrap; }
.dm-drobek a { color: var(--tpl-text-light); text-decoration: none; }
.dm-drobek a:hover { color: var(--tpl-link); text-decoration: underline; }
.dm-drobek > * + *::before { content: '/'; margin-right: 6px; color: var(--tpl-border); }
.dm-drobek span { color: var(--tpl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.dm-cl-hl { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.dm-cl-eyebrow { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.dm-cl-eyebrow a { color: var(--tpl-primary); text-decoration: none; }
.dm-cl-eyebrow a:hover { text-decoration: underline; }
#prostredek .dm-cl-h1,
.dm-cl-h1 { margin: 0; font-size: calc(44px - var(--tpl-head-shrink)); line-height: 1.15; }
.dm-cl-perex { margin: 0; font-size: 20px; line-height: 1.55; color: var(--tpl-text); }
.dm-cl-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; font-size: 14px; color: var(--tpl-text-light); }

.dm-cl-hero { max-width: var(--dm-cl-siroky); margin: 0 auto 48px; aspect-ratio: 16 / 9; border-radius: var(--tpl-hero-radius, var(--tpl-area-radius)); background: var(--tpl-surface-2); overflow: hidden; }
.dm-cl-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* text clanku 18 / 1.7 */
.dm-cl-text { font-size: 18px; line-height: 1.7; }
.dm-cl-text > :first-child { margin-top: 0; }
.dm-cl-text > p, .dm-cl-text > ul, .dm-cl-text > ol { margin: 0 0 1.1em; }
.dm-cl-text > ul > li, .dm-cl-text > ol > li { margin-bottom: .35em; }
#prostredek .dm-cl-text > h2 { margin: 1.8em 0 .6em; font-size: calc(30px - var(--tpl-head-shrink)); line-height: 1.25; }
#prostredek .dm-cl-text > h3 { margin: 1.5em 0 .5em; font-size: calc(22px - var(--tpl-head-shrink)); line-height: 1.3; }
.dm-cl-text > :is(p, ul, ol, table, blockquote, h2, h3) a { color: var(--tpl-link); text-decoration: underline; text-underline-offset: 3px; }
.dm-cl-text img { max-width: 100%; height: auto; border-radius: var(--tpl-area-radius); }
.dm-cl-text blockquote { margin: 1.5em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--tpl-primary); font-size: 20px; color: var(--tpl-text); }
.dm-cl-text > table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 16px; }
.dm-cl-text > table th, .dm-cl-text > table td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--tpl-line); text-align: left; }
.dm-cl-text .dm-kalk { margin: 32px 0; }

/* Produkty z clanku: 3 karty v sirce 1100 */
.dm-produkty-clanku { margin: 40px 0; }
.dm-produkty-clanku-h { margin: 0 0 16px; font: var(--tpl-head-weight) calc(22px - var(--tpl-head-shrink))/1.3 var(--tpl-font-head); color: var(--tpl-text); }
.dm-cl-text .dm-produkty-clanku .polozky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; font-size: 15px; line-height: 1.4; }
.dm-cl-text .dm-produkty-clanku a { text-decoration: none; }
.dm-cl-text .dm-produkty-clanku ul, .dm-cl-text .dm-produkty-clanku p { margin: 0; }
@media (min-width: 1180px) {
    .dm-produkty-clanku { margin-left: calc((var(--dm-cl-sirka) - var(--dm-cl-siroky)) / 2); margin-right: calc((var(--dm-cl-sirka) - var(--dm-cl-siroky)) / 2); }
}

.dm-cl-prilohy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; }
.dm-cl-prilohy figure { margin: 0; }
.dm-cl-prilohy img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tpl-area-radius); cursor: zoom-in; }
.dm-cl-prilohy figcaption { margin-top: 6px; font-size: 14px; color: var(--tpl-text-light); }
.dm-clanek .tpl-clanek-video { margin: 32px 0 0; }
.dm-clanek .tpl-clanek-komentare { margin: 48px 0 0; }

.dm-cl-dalsi { max-width: var(--dm-cl-siroky); margin-left: auto; margin-right: auto; padding-top: 48px; border-top: 1px solid var(--tpl-line); }

@media (max-width: 1024px) {
    .dm-cl-text .dm-produkty-clanku .polozky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .dm-drobek { flex-wrap: nowrap; overflow: hidden; margin-bottom: 16px; font-size: 13px; }
    .dm-drobek span { min-width: 0; }
    .dm-cl-hl { margin-bottom: 24px; gap: 10px; }
    #prostredek .dm-cl-h1, .dm-cl-h1 { font-size: calc(30px - var(--tpl-head-shrink)); }
    .dm-cl-perex { font-size: 18px; }
    .dm-cl-hero { margin: 0 calc(-1 * var(--tpl-gutter)) 32px; border-radius: 0; }
    .dm-cl-text { font-size: 17px; }
    #prostredek .dm-cl-text > h2 { font-size: calc(24px - var(--tpl-head-shrink)); }
    .dm-cl-text .dm-produkty-clanku .polozky { display: flex; gap: 12px; margin: 0 calc(-1 * var(--tpl-gutter)); padding: 0 var(--tpl-gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .dm-cl-text .dm-produkty-clanku .polozky > * { flex: 0 0 72%; scroll-snap-align: start; }
    .dm-cl-text .dm-kalk { margin-left: calc(-1 * var(--tpl-gutter)); margin-right: calc(-1 * var(--tpl-gutter)); }
    .dm-cl-prilohy { grid-template-columns: minmax(0, 1fr); }
    .dm-cl-dalsi { padding-top: 32px; }
}