/* Purpose: Customer stories — inline 9:16 videos that autoplay muted, tap for sound. Swipe rail on mobile, 4-up grid above. */

.reels {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad) var(--space-2);
  gap: var(--space-3);
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }

.story { margin: 0; flex: 0 0 70%; scroll-snap-align: start; }
.story-media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--color-primary-dark); cursor: pointer; }
.story-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--gradient-media-fade); transition: opacity .5s var(--ease); }
.story.sound .story-media::after { opacity: .4; }

.s-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-green-glass);
  border: 1px solid var(--color-accent);
  display: grid;
  place-items: center;
  color: var(--color-ivory);
  pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease), transform var(--duration-medium) var(--ease);
}
.s-play svg { width: 18px; height: 18px; margin-left: 3px; }
.story.playing .s-play { opacity: 0; transform: translate(-50%, -50%) scale(.85); }

.s-hint { position: absolute; z-index: 2; left: 14px; bottom: 14px; font-size: var(--text-xs); color: var(--color-ivory); display: flex; align-items: center; gap: var(--space-2); pointer-events: none; transition: opacity var(--duration-medium); }
.story.sound .s-hint { opacity: 0; }

.s-mute { position: absolute; z-index: 3; right: var(--space-3); bottom: var(--space-3); width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--color-ivory-fine); background: var(--color-vault-glass); color: var(--color-ivory); display: grid; place-items: center; cursor: pointer; padding: 0; }
.s-mute svg { width: 17px; height: 17px; }
.s-mute .on { display: none; }
.story.sound .s-mute .on { display: block; }
.story.sound .s-mute .off { display: none; }

.s-bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-ivory-track); }
.s-bar i { display: block; height: 100%; width: 0; background: var(--color-accent); }

.story figcaption { font-family: var(--font-heading); font-style: italic; font-size: var(--text-lede); line-height: var(--leading-compact); margin-top: var(--space-4); color: var(--color-primary); }

.more { margin-top: var(--space-8); text-align: center; }
.more .btn { width: 100%; align-self: stretch; }

/* md */
@media (min-width: 641px) {
  .reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); overflow-x: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .more { margin-top: var(--space-12); }
  .more .btn { width: auto; align-self: auto; }
}