/* =============================================================================
   Events Landing CSS — ISIS Papyrus Software
   Reusable stylesheet for event landing pages (/e15/pages/shows/*)
   Token-based, mobile-first, accessibility built-in.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens (scoped to the page so they never leak)
   ----------------------------------------------------------------------------- */
.event-page {
  /* Brand palette */
  --evt-teal:        #6bb8be;
  --evt-teal-dark:   #5aa5ab;
  --evt-teal-deep:   #4a9097;
  --evt-navy:        #2c3e50;
  --evt-navy-deep:   #1e293b;
  --evt-navy-darker: #0f172a;

  /* Neutrals */
  --evt-ink:         #2c3e50;
  --evt-ink-soft:    #475569;
  --evt-muted:       #666;
  --evt-border:      #e1e8ed;
  --evt-border-soft: #eef2f6;
  --evt-bg:          #ffffff;
  --evt-bg-soft:     #f8f9fa;
  --evt-bg-tinted:   #f1f7f7;

  /* Status */
  --evt-danger:      #e74c3c;
  --evt-success:     #10b981;

  /* Radii */
  --evt-radius-sm:   8px;
  --evt-radius:      12px;
  --evt-radius-btn:  10px;
  --evt-radius-lg:   20px;
  --evt-radius-pill: 25px;

  /* Elevation */
  --evt-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
  --evt-shadow-sm:   0 3px 15px rgba(0, 0, 0, 0.06);
  --evt-shadow:      0 5px 20px rgba(0, 0, 0, 0.08);
  --evt-shadow-lg:   0 15px 40px rgba(0, 0, 0, 0.10);
  --evt-shadow-xl:   0 20px 50px rgba(15, 23, 42, 0.12);
  --evt-shadow-glow: 0 4px 15px rgba(107, 184, 190, 0.3);

  /* Motion */
  --evt-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --evt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --evt-dur-fast:    0.2s;
  --evt-dur:         0.3s;
  --evt-dur-slow:    0.4s;

  /* Typography */
  --evt-font-heading: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --evt-font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;

  /* Layout */
  --evt-max-w:       1200px;
  --evt-max-w-tight: 1080px;
  --evt-gutter:      clamp(1rem, 4vw, 2rem);
  --evt-section-y:   clamp(3rem, 7vw, 5.5rem);

  /* Composition */
  font-family: var(--evt-font-body);
  color: var(--evt-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Self-contained box model so the page works regardless of upstream CSS */
.event-page,
.event-page *,
.event-page *::before,
.event-page *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   2. Accessibility primitives
   ----------------------------------------------------------------------------- */
.event-page :focus-visible {
  outline: 3px solid var(--evt-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.event-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .event-page *,
  .event-page *::before,
  .event-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   3. Layout primitives (self-contained: do not depend on Bootstrap grid)
   ----------------------------------------------------------------------------- */
.event-container {
  max-width: var(--evt-max-w);
  margin-inline: auto;
  padding-inline: var(--evt-gutter);
  width: 100%;
}

.event-container--tight { max-width: var(--evt-max-w-tight); }

.event-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 -15px;
}

.event-col {
  padding: 0 15px;
  flex: 1;
  min-width: 0;
}

.event-col-3  { flex: 0 0 25%;        max-width: 25%; }
.event-col-4  { flex: 0 0 33.3333%;   max-width: 33.3333%; }
.event-col-5  { flex: 0 0 41.6667%;   max-width: 41.6667%; }
.event-col-6  { flex: 0 0 50%;        max-width: 50%; }
.event-col-7  { flex: 0 0 58.3333%;   max-width: 58.3333%; }
.event-col-12 { flex: 0 0 100%;       max-width: 100%; }

/* -----------------------------------------------------------------------------
   4. HERO
   Left = text. Right = lasvegas.jpg fading in from the gradient. No booth card.
   Bottom edge is sharp.
   ----------------------------------------------------------------------------- */
.event-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(3.5rem, 9vw, 6rem);
  background: linear-gradient(100deg, #0f172a 0%, #1e293b 38%, #243f4a 70%, #2c5360 100%);
  color: #fff;
  overflow: hidden;
}

/* Right-side media backdrop (Las Vegas video, image fallback), fading in from the gradient */
.event-hero__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 65%;
  overflow: hidden;
  /* Fade from transparent on the left to fully visible on the right */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 28%, rgba(0,0,0,0.78) 60%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 28%, rgba(0,0,0,0.78) 60%, #000 100%);
  opacity: 0.78;
  z-index: 0;
}

.event-hero__photo > video,
.event-hero__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

/* Color-grade the media so it ties into the navy gradient */
.event-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,23,42,0.35) 0%, rgba(15,23,42,0.10) 50%, rgba(15,23,42,0.20) 100%),
    radial-gradient(circle at 65% 40%, rgba(107,184,190,0.10) 0%, transparent 60%);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Subtle dot-grid pattern over everything, on top of the photo */
