/* =====================================================================
 * Lok-N-Blok — Performance overrides for the public site.
 * The hero shipped with several continuous CSS animations + a 3D canvas
 * that together can drop frame rate during scroll and compete with the
 * autoplay video. These overrides keep the look intact (cards still
 * have gold borders, hero still has its bloom gradient) while stopping
 * the per-frame paint cost.
 * ===================================================================== */

/* The Kevin Harrington card has an 8s conic-gradient angle animation
   that's one of the most expensive things Chrome can paint. Disable
   the animation but keep the static gold border. */
.lnb-v2-kh::after{animation:none!important}
/* Hero glow pulse — pretty but runs forever. Keep the gradient,
   drop the per-frame scale/opacity tween. */
.lnb-v2-hero-bloom{animation:none!important}
/* The animated gradient sweep on the H1's green span — disable. */
.lnb-v2-h1 .g{animation:none!important}

@media (max-width: 760px) {
  /* On phones, take the 3D iso-blocks canvas out entirely — it runs a
     requestAnimationFrame loop that competes with scroll. The video and
     bloom layer still provide visual depth behind the hero text. */
  .lnb-hero3d,
  .lnb-hero-impact-canvas { display: none !important; }
}

/* =====================================================================
 * Mobile usability patches for the public site.
 * Many sections of index.html ship with inline grid layouts that don't
 * include their own responsive breakpoints. This file collapses those
 * grids to a single readable column on phones and tightens up vertical
 * rhythm so content stays legible and the floating CTA stops blocking
 * the page.
 * v1.0 · 2026-05
 * ===================================================================== */

/* ---------- Phones (≤ 760px) ---------- */
@media (max-width: 760px) {

  /* Collapse any inline-styled grid container into a single column.
     Covers .tiny-section (3-col), .custom-section (2-col), .global-section,
     .commercial-section, .market-section, .audience-section, etc. */
  section > .container > div[style*="display:grid"][style*="grid-template-columns"],
  section > .container > div[style*="display: grid"][style*="grid-template-columns"],
  main > .container > div[style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* Nested inline grids one level deeper (e.g. 2-col splits inside a card). */
  section .container div[style*="grid-template-columns:1fr 1fr"],
  section .container div[style*="grid-template-columns: 1fr 1fr"],
  section .container div[style*="grid-template-columns:repeat(2,1fr)"],
  section .container div[style*="grid-template-columns:repeat(3,1fr)"],
  section .container div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Mobile-readable spec-tag chip rows (don't wrap awkwardly). */
  section .container div[style*="display:flex;gap:8px;flex-wrap:wrap"] {
    gap: 6px !important;
  }

  /* Section padding — many inline sections use padding:120px which is
     way too much vertical space on a phone. Trim it. */
  section[style*="padding:120px"],
  section[style*="padding: 120px"],
  section[style*="padding:140px"],
  section[style*="padding: 140px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Container padding tighter on phones so card content has more room. */
  section > .container { padding-left: 18px !important; padding-right: 18px !important; }

  /* Section titles shouldn't overflow on small screens. */
  .section-title { font-size: clamp(1.6rem, 6vw, 2.1rem) !important; line-height: 1.18 !important; }
  .section-subtitle { font-size: .94rem !important; }

  /* Card text shouldn't get squeezed below ~14px. */
  section .container h3 { font-size: 1.18rem !important; line-height: 1.2 !important; }
  section .container p  { font-size: .94rem !important; line-height: 1.55 !important; }

  /* Compare tables — let users swipe horizontally instead of squishing. */
  .compare-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
  }
  .compare-table { min-width: 520px; }

  /* Big design-guide image — wrap it in a tap-to-expand link (index.html). */
  a[data-zoom] { display: block; position: relative; }
  a[data-zoom] img { width: 100%; height: auto; display: block; }
  a[data-zoom]::after {
    content: "↗ tap to view full size";
    position: absolute; right: 10px; bottom: 10px;
    background: rgba(7,14,10,.86); color: #6ee89a;
    border: 1px solid rgba(110,232,154,.32);
    padding: 5px 10px; border-radius: 100px;
    font: 700 .7rem/1 'Space Grotesk', sans-serif;
    letter-spacing: .04em;
    pointer-events: none;
  }

  /* The "All structures share the same block system" banner card —
     keep it readable inside the tiny-section. */
  #tiny-homes .container > div[style*="background:rgba(39,165,86,0.06)"] {
    padding: 16px 18px !important;
  }

  /* Hero block / stickers — give the page room to breathe at the top. */
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- Small phones (≤ 420px) — even tighter ---------- */
@media (max-width: 420px) {
  section[style*="padding:120px"],
  section[style*="padding: 120px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .section-label { font-size: .68rem !important; letter-spacing: .12em !important; }
}