/* ==========================================================================
   Partner invitation pages  (bluefront.html, and one file per future partner)
   --------------------------------------------------------------------------
   Loads AFTER styles.css and reuses its tokens, buttons, nav, footer and
   reveal animations. Everything partner-specific comes from the three custom
   properties below, set per page on <body style="...">:

     --partner       the partner's primary colour
     --partner-soft  a translucent wash of it (used for fills)
     --partner-gold  the "exclusive" hairline accent

   To build a page for the next partner: copy bluefront.html, change the
   PARTNER block at the top of that file, and nothing here needs editing.
   ========================================================================== */

body.page-invite {
  --partner: #2457e6;
  --partner-soft: rgba(36, 87, 230, .08);
  --partner-gold: #b78b3e;
}

/* --------------------------------------------------------------------------
   Co-brand lockup — partner mark × expo wordmark
   -------------------------------------------------------------------------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: 10px 20px 10px 16px;
  border: 1px solid var(--line-on-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lockup__mark {
  display: block;
  width: auto;
  height: clamp(20px, 2.6vw, 26px);
}
/* the partner's own mark is usually one flat colour — force it to white on the dark hero */
.lockup__mark--partner path { fill: #fff; }
.lockup__x {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
}
.lockup__expo { display: block; height: clamp(26px, 3.4vw, 34px); width: auto; }

/* --------------------------------------------------------------------------
   Invitation hero
   -------------------------------------------------------------------------- */
.inv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(44px, 6vw, 86px)) 0 clamp(64px, 8vw, 110px);
  background: var(--midnight);
  color: var(--text-on-dark);
}
.inv-hero__bg { position: absolute; inset: 0; z-index: -1; }
.inv-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.inv-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,8,23,.90) 0%, rgba(5,8,23,.74) 42%, rgba(5,8,23,.94) 100%),
    radial-gradient(900px 520px at 16% 28%, var(--partner-soft) 0%, rgba(5,8,23,0) 70%);
}

.inv-hero__inner { position: relative; max-width: 940px; }
.inv-hero__lockup { margin: 0 0 clamp(26px, 3.4vw, 40px); }

.inv-hero__eyebrow { margin-bottom: 20px; }
/* the eyebrow carries the partner's name — tint the rule under it to match */
.inv-hero__eyebrow::after {
  content: '';
  display: block;
  width: 56px; height: 2px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--partner-gold), rgba(255,255,255,0));
}

.inv-hero__title { margin-bottom: 22px; font-size: clamp(46px, 9.4vw, 104px); }
/* this headline is short, so let it set its own width rather than inherit the slogan's nowrap */
.inv-hero__title .hero__line-inner { white-space: normal; }