.event-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}

/* Soft teal glow nestled into the seam between gradient and photo */
.event-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 45%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(107,184,190,0.18) 0%, transparent 65%);
  transform: translate(-30%, -50%);
  pointer-events: none;
  z-index: 1;
}

.event-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 780px;
}

.event-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--evt-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--evt-teal);
}

.event-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--evt-teal);
}

.event-hero__title {
  font-family: var(--evt-font-heading);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}

.event-hero__lede {
  font-size: 2rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  margin: 0.25rem 0 0.5rem;
  font-weight: 400;
  max-width: 500px;
}

/* Meta line: date · location · countdown — all in one row */
.event-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 0.5rem;
}

.event-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
}

.event-hero__meta-item i {
  color: var(--evt-teal);
  font-size: 1.25rem;
}

.event-hero__meta-sep {
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.35);
  border-radius: 50%;
  flex-shrink: 0;
}

.event-hero__countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--evt-teal);
}

.event-hero__countdown-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--evt-teal);
  box-shadow: 0 0 0 0 rgba(107,184,190,0.7);
  animation: evtPulse 2.2s var(--evt-ease) infinite;
  flex-shrink: 0;
}

.event-hero__countdown-text strong {
  color: #fff;
  font-weight: 700;
  margin-right: 0.15em;
}

@keyframes evtPulse {
  0%   { box-shadow: 0 0 0 0 rgba(107,184,190,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(107,184,190,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,184,190,0); }
}

@media (prefers-reduced-motion: reduce) {
  .event-hero__countdown-dot { animation: none; }
}

.event-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1rem;
}

/* -----------------------------------------------------------------------------
   5. Buttons (shared)
   ----------------------------------------------------------------------------- */
.event-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--evt-font-body);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--evt-radius-btn);
  cursor: pointer;
  transition: transform var(--evt-dur) var(--evt-ease),
              background var(--evt-dur) var(--evt-ease),
              box-shadow var(--evt-dur) var(--evt-ease),
              color var(--evt-dur) var(--evt-ease);
  line-height: 1.2;
  white-space: nowrap;
}

.event-btn i {
  font-size: 1.35rem;   /* Bigger icons as requested */
  line-height: 1;
}

.event-btn--primary {
  background: linear-gradient(135deg, var(--evt-teal) 0%, var(--evt-teal-dark) 100%);
  color: #fff;
  box-shadow: var(--evt-shadow-glow);
}

.event-btn--primary:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(107,184,190,0.4);
}

