/* ==========================================================================
   NJSERVICES — Responsive layer (mobile-first: min-width enhancements only)
   ========================================================================== */

/* ---- Small tablet / large phone (>=600px) --------------------------------- */
@media (min-width: 600px) {
  :root {
    --fs-display-xl: clamp(3.2rem, 8vw, 4.4rem);
    --header-height: 5rem;
  }
  .nav-primary a { font-size: clamp(2.4rem, 8vw, 3.6rem); }
  .howwework-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet (>=900px) ------------------------------------------------------ */
@media (min-width: 900px) {
  :root {
    --fs-display-xl: clamp(3.6rem, 6.4vw, 5rem);
    --fs-display-lg: clamp(2.4rem, 4vw, 3.2rem);
    --header-height: 5.5rem;
  }
  .wordmark { font-size: 1.2rem; }

  /* Hero becomes an asymmetric two-column composition: dominant image, text column vertically centered beside it. */
  .hero {
    flex-direction: row;
    align-items: center;
    padding-top: var(--header-height);
    padding-bottom: 0;
    min-height: 92vh;
    gap: var(--space-5);
  }
  .hero-media {
    flex: 1.15 1 0;
    height: 82vh;
    padding-top: 0;
    align-self: stretch;
  }
  .hero-text {
    flex: 1 1 0;
    padding-inline-start: 0;
    padding-inline-end: var(--container-margin);
  }
  [dir="rtl"] .hero-text {
    padding-inline-start: var(--container-margin);
    padding-inline-end: 0;
  }

  .nav-overlay { padding-inline: var(--container-margin); }
  .nav-secondary { margin-top: var(--space-5); }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-4);
  }
  .work-card--featured .work-card-media { padding-top: 47.619%; } /* 21:10 */

  /* Journal cards become horizontal: image beside text instead of stacked. */
  .journal-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
  .journal-card-media { flex: 0 0 40%; padding-top: 26%; }
  .journal-card-body { flex: 1 1 0; }
  .journal-card-title { font-size: 1.5rem; }

  .modal-panel { padding: var(--space-5); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer-links { columns: 2; }
}

/* ---- Desktop (>=1200px) ---------------------------------------------------- */
@media (min-width: 1200px) {
  .container, .site-header, .nav-overlay { padding-inline: var(--container-margin); }
  .hero-media { flex: 1.3 1 0; }
  .nav-primary { gap: var(--space-3); }
  .nav-primary a { font-size: 4.2rem; }
  .work-grid { gap: var(--space-5) var(--space-4); }
  .howwework-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Large desktop (>=1600px) --------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container-margin: 6rem; }
  .hero-text { max-width: 34rem; }
}

/* يقفل تمرير الصفحة الخلفية أثناء فتح القائمة الكاملة الشاشة */
body.no-scroll { overflow: hidden; }