/* ================================================
   B2B Events LP — base.css
   All component classes prefixed: b2b-
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- Custom Properties --- */
:root {
  --ngg-orange: #f90;
  --ngg-darkorange: #e07b00;
  --ngg-blue: #1a2c57;
  --ngg-darkblue: #0d1b38;
  --ngg-lightblue: #e8f0fe;
  --ngg-btn-txt: #000;
  --ngg-text: #111;
  --ngg-muted: #555;
  --ngg-white: #fff;
  --ngg-bg: #ffe4c0;
  --ngg-bg-dark: #111;
  --ngg-bg-mid: #222;
  --ngg-border: #ddd;

  --b2b-hero-cream: #ffe4c0;
  --b2b-upcoming-bg: #f7901e;
  --b2b-past-bg: #111;
  --b2b-ep-label: #f90;
  --b2b-live-red: #e0001b;

  --sp-section: 40px;
  --sp-section-lg: 64px;
  --font-base: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  background: var(--ngg-bg);
  color: var(--ngg-text);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; border: 0; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ================================================
   PAGE WRAPPER
   ================================================ */
.b2b-container {width:100%;margin:0;padding:0; background-color: #ffe4c0;}
.b2b-page {
  max-width: 1440px;
  margin: 0 auto;
  overflow: clip;   /* clips Jill at page edge, allows abs children to overlap */
  position: relative;
  font-family:'Inter', sans-serif;
}

.b2b-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.b2b-section-inner * { font-size: max(14px, inherit); }

/* ================================================
   HERO PANEL — unified hero + featured, two-column
   Left col (58%): cream bg — headline copy + featured strip
   Right col (42%): cream bg — Jill full-height + B2B logo
   ================================================ */
.b2b-hero-panel {
  background: var(--b2b-hero-cream);
  position: relative;
  /* overflow intentionally NOT hidden so Jill can overlap the orange border below */
  border-bottom: 0px solid var(--ngg-orange);
}

.b2b-hero-panel__grid {
  max-width: 1440px;
  margin: 0 auto;
  /* Single-column: left col drives height; right col is abs-positioned */
  display: block;
  position: relative;
}

/* ---- LEFT column: occupies full width, drives panel height ---- */
.b2b-hero-panel__left {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  /* right half left empty so text never runs under Jill */
  max-width: 100%;
}

/* Hero copy sits in cream area */
.b2b-hero__copy {
  padding: 48px 48px 32px 48px;
  flex-shrink: 0;
}

.b2b-hero__headline {
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 900;
  line-height: 1.0;
  color: var(--ngg-darkblue);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.b2b-hero__headline .b2b-hl-orange { color: var(--ngg-orange); }

.b2b-hero__subhead {
  font-size: clamp(2em, 2.5vw, 4em);
  font-weight: 700;
  color: var(--ngg-darkblue);
  margin-top: 50px;
}
.b2b-hero__subhead em {
  font-style: normal;
  color: var(--ngg-orange);
}
.b2b-hero__desc {
  font-size: max(1.5em, 1.9em);
  color: #444;
  margin-top: 12px;
  line-height: 1.45;
  max-width: 890px;
  width:60%;
}
.b2b-hero__stats {
  display: flex;
  gap: 44px;
  margin-top: 30px;
  justify-content: space-between;
  width: 50%;
}
.b2b-hero__stat-num {
  font-size: clamp(1.5em, 2.4vw, 2.4em);
  font-weight: 900;
  color: var(--ngg-orange);
  text-align: center;
}
.b2b-hero__stat-label {
  font-size: max(1.25em, 1.28em);
  color: var(--ngg-muted);
  margin-top: 3px;
  font-weight: 700;
}

/* Featured strip — white bar at bottom of left column */
.b2b-featured {
  width: 100%;
  background: var(--ngg-white);
  border: 5px solid var(--b2b-upcoming-bg);
  border-bottom: 0;
  padding: 24px 48px;
  margin-top: auto;   /* sticks to bottom */
}
.b2b-featured__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.b2b-featured__thumb {
  position: relative;
  flex: 0 0 290px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.b2b-featured__thumb img {
  width: 100%;
  height: auto;                  /* art is 388x231; at 290px wide that's ~173px, matching the old frame */
  aspect-ratio: 388 / 231;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.b2b-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b2b-play-btn::after {
  content: '';
  display: block;
  border: 0 solid transparent;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 16px solid #111;
  margin-left: 3px;
}
.b2b-featured__thumb-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.72);
  color: var(--ngg-white);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.b2b-featured__thumb-badge span { color: var(--b2b-ep-label); }

.b2b-featured__meta { flex: 1; }
.b2b-featured__title {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 800;
  color: var(--ngg-darkblue);
  margin-bottom: 4px;
}
.b2b-featured__tagline {
  font-size: max(14px, 1.5rem);
  font-weight: 700;
  color: var(--ngg-orange);
  margin-bottom: 10px;
}
.b2b-featured__desc {
  font-size: max(18px, 0.86rem);
  color: #555;
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 410px;
  width:50%;
}
.b2b-btn-watch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ngg-orange);
  color: var(--ngg-btn-txt);
  font-weight: 700;
  font-size: max(14px, 0.88rem);
  padding: 11px 22px;
  border-radius: 4px;
  transition: background 0.18s;
  min-height: 44px;
}

.b2b-btn-watch:hover { background: var(--ngg-darkorange); }
.b2b-btn-watch::before { content: '▶'; font-size: 10px; }

/* ---- RIGHT column: absolutely positioned over full panel height ----
   Jill and the B2B logo float in front of BOTH the cream hero area
   AND the white featured strip + its orange top border below it.   */
.b2b-hero-panel__right {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;          /* matches left col / full panel height */
  z-index: 10;           /* above the white strip and orange border */
  pointer-events: none;
  overflow: visible;
}

/* B2B Events logo -- top-right of the panel */
.b2b-hero__logo {
  position: absolute;
  top: 28px;
  right: 15px;
  width: 150px;
  z-index: 12;
  pointer-events: auto;
}

/* Jill -- anchored at bottom, fills full right-column height */
.b2b-hero__jill {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  z-index: 11;
}

/* ================================================
   UPCOMING LIVE EVENT
   ================================================ */
.b2b-upcoming {
  background: var(--b2b-upcoming-bg);
  padding: var(--sp-section) 0;
  border-top: 0px solid #f0d9b8;
}
.b2b-upcoming__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;               /* matches .b2b-episodes-grid so the banner lines up
                              with the right-hand cards (EP 10 / EP 08) */
  align-items: center;
}
.b2b-upcoming__label {
  font-size: max(14px, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ngg-muted);
  margin-bottom: 10px;
}
.b2b-live-badge, .b2b-register-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: max(14px, 0.8rem);
  font-weight: 700;
  color: var(--ngg-white);
  margin-bottom: 14px;
  background-color: var(--ngg-btn-txt);
  padding: 12px 20px;
  border-radius: 5px;
}

