/* ============================================================
   Photo gallery: full-bleed scrolling ticker rows
   ============================================================ */
.gallery {
  padding-block: 100px 0;
  background: var(--paper-elevated);
  overflow: hidden;
}

.gallery__inner {
  width: 100%;
  padding-inline: 100px;
  margin-bottom: 56px;
}

.gallery__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 100px;
}

.gallery__row {
  width: 100%;
  overflow: hidden;
}

.gallery__track {
  display: flex;
  width: max-content;
  gap: 16px;
  --parallax: 0px;
  animation-name: ticker-scroll-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.gallery__track--right {
  animation-name: ticker-scroll-right;
}

.gallery__item {
  flex: 0 0 auto;
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}

.gallery__item--wide {
  width: 400px;
}

.gallery__item--square {
  width: 300px;
}

.gallery__item--tall {
  width: 225px;
}

.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shared ticker keyframes: used by the photo gallery rows and the guest
   review rows, so both ticker-style sections share one motion technique.
   The --parallax custom property (set from script.js on the gallery track
   only) is layered on top of the infinite loop via calc(); it falls back to
   0px so any other element using these keyframes (e.g. review rows) can
   reuse them unmodified with no extra wiring. */
@keyframes ticker-scroll-left {
  from {
    transform: translateX(var(--parallax, 0px));
  }
  to {
    transform: translateX(calc(-50% + var(--parallax, 0px)));
  }
}

@keyframes ticker-scroll-right {
  from {
    transform: translateX(calc(-50% + var(--parallax, 0px)));
  }
  to {
    transform: translateX(var(--parallax, 0px));
  }
}

@media (max-width: 640px) {
  .gallery__inner {
    padding-inline: 24px;
  }

  .gallery__item {
    height: 194px;
  }

  .gallery__item--wide {
    width: 258px;
  }

  .gallery__item--square {
    width: 194px;
  }

  .gallery__item--tall {
    width: 146px;
  }
}

/* ============================================================
   Guest reviews: full-bleed scrolling ticker rows. Reuses the
   same ticker-scroll-left/right keyframes and row/track structure
   as the photo gallery above, so the two sections read as one
   consistent pattern rather than separate implementations.
   ============================================================ */
.reviews {
  padding-block: 100px;
  background: var(--paper);
  overflow: hidden;
}

.reviews__inner {
  width: 100%;
  padding-inline: 100px;
  margin-bottom: 56px;
}

.reviews__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Fallback for too few real reviews to fill a looping ticker row (see
   REVIEWS_TICKER_MIN in script.js): a plain wrapping, centered row of
   cards instead of the two-row marquee. */
.reviews__rows--static {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.reviews__row {
  width: 100%;
  overflow: hidden;
}

.reviews__track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation-name: ticker-scroll-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.reviews__track--right {
  animation-name: ticker-scroll-right;
}

/* Unlike the gallery ticker, reviews carry real testimonial text, so
   hovering pauses the row. A reader can actually finish a quote instead
   of it sliding away mid-glance. */
.reviews__row:hover .reviews__track {
  animation-play-state: paused;
}

.reviews__seq {
  display: flex;
  gap: 20px;
}

.review-card {
  flex: 0 0 auto;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  background: var(--paper-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.review-card__stars {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.review-card__stars .icon {
  width: 16px;
  height: 16px;
}

.review-card__stars .icon--solid {
  fill: var(--dusk-glow);
  stroke: none;
}

.review-card__stars .icon--empty {
  fill: var(--border);
  stroke: none;
}

.review-card__quote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .reviews__inner {
    padding-inline: 24px;
  }

  .review-card {
    width: 258px;
    padding: 20px;
  }
}