.event-btn--ghost {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.event-btn--ghost:hover {
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
}

/* -----------------------------------------------------------------------------
   6. Section: Intro
   ----------------------------------------------------------------------------- */
.event-intro {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.event-intro__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: flex-start;
}

.event-intro__heading {
  font-family: var(--evt-font-heading);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--evt-ink);
  margin: 0 0 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.event-intro__body p {
  font-size: 1.7rem;
  color: #555;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.event-intro__body p:last-child { margin-bottom: 0; }

.event-intro__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* -----------------------------------------------------------------------------
   7. Video card / Vimeo trigger
   ----------------------------------------------------------------------------- */
.event-video {
  position: relative;
  display: block;
  border-radius: var(--evt-radius);
  overflow: hidden;
  background: #0f172a;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  box-shadow: var(--evt-shadow);
  transition: transform var(--evt-dur) var(--evt-ease), box-shadow var(--evt-dur) var(--evt-ease);
}

.event-video:hover {
  transform: translateY(-3px);
  box-shadow: var(--evt-shadow-lg);
}

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

.event-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background:
    radial-gradient(circle at center, rgba(107,184,190,0.95) 0%, rgba(90,165,171,0.95) 100%);
  box-shadow: 0 8px 30px rgba(107,184,190,0.45);
  transition: transform var(--evt-dur) var(--evt-ease);
}

.event-video__play::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: translateX(3px);
}

.event-video:hover .event-video__play {
  transform: scale(1.08);
}

.event-video__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Trust badges */
.event-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 15px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.25rem;
}

.event-badges img {
  height: 80px;
  width: auto;
  object-fit: contain;
}

/* -----------------------------------------------------------------------------
   8. Section: Meeting / booth highlights
   ----------------------------------------------------------------------------- */
.event-meeting {
  padding: var(--evt-section-y) 0;
  background: var(--evt-bg-soft);
}

.event-meeting__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.event-date {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.event-date__icon {
  width: 64px; height: 64px;
  border-radius: var(--evt-radius);
  background: linear-gradient(135deg, var(--evt-teal), var(--evt-teal-dark));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: var(--evt-shadow-glow);
  flex-shrink: 0;
}

.event-date__text h3 {
  margin: 0;
  font-family: var(--evt-font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--evt-ink);
}

.event-date__text p {
  margin: 4px 0 0;
  color: var(--evt-muted);
}

.event-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.event-cta-stack__hint {
  font-size: 0.85rem;
  color: var(--evt-muted);
}

/* Booth info card — matches Barcelona styling */
.event-booth-info {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  color: var(--evt-ink);
  padding: 40px;
  border-radius: var(--evt-radius-lg);
  margin: 0 0 40px 0;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(107, 184, 190, 0.1);
  position: relative;
  overflow: hidden; /* So the left accent bar follows the border-radius cleanly */
}

.event-booth-info::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(135deg, var(--evt-teal), var(--evt-teal-dark));
}

.event-booth-info h4 {
  margin: 0 0 25px;
  font-family: var(--evt-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--evt-ink);
  position: relative;
  z-index: 1;
  line-height: 1.25;
}

.event-booth-heading-text {
  /* Inline so the tagline sits next to the end of the heading text */
}

.event-booth-tagline {
  display: inline-block;
  margin-left: 18px;
  color: var(--evt-teal);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  vertical-align: middle;
  white-space: nowrap;
}

.event-booth-tagline i {
  margin-right: 8px;
  color: var(--evt-teal-dark);
  font-size: 1.05rem;
}

.event-booth-highlights {
  position: relative;
  z-index: 1;
}

.event-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.event-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: rgba(107, 184, 190, 0.04);
  border-radius: 8px;
  border-left: 3px solid rgba(107, 184, 190, 0.3);
  color: var(--evt-ink-soft);
  line-height: 1.6;
  transition: background var(--evt-dur) var(--evt-ease),
              border-left-color var(--evt-dur) var(--evt-ease),
              transform var(--evt-dur) var(--evt-ease);
}

.event-highlights-list li:hover {
  background: rgba(107, 184, 190, 0.08);
  border-left-color: var(--evt-teal);
  transform: translateX(5px);
}

