/* experience-spaces — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 2668:4630 (frame 2602:865)   mobile 2935:937 (frame 2935:868)
 *
 * A scattered photo collage on Brand/dark gray (figma-rules/13-photo-collage.md).
 * No photo carries a rotation in this file (COLLAGE-1: checked, all five are
 * axis-aligned) and none has a border, so no frame can cover a neighbour.
 *
 * Deviations from the Figma source:
 *   - Desktop places the five photos on the 26-column grid (grid-calc output
 *     for each x/width), with the Figma y values as literal top offsets —
 *     vertical placement has no column equivalent.
 *   - Mobile positions are fractional px inside a 375px frame (e.g. x=211.02,
 *     y=330.77) and do not land on column boundaries, so below 1024px the
 *     photos are absolutely positioned at their exact Figma coordinates inside
 *     a relatively-positioned stage instead of using col-start/col-end.
 *   - Photo z-order: the Figma frame renders the centre photo over part of the
 *     heading. Client request: the text sits above every photo instead, so the
 *     heading and description stay readable while the collage parallaxes past.
 *   - The mobile collage is the desktop arrangement scaled to ~43%; both are
 *     ported from their own frame's numbers, not derived from each other.
 *   - Scroll parallax (js/sections/experience-spaces.js, gsap + ScrollTrigger)
 *     drifts each photo vertically at its own rate as the section crosses the
 *     viewport. Figma carries no motion data for this section, so the per-photo
 *     travel distances (data-parallax-speed in the markup) are an
 *     implementation choice; the effect is disabled under
 *     prefers-reduced-motion.
 */

.experience-spaces,
.experience-spaces *,
.experience-spaces *::before,
.experience-spaces *::after { box-sizing: border-box; }
.experience-spaces :where(p, h2) { margin: 0; }
.experience-spaces img { display: block; max-width: 100%; }

.experience-spaces {
  position: relative;
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  width: 100%;
  min-height: 812px;
  overflow: hidden;
  background: var(--color-brand-dark-gray, #21262A);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

/* Mobile: exact Figma coordinates inside a full-width stage (see deviations). */

.experience-spaces__stage {
  grid-column: 1 / 27;
  position: relative;
  height: 812px;
}

.experience-spaces__photo {
  position: absolute;
  z-index: 1;
  object-fit: cover;
  will-change: transform;
}

.experience-spaces__photo--01 { left: -75.08px; top: 134px;    width: 214.03px; height: 145.42px; }
.experience-spaces__photo--02 { left: 306.81px; top: 185.35px; width: 143.26px; height: 94.07px; }
.experience-spaces__photo--03 { left: 211.02px; top: 330.77px; width: 95.80px;  height: 120.82px; }
.experience-spaces__photo--04 { left: 8.23px;   top: 475.20px; width: 95.80px;  height: 120.82px; }
.experience-spaces__photo--05 { left: 164.41px; top: 533.58px; width: 214.03px; height: 145.42px; }

.experience-spaces__text {
  position: absolute;
  z-index: 2;
  top: 315px;
  left: 15px;
  width: 345px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.experience-spaces__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-text-inverse, #FFFFFF);
}

.experience-spaces__description {
  font-size: var(--fs-base, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-gray-300, #D0D5DD);
}

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

@media (min-width: 1024px) {
  .experience-spaces { min-height: 1495px; }

  .experience-spaces__stage { display: contents; }

  /* Every child sits in the single grid row and is offset vertically with the
     Figma y value; horizontal placement is col-start/col-end only (GRID-3). */
  .experience-spaces__photo,
  .experience-spaces__text {
    position: relative;
    grid-row: 1;
    align-self: start;
    top: auto;
    left: auto;
    width: 100%;
  }

  .experience-spaces__photo--01 { grid-column: 3 / 12;  height: 337px; margin-top: 156px; }
  .experience-spaces__photo--02 { grid-column: 19 / 25; height: 218px; margin-top: 275px; }
  .experience-spaces__photo--03 { grid-column: 15 / 19; height: 280px; margin-top: 612px; }
  .experience-spaces__photo--04 { grid-column: 4 / 8;   height: 280px; margin-top: 854px; }
  .experience-spaces__photo--05 { grid-column: 13 / 22; height: 337px; margin-top: 1082px; }

  .experience-spaces__text {
    grid-column: 8 / 20;
    margin-top: 639.5px;
    padding: 0 88px;
  }

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