/* Mobile responsiveness layer for the public listing site
   (www.mjpropertylisting.com).

   Every existing page is built with fixed-px inline `style` attributes and
   no media queries at all, so nothing shrinks below desktop width. Rather
   than rewrite those inline styles (high risk of visual regression on
   desktop), this file adds a small set of class hooks in the Blade views
   and overrides them here, scoped inside max-width media queries. Nothing
   in this file can change how the site looks above 1100px, since every
   rule either targets a breakpoint or a brand-new element (the nav
   drawer) that doesn't exist in the current desktop design.

   Breakpoints used throughout: small laptop <=1100px, tablet <=900px,
   phone <=600px — chosen so 360/375/390 (phones), 768 (tablet) and 1024
   (small laptop) all land solidly inside one tier rather than on an edge. */

/* ---- Safety net: no page should ever scroll horizontally ---- */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }

/* ---- Mobile nav toggle: hidden on desktop, revealed at <=900px ---- */
.mj-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: none;
}

/* Layout for the mobile nav drawer panel — kept in a class rather than
   inline `style`, because Alpine's x-show strips the element's inline
   `display` when showing it (it assumes any inline display is leftover
   from its own hide mechanism), which silently downgraded the panel to
   `display:block` and broke both flex-direction:column and the
   margin-top:auto trick used to pin the Contact button to the bottom. */
.mj-nav-drawer-panel {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .mj-grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 900px) {
  .mj-container, .mj-nav-bar, .mj-footer { padding-left: 24px !important; padding-right: 24px !important; }

  .mj-nav-links, .mj-nav-cta-desktop { display: none !important; }
  .mj-nav-toggle { display: inline-flex !important; }
  .mj-nav-bar { height: 64px !important; }

  .mj-grid-4, .mj-grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .mj-two-col { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mj-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; row-gap: 32px !important; }

  .mj-hero { height: 480px !important; }
  .mj-hero-title { font-size: 34px !important; }
  .mj-hero-search { height: 58px !important; padding: 0 6px 0 20px !important; }

  .mj-carousel-row { grid-auto-columns: calc((100% - 24px) / 1.6) !important; }
}

@media (max-width: 600px) {
  .mj-container, .mj-nav-bar, .mj-footer { padding-left: 16px !important; padding-right: 16px !important; }

  .mj-grid-4, .mj-grid-3 { grid-template-columns: 1fr !important; }
  .mj-footer-grid { grid-template-columns: 1fr !important; row-gap: 24px !important; }
  .mj-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }

  .mj-hero { height: 420px !important; }
  .mj-hero-title { font-size: 28px !important; line-height: 1.25 !important; padding: 0 8px; }
  .mj-hero-search { width: 92vw !important; }

  .mj-form-row { grid-template-columns: 1fr !important; }
  .mj-form-card { padding: 20px !important; }

  .mj-featured-search-field ~ .mj-featured-search-field,
  .mj-featured-search-divider { display: none !important; }
  /* With only one field left, let the pill shrink to its content instead of
     keeping the desktop-wide track — otherwise the search button ends up
     stranded far to the right with a large dead gap in between. */
  .mj-featured-search-pill { width: auto !important; }
  .mj-featured-search-field { flex: none !important; }
  /* Purely decorative (not a link) — drop it so it doesn't float oddly next
     to a row heading that's now wrapping onto two lines. */
  .mj-featured-row-icon { display: none !important; }
  .mj-featured-rows { gap: 32px !important; }

  .mj-listing-gallery-grid > img:not(:first-child) { display: none !important; }
  .mj-listing-gallery-grid { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; height: 280px !important; }
  .mj-listing-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}