/* experience-steps — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 2677:4786 "repeater_03" (frame 2602:865)
 *   mobile  2935:1374              (frame 2935:868)
 *
 * The Figma layer is named repeater_03 after the catalog section of the same
 * name. repeater-03 was checked and is a loose match only (it mirrors this
 * layout — photo left, cards right — and has no left label column), so per the
 * repo's Figma-sourcing rule 7 only its behaviour is reused: the shorter photo
 * column pins while the taller card column scrolls past
 * (figma-rules/09-sticky-column.md). Markup and CSS are built from this node.
 *
 * Deviations from the Figma source:
 *   - Sticky offset (top: 56px) is a judgment call: static Figma frames carry
 *     no scroll-time offset (STICKY-3).
 *   - Desktop section ground is Gray/50 #F9FAFB; the mobile frame has no fill
 *     and sits on white. Both ported as drawn, not unified.
 *   - Desktop cards use 32px padding, mobile 20px — a real Figma difference.
 *   - The masked Texture_02 wash sits at y=416 on desktop and y=309 on mobile,
 *     where it is also pulled 532px left of the frame (a 1440px-wide layer on a
 *     375px frame). Reproduced by centring the layer on mobile.
 *   - The corner notches are cut out of the element with a mask of the Figma
 *     "Subtract" shape rather than covered by an opaque overlay: an overlay
 *     had to guess the colour behind the corner and always left a 1px edge.
 *     The shapes are inlined as data: URIs because mask-image is CORS-checked
 *     and a file:// document is an opaque origin, so a linked mask silently
 *     hides the element. The notched corners' own border-radius is 0 and the
 *     mask is oversized a couple of px so nothing of the element survives at
 *     the corner.
 *   - Desktop has no image on mobile at all — the photo column is desktop-only.
 */

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

.experience-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  width: 100%;
  padding: 64px 0;
  /* clip, not hidden: `overflow-x: hidden` computes overflow-y to auto, which
     makes this section a scroll container and silently kills the sticky photo
     column below (figma-rules/09-sticky-column.md). */
  overflow-x: clip;
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

.experience-steps__texture {
  position: absolute;
  top: 309px;
  left: 50%;
  width: 1440px;
  height: 799px;
  margin-left: -720px;
  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-steps__inner {
  grid-column: 1 / 27;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 15px;
}

.experience-steps__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-steps__label {
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  line-height: 1.46;
  text-transform: uppercase;
  color: var(--color-brand-dark-grey, #4C5155);
}

.experience-steps__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.experience-steps__columns { display: flex; }

.experience-steps__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.experience-steps__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px;
  background: var(--color-surface, #FFFFFF);
}

.experience-steps__card-index {
  font-size: var(--fs-md, 18px);
  font-weight: 500;
  line-height: 1.54;
  color: var(--color-gray-500, #667085);
}

.experience-steps__card-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-steps__card-title {
  font-size: var(--fs-lg, 20px);
  font-weight: 500;
  line-height: 1.48;
  color: var(--color-gray-900, #101828);
}

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

.experience-steps__media { display: none; }

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

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

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

@media (min-width: 1024px) {
  .experience-steps {
    padding: 88px 0;
    background: var(--color-gray-50, #F9FAFB);
  }

  .experience-steps__texture {
    top: 416px;
    left: 0;
    width: 100%;
    margin-left: 0;
  }

  .experience-steps__inner {
    grid-column: 2 / 26;
    gap: 54px;
    padding: 0;
  }

  .experience-steps__title {
    max-width: 830px;
    font-size: var(--fs-60, 60px);
  }

  .experience-steps__body {
    flex-direction: row;
    gap: 56px;
    align-items: flex-start;
  }

  .experience-steps__label {
    flex: 0 0 221px;
    width: 221px;
  }

  .experience-steps__columns {
    display: flex;
    flex: 1 1 auto;
    gap: 32px;
    align-items: stretch;
    min-width: 0;
  }

  .experience-steps__list {
    flex: 0 0 442px;
    width: 442px;
  }

  /* Shorter photo column pins while the card column scrolls past
     (figma-rules/09-sticky-column.md, STICKY-2: the tall wrapper is not the
     sticky element — the inner photo box is). */
  .experience-steps__media {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .experience-steps__media-inner {
    position: sticky;
    top: 56px;
    height: 642px;
    border-radius: 0 16px 0 16px;
    overflow: hidden;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M80%200C68.1553%203.66033e-07%2058.5532%209.60205%2058.5532%2021.4468V37.1064C58.5532%2048.9512%2048.9512%2058.5532%2037.1064%2058.5532H21.4468C9.60205%2058.5532%200%2068.1553%200%2080V0H80Z'%20fill='%23F9FAFB'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2040%2040)'%3E%3Cpath%20d='M80%200C68.1553%203.66033e-07%2058.5532%209.60205%2058.5532%2021.4468V37.1064C58.5532%2048.9512%2048.9512%2058.5532%2037.1064%2058.5532H21.4468C9.60205%2058.5532%200%2068.1553%200%2080V0H80Z'%20fill='%23F9FAFB'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M80%200C68.1553%203.66033e-07%2058.5532%209.60205%2058.5532%2021.4468V37.1064C58.5532%2048.9512%2048.9512%2058.5532%2037.1064%2058.5532H21.4468C9.60205%2058.5532%200%2068.1553%200%2080V0H80Z'%20fill='%23F9FAFB'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2040%2040)'%3E%3Cpath%20d='M80%200C68.1553%203.66033e-07%2058.5532%209.60205%2058.5532%2021.4468V37.1064C58.5532%2048.9512%2048.9512%2058.5532%2037.1064%2058.5532H21.4468C9.60205%2058.5532%200%2068.1553%200%2080V0H80Z'%20fill='%23F9FAFB'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-position: left -1px top -1px, right -1px bottom -1px, left top;
            mask-position: left -1px top -1px, right -1px bottom -1px, left top;
    -webkit-mask-size: 82px 82px, 82px 82px, 100% 100%;
            mask-size: 82px 82px, 82px 82px, 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-composite: xor, xor, source-over;
            mask-composite: exclude, exclude, add;
  }

  .experience-steps__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
  }

}