/* ─────────────────────────────────────────────────────────────
   NetLogik Session 3 — Homepage spacing / section rhythm cleanup
   Scope: public presentation CSS only. No backend, admin, DB or JS changes.
   Remove this file + its link from index.html to rollback this session.
   ───────────────────────────────────────────────────────────── */

:root{
  --s3-shell:1280px;
  --s3-section-gap:clamp(4.4rem,7vw,7.6rem);
  --s3-section-pad-y:clamp(5.2rem,8vw,8.4rem);
  --s3-section-pad-x:6vw;
  --s3-nav-offset:92px;
}

/* Better anchor behavior under the fixed desktop header. */
#home,
#services,
#about,
#process,
#intel,
#contact,
.cms-section{
  scroll-margin-top:var(--s3-nav-offset);
}

/* Give homepage blocks a consistent breathing rhythm without changing their order. */
.seo-foundation,
#services,
#about,
#process,
#intel,
#contact,
.cms-section{
  padding-top:var(--s3-section-pad-y) !important;
  padding-bottom:var(--s3-section-pad-y) !important;
}

/* The SEO foundation follows the ticker, so it should feel attached, not like a random duplicate hero. */
.tick-wrap + .seo-foundation{
  padding-top:clamp(3.4rem,6vw,6.2rem) !important;
}

/* Dynamic CMS sections may be mixed by the admin; keep their internal shell stable. */
.cms-section > .cms-inner,
.cms-section > .cms-cta-row,
.cms-section > .pcms-shell,
#services .svc-intro,
#services .svc-grid,
#about .ab-lay,
#process .proc-grid,
#intel .news-intro,
#intel .news-viewport,
#intel .news-controls,
#contact .ct-wrap,
.seo-foundation-inner{
  max-width:var(--s3-shell) !important;
}

/* Headings were visually strong already; this keeps their line length controlled. */
.s-ttl,
.cms-title,
.pcms-title,
.seo-foundation-title,
.ct-left h3{
  text-wrap:balance;
}

.svc-intro-r,
.cms-subtitle,
.cms-body,
.pcms-copy,
.news-intro-r,
#aboutText,
.proc-ds,
.c-vl{
  text-wrap:pretty;
}

/* Make section headers read as a consistent system across static and CMS sections. */
.s-ey,
.cms-kicker,
.pcms-kicker,
.seo-foundation-kicker,
.fm-ttl,
.c-lb{
  letter-spacing:.15em !important;
}

.s-rule{
  max-width:180px;
}

/* Desktop: reduce the “random island” feeling between CMS and static sections. */
@media(min-width:861px){
  #cmsSections + .shim{
    display:none;
  }

  .cms-section + .cms-section,
  .cms-section + #about,
  #about + #process,
  #process + #intel,
  #intel + #contact{
    margin-top:0 !important;
  }

  .cms-section::after,
  #about::after,
  #process::after,
  #intel::after,
  #contact::after{
    background-size:86px 86px !important;
  }

  .svc-grid,
  .cms-cards,
  .pcms-grid{
    gap:clamp(1rem,1.6vw,1.45rem) !important;
  }
}

/* Services cards: stable height and spacing, without touching modal/open logic. */
.svc-grid{
  align-items:stretch;
}
.svc-card{
  height:100%;
}
.svc-body{
  min-height:clamp(12.5rem,15vw,15.5rem);
}
.svc-tags{
  padding-top:.25rem;
}

/* About and process sections: align card rhythm to the service/CMS cards. */
.ab-focus-grid,
.proc-grid,
.cms-cards,
.pcms-grid{
  align-items:stretch;
}
.ab-focus-card,
.proc-step,
.cms-card,
.pcms-card{
  height:100%;
}

/* Contact: prevent the form and left info from feeling disconnected on desktop. */
.ct-wrap{
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr) !important;
}
.ct-left,
.form-box{
  min-height:100%;
}
.c-item:last-child{
  margin-bottom:0;
}

/* Footer should not visually crash into the last section. */
#contact + footer,
#contact + .shim + footer{
  border-top-color:rgba(93,239,255,.12) !important;
}
footer{
  padding-top:clamp(2rem,3vw,3rem) !important;
  padding-bottom:clamp(2rem,3vw,3rem) !important;
}

@media(max-width:860px){
  :root{
    --s3-nav-offset:82px;
    --s3-section-pad-y:clamp(4.2rem,13vw,5.6rem);
    --s3-section-pad-x:6vw;
  }

  .seo-foundation,
  #services,
  #about,
  #process,
  #intel,
  #contact,
  .cms-section{
    padding-left:var(--s3-section-pad-x) !important;
    padding-right:var(--s3-section-pad-x) !important;
  }

  .svc-body{
    min-height:0;
  }

  .ct-wrap{
    grid-template-columns:1fr !important;
  }

  footer{
    padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)) !important;
  }
}

@media(max-width:520px){
  :root{
    --s3-section-pad-y:4.15rem;
    --s3-section-pad-x:5vw;
  }

  .seo-foundation-inner,
  .svc-intro,
  .cms-inner,
  .cms-cta-row,
  .pcms-shell,
  .ab-txt,
  .ab-vis-in,
  .proc-step,
  .news-viewport,
  .ct-left,
  .form-box{
    padding:1rem !important;
  }

  .s-ey,
  .cms-kicker,
  .pcms-kicker,
  .seo-foundation-kicker,
  .fm-ttl,
  .c-lb{
    letter-spacing:.12em !important;
  }
}