/* ============================================================
   MEDIATRIX — WHAT WE CREATE (services page rail)
   After the Dark Star Labs "Interactive storytelling" section. Default: a
   header over a sideways-scrollable row. lib/motion/services-rail.js adds
   .is-pinned on wide screens: the section pins and scrolling moves the row.
   ============================================================ */

.srail{position:relative;padding-block:clamp(72px,9vw,120px);overflow:hidden}
.srail__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.srail__title{margin-top:16px;font-size:clamp(1.9rem,3.3vw,3.2rem);line-height:.98;word-spacing:.1em}
.srail__title em{font-style:normal;color:var(--yellow)}
.srail__cta{flex:none}

.srail__viewport{
  margin-top:clamp(28px,4vh,46px);
  overflow-x:auto;scrollbar-width:none;
  /* edges fade into the page, as in the reference */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 7vw),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 7vw),transparent 100%);
}
.srail__viewport::-webkit-scrollbar{display:none}
.srail__track{
  display:flex;gap:clamp(10px,1vw,18px);width:max-content;
  padding-inline:var(--gutter) 12vw;will-change:transform;
}

/* ---------- card ---------- */
.scard{
  --w:min(47vw,900px);
  position:relative;flex:none;width:max(300px,var(--w));aspect-ratio:1.62;
  border-radius:4px;overflow:hidden;isolation:isolate;background:#171204;
  box-shadow:inset 0 0 0 1px rgba(255,195,0,.14);
  will-change:transform;
}
.scard__media{position:absolute;inset:0;z-index:0}
.scard__media .live-layer{left:-8%;right:-8%;will-change:transform}
.scard__media .live-layer > img{filter:grayscale(1) contrast(1.25) brightness(.95)}
/* duotone: grey photo × brand yellow, then darkened like the reference's red */
.scard__tint{position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,#f0b400,#7a5a00);mix-blend-mode:multiply}
.scard__shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,11,.05) 0%,rgba(10,10,11,.2) 55%,rgba(10,10,11,.88) 100%),
    linear-gradient(180deg,rgba(10,10,11,.55) 0%,transparent 26%,transparent 70%,rgba(10,10,11,.7) 100%);
}

.scard__title{
  position:absolute;z-index:3;left:clamp(14px,1.4vw,24px);top:clamp(12px,1.4vw,22px);right:18%;margin:0;
  font-size:clamp(1.3rem,2.1vw,2.2rem);line-height:1;word-spacing:.12em;color:var(--text-hi);
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.scard__no{
  position:absolute;z-index:3;right:clamp(14px,1.4vw,24px);top:clamp(16px,1.6vw,26px);
  font-size:.6875rem;letter-spacing:0;color:rgba(255,255,255,.55);
}
.scard__tags{
  position:absolute;z-index:3;left:clamp(14px,1.4vw,24px);right:clamp(14px,1.4vw,24px);bottom:clamp(12px,1.3vw,20px);
  display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;
}
.scard__tags li{
  padding:4px 8px;font-size:.625rem;letter-spacing:0;text-transform:uppercase;white-space:nowrap;
  color:var(--text-hi);background:rgba(10,10,11,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  transition:background .3s,color .3s,box-shadow .3s;
}
.scard__hit{position:absolute;inset:0;z-index:4}
.scard:hover .scard__tags li,.scard:focus-within .scard__tags li{background:rgba(255,195,0,.2);box-shadow:inset 0 0 0 1px rgba(255,195,0,.75)}
.scard:focus-within{box-shadow:inset 0 0 0 2px var(--yellow)}

/* ---------- pinned (wide screens, motion allowed) ---------- */
.srail.is-pinned{padding-block:0}
.srail.is-pinned .srail__pin{
  height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(70px,9vh,100px);
}
.srail.is-pinned .srail__viewport{overflow:visible}
.srail.is-pinned .scard{--w:min(47vw,calc((100svh - 330px) * 1.62),900px)}

@media (max-width:760px){
  .srail__head{flex-direction:column;align-items:flex-start}
  .scard{--w:84vw}
  .scard__tags li{font-size:.5625rem}
}