/* What to expect — Figma "Frame 15632" (node 1313:779), 2005×766, plum. Absolute
   layout at EXACT Figma coords scaled by --px inside a 2005-wide centred frame.
   Photos sit at the bottom; their lower edge is clipped by the band (the marquee
   that follows covers everything below). */
.expect {
  position: relative;
  height: calc(809.6 * var(--px));    /* 766 + 43.6 (section-spacing standard) */
  background: #6d3856;
  overflow: hidden;
  color: #fff;
}
.expect__frame {
  /* top shifted so the first text sits 65px from the section top (standard). */
  position: absolute; left: 50%; top: calc(43.6 * var(--px)); transform: translateX(-50%);
  width: calc(2005 * var(--px)); height: 100%;
}
.expect__frame > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}
.expect__rule { width: calc(var(--w) * var(--px)); height: 1px; background: rgba(255,255,255,.8); }

/* ---- title + column headers ---- */
.expect__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(60 * var(--px)); transform: translateY(-50%); white-space: nowrap;
}
.expect__head {
  font-family: var(--font-display); font-size: calc(28.444 * var(--px));
  transform: translateY(-50%); white-space: nowrap;
}
.expect__head strong { font-weight: 600; }
.expect__head span   { font-weight: 400; }

/* ---- bullet lists ---- */
.expect__list {
  font-family: var(--font-sans); font-weight: 400;
  font-size: calc(17.815 * var(--px)); line-height: 1.67;
  list-style: disc; padding-left: calc(26.72 * var(--px));
  letter-spacing: 0.01em;
}
.expect__list--narrow { font-size: calc(17.209 * var(--px)); padding-left: calc(25.81 * var(--px)); }
.expect__list strong { font-weight: 700; }

/* ---- photos: fixed frame, image cropped inside (Figma "crop" fill) ---- */
.expect__photo { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); overflow: hidden; }
.expect__photo img {
  position: absolute;
  left: calc(var(--il) * 1%); top: calc(var(--it) * 1%);
  width: calc(var(--iw) * 1%); height: calc(var(--ih) * 1%);
  max-width: none; display: block;
}
.expect__photo--cover img {   /* singer: simple cover, no offset crop */
  position: static; width: 100%; height: 100%; object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE — Figma "what-to-expect" (1313:419), 421×825 on #74234b. A two-column
   bullet list + singer/cocktail photos clipped at the bottom. Rendered as a
   mobile-only copy (what-to-expect:m) placed after How-to-find; the desktop
   .expect is hidden below 600 so it doesn't show twice. */
.expect-m { display: none; }

@media (max-width: 600px) {
  .expect { display: none; }              /* hide the desktop copy on phones */

  .expect-m {
    display: block; position: relative;
    height: calc(825 * var(--mpx));
    background: #74234b;                   /* exact mobile Figma fill */
    overflow: hidden; color: #fff;
  }
  .expect-m__frame {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: calc(421 * var(--mpx)); height: 100%;
  }
  .expect-m__frame > * {
    position: absolute;
    left: calc(var(--x) * var(--mpx));
    top:  calc(var(--y) * var(--mpx));
    margin: 0;
  }

  .em-title { font-family: var(--font-display); font-weight: 700; font-size: calc(30 * var(--mpx)); white-space: nowrap; }

  /* two columns; each flows its bullets with the exact Figma row gap so the
     one- vs two-line items land where Figma has them (no per-item coords). */
  .em-cols { display: flex; gap: calc(21.59 * var(--mpx)); width: calc(352 * var(--mpx)); }
  .em-col  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(12.95 * var(--mpx)); width: calc(165.16 * var(--mpx)); }
  .em-col li {
    position: relative; padding-left: calc(15.11 * var(--mpx));
    font-family: var(--font-sans); font-weight: 400; font-size: calc(16.192 * var(--mpx));
    line-height: calc(20.51 / 16.192);     /* Figma line box ≈ 20.51 per line */
  }
  .em-col li::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: calc(4.318 * var(--mpx)); height: calc(4.318 * var(--mpx));
    border-radius: 50%; background: #fff;
  }

  /* photos: fixed frame, image cropped inside (Figma "crop" fill) */
  .em-photo { width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx)); overflow: hidden; }
  .em-photo img {
    position: absolute;
    left: calc(var(--il) * 1%); top: calc(var(--it) * 1%);
    width: calc(var(--iw) * 1%); height: calc(var(--ih) * 1%);
    max-width: none; display: block;
  }
  .em-photo--cover img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
}