/* ---------------------------------------------------------------------------
   Mobile layer for Najmat Al Zabadani.
   The pages are generated with inline styles only, so every layout override
   here must use !important. Selectors key off the values the browser
   serialises into the style attribute (e.g. "repeat(4, 1fr)"), which is stable
   across Chrome, Safari and Firefox. Unspaced variants are included as a hedge.
   --------------------------------------------------------------------------- */

/* Injected chrome (drawer, hamburger, call bar) is desktop-hidden by default. */
.nz-m { display: none; }

@media (max-width: 860px) {
  .nz-m { display: block; }

  /* ---------- rhythm ---------- */
  #dc-root section { padding: 54px 18px !important; }
  #dc-root footer { padding: 48px 18px 24px !important; }
  /* Extra room on the side the hamburger occupies. */
  #dc-root header { padding: 12px 60px 12px 16px !important; gap: 10px !important; }
  #dc-root [dir="rtl"] header { padding: 12px 16px 12px 60px !important; }
  #dc-root header nav { display: none !important; }

  /* Room for the sticky call bar. */
  body { padding-bottom: 66px !important; }

  /* ---------- type ---------- */
  #dc-root h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; }
  #dc-root h2 { font-size: clamp(24px, 6.4vw, 31px) !important; line-height: 1.14 !important; }
  #dc-root h3 { font-size: clamp(17px, 4.6vw, 20px) !important; }
  #dc-root p  { font-size: 15px !important; line-height: 1.7 !important; }

  /* 16px minimum stops iOS Safari zooming the page on focus. */
  #dc-root input, #dc-root select, #dc-root textarea { font-size: 16px !important; }

  /* ---------- grids ---------- */
  /* Stat tiles keep two columns; everything wider collapses to one. */
  #dc-root [style*="repeat(4, 1fr)"],
  #dc-root [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  #dc-root [style*="repeat(3, 1fr)"],
  #dc-root [style*="repeat(3,1fr)"],
  #dc-root [style*="repeat(6, 1fr)"],
  #dc-root [style*="repeat(6,1fr)"],
  #dc-root [style*="1.05fr 0.95fr"],
  #dc-root [style*="0.8fr 1.2fr"],
  #dc-root [style*="1fr 1fr"],
  #dc-root [style*="1.5fr 1fr 1fr 1fr"],
  #dc-root [style*="minmax(180px, 1fr)"],
  #dc-root [style*="minmax(180px,1fr)"],
  /* auto-fit tracks with a min wider than the viewport overflow instead of wrapping */
  #dc-root [style*="minmax(400px, 1fr)"],
  #dc-root [style*="minmax(400px,1fr)"],
  #dc-root [style*="minmax(360px, 1fr)"],
  #dc-root [style*="minmax(360px,1fr)"],
  #dc-root [style*="minmax(330px, 1fr)"],
  #dc-root [style*="minmax(330px,1fr)"] { grid-template-columns: 1fr !important; }

  /* Wide gaps and section-header margins read as dead space at this width. */
  #dc-root [style*="gap: 56px"],
  #dc-root [style*="gap: 72px"],
  #dc-root [style*="gap: 48px"] { gap: 30px !important; }
  #dc-root [style*="margin-bottom: 64px"] { margin-bottom: 30px !important; }
  #dc-root [style*="margin-bottom: 56px"] { margin-bottom: 26px !important; }
  #dc-root [style*="margin-top: 64px"] { margin-top: 34px !important; }

  /* ---------- hero ---------- */
  /* The hero is a <section> too, but its columns carry their own padding —
     the generic section padding above would double up. */
  /* Outspecifies the generic `#dc-root section` padding rules in both blocks. */
  #dc-root section#hero { min-height: auto !important; align-content: start !important; padding: 0 !important; }
  #hero > div:first-child { padding: 30px 18px 38px !important; gap: 20px !important; justify-content: flex-start !important; }
  #hero > div:last-child { min-height: 260px !important; border-left: none !important; border-top: 1px solid rgba(18, 56, 50, 0.1) !important; }
  #hero h1 { font-size: clamp(32px, 9.5vw, 46px) !important; }
  #hero a[style*="padding: 16px 28px"] { flex: 1 1 auto !important; text-align: center !important; padding: 15px 20px !important; }

  /* ---------- about ---------- */
  /* The floating inset photo and offset badge overflow at this width. */
  #about img[style*="position: absolute"] { display: none !important; }
  #about div[style*="position: absolute"] { position: static !important; margin-top: 0 !important; padding: 14px 16px !important; }
  #about img { height: 260px !important; }
  #about [style*="margin-bottom: 88px"] { margin-bottom: 40px !important; }
  #about [style*="margin-top: 88px"] { margin-top: 40px !important; }

  /* ---------- gallery ---------- */
  /* Drop the masonry spans; each tile becomes a full-width card. A tile that
     sets both row and column spans serialises as the grid-area shorthand, so
     both spellings have to be matched. */
  #gallery [style*="grid-column"],
  #gallery [style*="grid-area"] { grid-area: auto !important; }
  #gallery [style*="grid-auto-rows"] { grid-auto-rows: 210px !important; gap: 12px !important; }

  /* ---------- contact ---------- */
  #contact [style*="padding: 44px 38px"] { padding: 28px 18px !important; }

  /* ---------- services detail pages ---------- */
  #dc-root img[style*="height: 420px"],
  #dc-root img[style*="height: 520px"] { height: 240px !important; }
  /* Section jump chips scroll horizontally instead of stacking ten deep. */
  #dc-root section:first-of-type div[style*="flex-wrap: wrap"][style*="gap: 10px"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    margin: 30px -18px 0 -18px !important;
    padding: 0 18px 6px 18px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #dc-root section:first-of-type div[style*="flex-wrap: wrap"][style*="gap: 10px"]::-webkit-scrollbar { display: none; }
  #dc-root section:first-of-type div[style*="flex-wrap: wrap"][style*="gap: 10px"] > a { white-space: nowrap !important; }

  /* Anchored sections must clear the sticky header when jumped to. */
  #dc-root section[id] { scroll-margin-top: 70px !important; }
}

