/* ===========================================================================
   No1 Princess — Events & Private Hire page (Figma node 575-2083)
   Layered on top of home.css (shares header/nav/drawer/contact/footer + tokens).
   Section classes use the np-ev prefix.
   =========================================================================== */

/* ---- HERO --------------------------------------------------------------- */
.np-ev-hero {
  position: relative;
  min-height: clamp(600px, 84vh, 880px);
  background: var(--c-dark);
  overflow: hidden;
  color: var(--c-cream);
}
.np-ev-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.np-ev-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,.22) 66%, rgba(0,0,0,.68) 100%);
}
.np-ev-hero__inner {
  position: relative; z-index: 2; min-height: inherit;
  display: flex; align-items: flex-end; gap: clamp(28px, 4vw, 60px);
  padding-block: clamp(120px, 16vh, 190px) clamp(48px, 7vh, 84px);
}
.np-ev-hero__head { flex: 1 1 auto; min-width: 0; }
.np-ev-hero__eyebrow {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.06em;
  color: var(--c-cream); margin: 0 0 18px;
}
.np-ev-hero__title {
  font-family: var(--font-display); font-weight: 400; color: var(--c-cream);
  font-size: clamp(46px, 8.4vw, 128px); line-height: 0.8; letter-spacing: -0.06em; margin: 0;
}
.np-ev-hero__aside { flex: 0 1 380px; display: flex; flex-direction: column; gap: 22px; padding-bottom: 4px; }
.np-ev-hero__body {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6; color: #fff; margin: 0;
}
.np-ev-hero__down { flex: none; width: clamp(42px, 4vw, 64px); height: auto; color: var(--c-cream); align-self: flex-end; opacity: .9; }

.np-ev-cta { display: inline-flex; align-items: center; gap: 16px; color: var(--c-cream); }
.np-ev-cta__circle {
  width: clamp(56px, 5vw, 72px); height: clamp(56px, 5vw, 72px); border-radius: 50%;
  border: 1.5px solid rgba(246, 244, 241, 0.7); display: grid; place-items: center; flex: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.np-ev-cta__circle svg { width: 42%; height: 42%; }
.np-ev-cta:hover .np-ev-cta__circle { background: var(--c-cream); color: var(--c-dark); border-color: var(--c-cream); }
.np-ev-cta__label { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.5vw, 24px); letter-spacing: -0.05em; }

/* ---- WHAT'S COMING heading ---------------------------------------------- */
.np-ev-coming { background: var(--c-beige); }
.np-ev-coming__head { text-align: center; padding: clamp(56px, 8vw, 112px) 20px clamp(26px, 4vw, 48px); }
.np-ev-coming__eyebrow {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(16px, 1.4vw, 24px); letter-spacing: -0.05em; color: var(--c-dark); margin: 0 0 6px;
}
.np-ev-coming__title {
  font-family: var(--font-display); font-weight: 400; color: var(--c-dark);
  font-size: clamp(56px, 9vw, 128px); line-height: 1; letter-spacing: -0.05em; margin: 0;
}

/* ---- EVENT ROWS --------------------------------------------------------- */
.np-ev--beige    { background: var(--c-beige);  color: var(--c-dark); }
.np-ev--cream    { background: var(--c-cream2); color: var(--c-dark); }
.np-ev--dark     { background: var(--c-dark);   color: var(--c-white); }
.np-ev--graphite { background: #404040;          color: var(--c-white); }

.np-ev__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px);
  align-items: stretch; padding-block: clamp(32px, 3.4vw, 60px);
}
.np-ev__text { display: flex; flex-direction: column; }
.np-ev__date {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
  font-family: var(--font-display); font-weight: 400; line-height: 0.78; letter-spacing: -0.05em; color: inherit;
}
.np-ev__num { font-size: clamp(64px, 8.4vw, 128px); }
.np-ev__month { font-size: clamp(15px, 1.5vw, 24px); letter-spacing: -0.06em; margin-top: 8px; text-transform: uppercase; }
.np-ev__body { margin-top: auto; padding-top: clamp(28px, 5vw, 72px); }
.np-ev__title {
  font-family: var(--font-display); font-weight: 400; color: inherit;
  font-size: clamp(32px, 4vw, 57px); line-height: 1; letter-spacing: -0.05em; margin: 0 0 14px;
}
.np-ev__meta { font-family: var(--font-body); font-weight: 500; font-size: clamp(15px, 1.2vw, 22px); line-height: 1.5; margin: 0 0 22px; color: inherit; }
.np-ev__btn {
  display: inline-block; padding: 14px 26px; border: 2px solid currentColor; color: inherit;
  font-family: var(--font-body); font-weight: 800; font-size: clamp(13px, 1vw, 16px);
  letter-spacing: .02em; text-transform: uppercase; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.np-ev--beige .np-ev__btn:hover,
.np-ev--cream .np-ev__btn:hover { background: var(--c-dark); color: var(--c-cream); }
.np-ev--dark .np-ev__btn:hover,
.np-ev--graphite .np-ev__btn:hover { background: var(--c-white); color: var(--c-dark); }

.np-ev__media { display: block; }
.np-ev__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 880 / 570; display: block; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .np-ev-hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .np-ev-hero__aside { flex: 1 1 auto; align-self: stretch; }
  .np-ev-hero__down { display: none; }

  .np-ev__inner { grid-template-columns: 1fr; gap: 22px; }
  .np-ev__media { order: 2; }
  .np-ev__body { padding-top: 22px; }
}