/* ============================================================
   COMPONENTS — reusable UI objects
   Depends on: tokens.css, base.css
   ============================================================ */

/* ============================================================
   BUTTONS — squared thermal keys.
   Hover lifts 2px and gains a coloured glow; press scales to .97.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);border-radius:var(--radius);
  font-family:var(--font-mono);font-weight:600;font-size:var(--text-micro);
  letter-spacing:.08em;text-transform:uppercase;
  transition:transform var(--duration-fast) var(--ease-out),
             background-color var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out);
}
.btn svg{width:15px;height:15px;flex:none}
.btn--primary{background:var(--heat-500);color:var(--void)}
.btn--primary:hover{background:var(--heat-400);transform:translateY(-2px);box-shadow:var(--glow-heat)}
.btn--secondary{border:1px solid var(--line-strong);color:var(--ink-100)}
.btn--secondary:hover{border-color:var(--cool-400);color:var(--cool-200);transform:translateY(-2px);box-shadow:var(--glow-cool)}
.btn:active{transform:scale(.97)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* ============================================================
   PENDING CONTENT
   Testimonials, statistics and speaker details were never supplied
   by the client. These markers must stay unmistakable so nobody
   downstream mistakes invented content for approved content.
   ============================================================ */
.pending{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-1) var(--space-3);border-radius:var(--radius);
  border:1px dashed var(--heat-700);background:rgba(255,106,61,.08);
  color:var(--heat-400);
  font-family:var(--font-mono);font-size:var(--text-label);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  /* must wrap: the marker is wider than a portrait slot at 320px */
  max-width:100%;text-align:center;text-wrap:balance;
}
.slot{
  display:grid;place-items:center;gap:var(--space-4);min-width:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space-5);text-align:center;
}
.slot svg{width:24px;height:24px;color:var(--ink-700)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out);
}
.nav.is-stuck{
  background:rgba(5,9,20,.86);border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.nav__inner{
  display:flex;align-items:center;gap:var(--space-6);
  height:var(--nav-h);
  transition:height var(--duration-base) var(--ease-out);
}
.nav.is-stuck .nav__inner{height:62px}
.nav__logo{margin-right:auto;display:flex;align-items:center}
.nav__logo img{
  height:clamp(36px,4.2vw,52px);width:auto;object-fit:contain;
  transition:transform var(--duration-base) var(--ease-out);
}
.nav.is-stuck .nav__logo img{transform:scale(.9)}
.nav__links{display:none;gap:var(--space-6);align-items:center}
.nav__links a{
  font-family:var(--font-mono);font-size:var(--text-micro);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);
  position:relative;padding-block:var(--space-2);
  transition:color var(--duration-fast) var(--ease-out);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--heat-500);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-base) var(--ease-out);
}
.nav__links a:hover{color:var(--ink-100)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{display:none}
.nav__toggle{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink-100);
}
.nav__toggle svg{width:20px;height:20px}
@media (min-width:1000px){
  .nav__links,.nav__cta{display:flex}
  .nav__toggle{display:none}
}

/* ---- Mobile menu panel ---- */
.menu{
  position:fixed;inset:0;z-index:60;display:grid;
  background:rgba(5,9,20,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:var(--space-6);
  opacity:0;visibility:hidden;
  transition:opacity var(--duration-base) var(--ease-out),visibility var(--duration-base);
}
.menu[data-open="true"]{opacity:1;visibility:visible}
.menu__close{
  justify-self:end;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:var(--radius);
}
.menu__close svg{width:20px;height:20px}
.menu__list{
  align-self:center;display:grid;gap:var(--space-4);
  font-family:var(--font-display);font-size:var(--text-display-m);
  font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-display);
}
.menu__list a:hover{color:var(--heat-500)}
.menu__cta{color:var(--heat-500)}

/* ============================================================
   SCENE — a dialogue-track panel (Section 3)
   ============================================================ */
