/* Generated from site/src/styles/components/strip.css by wordpress/tools/sync-theme-assets.mjs – edit the source, not this copy. */
/*
 * Photo strip ("Last Time" on Home): every photo the same height – portrait
 * ones narrower, landscape wider, so how many show varies – in one row that
 * drifts slowly sideways (strip.js), looping without a jump. Drag with the
 * mouse, swipe or scroll to move it by hand; the button under the strip
 * pauses or plays it. Without JavaScript (or with reduced motion) it is a
 * row to scroll by hand. 7 px white borders as before.
 * WordPress: part of the home template CSS.
 */
.strip { --strip-h: 280px; --gap: 24px; position: relative; }
@media (max-width: 1023px) { .strip { --strip-h: 220px; --gap: 18px; } }
@media (max-width: 560px) { .strip { --strip-h: 180px; --gap: 11px; } }

.strip-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  cursor: grab;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-track.is-dragging { cursor: grabbing; }
.strip-slide { flex: none; }
.strip-slide img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--strip-h);
  border: 7px solid var(--white);
  -webkit-user-drag: none;
}

/* Pause / play (WCAG 2.2.2: moving content can be stopped): the icon alone,
   its name ("Pause photos" / "Play photos") for screen readers only. */
.strip-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 10px auto 0;
  padding: 0;
  border: 2px solid var(--maroon);
  background: var(--white);
  color: var(--maroon);
  cursor: pointer;
}
.strip-toggle[hidden] { display: none; }
.strip-toggle .icon { width: 14px; height: 16px; }
.strip-toggle .icon-play,
.strip-toggle[data-paused='true'] .icon-pause { display: none; }
.strip-toggle[data-paused='true'] .icon-play { display: block; }
.strip-toggle:hover, .strip-toggle:focus-visible { background: var(--maroon); color: var(--white); }

/* The drifting row runs from screen edge to screen edge (the section keeps
   the page from scrolling sideways). */
.last-time { overflow-x: clip; }
.last-time .strip-track { margin-inline: calc(50% - 50vw); padding-inline: 0; }

/* Each photo opens large (lightbox.js). */
.strip-link { display: block; cursor: zoom-in; }
.strip-track.is-dragging .strip-link { cursor: grabbing; }
.strip-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }