/* Newsletter CTA — ONE shared design used by BOTH the top and bottom bands
   (both render newsletter-band.php). Change it here and it updates both sections
   on desktop and (with mobile.css) on mobile. Figma 843:513 (the bottom band). */
.nl-top {
  background: #ffedf6;
  color: #000;
}
.nl-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--px));
  min-height: calc(242.8 * var(--px));   /* centred; first text 65px from top (standard) */
  padding-block: calc(14 * var(--px));
  /* Aligned to the site's standard centred content column (same as the footer),
     so the copy sits at the column's left edge and the form at its right edge. */
  padding-inline: 0;
}
.nl-top__copy { flex: 0 0 auto; }
.nl-top__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(36.219 * var(--px));
  line-height: 1.1;
}
.nl-top__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: calc(22.849 * var(--px));
  margin-top: calc(4 * var(--px));
}

.nl-top__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(10 * var(--px));
  flex: 0 1 auto;
}
.nl-top__form {
  position: relative;   /* anchor for the .field-error validation tooltip */
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  flex: 0 1 auto;
}
.nl-message {
  margin: 0;
  width: 100%;
  padding: calc(8 * var(--px)) calc(14 * var(--px));
  border-radius: calc(6 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(14 * var(--px));
  line-height: 1.35;
  text-align: center;
}
.nl-message--success { background: #d4edda; color: #155724; }
.nl-message--error   { background: #f8d7da; color: #721c24; }
.nl-pill {
  height: calc(43.4 * var(--px));
  border: calc(1.572 * var(--px)) solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-family: var(--font-sans);
  font-size: calc(19.608 * var(--px));
  text-align: center;
  padding-inline: calc(24 * var(--px));
}
.nl-pill::placeholder { color: #000; opacity: 1; text-align: center; }
/* Name/Email are rectangles with small rounded corners (not full pills). */
.nl-pill--name,
.nl-pill--email { border-radius: calc(8 * var(--px)); }
.nl-pill--name  { width: calc(215 * var(--px)); }
.nl-pill--email { width: calc(373 * var(--px)); }
.nl-top__submit {
  height: calc(50.7 * var(--px));
  font-weight: 400;
  font-size: calc(25.281 * var(--px));
  padding-inline: calc(30 * var(--px));
  cursor: pointer;
  white-space: nowrap;   /* keep "Sign-up" on one line */
  flex: 0 0 auto;        /* don't let it shrink and wrap */
}
.nl-top__submit:disabled { opacity: 0.5; cursor: not-allowed; }
/* Top band's button is an <a> styled as the pill button — centre its label and drop
   the underline (height/padding come from .nl-pill/.nl-top__submit). Both variants
   need this: .nl-top__jump on the landing page, .nl-top__expand on the venue pages.
   Without it the <a> is a plain block and the label rides high in the pill. */
.nl-top__jump,
.nl-top__expand { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Top band only (by id): pull the heading + button together toward the centre,
   instead of the edge-to-edge space-between the bottom form band uses. */
#newsletter-top .nl-top__inner { justify-content: center; gap: calc(64 * var(--px)); }

@media (max-width: 860px) {
  .nl-top__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nl-top__form { flex-wrap: wrap; width: 100%; }
  .nl-pill--email { flex: 1 1 180px; width: auto; }
}

/* Expandable variant (venue pages) -------------------------------------------
   soho.php / mayfair.php carry ONLY this band, so there is no lower form to jump
   to. The Sign-up pill reveals the form in place instead (shared/js/newsletter.js).
   Scoped to .nl-top--expandable throughout, so the landing page's two bands keep
   their existing jump behaviour untouched.

   The form is its own row beneath the copy/pill row, collapsed with the 0fr -> 1fr
   grid trick so it animates to the form's natural height without hardcoding one.
   While collapsed that row is zero-height and contributes nothing, so the band
   lays out exactly as it did before this feature existed. */
.nl-top--expandable .nl-top__panel {
  display: grid;
  grid-template-rows: 0fr;              /* collapsed */
  opacity: 0;
  transition: grid-template-rows .45s ease, opacity .3s ease .1s;
}
.nl-top--expandable .nl-top__panel > * { overflow: hidden; }
.nl-top--expandable.nl-top--open .nl-top__panel { grid-template-rows: 1fr; opacity: 1; }
/* Centred under the copy, which the band centres too. */
.nl-top__panel-row {
  display: flex;
  justify-content: center;
  padding-bottom: calc(18 * var(--px));
}

/* The pill hands over to the form by fading out, but KEEPS its box: the band
   centres the copy+pill group, so collapsing the pill's width would slide the
   copy sideways as it opens. visibility flips only once it is already invisible. */
.nl-top--expandable .nl-top__expand {
  transition: opacity .2s ease, transform .25s ease;
}
.nl-top--expandable.nl-top--open .nl-top__expand {
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s ease, transform .25s ease, visibility 0s linear .22s;
}

@media (prefers-reduced-motion: reduce) {
  .nl-top--expandable .nl-top__panel,
  .nl-top--expandable .nl-top__expand { transition: none; }
}