/* dcCMS — mapa hotspotów: obrazek z klikalnymi obszarami + karuzela slajdów.
   Klasy neutralne (dc-hotspots__*), bez zależności od zmiennych motywu — patrz
   uwaga o tokenach CSS w dokumentacji projektu (jak animations.css).
   Achilles: desktop — obrazek w lewej połówce, panel (podpowiedź / karuzela) w prawej;
   ≤768px — jedna kolumna, panel pod obrazkiem (naturalna kolejność DOM). */

/* ---- Układ ------------------------------------------------------------ */
.dc-hotspots { max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "image side"; gap: 40px; align-items: center; }
.dc-hotspots__image-wrap { grid-area: image; position: relative; display: block; line-height: 0; }
.dc-hotspots__side { grid-area: side; min-width: 0; }

.dc-hotspots__image { display: block; width: 100%; height: auto; border-radius: 12px; }

/* ---- Obszary + punkty "sonar" ----------------------------------------- */
.dc-hotspots__area { position: absolute; display: flex; align-items: center; justify-content: center; background: transparent; border: 2px solid transparent; border-radius: 6px;
    padding: 0; margin: 0; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.dc-hotspots__area:hover, .dc-hotspots__area:focus-visible { background-color: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.35); outline: none; }
.dc-hotspots__area.is-active { background-color: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.6); }

.dc-hotspots__dot, .dc-hotspots__hint-dot { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 999px; background: #2563eb; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); }
.dc-hotspots__area.is-active .dc-hotspots__dot { background: #16a34a; }
.dc-hotspots__dot-ping { position: absolute; inset: 0; border-radius: 999px; background: #2563eb; opacity: 0.6; animation: dc-hotspots-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
.dc-hotspots__area.is-active .dc-hotspots__dot-ping { background: #16a34a; }

@keyframes dc-hotspots-ping { 0% { transform: scale(1); opacity: 0.6; } 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---- Podpowiedź (widoczna, dopóki nie wybrano obszaru) ---------------- */
.dc-hotspots__hint { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; min-height: 160px; padding: 24px 28px; border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 12px; background: rgba(0, 0, 0, 0.015); text-align: left; line-height: 1.5; color: inherit; opacity: 0.8; }
.dc-hotspots__hint[hidden] { display: none; }

/* ---- Panel z karuzelą ------------------------------------------------- */
.dc-hotspots__panel { position: relative; padding: 24px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; background: rgba(0, 0, 0, 0.015); }
.dc-hotspots__panel[hidden] { display: none; }

.dc-hotspots__close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none;
    background: rgba(0, 0, 0, 0.06); border-radius: 999px; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; }
.dc-hotspots__close:hover { background: rgba(0, 0, 0, 0.12); }

.dc-hotspots__panel-title { margin: 0 40px 16px 0; font-size: 1.1em; font-weight: 600; }

.dc-hotspots__carousel { position: relative; }
.dc-hotspots__viewport { overflow: hidden; }
.dc-hotspots__track { display: flex; width: 100%; }
.dc-hotspots__slide { flex: 0 0 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 0 4px; overflow-wrap: break-word; word-break: break-word; }
.dc-hotspots__slide-image { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.dc-hotspots__slide-title { font-weight: 600; margin: 0 0 8px; }
.dc-hotspots__slide-content { line-height: 1.5; }

.dc-hotspots__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none;
    background: rgba(0, 0, 0, 0.08); border-radius: 999px; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; }
.dc-hotspots__nav:hover { background: rgba(0, 0, 0, 0.16); }
.dc-hotspots__nav--prev { left: -8px; }
.dc-hotspots__nav--next { right: -8px; }
.dc-hotspots__carousel--single .dc-hotspots__nav, .dc-hotspots__carousel--single .dc-hotspots__dots { display: none; }

.dc-hotspots__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; }
.dc-hotspots__dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(0, 0, 0, 0.2); cursor: pointer; }
.dc-hotspots__dots button.is-active { background: #2563eb; }

/* ---- Responsywnie: panel pod obrazkiem -------------------------------- */
@media (max-width: 768px) {
    .dc-hotspots { grid-template-columns: minmax(0, 1fr); grid-template-areas: "image" "side"; gap: 24px; }
    .dc-hotspots__hint { min-height: 0; padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-hotspots__dot-ping { animation: none; opacity: 0.35; }
}