/* ---------- spoločné dialógy (galérie služieb, AC výplň) ---------- */
.dlg {
  width: min(100% - 32px, 1400px); max-height: 85vh; padding: 24px; margin: auto;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); color: var(--fg);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); overflow-y: auto; overscroll-behavior: contain;
}
.dlg::backdrop { background: rgb(0 0 0 / .8); }
.dlg[open], .lightbox[open], .status[open] { animation: pop .2s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.dlg-head h2, .dlg-head h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .4rem; }
.dlg-head p { font-size: .875rem; color: var(--muted-fg); }
.dlg-x {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm);
  font-size: 18px; color: var(--muted-fg); transition: background-color .2s, color .2s;
}
.dlg-x:hover { background: var(--muted); color: var(--fg); }

.dlg-ac { width: min(100% - 32px, 48rem); max-height: 90vh; }
.ac-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .ac-grid { grid-template-columns: 1fr 320px; align-items: start; } .ac-video { position: sticky; top: 0; } }
.ac-video { display: grid; gap: .5rem; }
.ac-video .label { font-size: .875rem; font-weight: 600; }
.ac-video iframe { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }

.guide summary {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 600; color: var(--primary);
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary:hover { opacity: .8; }
.guide-body { margin-top: .75rem; padding: 1rem; display: grid; gap: .75rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--primary-light); font-size: .875rem; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(5, 1fr); } }
.guide-grid figure { display: grid; gap: .25rem; }
.guide-grid .gal-open { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--bg); transition: box-shadow .2s; }
.guide-grid .gal-open:hover { box-shadow: 0 0 0 2px var(--primary); }
.guide-grid img { height: 80px; }
.guide-grid figcaption { font-size: 10px; line-height: 1.2; color: var(--muted-fg); text-align: center; }

/* ---------- lightbox ---------- */
.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px;
  border: 0; background: transparent; color: #fff; overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: hsl(220 26% 14% / .92); }
.lb-fig { display: grid; justify-items: center; gap: .75rem; max-width: 100%; }
.lb-imgs { display: flex; gap: 4px; justify-content: center; }
.lb-img { max-width: 90vw; max-height: 78vh; width: auto; object-fit: contain; border-radius: var(--r); }
.pair .lb-img { max-width: 44vw; }
.lb-fig figcaption { display: grid; text-align: center; padding: 0 1rem; text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.lb-title { font: 700 1rem var(--font-head); }
.lb-desc { font-size: .875rem; color: rgb(255 255 255 / .7); margin-top: 2px; }
.lb-count { font-size: .75rem; color: rgb(255 255 255 / .5); margin-top: .25rem; }
.lb-btn {
  position: absolute; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; color: #fff; font-size: 32px; transition: background-color .2s;
}
.lb-btn:hover { background: rgb(255 255 255 / .12); }
.lb-x { top: 12px; right: 12px; font-size: 28px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.single .lb-prev, .single .lb-next { display: none; }

/* ---------- stav odosielania ---------- */
.status { border: 0; padding: 0; background: transparent; overflow: visible; max-width: calc(100% - 48px); }
.status::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(4px); }
.status > div { display: none; }
.status[data-state="busy"] .st-busy, .status[data-state="ok"] .st-ok, .status[data-state="err"] .st-err { display: grid; }
.st-busy { justify-items: center; gap: 1rem; color: #fff; text-align: center; max-width: 20rem; }
.st-busy .spin { font-size: 44px; animation: spin 1s linear infinite; }
.st-busy p { color: rgb(255 255 255 / .7); font-size: .875rem; }
.st-busy .st-title { color: #fff; font: 700 1.125rem var(--font-head); }
@keyframes spin { to { transform: rotate(360deg); } }
.st-card { justify-items: center; gap: .5rem; width: 24rem; max-width: 100%; padding: 32px; border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow); text-align: center; }
.st-card .st-ic { font-size: 52px; margin-bottom: .5rem; }
.st-ok .st-ic { color: var(--ok); }
.st-err .st-ic { color: var(--danger); }
.st-card .st-title { font: 700 1.25rem var(--font-head); }
.st-card p:not(.st-title) { font-size: .875rem; color: var(--muted-fg); margin-bottom: 1rem; }