.event-highlights-list li i {
  color: var(--evt-teal);
  margin-top: 4px;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.event-highlights-list li strong {
  color: var(--evt-ink);
  font-weight: 700;
  margin-right: 4px;
}

/* Right-column booth visual: image + conference about */
.event-visual-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-booth-image {
  position: relative;
  border-radius: var(--evt-radius-lg);
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  aspect-ratio: 4 / 3;
}

.event-booth-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.event-booth-image:hover img {
  transform: scale(1.05);
}

.event-booth-image__label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.event-booth-image__label-text {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.event-booth-image__label-number {
  display: block;
  font-family: var(--evt-font-heading);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  line-height: 1.05;
  margin-top: 2px;
}

.event-conference-info {
  padding: 10px 30px;
  margin-top: 0;
}

.event-conference-info h5 {
  margin: 0 0 1rem;
  font-family: var(--evt-font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--evt-ink);
}

.event-conference-info p {
  margin: 0 0 1.25rem;
  color: #555;
  font-size: 1.3rem;
  line-height: 1.7;
}

.event-conference-info p:last-child { margin-bottom: 0; }

.event-conference-info a {
  color: var(--evt-teal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--evt-dur) var(--evt-ease), border-color var(--evt-dur) var(--evt-ease);
}

.event-conference-info a:hover {
  color: var(--evt-teal-dark);
  border-bottom-color: var(--evt-teal-dark);
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   9. Section: Solution Provider Session (Barcelona "Theater Stage" styling)
   ----------------------------------------------------------------------------- */
.event-tech-talks {
  padding: var(--evt-section-y) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.event-section-title {
  text-align: center;
  color: var(--evt-ink);
  font-family: var(--evt-font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  margin: 0 0 50px;
  position: relative;
  letter-spacing: -0.01em;
}

.event-talk-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(107, 184, 190, 0.2);
  border-radius: var(--evt-radius-lg);
  padding: 35px;
  margin-bottom: 35px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  transition: transform var(--evt-dur-slow) var(--evt-ease),
              box-shadow var(--evt-dur-slow) var(--evt-ease);
  position: relative;
  overflow: hidden;
}

/* Fading line at the top (Barcelona effect) */
.event-talk-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--evt-teal) 50%, transparent);
}

.event-talk-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(107, 184, 190, 0.15);
}

.event-talk-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 20px;
}

.event-talk-info { flex: 1; }

.event-talk-title {
  color: var(--evt-ink);
  font-family: var(--evt-font-heading);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.3;
}

.event-talk-description {
  color: #555;
  line-height: 1.7;
  margin: 0 0 25px;
  font-size: 1.4rem;
}

.event-talk-details {
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  border-radius: var(--evt-radius);
  border: 1px solid var(--evt-border-soft);
  overflow: hidden;
}

/* Speakers row: side by side, equal width */
.event-speaker-info-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 28px 32px;
  background: #fff;
  border-bottom: 1px solid var(--evt-border-soft);
}

.event-speaker-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.event-speaker-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--evt-teal);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(107, 184, 190, 0.25);
}

.event-speaker-name {
  font-family: var(--evt-font-heading);
  font-weight: 700;
  color: var(--evt-ink);
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.event-speaker-title {
  color: var(--evt-muted);
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Bottom row: schedule on left, CTA on right */
.event-talk-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 24px 32px;
}

.event-talk-schedule {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.event-talk-schedule__item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--evt-ink);
  font-size: 1.25rem;
  line-height: 1.35;
}

.event-talk-schedule__item i {
  color: var(--evt-teal);
  width: 20px;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.event-talk-schedule__item--time {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--evt-ink);
}

.event-talk-schedule__item--time i { color: var(--evt-teal-dark); font-size: 1.25rem; }

/* Sketch → AI → Twin flow visual (bigger) */
.event-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 30px 0;
  padding: 30px;
  background: #f8f9fa;
  border-radius: var(--evt-radius);
  border: 1px solid var(--evt-border-soft);
}

.event-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.event-flow__icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 1.85rem;
  color: var(--evt-teal);
  border: 2px solid rgba(107, 184, 190, 0.3);
  box-shadow: 0 4px 12px rgba(107, 184, 190, 0.12);
}

