/* ============================================================
   Media Miners — responsive hardening layer
   Loaded LAST so it can correct earlier files without editing them.
   Every rule here fixes a problem found by testing real pages at
   320 / 375 / 768 / 1024 / 1280 px. Design, colours and desktop
   layout are unchanged.
   ============================================================ */

/* ---- 1. Forms: the design-system Card ships 48px inline padding,
        which leaves ~190px of room on a 320px phone and pushes the
        fields 17px past the screen edge. ---------------------------- */
@media (max-width: 767px) {
  .mm-form-card { padding: 32px 24px !important; }
}
@media (max-width: 560px) {
  .mm-form-card { padding: 24px 18px !important; }
  .mm-form-card form,
  .mm-form-card form > *,
  .mm-contact-form-grid > *,
  .mm-form-pair > * { min-width: 0; max-width: 100%; }
  .mm-form-card input,
  .mm-form-card select,
  .mm-form-card textarea { box-sizing: border-box; width: 100%; max-width: 100%; }
}

/* iOS Safari zooms the page when a focused field is under 16px.
   Keep fields at 16px on touch devices so the layout never jumps. */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ---- 2. Blog filters: one-line swipe slider. Every category is reachable
        by swiping / dragging; edges fade to hint that more options exist. */
.mm-filter-slider {
  --mm-fade-l: 0px;
  --mm-fade-r: 0px;
  position: relative;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mm-fade-l), #000 calc(100% - var(--mm-fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--mm-fade-l), #000 calc(100% - var(--mm-fade-r)), transparent 100%);
}
.mm-filter-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  /* breathing room so focus rings and the active shadow are never clipped */
  padding: 6px 4px;
  margin: -6px -4px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.mm-filter-track::-webkit-scrollbar { display: none; }
.mm-filter-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.mm-filter-track.is-dragging * { pointer-events: none; }
.mm-filter-track > div { flex: 0 0 auto; flex-wrap: nowrap !important; }
.mm-filter-track > div > button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}
.mm-filter-track > div > button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .mm-filter-slider { width: 100%; }
  .mm-filter-track > div > button { padding: 10px 18px !important; }
}

/* ---- 3. Buttons with long labels (e.g. the blog quote CTA) were
        forced onto one line and ran off-screen. They may now wrap,
        while single-line buttons keep their exact original height. --- */
@media (max-width: 767px) {
  #scroll-top button[style*="inline-flex"] {
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center;
    padding-block: 10px !important;
  }
  #scroll-top button[style*="height: 54px"] { height: auto !important; min-height: 54px; }
  #scroll-top button[style*="height: 44px"] { height: auto !important; min-height: 44px; }
  #scroll-top button[style*="height: 36px"] { height: auto !important; min-height: 36px; }
}

/* ---- 4. Touch targets (WCAG 2.2: 24px minimum, 44px recommended).
        Visual size stays the same; only the tappable area grows. ------ */
@media (hover: none), (pointer: coarse) {
  .mm-offer-dots button { position: relative; }
  .mm-offer-dots button::after { content: ""; position: absolute; inset: -18px -4px; }
  .mm-portfolio-view { min-height: 44px; }
  .vp-form-note a { display: inline-block; padding-block: 12px; }
}

/* ---- 5. Mobile browsers: 100vh includes the collapsing URL bar, so
        the hero was taller than the visible screen. Use dynamic vh. -- */
@supports (height: 100dvh) {
  .mm-home-nav + section#top { min-height: calc(100dvh - 76px); }
  .mm-home-nav + section#top > .mm-home-wrap:first-of-type { min-height: calc(100dvh - 142px); }
}

/* ---- 6. Phones in landscape (short + wide): never let a hero demand
        more height than the screen has. ------------------------------ */
@media (orientation: landscape) and (max-height: 520px) {
  .mm-home-nav + section#top,
  .mm-home-nav + section#top > .mm-home-wrap:first-of-type { min-height: 0; }
  .mm-page-hero { padding-block: 44px !important; }
}

/* ---- 7. Notch / home-indicator safe area for the floating call and
        WhatsApp buttons (needs viewport-fit=cover in index.html). ---- */
@supports (padding: max(0px)) {
  .mm-sticky-contact-actions { right: max(16px, env(safe-area-inset-right)); }
}

/* ---- 8. Images and video can never exceed their container. -------- */
img, video, picture, canvas { max-width: 100%; }