/* ============================================================
   IWPurpose.com — responsive.css
   Mobile/tablet patch layer. Loaded AFTER build.css on every page.
   RULES: nothing here changes desktop (>1080px) rendering except
   the logo aspect-ratio lock, which is visually identical.
   ============================================================ */

/* ---- LOGO LOCK (all widths) ----
   Nav + footer logos may only scale proportionally: height set,
   width always auto, never stretched by flex/grid. */
#iwpNav a img{width:auto !important;max-width:none;flex-shrink:0;object-fit:contain}
footer img[alt="Investing With Purpose"]{width:auto !important;object-fit:contain}

@media (max-width:1024px){
  /* counteract build.css `footer img{height:auto}` which let the
     footer logo render at raw file size between 768–1024px */
  footer img[alt="Investing With Purpose"]{height:46px !important;max-width:100%}
  html,body{overflow-x:hidden}
}
@media (max-width:767px){
  footer img[alt="Investing With Purpose"]{height:42px !important}
}
@media (max-width:480px){
  #iwpNav a img{height:34px !important}
  footer img[alt="Investing With Purpose"]{height:38px !important}
}

/* ---- HOME HERO (deck-style full-height statement) ---- */
@media (max-width:767px){
  section:first-of-type{min-height:0 !important}
}

/* ---- PHOTO GALLERY (12-col mosaic — Purposed CARE) ---- */
@media (max-width:1024px){
  div[style*="repeat(12,1fr)"]{grid-template-columns:repeat(2,1fr) !important;grid-auto-rows:240px !important}
  div[style*="repeat(12,1fr)"] > div[style*="grid-column:span 7"],
  div[style*="repeat(12,1fr)"] > div[style*="grid-column:span 5"]{grid-column:span 2 !important}
  div[style*="repeat(12,1fr)"] > div[style*="grid-column:span 4"],
  div[style*="repeat(12,1fr)"] > div[style*="grid-column:span 6"]{grid-column:span 1 !important}
}
@media (max-width:767px){
  div[style*="repeat(12,1fr)"]{grid-template-columns:1fr !important;grid-auto-rows:260px !important}
  /* match the ≤1024 attribute-selector specificity so every tile collapses to a single column */
  div[style*="repeat(12,1fr)"] > div[style]{grid-column:1 / -1 !important}
}

/* ---- STAT / KPI / PEOPLE / IMPACT / TIMELINE BANDS
   (Fund 2026 + The Kimberly — some carry inline column counts,
   so !important is required to collapse them) ---- */
@media (max-width:980px){
  .statband{grid-template-columns:repeat(3,1fr) !important}
  .kpis{grid-template-columns:1fr 1fr !important}
  .people{grid-template-columns:1fr 1fr !important}
  .impact{grid-template-columns:1fr 1fr !important}
  .timeline{grid-template-columns:1fr 1fr !important}
  .impact > div,.timeline > div,.kpis > div{border-right:none !important;border-bottom:1px solid rgba(140,132,120,.25)}
}
@media (max-width:560px){
  .statband{grid-template-columns:1fr 1fr !important}
  .statband .n{font-size:26px !important}
  .kpis{grid-template-columns:1fr 1fr !important}
  .impact{grid-template-columns:1fr 1fr !important}
}
@media (max-width:400px){
  .statband{grid-template-columns:1fr !important}
  .statband > div{border-right:none !important}
}

/* ---- ADVISORS PAGE ---- */
@media (max-width:1080px){
  .schwab-inner{grid-template-columns:1fr !important;gap:48px !important}
  .whyus-grid{grid-template-columns:1fr !important}
  .whyus-card{border-right:0 !important;border-bottom:1px solid var(--rule,#E2DBCF)}
  .whyus-card:last-child{border-bottom:0}
  .ddq-grid{grid-template-columns:1fr !important;gap:48px !important}
  .ddq-side{position:static !important}
  .faq-grid{grid-template-columns:1fr !important;gap:0 !important}
}
@media (max-width:767px){
  /* .adv-hero prefix beats build.css's home-page `section:first-of-type>div>div{1fr!important}` bleed */
  .adv-hero .adv-terms{grid-template-columns:1fr 1fr !important;gap:26px 20px;padding-top:26px;max-width:none}
  .adv-terms .t{border-right:0 !important;padding-right:0}
  .adv-terms .n{font-size:32px}
  .compare-row > div{padding:16px 16px !important;font-size:13.5px !important}
}

/* ---- SMALL-SCREEN POLISH (≤480) ---- */
@media (max-width:480px){
  .hero-hows{gap:16px 0 !important}
  .hero-hows > div{padding-left:0 !important;padding-right:22px !important;border-right:none !important;min-width:46%}
  .chain .ln{min-width:100% !important;border-right:0 !important;border-bottom:1px solid #E2DBCF}
  .chain .ln:last-child{border-bottom:0}
  .specs .row,.ovtable .row{flex-wrap:wrap;gap:4px 18px}
  .btn,.btn-d,.btn-g{width:100%;justify-content:center}
  .backlink{margin-bottom:20px}
}

/* ============================================================
   GLOBAL MOBILE SPACING SYSTEM (SAFE LAYER)
   Does NOT affect desktop (>1080px)
   Fixes inconsistent top/bottom spacing across pages
============================================================ */

@media (max-width:1080px){

  /* 1. Normalize all section spacing */
  section{
    padding-top:72px !important;
    padding-bottom:72px !important;
  }

  /* tighter on tablets */
  section:first-of-type{
    padding-top:64px !important;
  }

  section:last-of-type{
    padding-bottom:64px !important;
  }

  /* 2. Remove accidental huge margins from builders */
  h1,h2,h3,h4{
    margin-top:0 !important;
    margin-bottom:18px !important;
  }

  p{
    margin-bottom:14px !important;
  }

  /* 3. Prevent stacked sections from feeling too loose */
  .elementor-section,
  .wp-block-group,
  .section{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /* 4. Reduce excessive container padding */
  .container,
  .container-fluid,
  .elementor-container{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  /* 5. Fix row gaps in grids globally */
  [style*="grid"]{
    row-gap:22px !important;
  }
}

@media (max-width:767px){

  /* Mobile rhythm (main improvement layer) */
  section{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  section:first-of-type{
    padding-top:48px !important;
  }

  section:last-of-type{
    padding-bottom:48px !important;
  }

  h1{
    font-size:32px !important;
    line-height:1.2 !important;
  }

  h2{
    font-size:26px !important;
    line-height:1.25 !important;
  }

  /* tighten stacked blocks */
  .statband,
  .kpis,
  .people,
  .impact,
  .timeline{
    gap:16px !important;
  }
}

@media (max-width:480px){

  section{
    padding-top:44px !important;
    padding-bottom:44px !important;
  }

  h1{
    font-size:28px !important;
  }

  h2{
    font-size:22px !important;
  }

  p{
    font-size:14.5px !important;
    line-height:1.6 !important;
  }
}