/* =============================================================
   Nexus Coastal Child — responsive-devices.css
   Comprehensive responsive system for all tablet/device sizes.

   KEY PRINCIPLE:
   The outer container (max-width:72rem) and inner glass panel
   padding together eat ~7rem of horizontal space on tablets.
   We expand to full-width with small gutters so grids have
   real room, then set grid columns per breakpoint tier.

   TIER MAP:
   ── xs phone ────────── ≤ 380px
   ── sm phone ──────────  381–480px
   ── phablet ───────────  481–599px
   ── sm tablet ─────────  600–767px   (iPad mini portrait, Galaxy Tab)
   ── md tablet ─────────  768–900px   (iPad Air portrait, Kindle Fire HD)
   ── lg tablet ─────────  901–1024px  (iPad Pro 11″ portrait, iPad Air landscape)
   ── xl tablet / laptop ─ 1025–1180px (Surface Pro 7 portrait, iPad Pro 12.9″)
   ── desktop ───────────  1181px+
   ============================================================= */

/* ═══════════════════════════════════════════════════════════════
   1. FULL-WIDTH CONTAINER EXPANSION (600px – 1180px)
      Expand outer wrappers to viewport width with 1rem gutters.
      This is the core fix — wider container means grids have room.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1024px) {
  body.nexus-page { overflow-x: hidden; }

  /* All section outer wrappers */
  body.nexus-page section > div[style*="max-width:72rem"],
  body.nexus-page section > div[style*="max-width: 72rem"] {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero, footer, stats — each has its own inline max-width:72rem div */
  #hero > div,
  #nexus-stats > div[style*="z-index:2"],
  #site-footer > div[style*="z-index:3"] {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Header inner */
  #site-header > div {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Glass panels — tighten inner horizontal padding */
  body.nexus-page section [style*="backdrop-filter:blur"],
  body.nexus-page section [style*="backdrop-filter: blur"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   2. HEADER
   ═══════════════════════════════════════════════════════════════ */

/* md + lg tablet (768–1024px): hide phone number, keep icon pill */
@media (min-width: 768px) and (max-width: 1024px) {
  #site-header > div { height: 72px !important; gap: .75rem !important; }
  .nexus-nav-menu { gap: 1.25rem !important; }
  .nexus-nav-menu a { font-size: .875rem !important; }
  /* Phone: icon-only pill */
  #header-phone {
    font-size: 0 !important;
    padding: .6rem .85rem !important;
    gap: 0 !important;
    min-width: 44px !important;
    justify-content: center !important;
  }
  #header-cta { padding: .65rem 1.25rem !important; font-size: .9rem !important; }
}

/* xl tablet (1025–1180px): show phone number, full size */
@media (min-width: 1025px) and (max-width: 1180px) and (pointer: coarse) {
  #header-phone { font-size: .95rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   3. HERO
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet portrait (600–767px): stacked column layout */
@media (min-width: 600px) and (max-width: 767px) {
  #hero { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #nexus-hero-overlay {
    width: 100% !important;
    background: linear-gradient(to bottom, rgba(4,20,12,0.75) 0%, rgba(4,20,12,0.60) 50%, rgba(4,20,12,0.25) 100%) !important;
  }
  #nexus-hero-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }
  #nexus-hero-flex > div:first-child {
    order: 1 !important;
    flex: none !important;
  }
  #nexus-hero-flex h1 { font-size: 2rem !important; }
  #nexus-hero-icons { display: flex !important; }
  #nexus-hero-body  { display: block !important; font-size: .95rem !important; }
  #nexus-hero-flex aside {
    order: 2 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 1.25rem !important;
  }
  #hero > div { padding: 2rem 1rem 2rem !important; }
}

/* md tablet portrait (768–900px): stacked, slightly larger type */
@media (min-width: 768px) and (max-width: 900px) {
  #hero { height: auto !important; min-height: 560px !important; max-height: none !important; }
  #nexus-hero-overlay {
    width: 100% !important;
    background: linear-gradient(to bottom, rgba(4,20,12,0.72) 0%, rgba(4,20,12,0.55) 60%, rgba(4,20,12,0.20) 100%) !important;
  }
  #nexus-hero-flex {
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    align-items: flex-start !important;
  }
  #nexus-hero-flex > div:first-child {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  #nexus-hero-flex h1 { font-size: 2.5rem !important; }
  #nexus-hero-icons { display: flex !important; }
  #nexus-hero-body  { display: block !important; }
  #nexus-hero-flex aside {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
    align-self: flex-start !important;
  }
  #hero > div { padding: 2.5rem 1rem 2rem !important; }
}

