/* MunichTech EXPO — shared design tokens (injector foundation) */

:root {
  --mte-ticker-h: 40px;
  --mte-ticker-nav-gap: 10px; /* mobile: 8–12px */
  --mte-ticker-stack: calc(var(--mte-ticker-h) + var(--mte-ticker-nav-gap));
  --mte-header-h: 56px;
  --mte-header-react: 56px;

  /* Motion — premium conference pace (Web Summit / GITEX) */
  --mte-marquee-duration: 90s;
  --mte-marquee-duration-slow: 120s;
  --mte-marquee-duration-speakers: 14s;
  --mte-ticker-duration: 55s;
  --mte-transition-hover: 0.35s;

  /* Backgrounds */
  --mte-bg-0: #020817;
  --mte-bg-1: #061426;
  --mte-bg-2: #071b33;
  --mte-bg-3: #08213f;
  --mte-bg-4: #0a2a4f;

  /* Accents */
  --mte-accent: #00c8ff;
  --mte-accent-2: #1ea7ff;
  --mte-accent-3: #2f80ed;
  --mte-accent-4: #00e0ff;
  --mte-accent-purple: #6c5cff;

  /* Cards (glass) */
  --mte-card-bg: rgba(8, 24, 48, 0.85);
  --mte-card-border: rgba(0, 200, 255, 0.15);
  --mte-card-glow: 0 4px 24px rgba(0, 200, 255, 0.08);
  --mte-card-glow-hover: 0 12px 32px rgba(0, 200, 255, 0.15);

  /* Typography */
  --mte-text: #f0f6fc;
  --mte-text-soft: #c8d8f0;
  --mte-muted: #8ea4c8;
  --mte-line: rgba(0, 200, 255, 0.12);

  /* Logo / partner cards — dark glass (light pad only on dark-brand logos) */
  --mte-logo-card: var(--mte-card-bg);
  --mte-logo-card-border: rgba(0, 200, 255, 0.15);
  --mte-logo-card-glow: inset 0 0 18px rgba(0, 200, 255, 0.06);
  --mte-logo-card-hover: 0 12px 32px rgba(0, 200, 255, 0.15);
  --mte-logo-pad: rgba(255, 255, 255, 0.92);
  --mte-logo-card-min-w: 240px;
  --mte-logo-card-max-w: 260px;
  --mte-logo-card-h: 170px;
  --mte-logo-card-min-h: var(--mte-logo-card-h);
  --mte-section-gap: 4.5rem; /* summit-level section breathing room */

  /* Homepage legacy aliases */
  --mte-hp-navy: var(--mte-bg-0);
  --mte-hp-navy-mid: var(--mte-bg-3);
  --mte-hp-accent: var(--mte-accent-2);
  --mte-hp-accent-light: var(--mte-accent);
  --mte-hp-ink: var(--mte-text);
  --mte-hp-muted: var(--mte-muted);
  --mte-hp-line: var(--mte-line);
  --mte-hp-body: var(--mte-bg-1);
}

/* Shared partner/logo chip — dark glass base */
.mte-logo-chip,
.mte-partner-strip__chip,
.mte-eco-logos__item {
  display: flex;
  box-sizing: border-box;
  background: var(--mte-logo-card);
  border: 1px solid var(--mte-logo-card-border);
  box-shadow: var(--mte-card-glow), var(--mte-logo-card-glow);
  backdrop-filter: blur(8px);
  color: var(--mte-text);
  min-width: var(--mte-logo-card-min-w);
  max-width: var(--mte-logo-card-max-w);
  width: 100%;
  height: var(--mte-logo-card-h);
  min-height: var(--mte-logo-card-h);
  max-height: var(--mte-logo-card-h);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  transition:
    transform var(--mte-transition-hover, 0.35s) ease,
    box-shadow var(--mte-transition-hover, 0.35s) ease,
    border-color var(--mte-transition-hover, 0.35s) ease;
}

.mte-logo-chip:hover,
.mte-partner-strip__chip:hover,
.mte-eco-logos__item:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 200, 255, 0.35);
  box-shadow: var(--mte-logo-card-hover), var(--mte-logo-card-glow);
}

/* Dark-brand logos — white inner box inside dark glass partner card */
.mte-logo-card--light-box {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mte-logo-card__inner--light {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 90px;
}

.mte-logo-card__inner--light img,
.mte-logo-chip img,
.mte-partner-strip__chip img,
.mte-eco-logos__item img,
.mte-partner-link img,
.mte-media-link img {
  max-width: 220px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.mte-logo-card__inner--light img.mte-logo-img--corrected,
.mte-logo-img--corrected {
  filter: brightness(2.5) contrast(1.8);
}

.mte-logo-card__org-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0.35rem 0 0;
  padding: 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--mte-text-soft, #b8c9e0);
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.mte-logo-card__org-name--display {
  margin-top: 0;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mte-text);
}

/* Text wordmark fallback — dark glass card, no white inner box */
.mte-logo-card--wordmark {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.mte-logo-wordmark {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.mte-logo-wordmark__acronym,
.mte-logo-wordmark__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  word-break: break-word;
}

.mte-logo-wordmark__acronym {
  align-self: center;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mte-text);
  line-height: 1.25;
}

.mte-logo-wordmark__name {
  flex-shrink: 0;
  font-size: clamp(0.65rem, 1.1vw, 0.75rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mte-text-soft);
}

.mte-logo-wordmark--featured .mte-logo-wordmark__acronym,
.mte-eco-logos__featured-visual.mte-logo-card--wordmark .mte-logo-wordmark__acronym {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--mte-accent);
}

