/**
 * Mobile Product Demos Styles (Refactored)
 * Touch-optimized interactive demo styles
 * Only loaded on mobile devices (< 768px)
 *
 * Changes from original:
 * - Removed all !important declarations
 * - Replaced magic numbers with design tokens
 * - Simplified selectors (max 2 levels)
 * - Removed duplicate definitions
 * - Single source of truth for spacing
 *
 * @version 2.0.0
 */

/* ===== Global Mobile Fixes ===== */
@media (max-width: 767px) {
  /* Prevent horizontal scroll */
  body,
  html {
    overflow-x: hidden;
  }

  .products {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100vw;
  }

  /* Products header - centered */
  .products-header {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--mobile-gutter);
    text-align: center;
  }

  .products-header .container {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .products-eyebrow {
    text-align: center;
  }

  /* Products headline */
  .products-headline {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.15;
    max-width: 85%;
    margin: 0 auto;
    text-align: center;
    word-wrap: break-word;
  }

  .products-headline br {
    display: block;
  }

  /* Reduce bottom spacing */
  .products-header {
    padding-bottom: var(--mobile-spacing-md);
  }

  /* Products demos container */
  .products-scroll-container {
    display: block;
    padding: var(--mobile-spacing-md) var(--mobile-gutter) var(--mobile-spacing-lg);
  }

  /* Desktop sticky demo container - remove on mobile */
  .products-images-sticky {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: var(--mobile-spacing-sm);
  }

  .product-demo-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 50vh;
    margin-bottom: 0;
  }

  .product-demo {
    width: 100%;
    height: 100%;
    border-radius: var(--mobile-demo-border-radius);
    overflow: hidden;
    margin-bottom: 0;
  }

  .product-demo iframe,
  .product-demo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hide reset/refresh buttons on mobile */
  .demo-reset-btn,
  .demo-reset-btn--overlay {
    display: none;
  }

  /* Product content scroll area */
  .products-content-scroll {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding-top: 0;
  }
}

/* ===== Product Cards (Clean Spacing) ===== */
@media (max-width: 767px) {
  /* Space BETWEEN product cards */
  .product-content-item {
    margin-bottom: var(--mobile-product-card-gap);
    padding: 0;
  }

  .product-content-item:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  .product-content-item:last-child {
    margin-bottom: 0;
  }

  /* Product card internal spacing */
  .product-name {
    font-size: var(--mobile-text-sm);
    margin: 0;
    margin-bottom: var(--mobile-product-name-to-headline);
  }

  .product-headline {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    line-height: 1.15;
    margin: 0;
    margin-bottom: var(--mobile-product-headline-to-desc);
  }

  .product-description {
    font-size: var(--mobile-text-base);
    line-height: 1.55;
    margin: 0;
    margin-bottom: var(--mobile-product-desc-to-cta);
    max-width: 100%;
  }

  .product-cta-group {
    margin: 0;
    padding: 0;
    gap: var(--mobile-spacing-sm);
  }

  .product-cta-group .btn {
    margin: 0;
  }
}

/* ===== Static Product Images (Mobile Only) ===== */
@media (max-width: 767px) {
  .product-demo-mobile-wrapper,
  .product-demo-static {
    width: 100%;
    height: var(--mobile-demo-height);
    margin: 0;
    margin-bottom: var(--mobile-product-image-to-text);
    padding: 0;
    border-radius: var(--mobile-demo-border-radius);
    overflow: hidden;
    position: relative;
  }

  .product-demo-image {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: var(--mobile-demo-border-radius);
    object-fit: cover;
    object-position: top center;
    /* No animations - instant display */
    opacity: 1;
    transform: none;
  }

  /* Disable animations for product content on mobile */
  .product-content-item,
  .product-demo-mobile-wrapper,
  .product-demo-static {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* ===== Reveal Animations ===== */
.mobile-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--reveal-index, 0) * 0.1s);
}

.mobile-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Disable reveal for product items on mobile */
@media (max-width: 767px) {
  .product-content-item.mobile-reveal,
  .product-demo-mobile-wrapper.mobile-reveal,
  .audience-card.mobile-reveal,
  .feature-card.mobile-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Product Hero Visual ===== */
.product-hero-visual {
  position: relative;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.product-hero-visual:active {
  cursor: grabbing;
}

.product-hero-visual .glass--lit,
.product-hero-visual .product-hero-frame,
.product-hero-visual .cp-dashboard,
.product-hero-visual .cp-hero-graph {
  transition: transform var(--mobile-anim-normal) ease;
  will-change: transform;
}

/* Spotlight effect */
.product-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 400px at var(--cp-spot-x, 50%) var(--cp-spot-y, 50%),
    rgba(230, 99, 0, 0.05) 0%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mobile-anim-normal) ease;
}

.product-hero-visual:active::before {
  opacity: 1;
}

