/* On site (Daniel, Oct 24): real moments from Deft's own shoot days (https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/shoot/). A row of three 3:4 frames in the
   job-tile look (rounded, white contour, frosted caption), the middle one set lower like the Our work lenses. Clips are
   short muted loops whose end dissolves into their start, so they never jump; scripts/onsite.js plays them only while
   on screen. Used on Social, Video ads (light) and the People story (obsidian, .is-dark). */
.ddm-x .ddm-onsite { margin-top:clamp(56px,7vw,104px); }
.ddm-x .ddm-onsite-lead { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 clamp(18px,2.4vw,28px); color:var(--ink-2); font-size:.95rem; max-width:62ch; }
.ddm-x .ddm-onsite-rec { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--ink); color:#fff; font:500 .62rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.ddm-x .ddm-onsite-rec i { width:6px; height:6px; border-radius:50%; background:var(--sun); box-shadow:0 0 8px var(--sun); animation:ddm-onsite-blink 1.6s steps(2,start) infinite; }
@keyframes ddm-onsite-blink { to { opacity:.25; } }
.ddm-x .ddm-onsite-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.8vw,24px); margin:0; padding:0; list-style:none; align-items:start; }
.ddm-x .ddm-onsite-row > li:nth-child(2) { margin-top:clamp(20px,3vw,48px); }
.ddm-x .ddm-onsite-shot { position:relative; margin:0; border-radius:18px; overflow:hidden; background:var(--paper); box-shadow:0 20px 40px -30px rgb(0 0 0/.45); }
.ddm-x .ddm-onsite-shot img,
.ddm-x .ddm-onsite-shot video { display:block; width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; transition:transform .8s var(--ease); }
.ddm-x .ddm-onsite-shot:hover img,
.ddm-x .ddm-onsite-shot:hover video { transform:scale(1.03); }
.ddm-x .ddm-onsite-shot figcaption { position:absolute; left:10px; right:10px; bottom:10px; display:grid; gap:1px; padding:9px 12px; border-radius:12px;
  background:rgb(255 255 255/.9); box-shadow:inset 0 1px 0 #fff, 0 6px 18px -10px rgb(0 0 0/.35); }  /* no backdrop blur: it flickers over playing video (Daniel, Oct 24) */
.ddm-x .ddm-onsite-shot b { font-size:.86rem; font-weight:600; }
.ddm-x .ddm-onsite-shot small { font-size:.74rem; color:var(--ink-3); }
.ddm-x .ddm-onsite-tag { position:absolute; top:10px; left:10px; }

/* Obsidian (People story): darker frames, dark frosted captions, white 1px rim like the story tiles */
.ddm-x .ddm-onsite.is-dark .ddm-onsite-lead { color:rgb(255 255 255/.72); }
.ddm-x .ddm-onsite.is-dark .ddm-onsite-rec { background:rgb(255 255 255/.1); box-shadow:inset 0 0 0 1px rgb(255 255 255/.18); }
.ddm-x .ddm-onsite.is-dark .ddm-onsite-shot { background:#111; box-shadow:0 0 0 1px rgb(255 255 255/.55), 0 0 22px -6px rgb(255 255 255/.35), 0 30px 60px -40px #000; }
.ddm-x .ddm-onsite.is-dark .ddm-onsite-shot figcaption { background:rgb(16 16 18/.86); box-shadow:inset 0 1px 0 rgb(255 255 255/.12); color:#fff; }
.ddm-x .ddm-onsite.is-dark .ddm-onsite-shot small { color:rgb(255 255 255/.66); }

@media (max-width:760px) {
  .ddm-x .ddm-onsite-row { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:68%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
  .ddm-x .ddm-onsite-row::-webkit-scrollbar { display:none; }
  .ddm-x .ddm-onsite-row > li { scroll-snap-align:start; }
  .ddm-x .ddm-onsite-row > li:nth-child(2) { margin-top:0; }
}
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-onsite-rec i { animation:none; }
  .ddm-x .ddm-onsite-shot img, .ddm-x .ddm-onsite-shot video { transition:none; }
}