/*
 * Mobile adaptation for octolab home page.
 *
 * The home page is built in Elementor — base layout, slide content, and
 * responsive flow are managed inside the Elementor editor.
 * Mobile-specific structural fixes belong in Elementor, not here.
 *
 * This file is reserved for cosmetic mobile-only polish that can't be
 * achieved via Elementor's responsive controls (e.g. global typography
 * overrides for specific Cyrillic fonts on mobile).
 *
 * Keep selectors generic — do NOT pin to Elementor-generated element IDs
 * (e.g. .elementor-element-XXXXXXX), they will break the moment the editor
 * regenerates ids on next save.
 */

@media (max-width: 768px) {
  /* Hero slider pagination (mu-plugin .octo-slider-pagination) — adapt the
     desktop indicator for mobile per Figma 276:10484: vertical stack of
     lines on the left, active line + slide number highlighted in purple.
     All selectors are stable mu-plugin classes + the #hero CSS id — no
     Elementor-generated element ids. */
  body.home #hero {
    position: relative !important;
  }

  body.home .octo-slider-pagination {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    left: 16px !important;
    bottom: 220px !important;
    gap: 51px !important;
    z-index: 100 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  /* Item is a line container with fixed height — number is absolute so it
     does NOT inflate the active item's box. That guarantees equal vertical
     gaps between every line regardless of which one is active. */
  /* Item width = active line width (50px) so absolute number stays at the
     active line's right edge. Item height = active line height for vertical
     centering. */
  body.home .octo-pag-item {
    position: relative !important;
    display: block !important;
    width: 50px !important;
    height: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Inactive lines — short white per Figma devtools (26×2px, #FFFFFF) */
  body.home .octo-pag-line {
    width: 26px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    display: block !important;
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease !important;
  }

  /* Active line — full width, taller, LIGHT purple #7C7CFF (NOT dark) */
  body.home .octo-pag-item.active .octo-pag-line {
    width: 50px !important;
    height: 4px !important;
    background: #7c7cff !important;
  }

  /* Active slide number — light purple, sits at active line's right edge */
  body.home .octo-pag-number {
    display: none !important;
    position: absolute !important;
    left: calc(100% + 16px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Bebas Neue Cyrillic', 'Bebas Neue', sans-serif !important;
    font-size: 32px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #7c7cff !important;
    white-space: nowrap !important;
  }

  body.home .octo-pag-item.active .octo-pag-number {
    display: inline-block !important;
  }
}