/*
 * Stories — production styles. Literal values only (this section's own
 * needs), not the full design-token contract. Layout from the signed
 * Figma Play (Prototyping Board, `Stories 1440 - desktop / 2-5`). Source:
 * booth-repo 04-docs/wordpress/home-page-figma-build-and-migration/
 * specimens/stories-section.{html,css,js}
 */

#booth-stories, #booth-stories * , #booth-stories *::before, #booth-stories *::after { box-sizing: border-box; }

#booth-stories {
  width: 100%;
  padding: 100px 0; /* 70px at tablet/mobile, see media queries below */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px; /* --stories-section-gap */
  overflow: hidden;
  background: linear-gradient(133.62deg, #a6cbee 0%, #4b96dc 100%);
}

#booth-stories .booth-stories__title {
  width: min(931px, calc(100% - 80px));
  margin: 0;
  color: #222222; /* --color-ink */
  font-family: "Be Vietnam Pro", sans-serif; /* --font-display */
  font-size: 30px; /* --font-size-xxxl */
  line-height: 38px; /* --line-height-xxxl */
  font-weight: 500; /* --font-weight-medium */
  letter-spacing: -1px; /* --letter-spacing-tight */
  text-align: center;
}

#booth-stories .booth-stories__viewport {
  width: 100%;
  height: 517px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px; /* --stories-carousel-gap */
  overflow: hidden;
}

#booth-stories .booth-stories__card {
  flex: 0 0 578px;
  width: 578px;
  height: 439px;
  padding: 30px; /* --stories-card-padding */
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 16px;
  background: #ffffff; /* --color-white */
  color: #222222; /* --color-ink */
  font-family: "Poppins", sans-serif; /* --font-body */
  opacity: .5;
  overflow: hidden;
}

#booth-stories .booth-stories__card.is-featured {
  flex-basis: 680px;
  width: 680px;
  height: 517px;
  opacity: 1;
}

#booth-stories .booth-stories__stars {
  margin: 0 auto;
  color: #e0a82b; /* --color-gold */
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 30px;
}

#booth-stories .booth-stories__quote {
  margin: 0;
  font-size: 16px;
  line-height: 27px;
}

#booth-stories .booth-stories__rule {
  width: 100%;
  height: 1px;
  margin-top: auto;
  border: 0;
  background: #222222; /* --color-ink */
  opacity: .7;
}

#booth-stories .booth-stories__author {
  min-height: 101px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  line-height: 27px;
}

#booth-stories .booth-stories__author p { margin: 0; }
#booth-stories .booth-stories__company { margin-top: 16px !important; font-weight: 600; } /* --font-weight-semibold */
#booth-stories .booth-stories__mark { max-width: 180px; max-height: 64px; object-fit: contain; }

#booth-stories .booth-stories__controls {
  box-sizing: border-box;
  width: min(1196px, calc(100% - 40px));
  max-width: 1196px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  min-height: 40px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#booth-stories .booth-stories__progress {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  overflow: hidden;
  border-radius: 1000px;
  background: #ffffff;
}

#booth-stories .booth-stories__progress-fill {
  width: 0;
  height: 100%;
  background: #006bce;
  transition: width 0.25s ease;
}

#booth-stories .booth-stories__arrows {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
}

#booth-stories .booth-stories__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: #006bce;
  color: #ffffff;
  cursor: pointer;
}

#booth-stories .booth-stories__arrow:hover,
#booth-stories .booth-stories__arrow:focus-visible {
  background: #0051b5;
  outline: none;
}

#booth-stories button.booth-stories__arrow {
  box-shadow: none !important;
  min-height: 0 !important;
  width: 40px !important;
  height: 40px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #006bce !important;
  color: #ffffff !important;
}

#booth-stories .booth-stories__arrow svg {
  display: block;
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  #booth-stories .booth-stories__arrow,
  #booth-stories button.booth-stories__arrow {
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
  }
  #booth-stories .booth-stories__arrow svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 1024px) {
  #booth-stories { padding: 70px 0; }
  #booth-stories .booth-stories__title { width: min(720px, calc(100% - 80px)); }
}

@media (max-width: 767px) {
  /* Mobile Figma frames (`Stories 767 - mobile`) size cards to content
   * (HUG) instead of clipping to a fixed height, since the featured
   * card's full quote must be readable rather than peeking like the
   * desktop/tablet side cards. Card widths are scaled from the 767px
   * reference frame down to the real viewport (same --scale technique
   * as video-reviews.css) -- a real phone is narrower than 767px, and
   * without scaling the 640/460px cards overflow and clip mid-sentence. */
  #booth-stories {
    --stories-scale: calc(100vw / 767);
    padding: 70px 0;
  }
  #booth-stories .booth-stories__title {
    width: calc(100% - 80px);
    text-align: center;
  }
  #booth-stories .booth-stories__viewport {
    height: 904px; /* max featured card at 390, measured 2026-09-18 */
    align-items: stretch;
    gap: calc(32 * var(--stories-scale));
  }
  #booth-stories .booth-stories__card {
    flex-basis: calc(460 * var(--stories-scale));
    width: calc(460 * var(--stories-scale));
    height: auto;
    padding: calc(30 * var(--stories-scale));
  }
  #booth-stories .booth-stories__card.is-featured {
    flex-basis: calc(640 * var(--stories-scale));
    width: calc(640 * var(--stories-scale));
    height: 904px;
  }
  #booth-stories .booth-stories__quote {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}