/* Marketing Kit developerského projektu (developer-kit.js) — kompaktná galéria podkladov, funguje aj v mobile. */
.dk-kit { --dk-ink: #17231e; --dk-muted: #66716b; --dk-line: #e6e1d6; --dk-card: #fff; --dk-bg: #f6f3ec; --dk-accent: #c9a04d; --dk-primary: #1f4d3f;
  color: var(--dk-ink); background: var(--dk-bg); border-radius: 18px; padding: clamp(14px, 2.4vw, 28px); font-family: Manrope, "Segoe UI", Arial, sans-serif; }
.dk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 12px; }
.dk-head h2 { margin: 2px 0 4px; font: 700 clamp(24px, 3vw, 34px)/1.15 "Playfair Display", Georgia, serif; color: var(--dk-primary); }
.dk-head p { margin: 0; color: var(--dk-muted); font-size: 14px; }
.dk-head .dk-eyebrow { color: #9a7428; font-weight: 800; font-size: 11px; letter-spacing: .14em; }
.dk-all, .dk-dl { border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; font-family: inherit; }
.dk-all { background: var(--dk-primary); color: #fff; padding: 12px 20px; font-size: 14px; }
.dk-all:disabled, .dk-dl:disabled { opacity: .6; cursor: progress; }
.dk-nav { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.dk-nav a { flex: none; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--dk-line); color: var(--dk-ink); text-decoration: none; font-size: 13px; font-weight: 700; }
.dk-section { padding: 14px 0 6px; scroll-margin-top: 80px; }
.dk-sec-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.dk-sec-head > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--dk-accent); color: #1d1a12; font-weight: 800; }
.dk-sec-head h3 { margin: 0 0 2px; font: 700 20px/1.2 "Playfair Display", Georgia, serif; }
.dk-sec-head p { margin: 0; color: var(--dk-muted); font-size: 13.5px; max-width: 780px; }
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.dk-card { display: flex; flex-direction: column; background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; overflow: hidden; }
.dk-card.dk-wide { grid-column: 1 / -1; }
.dk-preview { display: grid; place-items: center; min-height: 150px; padding: 12px; background: linear-gradient(135deg, #f3efe5, #fbfaf6); }
.dk-preview > svg, .dk-pair svg { width: 100%; height: auto; max-height: 150px; }
.dk-meta { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.dk-meta h4 { margin: 0; font-size: 14.5px; }
.dk-meta p { margin: 0; color: var(--dk-muted); font-size: 12.5px; line-height: 1.45; flex: 1; }
.dk-dl { align-self: flex-start; background: var(--dk-accent); color: #1d1a12; padding: 7px 14px; font-size: 12.5px; margin-top: 4px; }
.dk-pair { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; align-items: center; width: 100%; }
.dk-swatches { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.dk-swatches span { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; min-width: 54px; }
.dk-swatches i { display: block; height: 36px; border-radius: 8px; border: 1px solid rgba(0,0,0,.06); }
.dk-swatches small { color: var(--dk-muted); font-weight: 600; }
.dk-swatches.mini { gap: 4px; } .dk-swatches.mini i { width: 22px; height: 14px; border-radius: 4px; }
.dk-fonts { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; width: 100%; }
.dk-fonts span:first-child { font-size: 22px; font-weight: 700; } .dk-fonts span:last-child { font-size: 13px; color: var(--dk-muted); }
.dk-ideas { width: 100%; font-size: 12.5px; } .dk-ideas ul { margin: 2px 0 8px; padding-left: 18px; } .dk-ideas b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9a7428; }
.dk-a4 { position: relative; width: min(150px, 100%); aspect-ratio: 210/297; background: #fff; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; font-size: 10px; }
.dk-a4 svg { width: 100%; height: auto; }
.dk-a4-tag { position: absolute; right: 6px; top: 6px; font-size: 9px; font-weight: 800; color: var(--dk-muted); }
.dk-a4.cover { color: #fff; padding: 0; justify-content: flex-end; } .dk-a4.cover img { position: absolute; inset: 0 0 35% 0; width: 100%; height: 65%; object-fit: cover; }
.dk-a4.cover strong { position: relative; padding: 8px; font: 700 13px "Playfair Display", Georgia, serif; }
.dk-a4 small { color: var(--dk-muted); }
.dk-cardbyt img { width: 100%; flex: 1; object-fit: contain; min-height: 0; }
.dk-spread { display: flex; gap: 8px; justify-content: center; width: 100%; } .dk-spread .dk-a4 { width: min(120px, 45%); }
.dk-empty { color: var(--dk-muted); font-size: 11px; text-align: center; margin: auto; }
.dk-canvas { width: 100%; height: auto; max-height: 260px; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); background: #ddd; }
.dk-wide .dk-canvas { max-height: none; }
.dk-frame { width: 100%; height: 240px; border: 0; border-radius: 8px; background: #fff; }
.dk-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
.dk-thumbs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.dk-soon { display: grid; place-items: center; gap: 4px; width: 100%; min-height: 130px; border-radius: 10px; border: 2px dashed var(--dk-line); font: 800 28px Manrope, sans-serif; color: var(--dk-primary); }
.dk-soon small { font-size: 12px; font-weight: 700; color: var(--dk-muted); }
.dk-note { margin: 16px 0 0; font-size: 12px; color: var(--dk-muted); }
.dk-status { min-height: 18px; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--dk-primary); }
@media (max-width: 560px) { .dk-head { align-items: stretch; } .dk-all { width: 100%; } .dk-grid { grid-template-columns: 1fr; } }