/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .navbar { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-right .lang-toggle { order: -1; }
  .dot-nav { display: none; }
  .section-content { padding: 0 24px; }
  .about-chapter-title { font-size: clamp(24px, 7vw, 36px); }
  .about-stats { gap: 20px; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .footer { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 480px) {
  .hero-cta { padding: 12px 28px; }
  .contact-form-wrapper { padding: 24px; }
}


/* ==========================================================================
   TOUCH / MOBILE  (pointer: coarse = touchscreen, any width)
   The full GSAP pin + video-scrub experience runs on mobile too.
   These rules ADAPT sizing/layout for small screens — they do NOT disable
   the animation system.
   ========================================================================== */
@media (pointer: coarse) {

  /* --- Global touch best-practices ---------------------------------------- */
  /* Minimum 44×44pt tap targets (Apple HIG / WCAG 2.5.5) */
  a, button, [role="button"], .nav-hamburger, .lang-toggle, .mobile-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Prevent double-tap zoom on interactive elements */
  a, button, [role="button"] { touch-action: manipulation; }

  /* GPU hints not needed on mobile — saves battery/memory */
  .truss-chapters-slider,
  .truss-tl-fill {
    will-change: auto;
  }

  /* Hero title: allow viewport-based scaling on small screens.
     The desktop clamp min of 48px is too large for Bulgarian text on a 390px phone
     (ВДЪХВАМЕ ЖИВОТ = 14 chars @ 48px overflows the container).
     9vw @ 390px = 35px, which fits comfortably. On mobile the title is NOT split into
     per-char spans (see hero.js), so this applies to the whole <h1> as plain text. */
  .hero-title { font-size: clamp(28px, 9vw, 52px); }

  /* --- Service overlays — adapt for narrow portrait screens --------------- */
  /* Prevent text from overflowing viewport edges on phones (360–390px wide) */
  .svc-overlay {
    max-width: min(320px, 82vw);
  }
  .svc-overlay[data-seg="audio"] { right: 4%; max-width: min(320px, 82vw); }
  .svc-overlay[data-seg="light"] { left:  4%; }
  .svc-overlay[data-seg="led"]   { left:  4%; }
  .svc-overlay[data-seg="stage"] { left:  4%; }

  .svc-title { font-size: clamp(20px, 5.5vw, 40px); }
  .svc-desc  { font-size: 13px; line-height: 1.65; }

  /* --- Portfolio event info — smaller text on narrow screens -------------- */
  .pf-event-name { font-size: clamp(16px, 4.5vw, 28px); }
  .pf-event-type { font-size: 11px; }
  .pf-event-desc { font-size: 12px; max-width: min(380px, 88vw); }
  .pf-counter    { font-size: 12px; }

  /* --- Truss slides (About / Clients / Contact) — fit smaller LED area --- */
  .truss-label { font-size: 9px; }
  .truss-title { font-size: clamp(20px, 4vw, 44px); }
  .truss-desc  { font-size: 13px; }

  /* About chapters viewport — keep one-chapter-at-a-time clip on mobile */
  .truss-chapters-viewport { height: clamp(200px, 38vh, 300px); }
  .about-chapter-title     { font-size: clamp(18px, 4.5vw, 32px); }
  .about-chapter-desc      { font-size: 13px; line-height: 1.7; }
  .about-stats             { gap: 12px; }
  .stat-number             { font-size: 26px; }
  .truss-about-inner       { background: rgba(0,0,0,0.35); }
  .about-timeline-track    { height: 3px; }

  /* Contact info slide — full viewport on mobile; hide the form (it moves to contact-form slide) */
  .truss-slide[data-truss="contact"] .contact-form-wrapper { display: none; }
  .truss-slide[data-truss="contact"] .contact-layout { padding: 20px 24px; gap: 20px; display: flex; flex-direction: column; justify-content: center; height: 100%; box-sizing: border-box; }
  .truss-slide[data-truss="contact"] .section-label { font-size: 11px; }
  .truss-slide[data-truss="contact"] .section-title { font-size: clamp(24px, 6vw, 40px); margin-bottom: 12px; }
  .truss-slide[data-truss="contact"] .contact-description { font-size: 14px; line-height: 1.6; }
  .truss-slide[data-truss="contact"] .contact-detail-icon { width: 36px; height: 36px; }
  .truss-slide[data-truss="contact"] .contact-detail-text { font-size: 14px; }

  /* Contact form slide — mobile second contact sub-slide */
  .truss-slide[data-truss="contact-form"] { display: block; overflow-y: auto; }
  .truss-slide[data-truss="contact-form"] .truss-contact-form-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 24px;
    box-sizing: border-box;
  }
  .truss-slide[data-truss="contact-form"] .contact-form { gap: 14px; }
  .truss-slide[data-truss="contact-form"] .form-row { gap: 12px; flex-direction: column; }
  .truss-slide[data-truss="contact-form"] .form-group label { font-size: 11px; }
  .truss-slide[data-truss="contact-form"] .form-group input,
  .truss-slide[data-truss="contact-form"] .form-group textarea { padding: 12px 14px; font-size: 16px; }
  .truss-slide[data-truss="contact-form"] .form-group textarea { min-height: 90px; }
  .truss-slide[data-truss="contact-form"] .form-submit { padding: 14px 32px; font-size: 13px; }
}

/* ===== REDUCED MOTION ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .truss-clients-track { animation: none; }
}