.event-flow__label {
  font-weight: 700;
  color: var(--evt-ink);
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.35;
}

.event-flow__arrow {
  color: var(--evt-teal);
  font-size: 1.4rem;
}

/* Session code container (Gartner Event Navigator) */
.session-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.event-navigator-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--evt-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.session-code {
  background: linear-gradient(135deg, var(--evt-teal), var(--evt-teal-dark));
  color: #fff;
  padding: 14px 26px;
  border-radius: var(--evt-radius-pill);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(107, 184, 190, 0.3);
  transition: transform var(--evt-dur) var(--evt-ease),
              box-shadow var(--evt-dur) var(--evt-ease);
}

.session-code:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(107, 184, 190, 0.4);
  color: #fff;
  text-decoration: none;
}

.session-code i { font-size: 1.05rem; }

.session-code__ext {
  font-size: 0.8rem !important;
  opacity: 0.8;
  margin-left: 4px;
}

/* -----------------------------------------------------------------------------
   10. Section: Featured Products (dark, Barcelona styling)
   ----------------------------------------------------------------------------- */
.event-featured-products {
  padding: var(--evt-section-y) 0;
  background: linear-gradient(135deg, #1a1d21 0%, #242831 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.event-featured-products::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(107, 184, 190, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(90, 165, 171, 0.06) 0%, transparent 50%),
    linear-gradient(45deg, transparent 0%, rgba(107, 184, 190, 0.02) 50%, transparent 100%);
  pointer-events: none;
}

.event-featured-products .event-section-title {
  color: #fff;
  position: relative;
  z-index: 1;
}

.event-products-list {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

.event-product-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 50px 0;
  position: relative;
}

.event-product-item:not(:last-child) {
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(107, 184, 190, 0.2) 20%,
    rgba(107, 184, 190, 0.3) 50%,
    rgba(107, 184, 190, 0.2) 80%,
    transparent 100%
  );
  background-position: bottom;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

.event-product-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50px;            /* aligned with first line of title */
  width: 4px;
  height: 32px;
  background: linear-gradient(135deg, var(--evt-teal), var(--evt-teal-dark));
  border-radius: 2px;
}

.event-product-content {
  flex: 1;
  padding-left: 25px;
  display: flex;
  flex-direction: column;
}

.event-product-title {
  color: #fff;
  font-family: var(--evt-font-heading);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.3;
}

.event-product-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.6rem;
  line-height: 1.7;
  margin: 0;
}

.event-product-tags {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  flex-shrink: 0;
  margin-top: 50px;
}

.event-feature-tag {
  background: rgba(107, 184, 190, 0.15);
  color: var(--evt-teal);
  padding: 12px 20px;
  border-radius: var(--evt-radius-pill);
  font-size: 1.3rem;
  font-weight: 600;
  border: 1px solid rgba(107, 184, 190, 0.3);
  white-space: nowrap;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* -----------------------------------------------------------------------------
   11. Section: Best Practices videos + Download Brochures
   ----------------------------------------------------------------------------- */
.event-best-practices,
.event-downloads {
  padding: var(--evt-section-y) 0;
}

.event-best-practices { background: #fff; }
.event-downloads { background: var(--evt-bg-soft); }

.event-subsection-title {
  color: var(--evt-ink);
  font-family: var(--evt-font-heading);
  font-weight: 700;
  font-size: 2rem;
  margin: 0 0 30px;
}

.event-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 30px;
}

.event-video-card {
  background: #fff;
  border-radius: var(--evt-radius);
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: transform var(--evt-dur) var(--evt-ease),
              box-shadow var(--evt-dur) var(--evt-ease);
}

.event-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.event-video-card .event-video {
  border-radius: 0;
  box-shadow: none;
}

.event-video-card .event-video:hover {
  transform: none;
  box-shadow: none;
}

.event-video-card h4 {
  padding: 18px 20px;
  margin: 0;
  color: var(--evt-ink);
  font-family: var(--evt-font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.35;
}

.event-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px;
}

.event-download-item {
  background: #fff;
  padding: 20px;
  padding-bottom: 0;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 3px 15px rgba(0,0,0,0.06);
  transition: transform var(--evt-dur) var(--evt-ease),
              box-shadow var(--evt-dur) var(--evt-ease);
}

.event-download-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.10);
}

