/* ===== Monics Studio · mobile / phone adaptations =====
   Loaded after each page's inline <style>. Uses !important to override
   the inline React styles on the tagged grid containers. */

/* phone-only nav links (folded into the right Menu dropdown) */
.m-only { display: none !important; }

/* full-viewport panels: prefer small-viewport units so phone browser chrome
   (address bar) never crops heroes or sticky project photos */
.mk .vh-full { height: 100vh !important; }
@supports (height: 100svh) {
  .mk .vh-full { height: 100svh !important; }
}

/* photos always fill their frame, whatever the phone's aspect ratio */
.mk image-slot img, .mk .plate img { object-fit: cover; }

@media (max-width: 720px) {
  /* ── method page ── */
  /* the dish diagram shrinks its type below legibility; swap to the vertical descent */
  .mk .onesys-desk { display: none !important; }
  .mk .onesys-phone { display: flex !important; }
  /* the wordmark's hover dropdown is desktop-only; on phones all nav lives under Menu */
  .hml-drop { display: none !important; }
  .m-only { display: inline-block !important; }

  /* project hero: full-screen, edge to edge */
  .mk .proj-hero-wrap { padding: 0 !important; }
  .mk .proj-hero { padding-bottom: 0 !important; height: 100vh; height: 100svh; border-radius: 0 !important; }
  /* Method pages: section scroll-snap fights touch scrolling ("jumps"); disable on phones */
  html { scroll-snap-type: none !important; }

  /* any two-column layout tagged .m-stack collapses to a single column */
  .mk .m-stack { grid-template-columns: 1fr !important; gap: clamp(28px, 7vw, 48px) !important; }

  /* services tiers: photo always on top, copy beneath (reset the desktop order) */
  .mk .svc-tier > * { order: 0 !important; }

  /* project image rows stack */
  .mk .m-rows { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* pull the biggest section paddings in so phones don't feel empty */
  .mk .m-tighten { padding-left: clamp(20px, 6vw, 28px) !important; padding-right: clamp(20px, 6vw, 28px) !important; }

  /* ── footer: tidy 2-col arrangement, wide rows span both, centered baseline ── */
  .mk .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 34px 20px !important; }
  .mk .foot-grid .foot-contact,
  .mk .foot-grid .foot-sister-company { grid-column: 1 / -1; }
  .mk .foot-base { flex-direction: column !important; justify-content: center !important; text-align: center; gap: 14px !important; }
}

@media (max-width: 480px) {
  /* short 2-up lists collapse last */
  .mk .m-2to1 { grid-template-columns: 1fr !important; }
  /* drop the trailing kicker in the services contents index to avoid crowding */
  .mk .svc-contents-kicker { display: none !important; }
}