/*
================================================================
Space Vanta Theme 2.0
Module: PDP media band (video / real buyers / story)
Path: public/pdp/media.css
Version: PDP-MEDIA-100  (PDP 1.0)

Cards sit on a hard offset plane (the layered DNA, used once, small).
The popup reuses the Note popup (note.css): same plate, same seam.
Phone: not a shrunk row, but three compact list rows with a thumbnail.
================================================================
*/

.pdm {
  --pd-mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --pd-cut: 12px;
  position: relative; min-width: 0; color: var(--svd-ink, #252321);
}
.pdm[hidden] { display: none; }
.pdm, .pdm *, .pdm *::before, .pdm *::after { box-sizing: border-box; }

.pdm__head { position: relative; padding-bottom: 16px; margin-bottom: 26px; }
.pdm__eyebrow { display: block; margin-bottom: 8px; font-family: var(--pd-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--svd-seam, #1d6bff); }
.pdm__title { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.pdm__seam { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(var(--svd-line, #ddd6c9), var(--svd-line, #ddd6c9)) 0 50% / 100% 1px no-repeat; }
.pdm__seam::after { content: ""; position: absolute; left: 0; bottom: 0; width: 148px; height: 2px; background: var(--svd-seam-line, linear-gradient(90deg, #7dadde, #e5ffff, #1d6bff)); }

/* ---------- cards ---------- */
.pdm__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.pdm__row[data-n="1"] { max-width: 460px; grid-template-columns: minmax(0, 1fr); }
.pdm__row[data-n="2"] { max-width: 940px; }

.pdm__item { position: relative; min-width: 0; padding: 0 14px 14px 0; }
.pdm__plane {
  position: absolute; inset: 14px 0 0 14px; pointer-events: none;
  border: 1px solid var(--svd-g400, #aeb1b9);
  background: repeating-linear-gradient(135deg, rgba(137,140,149,.22) 0 1px, rgba(137,140,149,0) 1px 7px);
  clip-path: polygon(var(--pd-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pd-cut));
}
.pdm__card {
  position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: 0; text-align: left; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 0; font: inherit; color: inherit;
  background: var(--svd-paper, #fbf7f0); box-shadow: inset 0 0 0 1px var(--svd-line, #ddd6c9);
  clip-path: polygon(var(--pd-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pd-cut));
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.pdm__card:hover { transform: translate(-4px, -4px); box-shadow: inset 0 0 0 1px var(--svd-seam, #1d6bff); }
.pdm__card:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 3px; }

.pdm__poster { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--svd-face-soft, #efebe8) center / cover no-repeat; }
.pdm__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,35,43,0) 55%, rgba(31,35,43,.28)); pointer-events: none; }
.pdm__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 58px; height: 58px; margin: -29px 0 0 -29px; background: var(--svd-face-deep, #313540);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: background .2s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.pdm__play::before { content: ""; position: absolute; left: 23px; top: 18px; border: solid transparent; border-width: 11px 0 11px 17px; border-left-color: var(--svd-ice, #e5ffff); }
.pdm__card:hover .pdm__play { background: var(--svd-seam, #1d6bff); transform: scale(1.06); }

.pdm__poster--stack { background: linear-gradient(135deg, #f1edea, #dbd9da); }
.pdm__shot {
  position: absolute; top: 12%; left: calc(7% + var(--i) * 17%); z-index: calc(3 - var(--i)); width: 40%; aspect-ratio: 4 / 5;
  background: #fff center / cover no-repeat; box-shadow: 0 0 0 3px #fff, 5px 5px 0 #b9c1ce; transform: translateY(calc(var(--i) * 9px));
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.pdm__card:hover .pdm__shot { transform: translateY(calc(var(--i) * 13px - 3px)); }
.pdm__count { position: absolute; right: 12px; bottom: 10px; z-index: 4; padding: 4px 8px; font-style: normal; font-family: var(--pd-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--svd-g900, #1f232b); }

.pdm__poster--story { background: var(--svd-face-deep, #313540); }
.pdm__poster--story::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(229,255,255,.14) 0 1px, transparent 1px 8px); }
.pdm__poster--story::after { content: none; }
.pdm__arrow { position: absolute; left: 50%; top: 50%; width: 64px; height: 2px; margin: -1px 0 0 -32px; background: var(--svd-ice, #e5ffff); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.pdm__arrow::after { content: ""; position: absolute; right: 0; top: -7px; width: 14px; height: 14px; border: solid var(--svd-ice, #e5ffff); border-width: 2px 2px 0 0; transform: rotate(45deg) scale(.8); transform-origin: 100% 0; }
.pdm__card:hover .pdm__arrow { transform: translateX(8px); }

.pdm__meta { display: grid; gap: 5px; padding: 16px 18px 18px; }
.pdm__kicker { font-family: var(--pd-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--svd-seam, #1d6bff); }
.pdm__t { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.pdm__sub { font-size: 13px; line-height: 1.5; color: var(--svd-muted, #5f574d); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- popup (reuses the Note popup) ---------- */
.sv-pdn-modal--media .sv-pdn-modal__dialog { width: min(860px, calc(100vw - 56px)); }
.sv-pdn-modal--media .sv-pdn-modal__sheet { min-height: 0; }
.sv-pdn-modal--media[data-kind="video"] .sv-pdn-modal__body { padding: 0; background: #0f1115; }
.pdm-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(66vh, 560px); background: #000; }
.pdm-stage video, .pdm-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.pdm-stage[data-orient="portrait"] { width: auto; height: min(72vh, 640px); max-height: none; aspect-ratio: 9 / 16; max-width: 100%; margin: 0 auto; }
.pdm-cap { margin: 0; padding: 14px 20px 18px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.78); background: #0f1115; }
.sv-pdn-modal--media[data-kind="shares"] .sv-pdn-shots { margin-top: 0; }
.sv-pdn-shots--shares .sv-pdn-shot img { max-height: 340px; }

/* ---------- phone: three compact rows, thumbnail left ---------- */
@media (max-width: 749px) {
  .pdm__head { margin-bottom: 18px; }
  .pdm__row, .pdm__row[data-n="1"], .pdm__row[data-n="2"] { display: flex; flex-direction: column; gap: 10px; max-width: none; }
  .pdm__item { padding: 0; }
  .pdm__plane { display: none; }
  .pdm__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; min-height: 84px; }
  .pdm__card:hover { transform: none; }
  .pdm__card:active { transform: scale(.992); }
  .pdm__poster { aspect-ratio: auto; min-height: 84px; height: 100%; }
  .pdm__play { width: 38px; height: 38px; margin: -19px 0 0 -19px; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
  .pdm__play::before { left: 15px; top: 11px; border-width: 8px 0 8px 12px; }
  .pdm__shot { top: 14%; width: 38%; box-shadow: 0 0 0 2px #fff, 3px 3px 0 #b9c1ce; left: calc(8% + var(--i) * 18%); }
  .pdm__count { right: 6px; bottom: 6px; padding: 3px 6px; font-size: 9px; }
  .pdm__arrow { width: 40px; margin-left: -20px; }
  .pdm__meta { align-content: center; padding: 12px 14px; gap: 3px; }
  .pdm__t { font-size: 15px; }
  .pdm__sub { font-size: 12.5px; -webkit-line-clamp: 1; }
  .pdm-stage { max-height: 56vh; }
  .pdm-stage[data-orient="portrait"] { height: 62vh; }
  .sv-pdn-modal--media .sv-pdn-modal__dialog { width: 100%; }
}

html[data-sv-motion="calm"] .pdm__card, html[data-sv-motion="calm"] .pdm__shot, html[data-sv-motion="calm"] .pdm__arrow { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pdm__card, .pdm__shot, .pdm__arrow, .pdm__play { transition: none !important; } }