/* lg + xl tablet landscape (901–1180px): side-by-side, compact form */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #hero {
    height: calc(100vh - 72px) !important;
    min-height: 580px !important;
    max-height: 860px !important;
  }
  #nexus-hero-flex { gap: 1.5rem !important; align-items: center !important; }
  #nexus-hero-flex h1 { font-size: clamp(2rem, 3vw, 2.8rem) !important; }
  #nexus-hero-flex aside {
    flex: 0 0 290px !important;
    width: 290px !important;
    padding: 1.25rem !important;
    align-self: center !important;
  }
  /* Compact form fields to fit smaller card */
  #nexus-hero-flex aside input,
  #nexus-hero-flex aside select {
    padding: .5rem .75rem !important;
    margin-bottom: .45rem !important;
    font-size: .875rem !important;
    min-height: 42px !important;
  }
  #nexus-hero-flex aside button[type="submit"] {
    min-height: 46px !important;
    font-size: .95rem !important;
  }
  /* Trust logos wrap neatly in compact card */
  #hero-form-title > div:last-child {
    flex-wrap: wrap !important;
    gap: .5rem .75rem !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4. PAIN POINTS
   Breakpoint rules live in pain-points.php <style> block
   to win the specificity fight against the inline grid style.
   Only the lg/xl range is repeated here for the wider container.
   ═══════════════════════════════════════════════════════════════ */

/* lg + xl tablet (901–1180px): all 5 in one row, slightly tighter */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #nexus-pain-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: .75rem !important;
  }
  #nexus-pain-grid > div { padding: 1.25rem .625rem !important; }
  #nexus-pain-grid h3 { font-size: .875rem !important; white-space: normal !important; }
  #nexus-pain-grid p  { font-size: .75rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   5. SELLING POINTS (Legal Cancellation 4-card grid)
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): 2×2 */
@media (min-width: 600px) and (max-width: 900px) {
  #nexus-selling-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
}

/* lg + xl tablet (901–1180px): 4-col, tighter card padding */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #nexus-selling-grid { grid-template-columns: repeat(4, 1fr) !important; }
  #nexus-selling-grid > div { padding: 1.25rem .875rem !important; }
  /* Label text slightly smaller */
  #nexus-selling-grid > div > p:first-of-type { font-size: .62rem !important; }
}

/* Bottom CTA strip: stack text + button on narrow tablets */
@media (min-width: 600px) and (max-width: 860px) {
  #nexus-selling-grid + div,
  #nexus-selling-grid ~ div[style*="border-top"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .875rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   6. WHY US (3-col value props)
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet (600–767px): single col */
@media (min-width: 600px) and (max-width: 767px) {
  #nexus-why-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  #nexus-why-grid > div:nth-child(2) { margin-top: 0 !important; }
}

/* md+ tablet (768–1180px): 3-col fits, tighten padding */
@media (min-width: 768px) and (max-width: 1180px) and (pointer: coarse) {
  #nexus-why-grid { gap: 1.25rem !important; }
  #nexus-why-grid > div { padding: 0 .5rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   7. STATS BAND
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): 2-col */
@media (min-width: 600px) and (max-width: 900px) {
  #nexus-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
  #nexus-stats > div[style*="z-index:2"] { padding: 5rem 1rem !important; }
}

/* lg + xl tablet (901–1180px): 4-col, reduce number size */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #nexus-stats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1.5rem !important; }
  #nexus-stats > div[style*="z-index:2"] { padding: 6rem 1rem !important; }
  /* Slightly smaller stat numbers to fit */
  #nexus-stats-grid > div > div:nth-child(2) { font-size: 2.75rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   8. PROCESS (steps 2×2 + image)
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet (600–767px): single-col steps, image below */
@media (min-width: 600px) and (max-width: 767px) {
  #nexus-process-section [style*="flex:1 1 480px"] { padding: 1.75rem 1rem 1.5rem !important; }
  .nexus-process-2col { grid-template-columns: 1fr !important; gap: 1rem !important; }
  #nexus-process-img-col {
    flex: 0 0 100% !important;
    min-height: 280px !important;
    padding: 0 1rem 1.25rem !important;
  }
  #nexus-process-img-col img {
    height: 280px !important;
    object-fit: cover !important;
    object-position: center 15% !important;
  }
}

