/* ===========================================================================
   No1 Princess — Loyalty Program page (Figma node 593-2539 "Loyalty-Program")
   Layered on top of home.css (tokens, header/drawer/footer, circle-link CTA).
   Prefix: np-loy
   =========================================================================== */

/* The active theme colors bare <h2>/<h3> via a global rule; our headings rely
   on inherited section colors, so set them explicitly to win the cascade. */
.np-loy-hero__title { color: var(--c-cream); }
.np-loy-head__title,
.np-loy-step__num,
.np-loy-step__title,
.np-loy-card__name { color: var(--c-dark); }
.np-loy-card--dark .np-loy-card__name { color: var(--c-white); }
.np-loy-join__title { color: var(--c-white); }

/* ---- Shared centred section heading ------------------------------------ */
.np-loy-head { text-align: center; max-width: 1200px; margin-inline: auto; }
.np-loy-head__eyebrow {
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 13px; font-weight: 700; color: var(--c-dark);
}
.np-loy-head__title {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(42px, 8.4vw, 128px); line-height: 1; letter-spacing: -0.08em;
}
.np-loy-head__sub {
  margin: clamp(18px, 2vw, 26px) auto 0; max-width: 60ch;
  font-weight: 500; font-size: clamp(15px, 1.32vw, 20px); line-height: 1.6;
  color: var(--c-dark);
}

/* ===========================================================================
   HERO  (dark — full-bleed lounge photo + overlaid type, content bottom-left)
   =========================================================================== */
