/* ============================================================
   VisualARQ – Medialogic Dubai — Responsive Stylesheet
   ============================================================ */

/* ── TABLET (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {

  :root {
    --section-py: 56px;
  }

  /* Use cases: 4-col → 2-col */
  .use-cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feature rows: reduce gap */
  .feature-row {
    gap: 36px;
  }

  /* Footer: 3-col → 2-col with brand spanning full width */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }

  /* What's new: keep 5-col at tablet */
  .wn-row {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ── MEDIUM (≤ 860px) ──────────────────────────────────────── */
@media (max-width: 860px) {

  :root {
    --text-hero: 36px;
    --text-2xl:  26px;
    --text-xl:   22px;
  }

  /* Nav: collapse to hamburger */
  .nav-links {
    display: none;
    position: fixed;
    top: 62px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 16px 24px 24px;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 999;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
  }
  .nav-links a::after { display: none; }
  .nav-cta {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
  }
  .nav-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .nav-toggle { display: flex; }

  /* Discover video: full width */
  .discover-video-wrap { max-width: 100%; }

  /* What's New: 5-col → 3-col */
  .wn-row {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About: 2-col → 1-col */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-img { order: -1; }

  /* Features: 2-col → 1-col, reset direction */
  .feature-row,
  .feature-row.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 28px;
  }
  .feature-media { order: -1; }
  .feature-row.reverse .feature-media { order: -1; }

  /* License card: 2-col → 1-col */
  .license-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 24px;
  }
  .license-img-wrap { display: none; }

  /* Testimonials: 3-col → 1-col */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* CTA: side-by-side → stacked */
  .cta-inner {
    flex-direction: column;
    text-align: center;
  }
  .cta-text p { margin: 0 auto; }
  .cta-actions { justify-content: center; }

  /* Footer: 2-col → 1-col */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── MOBILE (≤ 560px) ──────────────────────────────────────── */
@media (max-width: 560px) {

  :root {
    --text-hero:   30px;
    --text-2xl:    22px;
    --text-xl:     20px;
    --section-py:  44px;
    --gap-grid:    16px;
  }

  /* Hero */
  .hero-content { padding: 40px 16px; }
  .hero h1 { font-size: 30px; }
  .hero-tagline { font-size: 16px; }
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  .hero-actions .btn {
    width: 220px;
    justify-content: center;
  }

  /* What's New: 3-col → 2-col */
  .wn-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .whats-new-card { padding: 20px 14px; }
  .wn-item { padding: 16px 8px 14px; font-size: 12px; }
  .wn-item img { width: 40px; height: 40px; }

  /* Use cases: 2-col → 1-col */
  .use-cases-grid {
    grid-template-columns: 1fr;
  }

  /* About features: 2-col → 1-col */
  .about-features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* License tabs: horizontal → vertical stack */
  .tab-nav {
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-btn);
  }
  .tab-btn {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
  }
  .tab-btn:last-child { border-bottom: none; }

  /* License card */
  .license-card { padding: 20px 16px; }

  /* Discover video */
  .discover-video-wrap { border-radius: 6px; }
}