.mte-logo-wordmark--featured .mte-logo-wordmark__name,
.mte-eco-logos__featured-visual.mte-logo-card--wordmark .mte-logo-wordmark__name {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  color: var(--mte-text);
}

.mte-partner-strip__chip.mte-logo-card--wordmark .mte-logo-wordmark,
.mte-partner-link.mte-logo-card--wordmark .mte-logo-wordmark,
.mte-media-link.mte-logo-card--wordmark .mte-logo-wordmark {
  padding: 0.65rem 0.75rem;
}

.mte-partner-strip__chip.mte-logo-card--wordmark .mte-logo-wordmark__acronym,
.mte-partner-link.mte-logo-card--wordmark .mte-logo-wordmark__acronym,
.mte-media-link.mte-logo-card--wordmark .mte-logo-wordmark__acronym {
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  color: var(--mte-text);
}

.mte-eco-logos__item--wordmark:hover .mte-logo-wordmark__acronym,
.mte-partner-strip__chip.mte-logo-card--wordmark:hover .mte-logo-wordmark__acronym {
  color: var(--mte-accent);
}

/* Shared dark glass card (speakers, metrics, etc.) */
.mte-speaker-card {
  background: var(--mte-card-bg);
  border: 1px solid var(--mte-card-border);
  box-shadow: var(--mte-card-glow);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  color: var(--mte-text);
}

@media (min-width: 768px) {
  :root {
    --mte-ticker-nav-gap: 14px; /* tablet: 12–16px */
    --mte-header-h: 72px;
    --mte-header-react: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --mte-ticker-nav-gap: 16px; /* desktop: 16–20px */
  }
}

/* Mobile performance — lighter paint, less motion */
@media (max-width: 768px) {
  :root {
    --mte-section-gap: 2.25rem;
    --mte-card-glow: 0 2px 14px rgba(0, 200, 255, 0.06);
    --mte-card-glow-hover: 0 6px 20px rgba(0, 200, 255, 0.1);
    --mte-logo-card-glow: inset 0 0 10px rgba(0, 200, 255, 0.04);
    --mte-marquee-duration-speakers: 28s;
  }

  .mte-logo-chip,
  .mte-partner-strip__chip,
  .mte-eco-logos__item,
  .mte-speaker-card {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .mte-speakers-marquee__track--loop {
    animation-duration: var(--mte-marquee-duration-speakers, 28s);
  }
}

.mte-deferred-sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Lazy-load skeleton placeholders (dark glass, not blank screen) */
@keyframes mte-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mte-lazy-skeleton__eyebrow,
.mte-lazy-skeleton__title,
.mte-lazy-skeleton__subtitle,
.mte-lazy-skeleton__card,
.mte-lazy-skeleton__logo-card,
.mte-lazy-skeleton__speaker-card,
.mte-eco-logos__skeleton-grid .mte-lazy-skeleton__logo-card {
  background: linear-gradient(
    110deg,
    rgba(8, 24, 48, 0.55) 0%,
    rgba(14, 42, 78, 0.85) 45%,
    rgba(8, 24, 48, 0.55) 90%
  );
  background-size: 200% 100%;
  animation: mte-skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 0.65rem;
}

.mte-lazy-skeleton__eyebrow {
  width: 8rem;
  height: 0.65rem;
  margin: 0 auto 1rem;
  opacity: 0.7;
}

.mte-lazy-skeleton__title {
  width: min(420px, 72%);
  height: 1.75rem;
  margin: 0 auto 0.85rem;
}

.mte-lazy-skeleton__subtitle {
  width: min(560px, 88%);
  height: 0.9rem;
  margin: 0 auto 1.5rem;
  opacity: 0.65;
}

.mte-lazy-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.mte-lazy-skeleton__card {
  min-height: 5.5rem;
  border: 1px solid rgba(0, 200, 255, 0.08);
}

.mte-lazy-skeleton__logo-card {
  min-height: 5rem;
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 0.85rem;
  background-color: rgba(8, 24, 48, 0.75);
}

.mte-lazy-skeleton__speaker-card {
  flex: 0 0 180px;
  min-height: 220px;
  border: 1px solid rgba(0, 200, 255, 0.1);
  border-radius: 1rem;
}

.mte-eco-logos__skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}

.mte-lazy-skeleton--speakers .mte-speakers-marquee__row {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  padding: 0.5rem 0;
}

.mte-lazy-skeleton__status {
  text-align: center;
  font-size: 0.8rem;
  color: var(--mte-muted);
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .mte-lazy-skeleton__eyebrow,
  .mte-lazy-skeleton__title,
  .mte-lazy-skeleton__subtitle,
  .mte-lazy-skeleton__card,
  .mte-lazy-skeleton__logo-card,
  .mte-lazy-skeleton__speaker-card,
  .mte-eco-logos__skeleton-grid .mte-lazy-skeleton__logo-card {
    animation: none;
    background: rgba(8, 24, 48, 0.75);
  }
}

/* Homepage recovery — visible fallback if injectors stall */
.mte-home-recovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: rgba(8, 24, 48, 0.95);
  border-top: 1px solid var(--mte-card-border);
  border-bottom: 1px solid var(--mte-card-border);
  color: var(--mte-text-soft);
  font-size: 0.875rem;
  text-align: center;
}

.mte-home-recovery__btn {
  appearance: none;
  border: 1px solid rgba(0, 200, 255, 0.35);
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.18), rgba(47, 128, 237, 0.14));
  color: var(--mte-text);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}