/* SALTA — "How do you want to escape?".
   Four experiences as tall editorial panels, not uniform cards: on hover the
   hovered panel grows and its neighbours give up space. */

.experiences { background: var(--white); }
.experiences__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.experiences__head .lede { max-width: 34ch; }

.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.exp-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  transition: flex-grow var(--dur) var(--ease-out);
}
.exp-card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
}
.exp-card__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(5, 43, 69, .90) 0%,
    rgba(5, 43, 69, .62) 26%,
    rgba(5, 43, 69, .12) 62%,
    rgba(5, 43, 69, 0) 100%);
  transition: opacity var(--dur) var(--ease-out);
}
.exp-card__num {
  position: absolute;
  z-index: 2;
  top: 1rem; left: 1.1rem;
  color: var(--lime);
  text-shadow: 0 1px 10px rgba(5, 43, 69, .85);
  transition: translate var(--dur) var(--ease-out);
}
.exp-card__caption {
  position: absolute;
  z-index: 2;
  inset: auto 1.1rem 1.35rem;
  color: var(--white);
  display: grid;
  gap: .35rem;
}
.exp-card__title {
  font-size: var(--t-mid);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.exp-card__sub {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--turq);
}
.exp-card__body { display: grid; gap: .9rem; align-content: start; }
.exp-card__text { color: var(--muted); font-size: var(--t-body); }

@media (hover: hover) and (pointer: fine) {
  .exp-grid { display: flex; }
  .exp-card { flex: 1 1 0; min-width: 0; }
  .exp-grid:hover .exp-card { flex-grow: .92; }
  .exp-grid .exp-card:hover { flex-grow: 1.32; }
  .exp-card:hover .exp-card__num { translate: 0 -4px; }
  .exp-card:hover .exp-card__frame::before { opacity: .75; }
}

@media (max-width: 1024px) {
  .exp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .exp-grid { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.2rem); }
  .exp-card__frame { aspect-ratio: 4 / 3; }
  .experiences__head { display: grid; }
}