/* Reset the global card styling that the data-special-sbfile component
   carries in by default. We don't want a doubled drop-shadow inside our card,
   and we don't want a trailing margin pushing the title away from the
   language-links chip. */
.event-download-item .sbBoxWrap,
.event-download-item .infobox-clean {
  box-shadow: none !important;
  margin-bottom: 0;
}

/* Polish the file name / title — make it readable, no underline ever */
.event-download-item .imgText-thumb_sb_thumb_link2 .lbl {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2d3748;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  text-transform: none;
  line-height: 1.35;
  text-decoration: none !important;
  display: block;
}

.event-download-item .imgText-thumb_sb_thumb_link2 a,
.event-download-item .imgText-thumb_sb_thumb_link2 a:hover,
.event-download-item .imgText-thumb_sb_thumb_link2 a:focus,
.event-download-item .imgText-thumb_sb_thumb_link2 .lbl:hover {
  text-decoration: none !important;
}

.event-download-item a,
.event-download-item a:hover,
.event-download-item a:focus {
  text-decoration: none;
}

/* Language links chip — keep DE/EN/FR/etc on one row in a soft teal pill bar */
.event-download-item .langlinks {
  margin-top: 15px !important;
  margin-bottom: 10px !important;
  padding: 8px 10px;
  background-color: rgba(107, 184, 190, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(107, 184, 190, 0.10);
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}

/* Individual language link pills */
.event-download-item .langlinks a {
  display: inline-block;
  padding: 6px 12px;
  margin: 1px;
  background-color: rgba(107, 184, 190, 0.08);
  color: #4a5568 !important;
  text-decoration: none !important;
  border-radius: 5px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color var(--evt-dur-fast) var(--evt-ease),
              color var(--evt-dur-fast) var(--evt-ease),
              transform var(--evt-dur-fast) var(--evt-ease),
              box-shadow var(--evt-dur-fast) var(--evt-ease);
  border: 1px solid rgba(107, 184, 190, 0.15);
  min-width: 42px;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
}

.event-download-item .langlinks a:hover,
.event-download-item .langlinks a:focus-visible {
  background-color: rgba(107, 184, 190, 0.18);
  color: #2d3748 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(107, 184, 190, 0.25);
}

/* Hide the pipe separators that the component emits between language links */
.event-download-item .langlinks span {
  display: none;
}

/* -----------------------------------------------------------------------------
   12. Section: Contact form (Barcelona styling)
   ----------------------------------------------------------------------------- */
.event-contact {
  padding: var(--evt-section-y) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.event-form-container {
  background: #fff;
  padding: 40px;
  border-radius: var(--evt-radius);
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.event-form-title {
  color: var(--evt-ink);
  font-family: var(--evt-font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.event-form-description {
  color: #555;
  margin: 0 0 30px;
  font-size: 1.3rem;
}

.event-form-required-note {
  color: var(--evt-danger);
  margin: 0 0 25px;
  font-size: 1.2rem;
}

.event-form-group { margin-bottom: 20px; }

.event-form-label {
  display: block;
  color: var(--evt-ink);
  font-weight: 600;
  margin: 0 0 8px;
  font-size: 1.3rem;
}

.event-form-required {
  color: var(--evt-danger);
  margin-left: 3px;
}

.event-form-input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid var(--evt-border);
  border-radius: var(--evt-radius-sm);
  font-size: 1.3rem;
  background: #fff;
  font-family: inherit;
  color: var(--evt-ink);
  transition: border-color var(--evt-dur) var(--evt-ease),
              box-shadow var(--evt-dur) var(--evt-ease);
}

.event-form-input:focus {
  outline: none;
  border-color: var(--evt-teal);
  box-shadow: 0 0 0 3px rgba(107, 184, 190, 0.15);
}

.event-form-input[aria-invalid="true"] {
  border-color: var(--evt-danger);
}

.event-form-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

.event-form-field-error {
  display: none;
  color: var(--evt-danger);
  font-size: 1rem;
  margin: 6px 0 0;
}

.event-form-field-error[data-active] {
  display: block;
}

.event-form-submit {
  background: linear-gradient(135deg, var(--evt-teal), var(--evt-teal-dark));
  color: #fff;
  padding: 15px 40px;
  border: none;
  border-radius: var(--evt-radius-pill);
  font-size: 1.3rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--evt-dur) var(--evt-ease),
              box-shadow var(--evt-dur) var(--evt-ease);
}

.event-form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(107, 184, 190, 0.3);
}

.event-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.event-form-submit i { font-size: 1.15rem; }

.event-form-terms {
  font-size: 1.2rem;
  color: var(--evt-muted);
  margin-top: 20px;
  line-height: 1.5;
}

.event-form-terms a {
  color: var(--evt-teal);
  text-decoration: none;
}

.event-form-terms a:hover {
  text-decoration: underline;
}

.event-form-success {
  display: none;
  padding: 28px 28px 26px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.04));
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-left: 4px solid #10b981;
  border-radius: var(--evt-radius);
  color: #065f46;
  margin-top: 0;
}

