/* Homepage "Stories from Our Couples" (js/stories/stories.js): a carousel of wide cards. Uses the existing palette and fonts. */
.st-carousel { position: relative; --st-gap: clamp(1rem, 2vw, 1.5rem); --st-per: 3; }
.st-track {
  display: grid; grid-auto-flow: column; gap: var(--st-gap);
  grid-auto-columns: calc((100% - (var(--st-per) - 1) * var(--st-gap)) / var(--st-per));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: .75rem .25rem 1.25rem; margin: -.75rem -.25rem 0; scrollbar-width: none;
}
.st-track::-webkit-scrollbar { display: none; }
.st-track:focus-visible { outline: 2px solid var(--gold, #B89B63); outline-offset: 2px; border-radius: 14px; }

.st-card {
  position: relative; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.1rem;
  background: var(--surface, #FFFDF7); border: 1px solid rgba(184, 155, 99, .32); border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 30, 15, .04), 0 12px 30px rgba(40, 30, 15, .07);
  transition: transform .35s ease, box-shadow .35s ease;
}
.st-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold, #B89B63), rgba(184, 155, 99, .2)); }
.st-card::after {
  content: "“"; position: absolute; right: 1.1rem; bottom: -2.2rem; font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 11rem; line-height: 1; color: rgba(184, 155, 99, .12); pointer-events: none;
}
.st-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(40, 30, 15, .05), 0 20px 40px rgba(40, 30, 15, .11); }

.st-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 1.5rem; }
.st-stars { color: var(--gold, #B89B63); font-size: 1.05rem; letter-spacing: .14em; line-height: 1; }
.st-stars-off { color: rgba(184, 155, 99, .28); }
.st-mark { font-family: var(--font-display, 'Cormorant Garamond', serif); font-size: 3.6rem; line-height: .5; height: 1.5rem; color: var(--gold, #B89B63); }
.st-flag { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #5B665E); border: 1px solid var(--line, rgba(0, 0, 0, .1)); border-radius: 999px; padding: .28rem .6rem; white-space: nowrap; background: rgba(255, 255, 255, .6); }

.st-quote { margin: 0; flex: 1; position: relative; z-index: 1; }
.st-quote p { margin: 0; font-family: var(--font-display, 'Cormorant Garamond', serif); font-size: clamp(1.2rem, 1.05rem + .45vw, 1.38rem); line-height: 1.5; color: var(--forest, #304638); }

.st-by { position: relative; z-index: 1; display: flex; align-items: center; gap: .85rem; padding-top: 1.1rem; border-top: 1px solid var(--line, rgba(0, 0, 0, .08)); }
.st-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--forest, #304638); color: #E2CC98; font-family: var(--font-display, serif); font-size: .9rem; font-weight: 600; box-shadow: 0 0 0 2px var(--surface, #FFFDF7), 0 0 0 3.5px rgba(184, 155, 99, .7); overflow: hidden; }
.st-avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-who { display: grid; gap: .2rem; min-width: 0; }
.st-who strong { font-size: 1rem; color: var(--ink, #2A332C); }
.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; }
.st-tag { font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-ink, #7A6236); }
.st-loc { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--muted, #5B665E); white-space: nowrap; }

.st-ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem; }
.st-carousel.st-fits .st-ctrl { display: none; }
.st-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--forest, #304638); background: var(--surface, #FFFDF7); border: 1px solid rgba(184, 155, 99, .55); transition: background .25s, color .25s, transform .25s; }
.st-btn:hover { background: var(--forest, #304638); color: #FFFDF7; }
.st-btn:focus-visible, .st-dot:focus-visible { outline: 2px solid var(--gold, #B89B63); outline-offset: 3px; }
.st-dots { display: flex; gap: .45rem; }
.st-dot { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(48, 70, 56, .22); transition: width .3s ease, background .3s ease; }
.st-dot[aria-current="true"] { width: 26px; background: var(--gold, #B89B63); }
.st-note { margin-top: 1.1rem; max-width: 46rem; }

@media (max-width: 1000px) { .st-carousel { --st-per: 2; } }
@media (max-width: 640px) {
  .st-carousel { --st-per: 1; }
  .st-track { grid-auto-columns: 86%; }
  .st-card { padding: 1.5rem 1.35rem 1.3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .st-card { opacity: 0; transform: translateY(18px); }
  .st-card.st-in { opacity: 1; transform: none; transition: opacity .7s ease calc(var(--i, 0) * 110ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 110ms), box-shadow .35s ease; }
  .st-card.st-in:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .st-track { scroll-behavior: auto; } }