.np-loy-hero {
  position: relative; background: var(--c-dark); overflow: hidden;
  min-height: clamp(580px, 56vw, 900px); display: flex;
}
.np-loy-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.np-loy-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.66) 100%),
    linear-gradient(90deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 55%);
}
.np-loy-hero__inner {
  position: relative; z-index: 2; width: 100%; align-self: flex-end;
  padding-block: clamp(48px, 6vw, 96px);
}
.np-loy-hero__content { max-width: min(760px, 92%); }
.np-loy-hero__eyebrow {
  margin: 0 0 18px; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 13px; font-weight: 700; color: #fff;
}
.np-loy-hero__title {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(58px, 9vw, 128px); line-height: 0.84; letter-spacing: -0.07em;
}
.np-loy-hero__body {
  margin: clamp(20px, 2vw, 28px) 0 clamp(30px, 3.4vw, 44px); max-width: 40ch;
  color: #fff; font-weight: 500; font-size: clamp(16px, 1.32vw, 20px); line-height: 1.6;
}
/* hero CTA reuses .np-circle-link (cream variant) on the dark photo */
.np-loy-hero__cta .np-circle { border-color: rgba(255,255,255,.78); color: #fff; }
.np-loy-hero__cta:hover .np-circle { background: #fff; color: var(--c-dark); border-color: #fff; }
.np-loy-hero__cta .np-circle-link__label { color: #fff; }

/* ===========================================================================
   THREE STEPS  (cream — centre photos, staggered 01/02/03)
   =========================================================================== */
.np-loy-steps { background: var(--c-cream); color: var(--c-dark); padding-block: clamp(60px, 8vw, 120px); }
.np-loy-steps__list { margin-top: clamp(40px, 6vw, 84px); }

.np-loy-step {
  display: grid;
  /* minmax(0,1fr) keeps both side columns exactly equal so the centre photo
     column stays dead-centre on every row (plain 1fr lets a wide text block
     expand its column and shove the photo off-centre — that made step 02's
     image drift left and look displaced vs 01/03). */
  grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 320px) minmax(0, 1fr);
  align-items: center; column-gap: clamp(24px, 4vw, 64px);
}
.np-loy-step + .np-loy-step { margin-top: clamp(36px, 4vw, 64px); }
.np-loy-step__text { grid-column: 1; max-width: 360px; }
.np-loy-step__media { grid-column: 2; display: flex; justify-content: center; }
/* reversed rows: photo stays centre, text moves to the right column */
.np-loy-step--rev .np-loy-step__text { grid-column: 3; justify-self: end; }
.np-loy-step--rev .np-loy-step__media { grid-column: 2; }

.np-loy-step__num {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(56px, 6.4vw, 96px); line-height: 0.9; letter-spacing: -0.07em;
}
.np-loy-step__title {
  font-family: var(--font-display); font-weight: 400; margin: 6px 0 0;
  font-size: clamp(30px, 3.8vw, 57px); line-height: 0.95; letter-spacing: -0.05em;
  text-transform: uppercase;
}
.np-loy-step__body {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  font-weight: 500; font-size: clamp(15px, 1.45vw, 22px); line-height: 1.6;
}
.np-loy-step__img {
  width: 100%; max-width: 320px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 16px; box-shadow: 0 26px 54px rgba(0,0,0,.20);
  transform: rotate(var(--rot, 0deg));
}

.np-loy-steps__cta { margin-top: clamp(40px, 5vw, 72px); }

/* ===========================================================================
   THE TIERED WAY  (beige — three pricing cards, dark Insider highlighted)
   =========================================================================== */
.np-loy-tiers { background: var(--c-beige); color: var(--c-dark); padding-block: clamp(60px, 8vw, 120px); }
.np-loy-tiers__grid {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: stretch; gap: clamp(18px, 1.8vw, 26px);
}
.np-loy-card {
  background: var(--c-cream2); border-radius: 20px;
  padding: clamp(26px, 2.4vw, 40px);
  display: flex; flex-direction: column;
}
/* the highlighted Insider card lifts above its neighbours */
.np-loy-card--dark {
  background: var(--c-dark); color: var(--c-cream);
  margin-block: clamp(-22px, -2vw, -14px);
}
.np-loy-card__tier {
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 12px; font-weight: 700; color: inherit;
}
.np-loy-card__name {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(44px, 4.4vw, 72px); line-height: 0.92; letter-spacing: -0.06em;
}
.np-loy-card__qual {
  font-family: var(--font-display); font-weight: 400; margin: 10px 0 0;
  font-size: clamp(18px, 1.55vw, 24px); line-height: 1.1; letter-spacing: -0.04em;
}
.np-loy-card__perks {
  list-style: none; margin: clamp(20px, 2vw, 30px) 0; padding: 0; flex: 1 1 auto;
}
.np-loy-card__perks li {
  position: relative; padding-left: 20px;
  font-weight: 500; font-size: clamp(15px, 1.2vw, 22px); line-height: 1.45;
}
.np-loy-card__perks li + li { margin-top: clamp(8px, 0.9vw, 14px); }
.np-loy-card__perks li::before {
  content: "•"; position: absolute; left: 0; top: 0; line-height: inherit;
}
.np-loy-card__badge {
  display: block; text-align: center;
  font-family: var(--font-body); font-weight: 800; font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1.5px solid var(--c-dark); color: var(--c-dark);
  border-radius: 4px; padding: 16px 18px;
}
.np-loy-card--dark .np-loy-card__badge { border-color: rgba(246,244,241,.7); color: var(--c-cream); }

/* ===========================================================================
   BECOME A REGULAR  (dark — centred sign-up form)
   =========================================================================== */
.np-loy-join { background: var(--c-dark); color: var(--c-cream); padding-block: clamp(64px, 9vw, 120px); }
.np-loy-join__head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 4vw, 56px); }
.np-loy-join__title {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(44px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.06em;
}
.np-loy-join__sub {
  margin: 18px 0 0; color: rgba(246,244,241,.82);
  font-weight: 500; font-size: clamp(15px, 1.1vw, 20px); line-height: 1.5;
}
.np-loy-form { max-width: 560px; margin: 0 auto; }
.np-loy-form .np-field { border-bottom: 1px solid rgba(246,244,241,.22); padding: 22px 0 12px; }
.np-loy-form .np-field input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--c-cream); font-family: var(--font-body); font-size: 16px; padding: 0;
}
.np-loy-form .np-field input::placeholder { color: rgba(246,244,241,.62); }
.np-loy-form__submit { display: flex; justify-content: center; margin-top: clamp(34px, 4vw, 48px); }
.np-loy-form__btn {
  font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-cream);
  border: 1.5px solid rgba(246,244,241,.8); border-radius: 4px; padding: 16px 38px; background: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.np-loy-form__btn:hover { background: var(--c-cream); color: var(--c-dark); border-color: var(--c-cream); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 900px) {
  .np-loy-tiers__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .np-loy-card--dark { margin-block: 0; }
}
@media (max-width: 760px) {
  .np-loy-step,
  .np-loy-step--rev { grid-template-columns: 1fr; row-gap: 20px; }
  .np-loy-step__text,
  .np-loy-step--rev .np-loy-step__text { grid-column: 1; justify-self: start; max-width: none; }
  .np-loy-step__media,
  .np-loy-step--rev .np-loy-step__media { grid-column: 1; justify-content: flex-start; }
  .np-loy-step__img { max-width: 280px; }
}