.event-form-success[data-active] {
  display: block;
  animation: evtFadeIn 0.35s var(--evt-ease);
}

.event-form-success h3 {
  margin: 0 0 8px;
  font-family: var(--evt-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #065f46;
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-form-success h3 i { color: #10b981; }

.event-form-success p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #047857;
}

.event-form-error {
  display: none;
  padding: 18px 22px;
  background: rgba(231, 76, 60, 0.06);
  border: 1px solid rgba(231, 76, 60, 0.25);
  border-left: 4px solid var(--evt-danger);
  border-radius: var(--evt-radius);
  color: #991b1b;
  margin-top: 16px;
  font-size: 1.05rem;
  line-height: 1.5;
}

.event-form-error[data-active] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: evtFadeIn 0.35s var(--evt-ease);
}

.event-form-error i {
  color: var(--evt-danger);
  font-size: 1.2rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.event-form-error a {
  color: #991b1b;
  font-weight: 600;
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   13. Video lightbox (dark backdrop, not blue)
   ----------------------------------------------------------------------------- */
.event-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: evtFadeIn 0.25s var(--evt-ease);
}

.event-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.event-video-modal__inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
}

.event-video-modal__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--evt-radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  background: #000;
}

.event-video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.event-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--evt-dur) var(--evt-ease);
}

.event-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.20);
}

@keyframes evtFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -----------------------------------------------------------------------------
   14. Floating Let's Talk + Mobile sticky CTA
   ----------------------------------------------------------------------------- */
.event-sticky-cta,
.event-sticky-cta *,
.event-sticky-cta *::before,
.event-sticky-cta *::after {
  box-sizing: border-box;
}

.event-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--evt-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
}

.event-sticky-cta .event-btn {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 14px 24px;
  white-space: normal;
}

