/*
 * NEJME AL MAGHRIB | Responsive fix for new .nm-local landing pages
 * Version 1.0.0 | Scope: all 24 published landing pages using .nm-local
 * Does not alter the Woodmart / Elementor header or footer.
 */

/* Protect the layout from fixed widths, oversized images and long strings. */
.nm-local,
.nm-local * {
  box-sizing: border-box !important;
}
.nm-local {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  container: nm-page / inline-size;
}
.nm-local :is(section, nav, .nm-wrap, .nm-hero-grid, .nm-card,
  .nm-price, .nm-cta, .nm-linkbox, .nm-factor, .nm-faq,
  .nm-process, .nm-grid3, .nm-grid4, .nm-list-grid, .nm-factors) {
  min-width: 0 !important;
  max-width: 100%;
}
.nm-local .nm-wrap {
  width: 100% !important;
  max-width: 1180px !important;
  padding-inline: clamp(16px, 3vw, 24px) !important;
  margin-inline: auto !important;
}
.nm-local img,
.nm-local svg,
.nm-local video,
.nm-local iframe {
  max-width: 100% !important;
}
.nm-local :is(p, li, a, h1, h2, h3, h4, summary, strong, span) {
  overflow-wrap: break-word;
}

/* Intrinsic layout: grid breaks automatically even if the theme media CSS
   is loaded in the wrong order or the browser uses an unexpected viewport. */
.nm-local .nm-hero-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 475px), 1fr)) !important;
  align-items: center !important;
  gap: clamp(22px, 3.5vw, 45px) !important;
}
.nm-local .nm-hero-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.nm-local .nm-grid4 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  gap: clamp(14px, 2vw, 20px) !important;
}
.nm-local :is(.nm-grid3, .nm-list-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)) !important;
  gap: clamp(12px, 2vw, 20px) !important;
}
.nm-local .nm-factors {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)) !important;
  gap: 14px !important;
}

/* Fluid typography throughout the WHOLE page. */
.nm-local h1 {
  font-size: clamp(28px, 3.35vw, 42px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.022em;
}
.nm-local h2 {
  font-size: clamp(23px, 2.65vw, 30px) !important;
  line-height: 1.25 !important;
}
.nm-local h3 {
  font-size: clamp(19px, 2.1vw, 22px) !important;
  line-height: 1.32 !important;
}
.nm-local .nm-lead {
  font-size: clamp(16px, 1.5vw, 18px) !important;
  line-height: 1.7 !important;
}
.nm-local .nm-badge {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  font-size: clamp(13px, 1.25vw, 15px) !important;
}
.nm-local :is(.nm-article, .nm-card, .nm-price, .nm-factor, .nm-sub, .nm-cta) p {
  max-width: 100%;
}

/* Images, captions and media. */
.nm-local .nm-hero-img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
}
.nm-local .nm-hero-img > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(235px, 35vw, 430px) !important;
  object-fit: cover !important;
}
.nm-local .nm-img-label {
  max-width: calc(100% - 28px) !important;
  left: 14px !important;
  bottom: 14px !important;
  padding: 10px 13px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Navigation, interactive elements, CTA and FAQ. */
.nm-local .nm-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px clamp(16px, 3vw, 24px) !important;
}
.nm-local .nm-nav > a {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
}
.nm-local .nm-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: 100% !important;
}
.nm-local .nm-buttons > .nm-btn {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.4 !important;
}
.nm-local .nm-faq details {
  min-width: 0 !important;
  max-width: 100% !important;
}
.nm-local .nm-faq summary {
  overflow-wrap: anywhere;
}
.nm-local .nm-links a,
.nm-local .nm-city,
.nm-local .nm-zone {
  overflow-wrap: anywhere;
}
.nm-local :is(.nm-price, .nm-card, .nm-cta, .nm-linkbox) {
  max-width: 100% !important;
}

/* Tablet. */
@media (max-width: 1024px) {
  .nm-local .nm-hero {
    padding-block: 42px !important;
  }
  .nm-local .nm-section {
    padding-block: 48px !important;
  }
  .nm-local :is(.nm-card, .nm-price) {
    padding: clamp(18px, 2.5vw, 25px) !important;
  }
}

/* Phone. */
@media (max-width: 767px) {
  .nm-local .nm-hero-grid,
  .nm-local .nm-grid4,
  .nm-local .nm-grid3,
  .nm-local .nm-factors,
  .nm-local .nm-list-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .nm-local .nm-hero-grid { gap: 24px !important; }
  .nm-local .nm-hero { padding-block: 30px !important; }
  .nm-local .nm-section { padding-block: 38px !important; }
  .nm-local .nm-hero-img > img { height: 265px !important; }
  .nm-local .nm-buttons { flex-direction: column !important; }
  .nm-local .nm-buttons > .nm-btn {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    padding: 13px 16px !important;
  }
  .nm-local .nm-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
  }
  .nm-local .nm-nav > a {
    width: 100% !important;
    height: 100%;
    font-size: 13px !important;
    padding: 10px 8px !important;
    border: 1px solid #e7e7e7 !important;
    text-align: center !important;
    align-content: center;
  }
  .nm-local .nm-card,
  .nm-local .nm-price { padding: 20px !important; }
  .nm-local .nm-cta { padding: 27px 18px !important; }
  .nm-local .nm-step { padding-left: 54px !important; }
  .nm-local .nm-step span { width: 40px !important; height: 40px !important; }
  .nm-local .nm-sub { margin-bottom: 22px !important; }
  .nm-local .nm-links a {
    display: block !important;
    margin: 8px 0 !important;
    padding-block: 2px;
  }
}

/* Phone layout fallback by CONTENT width (not viewport width).
   This handles pages embedded in Elementor/Woodmart with unusual wrappers. */
@container nm-page (max-width: 767px) {
  .nm-hero-grid, .nm-grid4, .nm-grid3, .nm-factors, .nm-list-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .nm-hero-grid { gap: 24px !important; }
  .nm-hero { padding-block: 30px !important; }
  .nm-section { padding-block: 38px !important; }
  .nm-hero-img > img { height: 265px !important; }
  .nm-buttons { flex-direction: column !important; }
  .nm-buttons > .nm-btn { display: block !important; width: 100% !important; }
  .nm-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
  }
  .nm-nav > a {
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
    border: 1px solid #e7e7e7 !important;
    text-align: center !important;
  }
  .nm-card, .nm-price { padding: 20px !important; }
  .nm-cta { padding: 27px 18px !important; }
  .nm-links a { display: block !important; margin: 8px 0 !important; }
}

/* Very small screens. */
@media (max-width: 380px) {
  .nm-local h1 { font-size: 26px !important; }
  .nm-local h2 { font-size: 22px !important; }
  .nm-local .nm-nav { gap: 6px !important; }
  .nm-local .nm-nav > a { font-size: 12px !important; }
  .nm-local .nm-hero-img > img { height: 225px !important; }
}