/* ============================================================
   Dual Skin Demo — responsive.css
   Desktop-first responsive breakpoints.
   1024px — large tablets / small laptops
   768px  — tablets / mobile landscape
   480px  — mobile portrait
   ============================================================ */

/* ============================================================
   Breakpoint Contract:
   - Mobile/tablet: max-width: 768px (CSS media queries)
   - Desktop gate:  min-width: 768px (JS gsap.matchMedia — complementary)
   - Desktop-only:  min-width: 991px (hover effects, cursor, parallax)
   At exactly 768px, both mobile CSS and desktop JS apply — intentional.
   ============================================================ */

/* ── MOBILE NAV OVERLAY BASE ──
   Shared full-viewport overlay structure. Default uses opacity fade.
   Cinematic overrides to translateX slide. Per-skin files override
   font styles via [data-skin] selectors.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 999;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  body.nav-open .nav-links {
    opacity: 1;
    pointer-events: all;

    & a {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 6vw, 2.5rem);
      font-weight: 600;
    }
  }
}

/* ── Touch-hover: mirrors :hover states for tap-to-hover pattern ── */
@media (max-width: 768px) {
  .service-card.touch-hover,
  .sector-card.touch-hover,
  .value-card.touch-hover,
  .team-card.touch-hover,
  .article-card.touch-hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}