/* md tablet (768–900px): 2-col steps, image below — better crop */
@media (min-width: 768px) and (max-width: 900px) {
  #nexus-process-section [style*="flex:1 1 480px"] { padding: 2rem 1.25rem 1.5rem !important; min-width: 100% !important; }
  .nexus-process-2col { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  #nexus-process-img-col {
    flex: 0 0 100% !important;
    min-height: 320px !important;
    padding: 0 1rem 1.25rem !important;
  }
  #nexus-process-img-col img {
    height: 320px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }
}

/* lg + xl tablet (901–1180px): side-by-side, image column narrower */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #nexus-process-section > div > div { min-height: auto !important; }
  #nexus-process-section [style*="flex:1 1 480px"] { padding: 2rem 1.25rem 1.5rem !important; }
  #nexus-process-img-col {
    flex: 0 0 280px !important;
    padding: 1.25rem !important;
  }
  #nexus-process-img-col img {
    height: 100% !important;
    min-height: 360px !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    border-radius: .875rem !important;
  }
  .nexus-process-2col { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
}

/* Process bottom CTA strip: stack on narrow tablets */
@media (min-width: 600px) and (max-width: 860px) {
  #nexus-process-section [style*="border-top:1px solid"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .875rem !important;
  }
  #nexus-process-section [style*="border-top:1px solid"] > a {
    align-self: stretch !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   9. TESTIMONIALS
   On tablets: full-width horizontal card layout (photo left,
   quote right) — eliminates the floating orphan card problem.
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): single-col, horizontal card layout */
@media (min-width: 600px) and (max-width: 900px) {
  /* Single column, full width */
  #nexus-testi-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  /* Each card: flex row — photo left, quote right */
  #nexus-testi-grid > div {
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  /* Photo half — fixed portrait column */
  #nexus-testi-grid > div > div:first-child {
    flex: 0 0 200px !important;
    width: 200px !important;
    height: auto !important;   /* let it stretch to card height */
    min-height: 220px !important;
    overflow: hidden !important;
  }
  #nexus-testi-grid > div > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }
  /* Quote half — fills remaining width */
  #nexus-testi-grid > div > div:last-child {
    flex: 1 1 0 !important;
    padding: 1.5rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  /* Quote mark slightly smaller */
  #nexus-testi-grid > div > div:last-child > div:first-child {
    font-size: 2rem !important;
    margin-bottom: .3rem !important;
  }
  /* Trust + CTA bar: stack logos then button */
  #nexus-testi-trust-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  #nexus-trust-logos { flex-wrap: wrap !important; gap: .75rem 1.25rem !important; }
  #nexus-trust-logos > div[style*="width:1px"] { display: none !important; }
  #nexus-testi-trust-row > a {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* lg + xl tablet (901–1180px): 2×2 grid */
@media (min-width: 901px) and (max-width: 1180px) and (pointer: coarse) {
  #nexus-testi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  #nexus-testi-grid > div > div:first-child { height: 200px !important; }
  /* Trust logos: hide dividers, tighten */
  #nexus-trust-logos > div[style*="width:1px"] { display: none !important; }
  #nexus-trust-logos { gap: 1rem !important; }
  #nexus-testi-trust-row { flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; }
  #nexus-testi-trust-row > a { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
}

