/* Responsive overrides for Altadena Custom Builds.
   The original design was authored at 1440px with heavy use of inline
   grid + font-size styles. This file uses targeted selectors with
   !important to bring it down to phones and tablets without rewriting
   the source markup.
   ---
   Breakpoints:
     1100px — collapse most 2x2 / multi-column grids to stacks
      820px — tablet: nav simplifies, headlines step down further
      560px — phone: containers shrink, nav becomes minimal
*/

/* Make every page have a max-width that doesn't horizontally overflow */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* ── Tablet & below (≤ 1100px) ─────────────────────────────────── */
@media (max-width: 1100px) {

  .container, .container-wide {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .container-narrow {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Stack any inline-styled grid down to single column. The cases
     where a multi-column layout still makes sense at this width are
     covered by the more specific overrides further down. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Two-column meta dl on project pages should stay 2-up on tablet */
  dl[style*="repeat(2, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer keeps a 2-col grid at this size */
  .site-footer .foot-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }

  /* Display headings — step down */
  .display {
    font-size: clamp(34px, 6vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  /* Hero H1 is overridden via inline 82-96px; rein it in */
  h1.display {
    font-size: clamp(40px, 8vw, 72px) !important;
  }

  /* Nav inner padding tightens */
  .nav-inner {
    padding: 14px 32px !important;
  }

  /* Section spacing — reduce top/bottom padding when it was 120-140px */
  section[style*="padding: 120px 0"],
  section[style*="padding: 140px 0"],
  section[style*="padding: 100px 0 140px"],
  section[style*="padding: 60px 0 140px"],
  section[style*="padding: 40px 0 140px"],
  section[style*="padding: 0 0 140px"],
  section[style*="padding: 80px 0 120px"] {
    padding: 80px 0 !important;
  }

  /* Reduce hero top/bottom paddings */
  section[style*="paddingTop: 80"][style*="paddingBottom: 120"],
  section[style*="padding: 120px 0 80px"] {
    padding: 60px 0 !important;
  }

  /* Sticky portrait on About page becomes inline */
  div[style*="position:sticky"] {
    position: static !important;
  }

  /* Manifesto strip portrait sizes itself reasonably */
  div[style*="aspect-ratio:4/5"] img,
  img[style*="aspect-ratio:4/5"] {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Big full-bleed images shrink height */
  img[style*="height:560px"] { height: 360px !important; }
  img[style*="aspect-ratio:21/9"] { aspect-ratio: 16/9 !important; }
}

/* ── Tablet portrait (≤ 820px) ────────────────────────────────── */
@media (max-width: 820px) {

  .display {
    font-size: clamp(28px, 7vw, 48px) !important;
  }
  h1.display {
    font-size: clamp(36px, 9vw, 56px) !important;
  }

  /* Header CTA button can hide; logo + nav links remain */
  .nav-inner > a.btn,
  .nav-inner > a.btn-ghost {
    display: none !important;
  }

  /* Footer collapses to single column */
  .site-footer .foot-row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .site-footer .foot-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Section paddings further reduced */
  section[style*="padding"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Pull-quote and large text blocks tighten */
  p[style*="font-size:38px"],
  p[style*="font-size:40px"],
  p[style*="font-size:34px"] {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }
}

/* ── Phone (≤ 560px) ──────────────────────────────────────────── */
@media (max-width: 560px) {

  .container, .container-wide, .container-narrow {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .nav-inner {
    padding: 12px 20px !important;
  }
  .nav-links {
    gap: 18px !important;
    font-size: 12px !important;
  }
  /* Hide the verbose "About ACB" → "About" stays */
  .nav-links a[href="/about.html"] { font-size: 12px; }

  .display {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.1 !important;
  }
  h1.display {
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  /* Eyebrow text */
  .eyebrow { font-size: 10px !important; letter-spacing: 0.16em !important; }

  /* Body copy */
  p[style*="font-size:18px"],
  p[style*="font-size:19px"] {
    font-size: 16px !important;
  }
  p[style*="font-size:17px"] {
    font-size: 15px !important;
  }

  /* Pull-quote tighter still */
  p[style*="font-size:38px"],
  p[style*="font-size:40px"],
  p[style*="font-size:34px"],
  p[style*="font-size:36px"] {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  /* Force any 2-col meta dl back to single column on the smallest screens */
  dl[style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Project page huge titles */
  h1.display[style*="font-size:96px"] {
    font-size: 44px !important;
  }

  /* Drop-cap reduce */
  span[style*="font-size:78px"] {
    font-size: 56px !important;
  }

  /* Buttons full-width on mobile */
  .btn { padding: 14px 18px !important; font-size: 13px !important; }

  /* Form: stack the 2-col phone+email block */
  .acb-form div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Project meta block: dt/dd was a grid — keep readable */
  div[style*="grid-template-columns:1fr 4fr 7fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* ── Honeypot field — invisible to humans ─────────────────────── */
.acb-honeypot { display: none !important; }