/* Rawana — "The experience" section. Ported from assets/css/layout.css. */

.rwn-experience {
  display: grid;
  gap: var(--wp--preset--spacing--80);
}

@media (min-width: 1000px) {
  .rwn-experience {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(var(--wp--preset--spacing--70), 5vw, var(--wp--preset--spacing--100));
  }

  .rwn-experience .rwn-experience__copy {
    position: sticky;
    top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--70));
    align-self: start;
  }
}

.rwn-experience .rwn-experience__copy {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  align-content: start;
  margin: 0;
}

.rwn-experience .rwn-experience__copy > p { margin: 0; }

.rwn-experience .rwn-experience__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: var(--wp--custom--weight-light);
  line-height: var(--wp--custom--leading-tight);
  letter-spacing: var(--wp--custom--tracking-tight);
}

/* ---- Numbered pillars -------------------------------------------------- */
.rwn-experience .rwn-pillars {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: var(--wp--preset--spacing--50) 0 0;
  border-top: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
  list-style: none;
}

.rwn-experience .rwn-pillar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wp--preset--spacing--40);
  align-items: start;
  margin: 0;
}

.rwn-experience .rwn-pillar__num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xxs);
  color: var(--wp--preset--color--accent);
  padding-top: 0.35em;
}

.rwn-experience .rwn-pillar__title {
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--wp--preset--color--contrast);
}

.rwn-experience .rwn-pillar__text {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-normal);
  color: var(--wp--preset--color--muted);
}

/* ---- Overlapping image stack ------------------------------------------ */
.rwn-experience .rwn-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, auto);
  margin: 0;
}

.rwn-experience .rwn-stack__item {
  position: relative;
  margin: 0;
  border-radius: var(--wp--custom--radius-md);
  overflow: hidden;
}

.rwn-experience .rwn-stack__item img,
.rwn-experience .rwn-stack__item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--wp--custom--filter-photo);
  transition:
    filter var(--wp--custom--duration-slow) var(--wp--custom--ease-out),
    transform var(--wp--custom--duration-slow) var(--wp--custom--ease-out);
}

.rwn-experience .rwn-stack__item:hover img,
.rwn-experience .rwn-stack__item:hover video {
  filter: var(--wp--custom--filter-photo-hover);
  transform: scale(1.03);
}

.rwn-experience .rwn-stack__item--a {
  grid-column: 1 / span 8;
  grid-row: 1;
  aspect-ratio: 4 / 5;
  z-index: 1;
}

.rwn-experience .rwn-stack__item--b {
  grid-column: 6 / span 7;
  grid-row: 1;
  margin-top: 42%;
  aspect-ratio: 3 / 4;
  z-index: 3;
  box-shadow: var(--wp--custom--shadow-xl);
}

.rwn-experience .rwn-stack__item--c {
  grid-column: 1 / span 5;
  grid-row: 1;
  margin-top: 108%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  box-shadow: var(--wp--custom--shadow-lg);
}

.rwn-experience .rwn-accent-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rwn-experience .rwn-stack__glow {
  position: absolute;
  inset: -12% -6% 8% -6%;
  z-index: 0;
  background: radial-gradient(50% 45% at 62% 30%, var(--wp--custom--accent-glow), transparent 68%);
  filter: blur(46px);
  pointer-events: none;
}

.rwn-experience .rwn-stack__caption {
  position: absolute;
  left: var(--wp--preset--spacing--40);
  bottom: var(--wp--preset--spacing--40);
  z-index: 4;
  margin: 0;
  padding: 6px var(--wp--preset--spacing--20);
  border-radius: var(--wp--custom--radius-xs);
  background: var(--wp--custom--surface-glass-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}