/* ============================================
   WEBINARI SHOW – REDESIGNED LAYOUT
   ============================================ */

/* ============================================
   NAV ROW (back button)
   ============================================ */
.wb-nav {
  padding: 36px 0 0;
  background: var(--nbm-white);
}

.wb-nav .container {
  max-width: var(--page-content-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================
   BREADCRUMB ROW
   ============================================ */
.wb-breadcrumb {
  padding: 20px 0 0;
  background: var(--nbm-white);
}

.wb-breadcrumb .container {
  max-width: var(--page-content-width);
  margin: 0 auto;
  padding: 0 20px;
}

.wb-breadcrumb-item {
  font-size: 0.875rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--nbm-text);
}

.wb-breadcrumb-item a {
  color: var(--nbm-indigo);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.wb-breadcrumb-item a:hover {
  opacity: 1;
}

.wb-breadcrumb-sep {
  margin: 0 0.5rem;
  color: var(--nbm-border);
  font-size: 0.875rem;
}

.wb-breadcrumb-current {
  font-weight: 500;
  color: var(--nbm-text);
  opacity: 0.6;
}

/* ============================================
   TITLE ROW
   ============================================ */
.wb-header {
  padding: 24px 0 48px;
  background: var(--nbm-white);
}

.wb-header .container {
  max-width: var(--page-content-width);
  margin: 0 auto;
  padding: 0 20px;
}

.wb-header h1 {
  font-family: 'Playfair Display', 'Libre Baskerville', serif;
  color: var(--nbm-indigo);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.3;
  margin: 0;
}

/* ============================================
   SPLIT SECTION
   ============================================ */
.wb-split {
  background: var(--nbm-bg-alt);
  padding: 56px 0 72px;
}

.wb-split .container {
  max-width: var(--page-content-width);
  margin: 0 auto;
  padding: 0 20px;
}

.wb-split-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

/* Mobile: sessions render first above meta */
.wb-col-sessions { order: -1; }

/* Desktop: meta left (2fr), sessions right (3fr), natural DOM order restored */
@media (min-width: 768px) {
  .wb-split-inner {
    grid-template-columns: 2fr 3fr;
    gap: 56px;
  }

  .wb-split-inner--sessions-only {
    grid-template-columns: 1fr;
  }

  .wb-col-meta    { order: 1; }
  .wb-col-sessions {
    height: 100%;
    order: 2;
  }
}

/* ============================================
   SESSIONS STICKY PANEL
   ============================================ */
@media (min-width: 768px) {
  .wb-sessions-sticky {
    position: sticky;
    top: var(--header-height);
  }
}

/* ============================================
   DESCRIPTION + GALLERY (below split)
   ============================================ */
.wb-desc-section {
  background: var(--nbm-white);
  padding: 56px 0 72px;
}

.wb-desc-section .container {
  max-width: var(--page-content-width);
  margin: 0 auto;
  padding: 0 20px;
}

.wb-desc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

/* Mobile: gallery above description */
.wb-gallery-col { order: -1; }

@media (min-width: 768px) {
  .wb-desc-split {
    grid-template-columns: 2fr 1fr;
    gap: 56px;
  }

  .wb-desc-col   { order: 1; }
  .wb-gallery-col { order: 2; }
}

.wb-description-text {
  color: var(--nbm-text);
  font-size: 1.05rem;
  line-height: 1.8;
  white-space: pre-line;
  margin: 0;
}

/* Gallery column — override full-width hero defaults */
.wb-gallery-col .product-gallery {
  max-width: none;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================
   RESPONSIVE – MOBILE
   ============================================ */
@media (max-width: 767px) {
  .wb-nav {
    padding: 24px 0 0;
  }

  .wb-nav .container,
  .wb-breadcrumb .container,
  .wb-header .container,
  .wb-split .container,
  .wb-desc-section .container {
    padding: 0 16px;
  }

  .wb-breadcrumb {
    padding: 14px 0 0;
  }

  .wb-header {
    padding: 20px 0 36px;
  }

  .wb-split {
    padding: 40px 0 56px;
  }

  .wb-desc-section {
    padding: 40px 0 56px;
  }

  .wb-gallery-col .product-gallery-track {
    height: 240px;
  }
}