/* -----------------------------------------------------------------------------
   15. Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .event-hero__photo {
    width: 75%;
  }
}

@media (max-width: 991px) {
  .event-intro__grid { grid-template-columns: 1fr; }
  .event-intro__aside { max-width: 520px; margin: 0; }

  .event-speaker-info-group {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 24px;
  }
  .event-talk-bottom {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 24px;
  }
  .event-talk-bottom .session-code-container { align-items: flex-start; }

  .event-product-item {
    flex-direction: column;
    gap: 24px;
  }
  .event-product-tags {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 0;
    padding-left: 25px;
  }

  .event-hero__photo {
    width: 100%;
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0.7) 70%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0.7) 70%, #000 100%);
  }
  .event-hero__photo > video,
  .event-hero__photo > img {
    object-position: center;
  }
}

@media (max-width: 767px) {
  .event-col-3,
  .event-col-4,
  .event-col-5,
  .event-col-6,
  .event-col-7 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .event-meeting__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .event-cta-stack { align-items: flex-start; }

  .event-hero__eyebrow { letter-spacing: 0.14em; font-size: 0.75rem; }
  .event-hero__title { font-size: clamp(2rem, 8vw, 2.7rem); }
  .event-hero__lede  { font-size: 1.5rem; }

  .event-hero__meta { gap: 10px 14px; }
  .event-hero__meta-sep { display: none; }
  .event-hero__meta-item,
  .event-hero__countdown { font-size: 1.05rem; }

  .event-btn { font-size: 1.05rem; padding: 14px 22px; }
  .event-btn i { font-size: 1.15rem; }

  .event-booth-info { padding: 28px 22px; }
  .event-booth-info h4 { font-size: 1.45rem; }
  .event-booth-tagline {
    display: block;
    margin-left: 0;
    margin-top: 10px;
    white-space: normal;
    font-size: 1rem;
  }

  .event-section-title { font-size: 1.9rem; margin-bottom: 36px; }

  .event-talk-card { padding: 24px; }
  .event-talk-title { font-size: 1.55rem; }
  .event-talk-description { font-size: 1.15rem; }

  .event-speaker-photo { width: 80px; height: 80px; }

  .event-flow {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 22px;
  }
  .event-flow__arrow {
    transform: rotate(90deg);
    margin: 0.25rem auto;
  }
  .event-flow__icon { width: 68px; height: 68px; font-size: 1.6rem; }

  .event-product-title { font-size: 1.55rem; }
  .event-product-description { font-size: 1.2rem; }
  .event-feature-tag { font-size: 1.05rem; padding: 10px 16px; }

  .event-video-card h4 { font-size: 1.2rem; padding: 14px 16px; }

  .event-form-container { padding: 28px 22px; }
  .event-form-title { font-size: 1.5rem; }
  .event-form-description { font-size: 1.1rem; }
  .event-form-label { font-size: 1.1rem; }
  .event-form-input { font-size: 1.1rem; }
  .event-form-submit { font-size: 1.15rem; padding: 13px 30px; }
  .event-form-terms { font-size: 1rem; }

  .event-sticky-cta { display: block; }
  body.event-has-sticky-cta footer#footerWrapper { padding-bottom: 80px; }
}

@media (max-width: 480px) {
  .event-hero { padding: 2.5rem 0; }
  .event-badges img { height: 70px; }
  .event-booth-image__label { top: 10px; right: 10px; padding: 8px 12px; }
  .event-booth-image__label-number { font-size: 1.15rem; }

  .event-sticky-cta { padding: 10px 12px; }
  .event-sticky-cta .event-btn { font-size: 0.95rem; padding: 12px 14px; gap: 8px; }
  .event-sticky-cta .event-btn i { font-size: 1.05rem; }
}

@media (max-width: 359px) {
  .event-sticky-cta .event-btn i { display: none; }
}

/* Landscape phone */
@media (max-height: 480px) and (orientation: landscape) {
  .event-hero { padding: 2.5rem 0; }
  .event-hero__title { font-size: 2rem; }
}

/* -----------------------------------------------------------------------------
   16. Print
   ----------------------------------------------------------------------------- */
@media print {
  .event-hero::before,
  .event-hero::after,
  .event-hero__photo,
  .event-hero__ctas,
  .event-cta-stack,
  .event-sticky-cta,
  .event-form-submit,
  .event-video__play { display: none; }

  .event-hero,
  .event-featured-products { background: #fff; color: #000; }
  .event-hero__title,
  .event-product-title,
  .event-product-description,
  .event-featured-products .event-section-title { color: #000; }
}