@media (max-width: 560px) {
  /* Phone widths only — side by side still reads well on a tablet. */
  #hero a[style*="padding: 16px 28px"] { flex-basis: 100% !important; }
}

@media (max-width: 520px) {
  #dc-root section { padding: 44px 16px !important; }
  #dc-root [style*="repeat(4, 1fr)"] > div,
  #dc-root [style*="repeat(4,1fr)"] > div { padding: 18px 14px !important; }
}

/* ---------------------------------------------------------------------------
   Injected mobile chrome
   --------------------------------------------------------------------------- */

.nz-m-toggle {
  position: fixed;
  top: 12px;
  right: 14px;
  /* Above the drawer so the same control closes it. */
  z-index: 75;
  width: 42px;
  height: 42px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: rgba(244, 251, 248, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(18, 56, 50, 0.22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nz-m-toggle[dir="rtl"] { right: auto; left: 14px; }
.nz-m-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #123832;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nz-m-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nz-m-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nz-m-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nz-m-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(6, 49, 42, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}
.nz-m-scrim.is-open { opacity: 1; visibility: visible; }

.nz-m-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(84vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 74px 24px 28px 24px;
  background: #f4fbf8;
  border-left: 1px solid rgba(18, 56, 50, 0.12);
  transform: translateX(102%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nz-m-drawer.is-open { transform: translateX(0); }
[dir="rtl"] .nz-m-drawer,
.nz-m-drawer[dir="rtl"] {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid rgba(18, 56, 50, 0.12);
  transform: translateX(-102%);
}
[dir="rtl"] .nz-m-drawer.is-open,
.nz-m-drawer[dir="rtl"].is-open { transform: translateX(0); }

/* Injected chrome sits outside #dc-root, so it needs the Arabic face named. */
.nz-m-drawer[dir="rtl"],
.nz-m-toggle[dir="rtl"] ~ .nz-m-bar {
  font-family: 'Noto Kufi Arabic', 'Manrope', Helvetica, Arial, sans-serif;
}

.nz-m-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a6b52;
  margin-bottom: 10px;
}
.nz-m-drawer a {
  display: block;
  padding: 15px 2px;
  font-size: 17px;
  font-weight: 700;
  color: #123832;
  border-bottom: 1px solid rgba(18, 56, 50, 0.1);
  text-decoration: none;
}
.nz-m-drawer a.nz-m-lang {
  margin-top: 18px;
  border: 1px solid rgba(18, 56, 50, 0.22);
  border-bottom: 1px solid rgba(18, 56, 50, 0.22);
  padding: 13px 16px;
  font-size: 14px;
  text-align: center;
}
.nz-m-drawer a.nz-m-cta {
  margin-top: 12px;
  background: #10b489;
  color: #06312a;
  border: none;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nz-m-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: none;
  background: rgba(244, 251, 248, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(18, 56, 50, 0.14);
  padding-bottom: env(safe-area-inset-bottom);
}
.nz-m-bar > a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #0a6b52;
  text-decoration: none;
  border-right: 1px solid rgba(18, 56, 50, 0.12);
  -webkit-tap-highlight-color: transparent;
}
.nz-m-bar > a:last-child {
  border-right: none;
  background: #10b489;
  color: #06312a;
}
.nz-m-bar svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 860px) {
  .nz-m-toggle { display: flex; }
  .nz-m-bar { display: flex; }
}

@media print {
  .nz-m-toggle, .nz-m-bar, .nz-m-drawer, .nz-m-scrim { display: none !important; }
}