/* Testimonial header pill — prevent overflow on all tablets */
@media (min-width: 600px) and (max-width: 1180px) and (pointer: coarse) {
  #nexus-testimonials > div > div:first-child > div {
    padding: 1.5rem 1.25rem !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #nexus-testimonials > div > div:first-child {
    text-align: center !important;
    width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   10. FAQ (3-col: accordion | beach CTA | warning+nexus)
   ═══════════════════════════════════════════════════════════════ */

/* sm tablet (600–767px): single column, all stacked */
@media (min-width: 600px) and (max-width: 767px) {
  #nexus-faq-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  #nexus-faq > div > div { padding: 1.75rem 1rem !important; }
}

/* md tablet (768–900px): 2-col — accordion + beach CTA side by side,
   warning card full-width underneath split into 2 cols */
@media (min-width: 768px) and (max-width: 900px) {
  #nexus-faq-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  /* Beach CTA card: col 2, row 1 */
  #nexus-faq-grid > div:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  /* Right column (warning + nexus diff): spans full width below */
  #nexus-faq-grid > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  #nexus-faq > div > div { padding: 1.75rem 1.25rem !important; }
}

/* lg + xl tablet (901–1180px): full 3-col */
@media (min-width: 901px) and (max-width: 1180px) {
  #nexus-faq-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 1.25rem !important; }
  #nexus-faq > div > div { padding: 2rem 1.25rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════ */

/* sm + md tablet (600–900px): 2-col, logo spans full width */
@media (min-width: 600px) and (max-width: 900px) {
  #nexus-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 1.5rem !important;
  }
  #nexus-footer-grid > div:first-child { grid-column: 1 / -1 !important; }
  #site-footer > div[style*="z-index:3"] { padding: 5rem 1rem 2.5rem !important; }
}

/* lg + xl tablet (901–1180px): 3-col stays, tighten */
@media (min-width: 901px) and (max-width: 1180px) {
  #nexus-footer-grid { gap: 2rem !important; }
  #site-footer > div[style*="z-index:3"] { padding: 6rem 1rem 2.5rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   12. SECTION VERTICAL SPACING — tablet comfort
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1180px) {
  #nexus-process-section { padding: 1rem 0 2.5rem !important; }
  #nexus-faq             { padding: 1.5rem 0 4rem !important; }
  #nexus-testimonials    { padding: 2rem 0 3rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   13. PHONE (≤ 599px) — tighten / fix remaining issues
   ═══════════════════════════════════════════════════════════════ */

/* phablet (481–599px): same column layout as mobile but with breathing room */
@media (min-width: 481px) and (max-width: 599px) {
  #hero { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #nexus-hero-flex { flex-direction: column !important; gap: 1.25rem !important; }
  #nexus-hero-flex h1 { font-size: 2rem !important; }
  #nexus-hero-icons { display: flex !important; }
  #nexus-hero-body  { display: block !important; }
  #nexus-hero-flex aside { width: 100% !important; flex: none !important; max-width: 420px !important; margin: 0 auto !important; padding: 1.25rem !important; }
  #hero > div { padding: 1.75rem 1rem 1.75rem !important; }
  /* Pain: 2-col (all 5 cards, last one centered) */
  #nexus-pain-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Selling: 2-col */
  #nexus-selling-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Stats: 2-col */
  #nexus-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; }
}

/* small phone (≤ 380px) */
@media (max-width: 380px) {
  #hero > div { padding: .875rem .75rem 1.25rem !important; }
  #nexus-hero-flex h1 { font-size: 1.65rem !important; }
  #hero-form-title h2 { font-size: 1.05rem !important; }
  #hero-form-title { padding: 1rem !important; }
  #nexus-pain-grid { grid-template-columns: 1fr !important; }
  #nexus-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
  #nexus-stats-grid > div > div:nth-child(2) { font-size: 2.4rem !important; }
  #site-header span img { height: 36px !important; }
  #header-cta { font-size: .78rem !important; padding: .4rem .875rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   14. PHONE LANDSCAPE (short: ≤ 500px tall)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #hero { height: auto !important; min-height: 0 !important; }
  #nexus-hero-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  #nexus-hero-flex h1 { font-size: 1.6rem !important; margin-bottom: .3rem !important; }
  #nexus-hero-flex > div:first-child p,
  #nexus-hero-icons { display: none !important; }
  #nexus-hero-flex > div:first-child { flex: 1 1 0 !important; }
  #nexus-hero-flex aside {
    flex: 0 0 255px !important;
    width: 255px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: .875rem !important;
  }
  #hero > div { padding: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   15. MOBILE STICKY BAR — visible only on phones
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  #nexus-mobile-cta { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   16. HERO — DESKTOP/LAPTOP MID-WIDTH FIX (901–1200px, pointer: fine)
   The existing 901–1180px hero rules are gated behind (pointer:coarse)
   so they only fire on tablets. On a desktop/laptop in this width band
   the form stayed at its fixed 360px and overflowed the centered
   container, clipping the right edge of the card (CLAIM MY ANALYSIS /
   back buttons). This rule mirrors the tablet treatment for fine
   pointers: shrink the form to fit and keep the flex row from
   overflowing.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1200px) and (pointer: fine) {
  #nexus-hero-flex {
    gap: 1.5rem !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  #nexus-hero-flex > div:first-child { min-width: 0 !important; }
  #nexus-hero-flex aside {
    flex: 0 1 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    padding: 1.25rem !important;
    align-self: center !important;
  }
  /* Compact form controls so the smaller card stays comfortable */
  #nexus-hero-flex aside input,
  #nexus-hero-flex aside select {
    padding: .5rem .75rem !important;
    font-size: .9rem !important;
  }
  #nexus-hero-flex aside button[type="submit"] {
    font-size: .95rem !important;
    letter-spacing: .04em !important;
  }
}