/* Fotodokumentace zakázky – úvodní stránka */
.doc { width: 100%; }
.doc-head { max-width: 760px; }
.doc-badge { margin-bottom: 14px; }
.doc-lead { color: var(--dark-gray); font-size: 17px; line-height: 1.6; margin-top: 10px; }

.doc-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 22px; }
.doc-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 18px; border: 2px solid var(--medium-gray); border-radius: 12px; background: #fff; font-weight: 700; font-size: 16px; color: var(--secondary); cursor: pointer; transition: all .3s; text-align: left; }
.doc-tab small { font-weight: 400; font-size: 13px; color: var(--dark-gray); }
.doc-tab:hover { border-color: var(--primary); }
.doc-tab.is-active { border-color: var(--primary); background: #edf6ee; color: var(--primary); }

.doc-panel { display: none; }
.doc-panel.is-active { display: block; }
.doc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.doc-steps--4 { grid-template-columns: repeat(4, 1fr); }
.doc-step { display: flex; flex-direction: column; gap: 4px; }
.doc-step strong { margin-top: 10px; font-size: 17px; }
.doc-step > span { color: var(--dark-gray); font-size: 15px; line-height: 1.45; }
.doc-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--light-gray); cursor: zoom-in; }
.doc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.doc-photo:hover img { transform: scale(1.04); }
.doc-num { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.doc-note { margin-top: 22px; color: var(--dark-gray); font-size: 13px; }

.doc-dialog { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.doc-dialog[open] { display: flex; align-items: center; justify-content: center; gap: 12px; }
.doc-dialog::backdrop { background: rgba(15, 15, 15, .92); }
.doc-dialog figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.doc-dialog img { display: block; max-width: min(84vw, 1200px); max-height: 80vh; border-radius: 10px; }
.doc-dialog figcaption { color: #fff; font-weight: 700; font-size: 16px; }
.doc-dialog-close { position: fixed; top: 16px; right: 20px; width: 48px; height: 48px; color: #fff; font-size: 40px; line-height: 1; background: none; border: 0; cursor: pointer; }
.doc-dialog-nav { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; transition: background .3s; }
.doc-dialog-nav:hover { background: var(--primary); }

@media (max-width: 1023px) {
    .doc-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .doc-lead { font-size: 15px; }
    .doc-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 22px -20px 18px; padding: 0 20px; scrollbar-width: none; }
    .doc-tab { flex: none; font-size: 15px; padding: 8px 14px; }
    .doc-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; gap: 14px; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
    .doc-step { flex: 0 0 78%; scroll-snap-align: start; }
    .doc-step strong { font-size: 16px; }
    .doc-step > span { font-size: 14px; }
    .doc-dialog[open] { flex-direction: column; }
    .doc-dialog img { max-width: 94vw; max-height: 70vh; }
    .doc-dialog-nav { position: fixed; bottom: 24px; }
    .doc-dialog-prev { left: calc(50% - 64px); }
    .doc-dialog-next { right: calc(50% - 64px); }
}