/* experience-hero — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 3271:4099 (frame 2602:865)   mobile 3271:4344 (frame 2935:868)
 *
 * Deviations from the Figma source:
 *   - Desktop hero title colour is Gray/900 #101828, mobile is Base/black #000.
 *     Both ported literally; they are not a responsive resize of one value.
 *   - The mobile navbar's burger has no open-menu frame in Figma. The panel
 *     below reuses the desktop link list and button pair stacked; its styling
 *     is an implementation choice, not a Figma value.
 *   - The banner's bottom-right notch exists on desktop only (Figma places the
 *     mobile copy at x=1240, outside the 375px frame, i.e. a leftover).
 *   - 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.
 *   - Nav item 5 ("Menu", 3346:1388) is hidden in Figma and is not rendered.
 */

.experience-hero,
.experience-hero *,
.experience-hero *::before,
.experience-hero *::after { box-sizing: border-box; }
.experience-hero :where(p, h1, h2, ul, ol, li, figure) { margin: 0; }
.experience-hero ul { list-style: none; padding: 0; }
.experience-hero a { text-decoration: none; }

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

/* ------------------------------------------------------------- promo bar */

.experience-hero__promo {
  grid-column: 1 / 27;
  background: var(--color-brand-dark-gray, #21262A);
  padding: 8px 15px;
}

.experience-hero__promo-text {
  font-size: var(--fs-12, 12px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-inverse, #FFFFFF);
  text-align: center;
}

/* ---------------------------------------------------------------- navbar */

.experience-hero__nav {
  grid-column: 1 / 27;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 15px;
}

.experience-hero__logo {
  display: block;
  width: 171px;
  height: 32px;
}

.experience-hero__menu,
.experience-hero__actions { display: none; }

.experience-hero__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.experience-hero__burger img { display: block; width: 24px; height: 24px; }

/* Mobile drop-down panel — no Figma frame, see deviations above. */
.experience-hero__panel {
  grid-column: 1 / 27;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 0 15px 16px;
}

.experience-hero__panel.is-open { display: flex; }

.experience-hero__panel .experience-hero__menu,
.experience-hero__panel .experience-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.experience-hero__link {
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  line-height: 1.46;
  text-transform: uppercase;
  color: var(--color-gray-900, #101828);
  transition: color 300ms ease;
}

.experience-hero__link:hover { color: var(--color-brand-red, #FF0031); }

.experience-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  line-height: 1.46;
  transition: background-color 300ms ease, color 300ms ease;
}

.experience-hero__button--dark {
  background: var(--color-brand-dark-gray, #21262A);
  color: var(--color-text-inverse, #FFFFFF);
}

.experience-hero__button--dark:hover { background: var(--color-black, #000000); }

.experience-hero__button--light {
  background: var(--color-gray-200, #EAECF0);
  color: var(--color-gray-900, #101828);
}

.experience-hero__button--light:hover { background: var(--color-gray-300, #D0D5DD); }

/* ---------------------------------------------------------------- banner */

.experience-hero__banner {
  grid-column: 1 / 27;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 436px;
  margin: 24px 15px 0;
  padding: 80px 0;
  border-radius: 0 16px 16px 16px;
  overflow: hidden;
}

.experience-hero__banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The corner notches are cut out of this element itself: the Figma "Subtract"
   shapes are mask layers subtracted from an opaque base layer, so the corner is
   genuinely absent rather than covered by an opaque shape laid on top. An
   overlay could never be seamless — it left a 1px edge of whatever it sat on —
   and it had to guess the colour behind the corner, which was wrong wherever
   the element straddled two grounds. 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. */
.experience-hero__banner {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
          mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-position: left -1px top -1px, left top;
          mask-position: left -1px top -1px, left top;
  -webkit-mask-size: 66px 66px, 100% 100%;
          mask-size: 66px 66px, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: xor, source-over;
          mask-composite: exclude, add;
}

.experience-hero__title {
  position: relative;
  max-width: 289px;
  font-family: var(--font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-44, 44px);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-black, #000000);
}

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

@media (min-width: 768px) {
  .experience-hero__banner { height: 500px; }
  .experience-hero__title { max-width: 640px; font-size: var(--fs-60, 60px); }
}

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

@media (min-width: 1024px) {
  .experience-hero__promo { padding: 8px 56px; }
  .experience-hero__promo-text { white-space: nowrap; }

  .experience-hero__nav {
    grid-column: 2 / 26;
    gap: 64px;
    padding: 14px 0;
  }

  .experience-hero__burger,
  .experience-hero__panel { display: none; }

  .experience-hero__nav .experience-hero__menu,
  .experience-hero__nav .experience-hero__actions {
    display: flex;
    align-items: center;
  }

  .experience-hero__nav .experience-hero__menu { gap: 24px; }
  .experience-hero__nav .experience-hero__actions { gap: 12px; }

  .experience-hero__nav-right {
    display: flex;
    align-items: center;
    gap: 64px;
  }

  .experience-hero__banner {
    grid-column: 2 / 26;
    height: 436px;
    margin: 12px 0 0;
  }

  .experience-hero__banner {
    border-radius: 0 16px 0 16px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2044%2044)'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2044%2044)'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%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: 90px 90px, 90px 90px, 100% 100%;
            mask-size: 90px 90px, 90px 90px, 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-composite: xor, xor, source-over;
            mask-composite: exclude, exclude, add;
  }

  .experience-hero__title {
    max-width: 994px;
    font-size: var(--fs-72, 72px);
    color: var(--color-gray-900, #101828);
  }
}