/* ===========================================================================
   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;
}
/* Right side = the home hero's right side: the copy uses .np-hero__quote's
   type, the CTA is the shared spinning-circle button (.np-cbtn, same as "See
   the menu") and the down arrow is the same curved arrow at the same size. The
   column sits in the right ~45% like the home hero's quote + CTA (a touch
   wider so "Connect with Us" stays on one line). */
.np-ev-hero__aside {
  flex: 0 0 44%; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(32px, 6vh, 72px);
}
.np-ev-hero__body {
  width: min(470px, 100%); margin: 0;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(15px, 1.32vw, 20px); line-height: 1.6; color: #fff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4);
}
.np-ev-hero__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-ev-hero__actions .np-cbtn__label { white-space: nowrap; }
.np-ev-hero__down { flex: none; width: clamp(88px, 10vw, 133px); opacity: 0.9; }
.np-ev-hero__down img { width: 100%; height: auto; }

/* ---- WHAT'S COMING heading ---------------------------------------------- */
/* Most of the space above the heading is the section's own padding, so when
   the heading sticks under the header it only carries a small top pad
   (together they add up to the original spacing). */
.np-ev-coming { background: var(--c-beige); padding-top: clamp(36px, 6vw, 84px); }
/* While stacked, events-stack.js sets the heading's background + colour to the
   current card's, so the heading and that card read as one block; the text
   inherits, and the swap fades. */
.np-ev-coming__head {
  text-align: center; padding: clamp(20px, 2vw, 28px) 20px clamp(26px, 4vw, 48px);
  background: var(--c-beige); color: var(--c-dark);
  transition: background-color .35s ease, color .35s ease;
}
.np-ev-coming__eyebrow {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(16px, 1.4vw, 24px); letter-spacing: -0.05em; color: inherit; margin: 0 0 6px;
}
.np-ev-coming__title {
  font-family: var(--font-display); font-weight: 400; color: inherit;
  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; }

/* ---- Sticky stack --------------------------------------------------------
   .is-stacked is added by events-stack.js once it has measured the page (the
   vars below) and confirmed each card fits under the heading; without it the
   section just scrolls normally.
     • the heading sticks just under the fixed header;
     • each card sticks just under the heading, so the next one slides up over
       it (later cards paint on top);
     • the heading's bottom margin = the last card's height (cancelled out by
       the list's negative top margin, so nothing moves). That makes the
       heading let go at the moment the last card lands, so heading + last card
       scroll away together as the contact form arrives.
   --np-ev-hdr  header height          --np-ev-top  header + heading height
   --np-ev-last last card's height     --np-ev-img  per-card photo max-height */
.np-ev-coming.is-stacked { display: flex; flex-direction: column; }
.np-ev-coming.is-stacked .np-ev-coming__head {
  position: sticky; top: var(--np-ev-hdr, 92px); z-index: 3;
  margin-bottom: var(--np-ev-last, 0px);
}
.np-ev-coming.is-stacked .np-ev-list { margin-top: calc(-1 * var(--np-ev-last, 0px)); }
.np-ev-coming.is-stacked .np-ev { position: sticky; top: var(--np-ev-top, 0px); }
.np-ev-coming.is-stacked .np-ev__media img { max-height: var(--np-ev-img, none); }

/* Shorter desktop screens: scale the heading + card type with the viewport
   height too, so the heading and a whole card still fit on screen together.
   (At ~900px tall and up this matches the sizes above.) */
@media (min-width: 901px) {
  .np-ev-coming.is-stacked .np-ev-coming__head { padding-bottom: clamp(20px, min(4vw, 5.3vh), 48px); }
  .np-ev-coming.is-stacked .np-ev-coming__title { font-size: clamp(56px, min(9vw, 14vh), 128px); }
  .np-ev-coming.is-stacked .np-ev__inner { padding-block: clamp(24px, min(3.4vw, 5.5vh), 60px); }
  .np-ev-coming.is-stacked .np-ev__num { font-size: clamp(56px, min(8.4vw, 14vh), 128px); }
  .np-ev-coming.is-stacked .np-ev__body { padding-top: clamp(20px, min(5vw, 8vh), 72px); }
  .np-ev-coming.is-stacked .np-ev__title { font-size: clamp(28px, min(4vw, 6.5vh), 57px); }
}

/* ---- 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__body { width: auto; }
  .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; }
}