/* ===== Data Transformation Demo ===== */
@media (max-width: 767px) {
  .data-transformation-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
  }

  .transformation-visual-area {
    position: relative;
    height: 350px;
    width: 100%;
    max-width: 100%;
    margin: var(--mobile-spacing-xl) auto;
    padding: 0 var(--mobile-gutter);
  }

  /* Hide SVG paths on mobile */
  .transformation-visual-area svg {
    display: none;
  }

  .transformation-loop-node {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--mobile-anim-normal) ease;
    will-change: transform;
  }

  .transformation-loop-node:nth-child(1) {
    top: 10px;
    left: 50%;
    margin-left: -25px;
  }

  .transformation-loop-node:nth-child(2) {
    top: 50%;
    right: 10px;
    margin-top: -25px;
  }

  .transformation-loop-node:nth-child(3) {
    bottom: 10px;
    left: 50%;
    margin-left: -25px;
  }

  .transformation-loop-node:nth-child(4) {
    top: 50%;
    left: 10px;
    margin-top: -25px;
  }

  .transformation-hub-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(230, 99, 0, 0.3);
    transition: transform var(--mobile-anim-normal) ease;
    will-change: transform;
  }
}

.transformation-loop-icon {
  width: 30px;
  height: 30px;
  color: var(--accent-primary);
}

.transformation-loop-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.transformation-hub-core-icon {
  width: 40px;
  height: 40px;
  color: var(--pure-white);
}

.transformation-hub-core-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ===== Atrium Platform Frame ===== */
.cp-platform-frame {
  position: relative;
  width: 100%;
  height: 500px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cp-platform-content {
  width: 100%;
  height: 100%;
  transition: none;
  will-change: transform;
  transform-origin: center center;
}

/* ===== Atlas Map Demo ===== */
.atlas-map-container {
  position: relative;
  width: 100%;
  height: 400px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.atlas-map {
  width: 100%;
  height: 100%;
  cursor: grab;
  transition: transform 0.2s ease-out;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.atlas-map:active {
  cursor: grabbing;
}

/* ===== Argus Dashboard ===== */
.cp-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mobile-spacing-md);
  padding: var(--mobile-spacing-md);
}

.dashboard-panel,
.metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--mobile-spacing-lg);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--panel-index, 0) * 0.08s);
}

.dashboard-panel.panel-visible,
.metric-card.panel-visible {
  opacity: 1;
  transform: translateY(0);
}

.metric-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mobile-spacing-md);
}

.metric-card-title {
  font-size: var(--mobile-text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.metric-card-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: var(--mobile-spacing-sm);
}

.metric-card-change {
  font-size: var(--mobile-text-sm);
  color: var(--text-secondary);
}

.metric-card-change.positive {
  color: var(--evergreen);
}

.metric-card-change.negative {
  color: var(--signal-orange);
}

/* ===== Feature & Audience Cards ===== */
.feature-card,
.audience-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--mobile-spacing-lg);
  margin-bottom: var(--mobile-spacing-sm);
}

/* Tighter spacing for audience/industry cards on mobile */
@media (max-width: 767px) {
  .audience-card,
  .industry-card {
    margin-bottom: var(--mobile-spacing-sm);
    margin-top: 0;
  }

  .audience-cards-container,
  .use-cases-grid,
  .industries-grid {
    gap: var(--mobile-spacing-sm);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .audience-cards-container > *:last-child,
  .use-cases-grid > *:last-child,
  .industries-grid > *:last-child {
    margin-bottom: 0;
  }

  /* Prevent inner scroll */
  section:has(.industries-grid) {
    overflow: visible;
  }
}

.feature-card-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mobile-spacing-md);
  color: var(--accent-primary);
}

.feature-card-title {
  font-size: var(--mobile-text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--mobile-spacing-sm);
}

.feature-card-description {
  font-size: var(--mobile-text-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ===== Product Badges ===== */
.product-badges,
.system-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mobile-spacing-sm);
  margin: var(--mobile-spacing-lg) 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: var(--mobile-text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.badge-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--mobile-spacing-xs);
  color: var(--accent-primary);
}

/* ===== Landscape Orientation ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .transformation-visual-area {
    height: 300px;
  }

  .atlas-map-container {
    height: 300px;
  }

  .cp-platform-frame {
    height: 350px;
  }
}

/* ===== Small Devices (iPhone SE) ===== */
@media (max-width: 374px) {
  .transformation-loop-node {
    width: 50px;
    height: 50px;
  }

  .transformation-loop-icon {
    width: 24px;
    height: 24px;
  }

  .transformation-hub-core {
    width: 70px;
    height: 70px;
  }

  .dashboard-panel,
  .metric-card {
    padding: var(--mobile-spacing-md);
  }

  .metric-card-value {
    font-size: 28px;
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .mobile-reveal,
  .dashboard-panel,
  .metric-card,
  .transformation-loop-node,
  .transformation-hub-core,
  .product-hero-visual .glass--lit,
  .product-hero-visual .product-hero-frame,
  .product-hero-visual .cp-dashboard,
  .product-hero-visual .cp-hero-graph {
    transition: none;
  }

  .mobile-reveal {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Dark Theme ===== */
:root[data-theme="dark"] .transformation-loop-node,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .audience-card,
:root[data-theme="dark"] .dashboard-panel,
:root[data-theme="dark"] .metric-card {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
}