/* ============================================================
   /projects — DARK  ·  14) DETAIL MODAL (ciferníky)
   ------------------------------------------------------------
   Tlačítko „Detail" na kartě ciferníku otevře overlay bez
   načtení stránky – screenshoty + popis + odkaz na Google Play.
   Obsah je v každé kartě v <div class="psx-card__detail" hidden>,
   JS ho zkopíruje do #psxModal. Skript: js/psx-projects.js
   ============================================================ */

body.psx-modal-open { overflow: hidden; }

body.psx-dark .psx-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
body.psx-dark .psx-modal.is-open { opacity: 1; visibility: visible; }

body.psx-dark .psx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,5,8,0.64);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

body.psx-dark .psx-modal__dialog {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--psx-radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(10,13,18,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--psx-hi-teal), 0 40px 90px rgba(0,0,0,0.62);
  -webkit-backdrop-filter: blur(var(--psx-blur)) saturate(140%);
  backdrop-filter: blur(var(--psx-blur)) saturate(140%);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.psx-dark .psx-modal.is-open .psx-modal__dialog { transform: none; }

/* zrno jako ostatní sklo */
body.psx-dark .psx-modal__dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--psx-grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body.psx-dark .psx-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  color: var(--psx-text);
  background: rgba(12,15,20,0.6);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body.psx-dark .psx-modal__close:hover {
  background: rgba(20,24,32,0.75);
  border-color: rgba(86,197,210,0.5);
}

body.psx-dark .psx-modal__scroll {
  position: relative;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- obsah detailu ---- */
body.psx-dark .psx-detail__shots {
  display: flex;
  gap: 12px;
  padding: 24px 24px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
body.psx-dark .psx-detail__shots::-webkit-scrollbar { height: 6px; }
body.psx-dark .psx-detail__shots::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14); border-radius: 999px;
}
body.psx-dark .psx-detail__shots img {
  height: 244px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--psx-bg-elev);
  scroll-snap-align: center;
}

body.psx-dark .psx-detail__body { padding: 16px 26px 28px; }
body.psx-dark .psx-detail__body h3 {
  margin: 0 0 6px;
  font-family: var(--psx-mono);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: 24px;
  line-height: 1.1;
  color: var(--psx-heading);
}
body.psx-dark .psx-detail__lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--psx-text-soft);
}
body.psx-dark .psx-detail__list {
  margin: 0 0 18px;
  padding-left: 1.1em;
}
body.psx-dark .psx-detail__list li {
  margin: 7px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--psx-text);
}
body.psx-dark .psx-detail__list li::marker { color: var(--psx-teal-light); }

body.psx-dark .psx-detail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
body.psx-dark .psx-detail__foot .psx-card__tags { margin: 0; }

@media (max-width: 700px) {
  body.psx-dark .psx-modal { padding: 0; align-items: flex-end; }
  body.psx-dark .psx-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--psx-radius-xl) var(--psx-radius-xl) 0 0;
  }
  body.psx-dark .psx-detail__shots img { height: 200px; }
  body.psx-dark .psx-detail__body { padding: 14px 20px 24px; }
}