/* ============ FOLD 08 · Passes ============ */

.passes {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
    padding: 5.5637rem 12.866rem;
  background: var(--sand-base);
}
.passes__inner {
  display: flex; flex-direction: column; gap: 4.1727rem;width: 100%;
  padding: 0 1.3909rem;
}
.passes__row { display: flex; align-items: flex-start; gap: 6.9546rem; }

/* ---- Left column (stays in view while the pass list scrolls) ---- */
.passes__copy {
  position: sticky; top: 4rem;
  display: flex; flex-direction: column; gap: 1rem;
  width: 45.5946rem; flex-shrink: 0;
}
.passes__kicker {
  font-weight: 900; font-size: 12px; line-height: normal; letter-spacing: 0.1391rem;
  text-transform: uppercase; color: var(--sand-700);
}
.passes__title { font-weight: 900; font-size: 4rem; line-height: 1.15; color: var(--sand-800); }
.passes__sub { padding-top: 1.0864rem; font-weight: 400; font-size: 20px; line-height: 1.4; color: var(--black); }
.passes__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.7386rem; padding-top: 0.6955rem; }
.passes__note { font-weight: 400; font-size: 20px; line-height: 1.4; color: var(--black); }

/* ---- Pass cards ---- */
.passes__list { position: relative; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 1.7386rem;}

.pass {
  --i: 0;                 /* stack index, set per card below */
  --s: 1;                 /* scale while covered (js/main.js → initPassStack) */
  --dim: 0;               /* shade while covered */
  --lift: 0rem;
  position: sticky; top: calc(4rem + var(--i) * 1.8rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.3909rem;
  padding: 2.4341rem;
  border-radius: 1.3909rem;
  background: #fcf6eb;                           /* solid: cards overlap while stacking */
  border: 0.0869rem solid #fffaf2;
  box-shadow: 0 -0.6rem 2.2rem -1.4rem rgba(103, 80, 58, 0.45);
  color: #062b45;
  transform-origin: 50% 0;
  transform: translateY(var(--lift)) scale(var(--s));
  transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s;
}
.pass:nth-of-type(2) { --i: 1; }
.pass:nth-of-type(3) { --i: 2; }
.pass:nth-of-type(4) { --i: 3; }
.pass::after {                                   /* darkening when a card slides over */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #3b2d1f; opacity: calc(var(--dim) * 0.18);
  pointer-events: none;
}
.pass:hover { background: #fffcf7; box-shadow: 0 1.6rem 3.2rem -1.4rem rgba(103, 80, 58, 0.4); }
.pass--featured { background: var(--white); border-color: var(--white); }
.pass--featured::after { border-radius: 1.3909rem; }
.pass--featured:hover { background: var(--white); }

.pass__kicker {
  display: flex; align-items: center; gap: 0.8rem;
  font-weight: 900; font-size: 1.0258rem; line-height: normal; letter-spacing: 0.0956rem;
  text-transform: uppercase;
}
.pass--featured .pass__kicker { color: var(--brand-blue); }
.pass__badge {
  padding: 0.4rem 0.9rem;
  border-radius: 99.9rem;
  background: var(--brand-orange-2);
  font-size: 0.9rem; letter-spacing: 0.07rem; color: var(--white);
}

.pass__price { display: flex; align-items: flex-start; gap: 0.1739rem; font-weight: 900; white-space: nowrap; }
.pass__cur    { padding-top: 0.4347rem; font-size: 2.2602rem; line-height: 2.2602rem; }
.pass__amount { font-size: 4.5205rem; line-height: 4.6943rem; }
.pass--featured .pass__cur    { padding-top: 0.8693rem; font-size: 2.9557rem; line-height: 2.9557rem; }
.pass--featured .pass__amount { font-size: 6.9546rem; line-height: 6.9546rem; }

.pass__title { font-weight: 900; font-size: 1.7386rem; line-height: 2.0864rem; }
.pass--featured .pass__title { font-size: 1.9125rem; line-height: 1.15; }
.pass__desc { font-weight: 400; font-size: 1.3735rem; line-height: 1.4; color: #1c3f5c; }
.pass--featured .pass__desc { color: #5a6e82; }

.pass__pill {
  padding: 0.5216rem 1.2171rem;
  border-radius: 99.9rem;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900; font-size: 0.9997rem; line-height: normal; letter-spacing: 0.0696rem;
  text-transform: uppercase; color: var(--navy-700); white-space: nowrap;
}
.pass--featured .pass__pill { background: #eaf7fc; }

/* 3D sunglasses perched on the featured card (same component as the speakers footnote) */
.passes__shades {                              /* anchor that rides the stack's top-right corner (js/main.js) */
      position: absolute;
    left: 282px;
    right: 0px;
    top: -13px;
    height: 0;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}
@media(max-width:700px){
	.passes__shades {
    position: absolute;
    left: 0;
    right: 0px;
    top: 0;
    height: 0;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}
}
.passes__shades .shades { pointer-events: auto; }
.shades--passes {
  --w: 10.9rem; --h: 5.104rem;
  position: absolute; left: 36.14rem; top: -0.42rem;
  margin: 0;
  transform: rotate(29.91deg);
  z-index: 2;
}

/* ---- Hotel card + footnote ---- */
.passes__bottom { display: flex; flex-direction: column; gap: 1.7386rem; }

.hotel {
  display: flex; align-items: center; gap: 2.0864rem;
  padding: 2.4341rem;
  border-radius: 1.7386rem;
  background: var(--sand-500);
}
.hotel__icon {
  position: relative; flex-shrink: 0;
  width: 7.476rem; height: 7.476rem;
  border: 0.0869rem solid var(--sand-600);
  border-radius: 1.304rem;
  background: var(--sand-100);
}
.hotel__icon img { position: absolute; left: 1.043rem; top: 1.043rem; width: 5.3898rem; height: 5.3898rem; }
.hotel__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 0.5216rem; color: var(--sand-50); }
.hotel__kicker { margin-bottom: 0.8693rem; font-weight: 900; font-size: 12px; line-height: normal; letter-spacing: 0.1391rem; text-transform: uppercase; }
.hotel__name { font-weight: 900; font-size: 1.9125rem; line-height: 1.4; }
.hotel__desc { font-weight: 400; font-size: 1.2171rem; line-height: 1.4; }
.hotel__btn {
  flex-shrink: 0;
  padding: 1.1301rem 2.4341rem;
  border: 0.1739rem solid var(--white);
  border-radius: 99.9rem;
  background: linear-gradient(var(--white), #f4f8fc);
  font-weight: 900; font-size: 1.1823rem; line-height: normal; letter-spacing: 0.0696rem;
  text-transform: uppercase; color: var(--navy-700); white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.hotel__btn:hover { transform: translateY(-0.2rem); box-shadow: 0 0.8rem 1.8rem -0.8rem rgba(65, 51, 37, 0.45); }

.passes__foot { font-weight: 400; font-size:17px; color: var(--sand-800);line-height: 1.4; }