/* ════════════════════════════════════════════════════════════
   AZR · Responsive base · v2.3
   Augments per-file styles for 360–1280px viewports.
   Loaded by every doc HTML via <link rel="stylesheet" href="responsive.css">.
   ──────────────────────────────────────────────────────────── */

/* ── DEFAULT — apply on all viewports ── */
img { max-width: 100%; height: auto; }

/* ── DESKTOP-COMFORT BREAKPOINT (≤ 1280px) ── */
@media (max-width: 1280px) {
  .wrap { padding-left: 36px; padding-right: 36px; }
  .unit-inner { padding-left: 36px; padding-right: 36px; }
}

/* ── TABLET BREAKPOINT (≤ 1024px) ── */
@media (max-width: 1024px) {
  .wrap { padding-left: 28px; padding-right: 28px; }
  .unit-inner { padding-left: 28px; padding-right: 28px; }
}

/* ── MOBILE BREAKPOINT (≤ 768px) ── */
@media (max-width: 768px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .unit-inner { padding-left: 18px; padding-right: 18px; }

  /* Collapse common multi-column grids to single column */
  .donts-grid,
  .scale-grid,
  .variant-grid,
  .var-grid,
  .three-layer,
  .donts,
  .g2,
  .g3,
  .ex-grid,
  .lf-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inline-style multi-column grids → 1 col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns:140px repeat"],
  [style*="grid-template-columns:160px repeat"],
  [style*="grid-template-columns:180px repeat"],
  [style*="grid-template-columns:200px repeat"],
  [style*="grid-template-columns:1fr auto 1fr"],
  [style*="grid-template-columns:auto 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* لا تراص بدل إعادة التخطيط — جداول داخلية في ملف 15 */
  .rrow, .rt-row {
    grid-template-columns: 1fr !important;
  }
  .rc, .rt-cell {
    border-left: none !important;
    border-bottom: 1px solid var(--rule);
  }

  /* Tables: enable horizontal scroll */
  table,
  .data-table,
  .scale-table,
  .contrast-table,
  .sem-table,
  .rules-table,
  .rt-row {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Section padding */
  .sec { padding: 40px 0 !important; }

  /* Headers respect viewport */
  .u-title { font-size: clamp(32px, 9vw, 56px) !important; }
  .u-desc { font-size: 13px !important; }
  .sec-hd h2 { font-size: clamp(20px, 5.5vw, 32px) !important; }
  
  /* Top nav: allow scroll */
  .topnav, .jumpnav { overflow-x: auto; }
  .nav-links, .jumpnav-inner { flex-wrap: nowrap; white-space: nowrap; }

  /* Scaled slide demos: keep aspect ratio but reasonable height */
  .sw { max-height: 60vh; }

  /* Hide decorative meta on small viewports */
  .u-meta { display: none; }

  /* Code blocks: scroll horizontally */
  .code, pre, .naming { overflow-x: auto; font-size: 11px !important; }

  /* Fixed-aspect slide demos — تصغير عادل في الجوال */
  .ch-slide, .ex-wrap, .dc-slide, .pm-slide, .ratio-bar {
    max-width: 100% !important;
  }

  /* Top nav links: smaller text */
  .nav-link, .jn {
    font-size: 9px !important;
    padding: 0 8px !important;
  }
}

/* ── COMPACT MOBILE BREAKPOINT (≤ 480px) ── */
@media (max-width: 480px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .unit-inner { padding-left: 14px; padding-right: 14px; }
  
  .u-title { font-size: clamp(28px, 10vw, 44px) !important; line-height: 1; }
  .u-desc { font-size: 12.5px !important; }
  .sec-hd h2 { font-size: clamp(18px, 6vw, 26px) !important; }
  .sec { padding: 28px 0 !important; }
  
  /* Hero/banner sections: smaller padding */
  .unit-strip { padding-top: 12px; padding-bottom: 12px; }
}

/* ── TINY MOBILE (≤ 360px) ── */
@media (max-width: 360px) {
  .wrap, .unit-inner { padding-left: 10px; padding-right: 10px; }
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}