/* ============================================================
   dop · Service page (01 · 19 June)  ·  page-level styles
   Sits on top of service-beta.css (catalog sk-* primitives) and
   home/dop-header.css + home/dop-footer.css (shell). No packages.
   Glyph placeholders are replaced by user-fillable <image-slot>s.
   ============================================================ */

/* ---- page shell under the shared video hero ---- */
.sp-shell{
  max-width:1200px; margin:0 auto;
  padding:clamp(46px,6vw,86px) var(--shell-gutter) clamp(60px,8vw,104px);
}
.sp-intro{max-width:760px; margin:0 0 clamp(34px,4.5vw,56px);}
.sp-eyebrow{display:inline-flex; align-items:center; gap:11px; margin:0 0 16px;
  font:600 12px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase; color:var(--green);}
.sp-eyebrow::before{content:""; width:28px; height:1.5px; background:var(--green);}
.sp-title{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.015em;
  font-size:clamp(30px,4.2vw,50px); line-height:1.05;}
.sp-title em{font-style:italic; color:var(--green);}
.sp-sub{margin:16px 0 0; font:500 18px/1.5 var(--edit); color:var(--ink-soft); max-width:60ch;}

/* the catalog body sits flush — no mockup card chrome */
.sp-shell .sk-split{padding:0; gap:clamp(26px,3.4vw,46px); grid-template-columns:228px 1fr;}
.sp-shell .sk-rail-index{top:104px;}            /* clear the fixed header capsule */
.sp-shell .sk-block:first-child{padding-top:8px;}

/* rail "book" button → real link */
a.sk-cta.block{box-sizing:border-box;}

/* ============================================================
   image-slot tiles — slot fills the tile, overlays float above
   ============================================================ */
.sk-tile.has-slot{padding:0;}
.sk-tile.has-slot > image-slot{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  border-radius:inherit; z-index:1;
}
/* split before/after staging — two slots side by side */
.sk-tile.has-split > image-slot{position:absolute; top:0; bottom:0; width:50%; height:100%;}
.sk-tile.has-split > image-slot.s-before{left:0; right:auto;}
.sk-tile.has-split > image-slot.s-after{left:50%; right:auto;}

/* every decorative overlay must not eat the drop / click */
.sk-tile.has-slot .sk-playo,
.sk-tile.has-slot .sk-badge,
.sk-tile.has-slot .sk-cap,
.sk-tile.has-slot .sk-cap-l,
.sk-tile.has-slot .sk-cap-t,
.sk-tile.has-slot .sk-tour-hint,
.sk-tile.has-slot .sk-ba-divider{pointer-events:none; z-index:4;}
.sk-tile.has-slot .sk-badge{z-index:5;}

/* ---------- horizontal rails: real touch / mouse swipe ---------- */
.sp-shell .sk-rail,
.sp-photo-rail{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-padding-left:2px; padding-bottom:8px; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--clay) transparent;
}
.sp-shell .sk-rail.is-drag,
.sp-photo-rail.is-drag{cursor:grabbing; scroll-snap-type:none;}
.sp-shell .sk-rail::-webkit-scrollbar,
.sp-photo-rail::-webkit-scrollbar{height:6px;}
.sp-shell .sk-rail::-webkit-scrollbar-thumb,
.sp-photo-rail::-webkit-scrollbar-thumb{background:var(--clay); border-radius:999px;}
.sp-shell .sk-rail > *,
.sp-photo-rail > *{scroll-snap-align:start; flex:0 0 auto;}
.sp-shell .sk-rail.is-drag *{pointer-events:none;}   /* during an active swipe only */

/* photography lead row gets a touch more presence */
.sp-photo-rail{display:flex; gap:14px;}
.sp-photo-rail .sk-tile{flex:0 0 168px;}

/* ---------- per-service price ---------- */
.sk-sec-price{margin-left:auto; align-self:center; white-space:nowrap;
  font:700 12.5px/1 var(--ui); letter-spacing:.01em; color:var(--green);
  background:var(--signal-tint); border:1px solid rgba(31,138,99,.28);
  padding:7px 13px; border-radius:999px;}
.sk-sec-price em{font-style:normal; font-weight:600; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); margin-right:5px;}
.sk-sec-head.has-price .sk-sec-rule{min-width:14px;}

/* price chip floating on a media tile */
.sk-price{position:absolute; left:9px; bottom:9px; z-index:6; pointer-events:none;
  font:700 12px/1 var(--ui); color:var(--ink);
  background:rgba(246,241,232,.94); border:1px solid rgba(28,26,20,.08);
  padding:6px 10px; border-radius:999px; box-shadow:0 4px 12px -6px rgba(28,26,20,.5);}
.sk-price.ai{color:var(--green); background:rgba(228,239,233,.95); border-color:rgba(31,138,99,.3);}

@media (max-width:560px){
  .sp-shell .sk-split{grid-template-columns:1fr;}
  .sp-shell .sk-rail-index{position:static; top:auto;}
  .sp-photo-rail{overflow-x:auto;}
}