/* ============================================================
   flyExclusive — event landing pages
   ------------------------------------------------------------
   Loaded by events/*.html only, AFTER css/luxury.css. The order is
   load-bearing: several rules here have the same specificity as one in
   luxury.css and win on source order alone. Where that is what is
   happening it is called out on the rule.

   Everything visual comes from the existing --fe-* tokens and
   var(--lux-font); the registration band is .lux-splitform straight out
   of luxury.css with no overrides at all. What is here is the parts an
   event page needs that no other page has: the fact list, the calendar
   buttons and the card grid.

   NOTHING IS NAMED *-hero. luxury.css carries
   `[class*="hero"] :is(h1,h2,h3){color:#fff}` and an opacity/transform
   pin on hero descendants, so a component with "hero" anywhere in its
   class name inherits white headings on a light ground and an animation
   lock. Hence .lux-event-banner.
   ============================================================ */

/* ------------------------------------------------------------
   1. Banner — the top of a single event page
   ------------------------------------------------------------ */

.lux-event-banner {
  /* .home-header is fixed and reserves no space, so an opening section has
     to clear it itself. Same number as .lux-section--clears-header. */
  padding: clamp(112px, 12vw, 164px) clamp(20px, 5vw, 40px) clamp(44px, 4.5vw, 68px);
  background: var(--fe-canvas);
  border-bottom: 1px solid var(--fe-line);
}

.lux-event-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.lux-event-banner__copy { min-width: 0; }

/* The Webflow export defines a bare `p` with its own margins and a
   max-width; every <p> here therefore states both rather than inheriting
   whatever that rule happens to say. */
.lux-event-banner p.lux-event-banner__eyebrow {
  margin: 0 0 14px;
  max-width: none;
  font-family: var(--lux-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--lux-track-eyebrow);
  text-transform: uppercase;
  /* --fe-blue is 3.0:1 on this canvas and fails AA at 11.5px; the -600
     token exists for exactly this case. */
  color: var(--fe-blue-600);
}

/* h1[class] in luxury.css pins headings to navy at (0,1,1). This matches
   that specificity and lands later in the cascade, which is what lets the
   size and weight through. */
.lux-event-banner h1.lux-event-banner__title {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-family: var(--lux-font);
  font-weight: 300;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--fe-navy);
  /* balance, not pretty: measured better on two- and three-line titles,
     which is every event title. */
  text-wrap: balance;
}

/* --- the when/where pair --------------------------------------------- */

.lux-event-facts {
  margin: 0 0 clamp(24px, 3vw, 34px);
  padding: 0;
  display: grid;
  gap: 14px;
}

.lux-event-facts__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}

.lux-event-facts dt {
  margin: 0;
  font-family: var(--lux-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fe-slate);
  /* The label column is fixed and narrow; without this "When"/"Where" can
     be pushed onto a second line by the tracking on a small screen. */
  white-space: nowrap;
}

.lux-event-facts dd {
  margin: 0;
  font-family: var(--lux-font);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  color: var(--fe-ink);
}

.lux-event-facts dd a {
  color: var(--fe-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--fe-blue-300);
  transition: border-color .2s ease;
}

.lux-event-facts dd a:hover { border-bottom-color: var(--fe-navy); }

/* --- buttons ---------------------------------------------------------- */

