/* experience-equipment — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 3655:1405 (frame 2602:865)   mobile 3656:1427 (frame 2935:868)
 *
 * Deviations from the Figma source:
 *   - Panel states: the desktop frame draws RUN and RAMEUR/SKIERG white with
 *     dark labels and CYCLE with the photo behind a white label; the mobile
 *     frame draws all three with the photo. Read as a hover state (desktop
 *     shows one panel hovered, mobile has no hover so all are shown filled).
 *     Hover/focus reveal at 300ms per figma-rules/14-buttons-interactions.md;
 *     the transition duration is a repo convention, not a Figma value.
 *   - Figma builds the photo card as a frame rotated 180° and flipped on Y,
 *     which nets to a horizontal mirror of the photo with the notch in the
 *     top-right corner. Reproduced with transform: scaleX(-1) on the photo
 *     alone; text positions below are the mirrored (displayed) coordinates.
 *   - The panels are presented as a static list: Figma carries no prototype
 *     interaction or motion data for them and they have no link target.
 *   - The card's corner notch is cut out of the card with a mask rather than
 *     covered by Figma's #F9FAFB-filled overlay shape, which left a 1px edge of
 *     the photo at the corner. The shape is inlined as a data: URI because
 *     mask-image is CORS-checked and a file:// document is an opaque origin.
 *   - img/card-equipment.png is the unresized Figma source asset (3540×2360).
 *     No image tooling is available in this environment (no PIL/ImageMagick/
 *     ffmpeg, pip install unavailable), so the page ships the full-resolution
 *     file; it wants a compression pass before delivery.
 */

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

.experience-equipment {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  width: 100%;
  padding: 64px 0;
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

.experience-equipment__inner {
  grid-column: 1 / 27;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 15px;
}

/* ------------------------------------------------------------- photo card */

.experience-equipment__card {
  position: relative;
  height: 434px;
  border-radius: 16px 0 16px 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%3Cg%20transform='translate(80%200)%20scale(-1%201)'%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%3Cg%20transform='translate(80%200)%20scale(-1%201)'%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: right -1px top -1px, left top;
          mask-position: right -1px top -1px, left top;
  -webkit-mask-size: 52px 52px, 100% 100%;
          mask-size: 52px 52px, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: xor, source-over;
          mask-composite: exclude, add;
}

.experience-equipment__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  transform: scaleX(-1);
  /* Figma applies a saturation-0 filter to this fill; the exported source
     asset is the original colour photo. */
  filter: grayscale(1);
}

.experience-equipment__card-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
}


.experience-equipment__card-title {
  position: absolute;
  top: 20px;
  left: 20px;
  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-equipment__card-list {
  position: absolute;
  top: 290px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 178px;
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  line-height: 1.46;
  text-transform: uppercase;
  color: var(--color-brand-gray, #DBDBDB);
}

/* ----------------------------------------------------------------- panels */

.experience-equipment__body {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.experience-equipment__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-equipment__panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-equipment__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 137px;
  padding: 20px;
  border: 1px solid var(--color-gray-200, #EAECF0);
  overflow: hidden;
  background-color: var(--color-surface, #FFFFFF);
  background-image: url("../../img/panel-cardio.jpg");
  background-size: cover;
  background-position: center;
}

.experience-equipment__panel-label {
  position: relative;
  font-size: var(--fs-28, 28px);
  font-weight: 500;
  line-height: 1.32;
  text-align: right;
  text-transform: uppercase;
  color: var(--color-text-inverse, #FFFFFF);
  transition: color 300ms ease;
}

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

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

@media (min-width: 768px) {
  .experience-equipment__card { height: 560px; }
  .experience-equipment__card-title { font-size: var(--fs-48, 48px); }
  .experience-equipment__card-list { top: auto; bottom: 44px; }
}

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

@media (min-width: 1024px) {
  .experience-equipment { padding: 88px 0; }

  .experience-equipment__inner {
    grid-column: 2 / 26;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 0;
  }

  .experience-equipment__card {
    flex: 0 0 609px;
    width: 609px;
    height: 635px;
  }

  .experience-equipment__card {
    -webkit-mask-size: 82px 82px, 100% 100%;
            mask-size: 82px 82px, 100% 100%;
  }

  .experience-equipment__card-title {
    top: 50px;
    left: 42px;
    font-size: var(--fs-60, 60px);
  }

  .experience-equipment__card-list {
    top: 461px;
    bottom: auto;
    left: 50px;
  }

  .experience-equipment__body {
    flex: 0 0 674px;
    width: 674px;
  }

  .experience-equipment__title { font-size: var(--fs-40, 40px); }

  .experience-equipment__panels { gap: 26px; }

  /* Desktop rest state: white panel, dark label. The photo fills in on hover
     (see the deviations note above). */
  .experience-equipment__panel {
    background-image: none;
    transition: background-color 300ms ease;
  }

  .experience-equipment__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../../img/panel-cardio.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 300ms ease;
  }

  .experience-equipment__panel-label { color: var(--color-gray-900, #101828); }

  .experience-equipment__panel:hover::before,
  .experience-equipment__panel:focus-within::before { opacity: 1; }

  .experience-equipment__panel:hover .experience-equipment__panel-label,
  .experience-equipment__panel:focus-within .experience-equipment__panel-label {
    color: var(--color-text-inverse, #FFFFFF);
  }
}