/* Mobile checkpoints for the McCarthy Sheet Metal preview site.
   Shared across index/services/photos/estimate/estimate-2/estimate-3.
   The design system (_ds/.../styles.css) is component-only and untouched
   apart from nav/table/seg breakpoints added there; everything page-layout
   related — grids, heroes, absolute-positioned blocks — lives here instead,
   since those blocks are one-off per page rather than reusable components.

   Most page layout is written as inline styles, which beat an ordinary
   stylesheet rule of any specificity. `!important` below is deliberate and
   scoped to these media queries only — it's the standard way to retrofit
   responsiveness onto markup that sets layout via `style=""` rather than
   rewriting every page's markup to move layout into classes. */

/* Checkpoints: 768px (tablet / large phone), 480px (small phone). */

/* ── global: restore native touch-scroll over <image-slot> photos ─────
   image-slot.js (a copied design-tool starter component — its own header
   warns it gets overwritten if the starter is ever re-copied, so this
   fix lives here instead of in that file) sets touch-action:none on its
   internal <img> unconditionally. That's for the design canvas's own
   touch-drag-to-reposition feature, which only works inside that tool's
   editing runtime (gated on data-editable / data-reframe, which require
   window.omelette — never present on the deployed site). On a real phone
   it just blocks the page from scrolling wherever a finger touch starts
   on a photo, making every image feel like a broken swipe carousel.
   ::part(image) is the component's own exposed hook for exactly this. */
image-slot::part(image) { touch-action: pan-y !important; }

/* ── index.html ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mc-hero { height: 480px !important; }
  /* Keep the text block over the opaque left side of the gradient scrim
     (right stays unset) instead of stretching full-width into the lighter
     sky area of the photo, which would wash the white text out. */
  .mc-hero-text { left: 20px !important; right: auto !important; width: min(78vw, 320px) !important; top: 32px !important; }
  .mc-hero-text .mc-disp { font-size: 34px !important; }
  .mc-hero-scrim { background: linear-gradient(90deg,rgba(32,30,29,.9) 0%,rgba(32,30,29,.72) 60%,rgba(32,30,29,.15) 100%) !important; }
  .mc-hero-cta { left: 20px !important; right: 20px !important; bottom: 24px !important; flex-wrap: wrap; }
  .mc-strip { flex-wrap: wrap !important; padding: 16px 20px !important; gap: 10px 20px !important; }
  .mc-intro { grid-template-columns: 1fr !important; padding: 32px 20px !important; gap: 20px !important; }
}
@media (max-width: 480px) {
  .mc-hero { height: 420px !important; }
  .mc-hero-text { width: min(82vw, 280px) !important; }
  .mc-hero-text .mc-disp { font-size: 27px !important; }
  .mc-strip span:nth-child(n+5) { display: none; }
}

/* ── services.html ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mc-page-head { padding: 40px 20px 28px !important; }
  .mc-page-head .mc-disp { font-size: 36px !important; }
  .mc-svc-grid { grid-template-columns: 1fr !important; }
  .mc-svc-grid > div {
    padding: 28px 20px !important;
    border-right: none !important;
  }
  .mc-section { padding: 32px 20px !important; }
  .mc-cta-band { padding: 40px 20px !important; }
  .mc-cta-band h3 { font-size: 30px !important; }
}

/* ── photos.html ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mc-gallery-head { flex-direction: column; align-items: flex-start !important; gap: 20px !important; padding: 32px 20px 24px !important; }
  .mc-gallery-head .mc-disp { font-size: 34px !important; }
  .mc-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 170px !important; }
  .mc-row { flex-direction: column; align-items: flex-start !important; gap: 14px !important; padding: 28px 20px !important; }
  .mc-row .btn { width: 100%; }
}
@media (max-width: 480px) {
  .mc-gallery-grid { grid-template-columns: 1fr !important; grid-auto-rows: 200px !important; }
  .mc-gallery-grid > div { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* ── shared: bottom CTA band (services + photos) ───────────────────── */
@media (max-width: 768px) {
  .mc-cta-band { flex-direction: column; align-items: flex-start !important; gap: 18px !important; }
  .mc-cta-band h3 { margin-right: 0 !important; }
}

/* ── estimate.html ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mc-est-hero { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 20px 48px !important; }
  .mc-est-hero .mc-disp { font-size: 44px !important; }
  .mc-stats { flex-wrap: wrap; gap: 24px !important; }
  .mc-bottom-photo { height: 200px !important; }
}
@media (max-width: 480px) {
  .mc-est-hero .mc-disp { font-size: 36px !important; }
}

/* ── estimate-2.html ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mc-wizard { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .mc-wizard-side { padding: 32px 20px !important; }
  .mc-wizard-main { padding: 32px 20px !important; }
  .mc-jobtype-grid { grid-template-columns: 1fr !important; }
  .mc-photo-row { flex-wrap: wrap; }
  .mc-photo-tile { width: calc(50% - 1px) !important; }
  .mc-wizard-actions { flex-wrap: wrap; }
  .mc-wizard-actions .btn-secondary,
  .mc-wizard-actions .btn-primary { flex: 1 1 auto; }
}

/* ── estimate-3.html ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mc-thanks { padding: 56px 20px !important; }
  .mc-thanks-cta { flex-direction: column; }
  .mc-thanks-cta .btn { width: 100%; }
}