.b2b-register-badge { background-color:#fff; color:#000; border:2px solid red; padding:0; margin-left:1%; }
.b2b-register-badge a { text-decoration: none; font-size:1.5rem; border-bottom:none; padding:10px 20px; }
.b2b-register-badge a:hover { border:0; background-color:#000; color:#fff; }

.b2b-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b2b-live-red);
  flex-shrink: 0;
  animation: none; /*b2b-pulse 1.4s infinite;*/
}
@keyframes b2b-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.b2b-upcoming__headline {
  font-size: clamp(20px, 2.5vw, 3rem);
  font-weight: 800;
  color: var(--ngg-darkblue);
  line-height: 1.25;
  margin-bottom: 12px;
}
.b2b-upcoming__desc {
  font-size: max(14px, 1.25rem);
  color: #050913;
  line-height: 1.6;
  margin-bottom: 6px;
  max-width: 600px;
}
.b2b-upcoming__note {
  font-size: max(14px, 1.2rem);
  color: #212121;
  font-weight: 700;
}
.b2b-upcoming__banner {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.b2b-upcoming__banner img { width: 100%; display: block; }

/* ================================================
   PAST EPISODES
   ================================================ */
.b2b-past {
  background: var(--b2b-past-bg);
  padding: var(--sp-section) 0 48px;
}
.b2b-past__header {
  max-width: 1280px;
  margin: 0 auto 38px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.b2b-past__title {
  font-size: clamp(18px, 2vw, 2.2rem);
  font-weight: 900;
  color: var(--ngg-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.b2b-past__subtitle {
  font-size: max(14px, 1.2rem);
  color: var(--ngg-orange);
  font-weight: 700;
}
.b2b-episodes-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Episode card */
.b2b-ep-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a1a;
  display: block;          /* image drives height; body is abs on top */
  height: 220px;           /* matches img height */
}

/* Image area — banner fills full card, content overlays on top */
.b2b-ep-card__img {
  position: relative;
  overflow: hidden;
  flex: 1;                  /* image area grows to fill card */
}
.b2b-ep-card__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top center;   /* anchor to the top - product shots sit high in these
                                    banners, so any crop falls to the bottom instead */
  display: block;
  transition: transform 0.3s ease;
}
.b2b-ep-card:hover .b2b-ep-card__img img { transform: scale(1.03); }

/* Black-to-transparent gradient from left edge toward center */
.b2b-ep-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.10) 65%,
    rgba(0,0,0,0.00) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* All text/buttons sit above the gradient overlay */
.b2b-ep-num {
  position: absolute;
  top: 65px;
  left: 14px;
  font-size: clamp(20px, 2.2vw, 3rem);
  font-weight: 900;
  color: var(--b2b-ep-label);
  line-height: 1;
  z-index: 2;
}
.b2b-ep-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.b2b-ep-card__title {
  font-size: max(14px, 1.3rem);
  font-weight: 700;
  color: var(--ngg-white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.b2b-ep-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.b2b-btn-ep {
  padding: 8px 16px;
  font-size: max(14px, 0.8rem);
  font-weight: 700;
  border-radius: 4px;
  transition: background 0.18s, color 0.18s;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.b2b-btn-ep--watch {
  background: var(--ngg-orange);
  color: var(--ngg-btn-txt);
}
.b2b-btn-ep--watch:hover { background: var(--ngg-darkorange); }
.b2b-btn-ep--shop {
  background: #fff;
  color: #000;
  border-radius: 5px;
  border: 1.5px solid #fff5;

}
.b2b-btn-ep--shop:hover { border-color: #212121; color: #212121; background:#fff8; }

/* ================================================
   SCROLL REVEAL
   ================================================ */
.b2b-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.45s ease, transform 0.45s ease; }
.b2b-reveal.b2b-visible { opacity: 1; transform: none; }

/* ================================================
   FOCUS STYLES
   ================================================ */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ngg-orange);
  outline-offset: 3px;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (min-width: 1410px) {
  .b2b-hero__desc        { width: 70%; }

}

@media (max-width: 1024px) {
  .b2b-hero-panel__left  { max-width: 56%; }
  .b2b-hero-panel__right { width: 64%; }
  .b2b-hero__copy        { padding: 40px 36px 28px; }
  .b2b-featured          { padding: 20px 36px; }
  .b2b-hero__logo        { width: 150px; right: 20px; }
  .b2b-featured__inner   { flex-direction: column; align-items: flex-start; }
  .b2b-featured__thumb   { flex: 1; }
  .b2b-hero__stats       { width: 70%; }

}

@media (max-width: 900px) {
  .b2b-hero-panel__left  { max-width: 60%; }
  .b2b-hero-panel__right { width: 40%; }
  .b2b-hero__jill        { opacity: 0.5; }
}

@media (max-width: 769px) {
  .b2b-hero-panel__left  { max-width: 100%; }
  .b2b-hero-panel__right { display: none; }
  .b2b-hero__copy        { padding: 32px 24px 24px; }
  .b2b-featured          { padding: 20px 24px; margin-top: 0; }
  .b2b-featured__inner   { flex-direction: column; }
  .b2b-featured__thumb   { flex: none; width: 100%; }
  /* height stays auto so the 388x231 art is never cropped on small screens */
  .b2b-upcoming__inner   { grid-template-columns: 1fr; }
  .b2b-episodes-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 550px) {
  .b2b-hero__headline  { font-size: clamp(28px, 8vw, 42px); }
  .b2b-hero__stats     { gap: 12px; }
  .b2b-past__header    { flex-direction: column; gap: 4px; }
  .b2b-ep-card__img img { height: 150px; }
  .b2b-ep-card         { height: 150px; }
  .b2b-hero__desc      { width: 95%; }
  .b2b-featured__desc  { width: 100%; }
  .b2b-register-badge  { margin-left: 0; }
  .b2b-ep-num { top:5px; }
  .b2b-hero__stats { width: 100%; }
}

@media (max-width: 375px) {
  .b2b-hero__copy,
  .b2b-featured,
  .b2b-upcoming__inner,
  .b2b-episodes-grid,
  .b2b-past__header { padding-left: 16px; padding-right: 16px; }
}