.scene{
  position:relative;overflow:hidden;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:var(--card-padding);
  display:flex;flex-direction:column;gap:var(--space-4);justify-content:flex-end;
  min-height:clamp(220px,30vw,300px);
  transition:border-color var(--duration-base) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out);
}
/* thermal wash rising from the base of each panel */
.scene::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(43,127,224,.18),transparent 58%);
}
.scene>*{position:relative}
.scene:hover{border-color:var(--cool-500);box-shadow:var(--glow-cool)}
.scene__num{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(3.5rem,calc(2rem + 5vw),6.5rem);line-height:.8;
  color:var(--line-strong);font-variant-numeric:tabular-nums;
}
.scene h3{
  font-size:var(--text-display-s);font-weight:800;text-transform:uppercase;
  letter-spacing:var(--tracking-display);color:var(--ink-100);
}
.scene p{color:var(--ink-500);font-size:var(--text-small)}
/* the two heat-graded tracks: opening dialogue and the awards */
.scene--heat::before{background:linear-gradient(0deg,rgba(255,106,61,.22),transparent 58%)}
.scene--heat h3{color:var(--heat-500)}
.scene--heat:hover{border-color:var(--heat-500);box-shadow:var(--glow-heat)}

/* ============================================================
   QUOTE — testimonial card (Section 5)
   ============================================================ */
.quote{
  position:relative;overflow:hidden;min-width:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--card-padding);
  display:grid;gap:var(--space-5);align-content:start;
  transition:border-color var(--duration-base) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out);
}
.quote::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(43,127,224,.14),transparent 60%);
}
.quote>*{position:relative}
.quote:hover{border-color:var(--cool-500);box-shadow:var(--glow-cool)}
.quote__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.quote__mark{color:var(--heat-600)}
.quote__mark svg{width:24px;height:24px}
.quote__body{color:var(--ink-500);font-size:var(--text-body-l);min-height:5em}
.quote__by{
  display:flex;align-items:center;gap:var(--space-4);
  border-top:1px solid var(--line);padding-top:var(--space-4);
}
.quote__av{
  width:40px;height:40px;border-radius:var(--radius);background:var(--surface-2);
  display:grid;place-items:center;flex:none;
}
.quote__av svg{width:18px;height:18px;color:var(--ink-700)}

/* ============================================================
   RAIL + SPEAKER — horizontally scrollable gallery (Section 6)
   ============================================================ */
.rail{
  display:flex;gap:var(--grid-gap);overflow-x:auto;
  padding-bottom:var(--space-5);
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius)}
.speaker{
  flex:none;width:clamp(190px,22vw,250px);
  scroll-snap-align:start;display:grid;gap:var(--space-3);
}
.speaker .slot{aspect-ratio:3/4}

/* Small mono caption, used under speakers and beside stats. */
.stat__l{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-700);
}

/* ============================================================
   TAG — sector pill (Section 7)
   ============================================================ */
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.tag{
  padding:var(--space-2) var(--space-4);border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--ink-300);
  transition:border-color var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out);
}
.tag:hover{border-color:var(--cool-400);color:var(--cool-200);box-shadow:var(--glow-cool)}

/* ============================================================
   THEME — key-theme panel (Section 8)
   ============================================================ */
.theme{
  position:relative;overflow:hidden;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:var(--card-padding);
  display:flex;flex-direction:column;gap:var(--space-4);justify-content:flex-end;
  min-height:clamp(150px,18vw,200px);
  transition:border-color var(--duration-base) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out);
}
/* the light pool each theme emerges from */
.theme::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(43,127,224,.16),transparent 60%);
}
.theme>*{position:relative}
.theme:hover{border-color:var(--cool-500);box-shadow:var(--glow-cool)}
.theme__icon{color:var(--cool-400)}
.theme__icon svg{width:24px;height:24px}
.theme h3{
  font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-display);
  color:var(--ink-100);font-size:var(--text-title);
}

/* ============================================================
   STAT — figure panel (Section 10)
   ============================================================ */
.stat{
  position:relative;overflow:hidden;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:var(--card-padding);
  display:grid;gap:var(--space-3);align-content:start;
}
.stat::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(255,106,61,.14),transparent 62%);
}
.stat>*{position:relative}
.stat__v{
  font-family:var(--font-display);font-size:var(--text-stat);font-weight:900;
  line-height:.86;color:var(--heat-500);font-variant-numeric:tabular-nums;
}