.inv-hero__lede {
  max-width: 620px;
  margin: 0 0 clamp(26px, 3vw, 36px);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--text-on-dark-muted);
}
.inv-hero__lede strong { color: #fff; font-weight: 600; }

.inv-hero__details {
  list-style: none;
  margin: 0 0 clamp(28px, 3.4vw, 40px);
  padding: 0 0 0 20px;
  border-left: 2px solid var(--partner-gold);
  font-size: clamp(15.5px, 1.7vw, 18px);
  line-height: 1.72;
  color: var(--text-on-dark-muted);
}
.inv-hero__details strong { display: block; color: #fff; font-weight: 700; font-size: 1.08em; }

.inv-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.inv-hero__free {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px;
  color: var(--text-on-dark-muted);
}
.inv-hero__free svg { width: 17px; height: 17px; flex: none; color: var(--partner-gold); }

/* --------------------------------------------------------------------------
   The note — a letter from the partner
   -------------------------------------------------------------------------- */
/* sits on Cloud so the white letter card reads as a card, and so this section
   and the white "Why attend" below it don't merge into one long blank stretch */
.inv-note { background: var(--cloud); }
.inv-note__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.inv-note__letter {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(26px, 4vw, 52px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--partner);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 28px 60px -40px rgba(5, 8, 23, .4);
}
.inv-note__quote {
  position: absolute;
  top: 2px; right: 22px;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 1;
  font-weight: 800;
  color: var(--partner);
  opacity: .1;
  pointer-events: none;
  user-select: none;
}
.inv-note__from {
  display: block;
  margin: 0 0 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--partner);
}
.inv-note__body { margin: 0; font-size: clamp(16.5px, 1.75vw, 19px); line-height: 1.68; color: var(--text); }
.inv-note__body p { margin: 0 0 1em; }
.inv-note__body p:last-child { margin-bottom: 0; }

.inv-note__sign {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--line);
}
.inv-note__sign-mark { height: 30px; width: auto; flex: none; }
.inv-note__sign-mark path { fill: var(--partner); }
.inv-note__sign-text { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.inv-note__sign-text strong { display: block; color: var(--text-title); font-size: 16.5px; font-weight: 700; }

/* side panel: who the partner is */
.inv-note__about {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius);
  background: var(--partner-soft);
}
.inv-note__about h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-title);
}
.inv-note__about p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.inv-note__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--partner);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .3s;
}
.inv-note__link:hover { opacity: .68; }

/* --------------------------------------------------------------------------
   "Find us at the Expo" band
   -------------------------------------------------------------------------- */
.inv-booth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text-on-dark);
  background: var(--indigo-deep);
}
.inv-booth__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(720px 420px at 82% 18%, var(--partner-soft) 0%, rgba(11,21,80,0) 72%),
    radial-gradient(620px 420px at 8% 92%, rgba(139,92,246,.18) 0%, rgba(11,21,80,0) 70%);
}
.inv-booth__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.inv-booth__title { margin: 0 0 14px; }
.inv-booth__text { margin: 0; max-width: 560px; font-size: clamp(16px, 1.8vw, 18.5px); line-height: 1.6; color: var(--text-on-dark-muted); }
.inv-booth__mark {
  display: grid;
  place-items: center;
  width: clamp(130px, 16vw, 190px);
  aspect-ratio: 1;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}
.inv-booth__mark svg { width: 56%; height: auto; }
.inv-booth__mark path { fill: #fff; }

/* --------------------------------------------------------------------------
   What to expect — compact list
   -------------------------------------------------------------------------- */
.inv-expect__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(34px, 4vw, 52px);
}
.inv-expect__item {
  padding-top: 20px;
  border-top: 2px solid var(--line);
}
.inv-expect__item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-title);
}
.inv-expect__item p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .inv-note__inner { grid-template-columns: 1fr; }
  .inv-booth__inner { grid-template-columns: 1fr; }
  .inv-booth__mark { justify-self: start; }
}

/* styles.css hides .hero__sep below 900px, so put the time on its own line here
   too — otherwise the date runs straight into it ("20264:00 PM"). */
@media (max-width: 900px) {
  .inv-hero__details .nowrap { display: block; }
}

@media (max-width: 640px) {
  .lockup { gap: 12px; padding: 9px 16px 9px 13px; }
  .lockup__x { font-size: 11px; letter-spacing: .1em; }
  .inv-hero { padding-top: calc(var(--nav-h) + 24px); }
  .inv-hero__title { font-size: clamp(40px, 12.4vw, 56px); }
  .inv-hero__actions { gap: 16px; }
  .inv-hero__actions .btn { width: 100%; justify-content: center; }
  .inv-note__quote { font-size: 84px; right: 14px; }
}

/* No-JS / reduce-motion: everything that the reveal code would fade in stays visible */
.js .inv-hero__lockup,
.js .inv-hero__lede,
.js .inv-hero__details li,
.js .inv-hero__actions { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .inv-hero__lockup,
  .js .inv-hero__lede,
  .js .inv-hero__details li,
  .js .inv-hero__actions { opacity: 1; }
}