/* experience-capsule — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 2860:2358 (frame 2602:865)   mobile 2935:898 (frame 2935:868)
 *
 * Behaviour is reused from the catalog section gallery-03 (continuous image
 * marquee): its module is copied verbatim to js/sections/gallery-03.js and
 * keeps its source-theme hooks (data-image-marquee*). Only the behaviour is
 * borrowed — markup and CSS here are built from this Figma node.
 *
 * Deviations from the Figma source:
 *   - Figma draws the three photos statically, centred and overflowing the
 *     frame on both sides at both breakpoints, and the file carries no motion
 *     data. That overflow-on-both-sides framing is the catalog's marquee
 *     convention, so it is built as a marquee; speeds (72px/s desktop,
 *     52px/s mobile) are gallery-03's defaults, not Figma values.
 *   - The masked Texture_02 wash behind the section exists on desktop only
 *     (the mobile frame has no Background group). Reproduced as a CSS mask
 *     gradient using the same stop positions as the Figma mask (0 at 76px,
 *     opaque at 467px, 0 at 782px of a 993px box).
 *   - Photo 3 reuses photo 1's asset, as in Figma.
 *   - Figma draws the first photo narrower than the other two (337px vs 606px
 *     on desktop, 160 vs 288 on mobile). All three are rendered at the wider
 *     width instead, so every photo in the marquee has the same resolution
 *     (client request).
 */

.experience-capsule,
.experience-capsule *,
.experience-capsule *::before,
.experience-capsule *::after { box-sizing: border-box; }
.experience-capsule :where(p, h2, ul, li) { margin: 0; }
.experience-capsule ul { list-style: none; padding: 0; }
.experience-capsule img { display: block; max-width: 100%; }

.experience-capsule {
  position: relative;
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  row-gap: 40px;
  width: 100%;
  padding: 64px 0;
  /* clip, not hidden: `overflow-x: hidden` computes overflow-y to auto, which
     turns the section into a scroll container and shows a vertical scrollbar
     for the Texture_02 layer that deliberately overflows it. */
  overflow-x: clip;
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

.experience-capsule__texture { display: none; }

.experience-capsule__header {
  grid-column: 1 / 27;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 15px;
  text-align: center;
}

.experience-capsule__title {
  font-family: var(--font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-36, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-gray-900, #101828);
}

.experience-capsule__subtitle {
  font-size: var(--fs-base, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-brand-dark-grey, #4C5155);
}

/* --------------------------------------------------------------- marquee */

.experience-capsule__viewport {
  grid-column: 1 / 27;
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
}

.experience-capsule__list {
  display: flex;
  align-items: center;
  gap: 16px;
  will-change: transform;
}

.experience-capsule__item {
  flex-shrink: 0;
  width: 288px;
  height: 203px;
}

.experience-capsule__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------- 768px + */

@media (min-width: 768px) {
  .experience-capsule__title { font-size: var(--fs-48, 48px); }

  .experience-capsule__item { width: 440px; height: 320px; }
}

/* -------------------------------------------------------------- 1024px + */

@media (min-width: 1024px) {
  .experience-capsule {
    row-gap: 56px;
    padding: 88px 0;
  }

  .experience-capsule__texture {
    display: block;
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 799px;
    background-image: url("../../img/texture-02.png");
    background-size: cover;
    background-position: center;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 76px, rgba(0, 0, 0, 1) 467px, rgba(0, 0, 0, 0) 782px);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 76px, rgba(0, 0, 0, 1) 467px, rgba(0, 0, 0, 0) 782px);
  }

  .experience-capsule__header {
    grid-column: 2 / 26;
    padding: 0;
  }

  .experience-capsule__title { font-size: var(--fs-60, 60px); }

  .experience-capsule__item { width: 606px; height: 427px; }
}