/* ============================================================
   Skip's Modern Carpentry — mobile responsive layer
   Overrides desktop-first inline styles on small screens only.
   NOTE: scroll-fx.js sets transition-delay on grid children, which makes
   the browser re-serialize their inline styles (grid-column/grid-row ->
   grid-area shorthand). So we can't rely on matching child inline styles;
   grid stacking targets the CONTAINER and resets children by combinator.
   ============================================================ */

/* Subtle paper-grain texture over every page (fixed film-grain overlay). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("/assets/img/grain.png");
  background-size: 220px 220px;
}

@media (max-width: 1100px) {
  /* Reserve space for the floating bottom call pill. */
  body { padding-bottom: 76px !important; }
  /* Hide the dark utility strip above the nav — it's cluttered on phones;
     the same info lives in the footer + the fixed bottom bar. Keeps the
     sticky header compact (just the logo row). */
  .topbar { display: none !important; }
}

@media (max-width: 820px) {
  /* --- Horizontal gutters: 64px -> 20px --- */
  section[style*="64px"],
  header[style*="64px"],
  footer[style*="64px"],
  main[style*="64px"],
  [style*="1280px"][style*="64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Tame oversized vertical padding on content sections */
  section[style*="96px 64px"],
  section[style*="80px 64px"],
  section[style*="72px 64px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* --- Stack EVERY multi-column grid in <main> to one column ---
     Target the container by its (untouched) grid-template-columns, then
     reset each child's placement via the child combinator so it works even
     after the CSSOM rewrites child styles to grid-area shorthand. */
  main [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
  }
  main [style*="grid-template-columns"] > * {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }
  /* Keep small in-card photo thumbnails (Reviews page) 2-up, not full width.
     Needs `main` so it ties the blanket rule's specificity and wins by order. */
  main [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Image-tile grids fill via absolutely-positioned images, so the stacked
     cells need an explicit row height. */
  #gal-grid { grid-auto-rows: 260px !important; }

  /* Tighten large gaps between stacked blocks */
  [style*="gap:56px"],
  [style*="gap:48px"] { gap: 28px !important; }

  /* --- Typography scale-down (tag-scoped, value match) --- */
  h1[style*="52px"],
  h1[style*="50px"],
  h1[style*="48px"],
  h1[style*="46px"],
  h1[style*="44px"] {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  h2[style*="40px"],
  h2[style*="38px"],
  h2[style*="36px"],
  h2[style*="34px"],
  h2[style*="32px"],
  h2[style*="31px"],
  h2[style*="30px"] {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }

  /* --- Hero heights: keep image presence, drop excess --- */
  section[style*="700px"],
  section[style*="660px"],
  section[style*="640px"],
  header[style*="640px"],
  header[style*="620px"],
  header[style*="600px"],
  header[style*="500px"],
  header[style*="420px"] {
    min-height: 420px !important;
  }

  /* Hide the desktop process connector line when steps stack (both
     serializations, since it's a grid child that gets re-serialized). */
  [style*="left:12%"],
  [style*="left: 12%"] { display: none !important; }

  /* Fixed image panels: cap height so stacked layouts stay compact (both
     serializations). */
  [style*="height:560px"], [style*="height: 560px"],
  [style*="height:500px"], [style*="height: 500px"],
  [style*="height:480px"], [style*="height: 480px"],
  [style*="height:460px"], [style*="height: 460px"],
  [style*="height:440px"], [style*="height: 440px"],
  [style*="height:400px"], [style*="height: 400px"],
  [style*="height:380px"], [style*="height: 380px"] { height: 300px !important; }

  /* Sticky side rails release when the two columns stack (both). */
  main [style*="position:sticky"],
  main [style*="position: sticky"] { position: static !important; top: auto !important; }
}

@media (max-width: 520px) {
  section[style*="64px"],
  header[style*="64px"],
  footer[style*="64px"],
  main[style*="64px"],
  [style*="1280px"][style*="64px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1[style*="52px"],
  h1[style*="50px"],
  h1[style*="48px"] { font-size: 28px !important; }

  /* Basement hero stat bar: render as a tidy 3-up row with clean dividers.
     The flex-wrap default stacked them and left items 2–3 indented under a
     stray left rule (item 1 had none), which read as broken. */
  main .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
    align-items: start;
  }
  main .hero-stats > div {
    padding-left: 14px !important;
    padding-right: 6px !important;
    border-left: 1px solid rgba(226, 227, 224, .25) !important;
  }
  main .hero-stats > div:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
  main .hero-stats [data-count] { font-size: 30px !important; }
  main .hero-stats > div > span:last-child {
    font-size: 10px !important;
    letter-spacing: .04em !important;
  }
}