.lux-event-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lux-event-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px tall at every size: this is the one control on the page a visitor
     taps on a phone, and it is the WCAG target-size floor. */
  min-height: 48px;
  padding: 0 26px;
  font-family: var(--lux-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fe-navy);
  border-radius: 0;
  color: var(--fe-navy);
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.lux-event-btn:hover { background: var(--fe-navy); color: #fff; }

.lux-event-btn--primary { background: var(--fe-navy); color: #fff; }
.lux-event-btn--primary:hover { background: var(--fe-navy-900); border-color: var(--fe-navy-900); }

/* The third option on the row. Present but not competing with Register. */
.lux-event-btn--quiet {
  border-color: var(--fe-line);
  color: var(--fe-slate);
}

.lux-event-btn--quiet:hover {
  background: transparent;
  border-color: var(--fe-navy);
  color: var(--fe-navy);
}

.lux-event-btn:focus-visible {
  outline: 2px solid var(--fe-blue-600);
  outline-offset: 2px;
}

/* --- back to the index, and the after-the-event state ----------------- */

.lux-event-banner p.lux-event-back {
  margin: 0 0 18px;
  max-width: none;
  font-family: var(--lux-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lux-event-banner p.lux-event-back a {
  color: var(--fe-slate);
  text-decoration: none;
  transition: color .2s ease;
}

.lux-event-banner p.lux-event-back a:hover { color: var(--fe-navy); }

/* Written in by js/events-past.js once the end time has passed. */
.lux-event-banner p.lux-event-over {
  margin: 0;
  max-width: 48ch;
  padding: 16px 20px;
  background: var(--fe-surface-grey);
  border-left: 2px solid var(--fe-slate);
  font-family: var(--lux-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fe-ink);
}

.lux-event-banner p.lux-event-over a { color: var(--fe-navy); }

/* The Google Calendar alternative: a text link beside the button, not a third
   button competing with Register. Aligned to the button row's centre. */
.lux-event-cal-alt {
  align-self: center;
  font-family: var(--lux-font);
  font-size: 13px;
  color: var(--fe-slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.lux-event-cal-alt:hover { color: var(--fe-navy); border-bottom-color: var(--fe-blue-300); }

/* --- the photograph --------------------------------------------------- */

.lux-event-banner__media {
  margin: 0;
  min-width: 0;
  /* The image is whatever the editor chose, and marketing's event
     photography is frequently a small web copy of a venue shot. A fixed
     aspect box with object-fit:cover would upscale a 300px file across the
     whole column; capping the width instead keeps a small image at a size
     it can actually fill. tools/build_events.py warns when an image is
     under 1200px so somebody can ask for a better one. */
  max-width: 620px;
  justify-self: end;
  width: 100%;
}

.lux-event-banner__media img {
  display: block;
  /* width:auto, NOT 100%. The slot is capped at 620px, but `width:100%` still
     stretches a 299px file to fill it -- the upscale this cap was supposed to
     avoid. Natural size up to the cap means a small photograph reads as a
     small photograph rather than a blurry large one, and
     tools/build_events.py warns under 1200px so somebody can replace it. */
  width: auto;
  max-width: 100%;
  /* Height is NOT set. luxury.css has `.jc25 img{height:auto}`-style rules
     that strip only `height`, and an aspect-ratio box with a percentage
     max-height silently no-ops and crops the child — both traps this repo
     has hit. A plain width with the intrinsic ratio from the width/height
     attributes avoids the question entirely. */
  height: auto;
  background: var(--fe-surface-grey);
}

@media screen and (max-width: 900px) {
  .lux-event-banner__inner { grid-template-columns: minmax(0, 1fr); }
  /* Photo first on a phone: it is what tells a visitor where they are going,
     and it is the only thing on the page that is not text. */
  .lux-event-banner__media { grid-row: 1; justify-self: stretch; max-width: none; }
  .lux-event-facts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ------------------------------------------------------------
   2. Detail — description and point of contact
   ------------------------------------------------------------ */

.lux-event-detail__inner {
  display: grid;
  /* 340px, not 300: at 300 the contact card was narrower than the email
     address it holds, so overflow-wrap split "flyexclusive.co / m" across two
     lines. Widening it is the fix; the wrap is the symptom. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

/* The description is editor-written rich text, so its own <p>/<ul>/<h2>
   need sizing here — .lux-prose in luxury.css sets the measure, this sets
   the rhythm inside it. */
.lux-event-prose { min-width: 0; }

.lux-event-prose p,
.lux-event-prose li {
  font-family: var(--lux-font);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--fe-ink);
  max-width: 66ch;
}

.lux-event-prose p { margin: 0 0 1.15em; }
.lux-event-prose p:last-child { margin-bottom: 0; }
.lux-event-prose ul, .lux-event-prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.lux-event-prose li { margin: 0 0 .5em; }

.lux-event-prose h2,
.lux-event-prose h3 {
  font-family: var(--lux-font);
  font-weight: 300;
  color: var(--fe-navy);
  margin: 1.6em 0 .5em;
  line-height: 1.2;
}

.lux-event-prose h2 { font-size: clamp(22px, 2.4vw, 28px); }
.lux-event-prose h3 { font-size: clamp(18px, 2vw, 22px); }
.lux-event-prose a { color: var(--fe-navy); text-decoration: underline; text-underline-offset: 2px; }

.lux-event-contact {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--fe-canvas);
  border: 1px solid var(--fe-line);
  /* Sticks with the prose rather than floating beside a long description on
     a wide screen; harmless when the description is short. */
  position: sticky;
  top: 100px;
}

.lux-event-contact h2.lux-event-contact__head {
  margin: 0 0 12px;
  font-family: var(--lux-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fe-slate);
}

.lux-event-contact p.lux-event-contact__name {
  margin: 0 0 6px;
  max-width: none;
  font-family: var(--lux-font);
  font-size: 17px;
  font-weight: 500;
  color: var(--fe-navy);
}

.lux-event-contact p.lux-event-contact__links {
  margin: 0;
  max-width: none;
  font-family: var(--lux-font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fe-slate);
  /* Email addresses and phone numbers are long, unbreakable strings in a
     300px column — without this they overflow the card. */
  overflow-wrap: break-word;
}

.lux-event-contact a { color: var(--fe-navy); text-decoration: none; border-bottom: 1px solid var(--fe-blue-300); }
.lux-event-contact a:hover { border-bottom-color: var(--fe-navy); }


/* Set by tools/build_events.py whenever the registration band follows. Only
   the bottom edge changes -- the space above the description still separates
   it from the banner. */
.lux-event-detail--tight { padding-bottom: clamp(26px, 2.8vw, 40px); }

@media screen and (max-width: 900px) {
  .lux-event-detail__inner { grid-template-columns: minmax(0, 1fr); }
  .lux-event-contact { position: static; }
}

/* ------------------------------------------------------------
   3. Registration band — one centred column
   ------------------------------------------------------------
   Was .lux-splitform (the homepage's photo-beside-panel band). That band
   cannot centre its own content, because its content lives in the right-hand
   one of two columns — so asked for a centred form directly under the
   description, the split had to go.

   Everything that made it read as this site's is kept: the navy ground, the
   white .lux-hsform card on top of it, and the same type treatment. The
   heading, sub and footer are centred; the FIELDS INSIDE THE FORM ARE NOT,
   because centred labels over left-aligned inputs give every row a different
   starting edge.
   ------------------------------------------------------------ */

/* The description section and this band are always adjacent, and the standard
   section rhythm put 112px of empty page between the copy and the form (84px
   of section padding plus 72px of band padding). Halved, so the ask reads as
   the end of the description rather than as the next chapter. The adjacent
   sibling selector is enough for this half; the section above carries a
   --tight modifier from the builder for its half, rather than relying on
   :has(). */
.lux-event-detail + .lux-event-register { padding-top: clamp(30px, 3.2vw, 44px); }

.lux-event-register {
  /* Full-bleed navy, like the band it replaces — the ground is what separates
     the ask from the copy above it now that there is no photograph to do it. */
  padding: clamp(44px, 5vw, 72px) clamp(20px, 5vw, 40px) clamp(52px, 5.6vw, 84px);
  background: linear-gradient(155deg, #00335F 0%, var(--fe-navy-900) 55%, #001A34 100%);
  /* Every native control in here sits on navy; this is what makes the platform
     draw the checkbox and the autofill dark to match. Copied from
     .lux-splitform, where it is load-bearing for the same reason. */
  color-scheme: dark;
  /* The footer below is a lighter navy and butts straight up against this, so
     without a hairline the two dark fields read as one mass with a seam. */
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.lux-event-register__inner {
  /* Wide enough for the form's two-column field rows to stay two columns, no
     wider than the card needs. .lux-hsform's own max-width is 880px, so this
     is what actually decides the measure. */
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* h2[class] in luxury.css pins headings navy at (0,1,1); on this ground that
   would be navy on navy. Same specificity, later file, so this wins. */
.lux-event-register h2.lux-event-register__title {
  margin: 0 0 10px;
  font-family: var(--lux-font);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

.lux-event-register p.lux-event-register__sub {
  margin: 0 0 clamp(24px, 3vw, 34px);
  /* The Webflow export's bare `p` carries its own max-width, which would
     off-centre this against the heading. */
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--lux-font);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--fe-blue-200);
}

/* Undo the centring for the form itself: the card is centred as a block, its
   contents read left-to-right like any other form. */
.lux-event-register .lux-hsform { text-align: left; }

.lux-event-register p.lux-event-register__foot {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  max-width: none;
  font-family: var(--lux-font);
  font-size: 14px;
  color: var(--fe-blue-200);
}

.lux-event-register p.lux-event-register__foot a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.lux-event-register p.lux-event-register__foot a:hover { border-bottom-color: #fff; }

/* Shown when the HubSpot embed fails to load — a state the homepage band has
   no equivalent of. Left-aligned with the card it replaces. */
.lux-hsform .lux-hsform__fallback,
p.lux-hsform__fallback {
  margin: 0;
  max-width: none;
  font-family: var(--lux-font);
  font-size: 15px;
  line-height: 1.7;
  color: #fff;
}

.lux-hsform__fallback a { color: var(--fe-blue-400); }

/* ------------------------------------------------------------
   4. Index — /events/
   ------------------------------------------------------------ */

.lux-event-index__inner { max-width: 1200px; margin: 0 auto; }

.lux-event-index p.lux-event-index__eyebrow {
  margin: 0 0 12px;
  max-width: none;
  font-family: var(--lux-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--lux-track-eyebrow);
  text-transform: uppercase;
  color: var(--fe-blue-600);
}

.lux-event-index h1.lux-event-index__title {
  margin: 0 0 16px;
  font-family: var(--lux-font);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.05;
  color: var(--fe-navy);
}

.lux-event-index p.lux-event-index__lead {
  margin: 0 0 clamp(32px, 4vw, 52px);
  max-width: 56ch;
  font-family: var(--lux-font);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--fe-slate);
}

.lux-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lux-event-card { margin: 0; }
/* One event is the normal case, and `auto-fill` made it a 300px card adrift in
   a 1200px row with three empty columns beside it -- which reads as a page
   that failed to load rather than as an announcement. Promote it to a
   two-column feature: photograph one side, the detail the other. */
.lux-event-grid > .lux-event-card:only-child { grid-column: 1 / -1; }

.lux-event-grid > .lux-event-card:only-child > a {
  grid-template-rows: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  max-width: 1000px;
}

.lux-event-grid > .lux-event-card:only-child .lux-event-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 280px;
}

.lux-event-grid > .lux-event-card:only-child .lux-event-card__body {
  align-self: center;
  padding: clamp(24px, 3vw, 40px);
}

.lux-event-grid > .lux-event-card:only-child .lux-event-card__title {
  font-size: clamp(22px, 2.6vw, 30px);
}

@media screen and (max-width: 760px) {
  /* Back to a stacked card: two columns of ~180px each is worse than one. */
  .lux-event-grid > .lux-event-card:only-child > a {
    grid-template-columns: minmax(0, 1fr);
  }
  .lux-event-grid > .lux-event-card:only-child .lux-event-card__media {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
}


.lux-event-card > a {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  text-decoration: none;
  background: var(--fe-paper);
  border: 1px solid var(--fe-line);
  transition: border-color .2s ease, transform .2s ease;
}

.lux-event-card > a:hover { border-color: var(--fe-navy); transform: translateY(-2px); }

.lux-event-card > a:focus-visible {
  outline: 2px solid var(--fe-blue-600);
  outline-offset: 2px;
}

.lux-event-card__media {
  display: block;
  overflow: hidden;
  /* A ratio box is right HERE, unlike the banner: a grid of cards has to
     line up, and object-fit:cover crops rather than stretches. */
  aspect-ratio: 16 / 9;
  background: var(--fe-surface-grey);
}

.lux-event-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lux-event-card__body {
  display: block;
  padding: clamp(18px, 2vw, 24px);
}

.lux-event-card__date {
  display: block;
  margin-bottom: 8px;
  font-family: var(--lux-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fe-blue-600);
}

.lux-event-card__title {
  display: block;
  margin-bottom: 6px;
  font-family: var(--lux-font);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.25;
  color: var(--fe-navy);
}

.lux-event-card__where {
  display: block;
  margin-bottom: 10px;
  font-family: var(--lux-font);
  font-size: 13px;
  color: var(--fe-slate);
}

.lux-event-card__summary {
  display: block;
  font-family: var(--lux-font);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fe-ink);
}

/* Past events stay reachable — a ribbon cutting that happened is still a
   page somebody may have linked — but read as history, not as an invitation.
   Grayscale rather than opacity so the text keeps its contrast. */
.lux-event-card--past .lux-event-card__media img { filter: grayscale(1); }
.lux-event-card--past .lux-event-card__date { color: var(--fe-slate); }

.lux-event-past { margin-top: clamp(48px, 6vw, 80px); }

.lux-event-index h2.lux-event-section__head {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-family: var(--lux-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--lux-track-eyebrow);
  text-transform: uppercase;
  color: var(--fe-slate);
}

.lux-event-index p.lux-event-empty {
  margin: 0;
  max-width: 56ch;
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--fe-canvas);
  border: 1px solid var(--fe-line);
  font-family: var(--lux-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fe-slate);
}

.lux-event-index p.lux-event-empty a { color: var(--fe-navy); }

@media (prefers-reduced-motion: reduce) {
  .lux-event-card > a:hover { transform: none; }
  .lux-event-btn, .lux-event-card > a { transition: none; }
}