/* selr-gallery-strip.css — pairs with selr-gallery-strip.js (2026-08-19).
 * Two real workshop photos where the template's "Insights" blocks showed two
 * article cards. Sized to the card wrappers Framer used (flex 1 0 0, 551px
 * tall on desktop) so the block does not move. Design language: 30px radius,
 * glass caption, 1.03 hover zoom, no shadows. */

[data-selr-strip-hidden] { display: none !important; }

.selr-strip {
  display: flex; flex: 1 1 auto; gap: 20px; width: 100%;
  min-width: 0;
}
.selr-strip-tile {
  position: relative; display: block; overflow: hidden;
  flex: 1 0 0; min-width: 0; height: 551px;
  border-radius: 30px; background: #E9E6DE; text-decoration: none;
}
.selr-strip-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
@media (hover: hover) { .selr-strip-tile:hover img { transform: scale(1.03); } }
.selr-strip-cap {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 40px); height: 30px; padding: 0 12px 0 10px;
  border-radius: 30px;
  background: rgba(255,255,255,.35); border: 1px solid rgba(227,227,227,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #FFFFFA; font-family: Manrope, "Manrope Placeholder", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -0.025em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 12px rgba(0,0,0,.35);
}
.selr-strip-cap i { width: 6px; height: 6px; border-radius: 100%; background: #FFFFFA; opacity: .9; flex: 0 0 auto; }
.selr-strip-cap span { opacity: .82; }

@media (max-width: 1199px) {
  .selr-strip-tile { height: 440px; }
}
@media (max-width: 809px) {
  .selr-strip { flex-direction: column; gap: 15px; }
  /* flex-basis 0 would collapse the height in a column, so size by width */
  .selr-strip-tile { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .selr-strip-cap { left: 15px; bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .selr-strip-tile img { transition: none; }
  .selr-strip-tile:hover img { transform: none; }
}