/* ============================================================
   Photo strip — a single slow-scrolling row of real photographs.
   Compact by design: one row, ~200px tall, full-bleed, so it adds
   evidence without eating the page. Pauses on hover/focus, respects
   prefers-reduced-motion, and falls back to a normal swipeable
   scroller on touch.
   ============================================================ */

.photostrip{
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.9rem, 3.4vw, 2.8rem);
  background: var(--surface-alt, #F7F6F3);
  border-top: 1px solid var(--rule-c);
  border-bottom: 1px solid var(--rule-c);
  position: relative;
  overflow: hidden;
}
.photostrip::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: var(--tri-light);
}
.photostrip-head{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  margin-bottom: clamp(.9rem, 2vw, 1.3rem);
}
.photostrip-head .eyebrow{ margin:0 }
.photostrip-head .ps-note{
  margin:0; font-size: var(--fs-xs); color: var(--text-soft);
}

/* --- the moving rail --- */
.pstrip{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.pstrip::-webkit-scrollbar{ display:none }
.pstrip.is-dragging{ cursor: grabbing }

.pstrip-track{
  display: flex;
  gap: 14px;
  width: max-content;
  padding-inline: max(18px, calc((100vw - var(--wrap-w, 1180px)) / 2));
  will-change: transform;
}
.pstrip.is-auto .pstrip-track{
  animation: pstrip-roll var(--pstrip-dur, 90s) linear infinite;
}
.pstrip.is-auto:hover .pstrip-track,
.pstrip.is-auto:focus-within .pstrip-track,
.pstrip.is-auto.is-paused .pstrip-track{ animation-play-state: paused }

@keyframes pstrip-roll{
  from{ transform: translate3d(0,0,0) }
  to  { transform: translate3d(calc(-50% - 7px),0,0) }   /* half the doubled track + half the gap */
}

/* --- each photo --- */
.pshot{
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  width: clamp(212px, 24vw, 288px);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-800, #1D3050);
  box-shadow: 0 6px 18px rgba(16,24,40,.10);
  isolation: isolate;
}
.pshot img{
  width:100%; height:100%; object-fit: cover; display:block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  -webkit-user-drag: none; user-select: none;
}
.pshot:hover img{ transform: scale(1.045) }
.pshot figcaption{
  position:absolute; inset:auto 0 0 0;
  padding: 1.5rem .7rem .55rem;
  font-size: .74rem; line-height:1.25; font-weight:600; color:#fff;
  background: linear-gradient(to top, rgba(11,18,32,.86) 12%, rgba(11,18,32,.55) 55%, rgba(11,18,32,0) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.pshot button.pshot-btn{
  position:absolute; inset:0; width:100%; height:100%;
  background:none; border:0; padding:0; margin:0; cursor: zoom-in;
  font: inherit; color: transparent;
}
.pshot button.pshot-btn:focus-visible{
  outline: 3px solid var(--gold-on-ink, #E7C56A); outline-offset: -3px;
}

/* soft fade at both ends so the row reads as endless, not cut off */
.photostrip .ps-mask{ position:relative }
.photostrip .ps-mask::before,
.photostrip .ps-mask::after{
  content:""; position:absolute; top:0; bottom:0; width: clamp(28px, 7vw, 96px);
  pointer-events:none; z-index:2;
}
.photostrip .ps-mask::before{ left:0;  background: linear-gradient(to right, var(--surface-alt,#F7F6F3), transparent) }
.photostrip .ps-mask::after { right:0; background: linear-gradient(to left,  var(--surface-alt,#F7F6F3), transparent) }

/* --- on the navy stage --- */
.photostrip.photostrip--ink{
  background: var(--ink-deep, #0E1A2E);
  border-color: rgba(255,255,255,.10);
}
.photostrip--ink .photostrip-head .ps-note{ color: rgba(255,255,255,.66) }
.photostrip--ink .ps-mask::before{ background: linear-gradient(to right, var(--ink-deep,#0E1A2E), transparent) }
.photostrip--ink .ps-mask::after { background: linear-gradient(to left,  var(--ink-deep,#0E1A2E), transparent) }
.photostrip--ink .pshot{ box-shadow: 0 6px 22px rgba(0,0,0,.35) }

/* --- video card inside the strip --- */
.pshot--video video{ width:100%; height:100%; object-fit:cover; display:block }
.pshot--video::after{
  content:""; position:absolute; top:.5rem; right:.5rem; width:26px; height:26px;
  border-radius:50%; background: rgba(11,18,32,.62) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/14px no-repeat;
  z-index:3; pointer-events:none;
}

/* --- lightbox --- */
.pslb{
  position: fixed; inset:0; z-index: 200;
  background: rgba(8,13,24,.94);
  display:none; align-items:center; justify-content:center;
  padding: clamp(1rem, 4vw, 3rem);
}
.pslb.on{ display:flex }
.pslb-fig{ margin:0; max-width:min(1180px, 94vw); max-height:88vh; text-align:center }
.pslb-fig img, .pslb-fig video{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.pslb-cap{
  margin:.85rem auto 0; max-width:60ch; color:#EDEAE3;
  font-size:.9rem; line-height:1.45;
}
.pslb-x, .pslb-prev, .pslb-next{
  position:absolute; background: rgba(255,255,255,.09); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:100px;
  width:46px; height:46px; font-size:1.2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pslb-x:hover, .pslb-prev:hover, .pslb-next:hover{ background: rgba(255,255,255,.2) }
.pslb-x{ top: clamp(.8rem,2vw,1.4rem); right: clamp(.8rem,2vw,1.4rem) }
.pslb-prev{ left: clamp(.5rem,2vw,1.6rem);  top:50%; transform:translateY(-50%) }
.pslb-next{ right: clamp(.5rem,2vw,1.6rem); top:50%; transform:translateY(-50%) }

@media (max-width: 640px){
  .pshot{ width: 200px; border-radius: 12px }
  .pshot figcaption{ font-size:.7rem; padding: 1.3rem .6rem .5rem }
  .pstrip-track{ gap:11px; padding-inline: 16px }
  .pslb-prev, .pslb-next{ width:40px; height:40px }
}

@media (prefers-reduced-motion: reduce){
  .pstrip.is-auto .pstrip-track{ animation: none }
  .pshot:hover img{ transform:none }
  .pshot img{ transition:none }
}

@media print{ .photostrip, .pslb{ display:none !important } }