/* --------------------------------------------------------------
   Project details dialog
   --------------------------------------------------------------
   Same palette, hairlines and typography as the panels behind it, so it
   reads as the card opening rather than as a component borrowed from
   somewhere else. Tokens only -- no literal colours except the backdrop
   wash, which has to be darker than --bg-0 to sit under it.
   -------------------------------------------------------------- */

.pd {
  width: min(680px, calc(100vw - 32px));
  max-height: min(84svh, 760px);
  padding: 0;
  /* site.css resets margins globally, which kills the UA's margin:auto on
     <dialog> and pins a modal to the top-left corner instead of centring it. */
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--foam);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.pd::backdrop { background: rgba(2, 8, 7, .74); }

.pd-body {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px clamp(18px, 4vw, 28px) 24px;
}

.pd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.pd-head .kicker { margin: 0; }

.pd h2 {
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1.2;
  margin: 0 0 14px;
}

.pd-desc {
  color: var(--foam);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  /* The whole point: no clamp, no ellipsis, at any width. */
  max-width: 62ch;
}

.pd-shots {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}
.pd-shots[hidden] { display: none; }
.pd-shots figure { margin: 0; }
.pd-shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--bg-0);
}
.pd-shots figcaption {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--mist);
}

.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 9px;
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
}
.pd-tags li {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
}

/* The front card is the press target, so say so. */
.slide.is-front { cursor: pointer; }

@media (max-width: 640px) {
  .pd-body { padding: 15px 16px 20px; }
  .pd-desc { font-size: 14.5px; line-height: 1.55; }
  /* The control row already carries two arrows and the dots on a phone. */
  .pd-open { margin-left: 6px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pd[open] { animation: pd-in .22s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes pd-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
}