/*
 * Insighterz responsive stabilization layer.
 * Loaded after all design styles so layout corrections remain predictable.
 */

/* Grid children must be allowed to shrink instead of forcing overflow. */
:where(
  .hero-copy,.hero-visual,.intro-grid>*,.section-head>*,.featured-project>*,.project-grid>*,
  .principles-grid>*,.numbers-grid>*,.testimonial-grid>*,.insight-grid>*,.footer-top>*,
  .inner-hero>*,.service-card-grid>*,.case-grid>*,.industry-grid>*,.feature-grid>*,
  .usecase-grid>*,.editorial-grid>*,.contact-layout>*,.form-row>*,.form-hero-grid>*,
  .consult-grid>*,.exp-head>*,.exp-split>*,.exp-grid-2>*,.exp-grid-3>*,.exp-grid-4>*,
  .dashboard-grid>*,.process-map>*,.route-grid>*,.result-strip>*,.lifecycle-track>*,
  .autonomy-scale>*,.agenda-grid>*,.checklist-grid>*,.compact-link-grid>*
){min-width:0}

:where(
  .service-card-large,.case-card,.industry-card,.editorial-card,.feature-grid article,
  .usecase-grid article,.exp-cell,.route-card,.process-map article,.lifecycle-track article,
  .autonomy-scale article,.agenda-grid article,.checklist-grid article,.insight-card,.project-card
){overflow-wrap:anywhere;word-break:normal}

/* Consistent content flow inside cards. */
:where(.service-card-large,.industry-card,.editorial-card,.exp-cell,.route-card,.insight-card){height:100%}
:where(.service-card-large p,.industry-card p,.editorial-card p,.exp-cell p,.route-card p,.insight-card p){max-width:68ch}

/* Large desktop / laptop: stop 4–6 column systems becoming cramped. */
@media (max-width:1280px) and (min-width:781px){
  :root{--pad:clamp(30px,4vw,52px)}
  .feature-grid.four,.exp-grid-4,.process-map,.lifecycle-track,.autonomy-scale,.agenda-grid,.result-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tech-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .system-node::after{display:none}
  .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbers-grid article:nth-child(2){border-right:0}
  .numbers-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .project-visual-main{min-height:520px}
}

/* Common 1366/1440 laptop viewport: preserve breathing room around long cards. */
@media (max-width:1180px) and (min-width:781px){
  .editorial-grid,.exp-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card-grid,.industry-grid,.case-grid{gap:12px}
  .service-card-large,.industry-card,.editorial-card{min-height:auto}
  .exp-cell,.route-card{min-height:auto}
  .evidence-row{grid-template-columns:170px minmax(0,1fr) minmax(0,1fr)}
  .compact-link-grid a{grid-template-columns:minmax(160px,.8fr) minmax(0,1.2fr) 22px}
}

/* Tablet landscape: use two columns only where content density supports it. */
@media (max-width:1024px) and (min-width:781px){
  .service-card-grid,.industry-grid,.editorial-grid,.feature-grid.three,.usecase-grid,.exp-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-flow,.tech-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featured-project{grid-template-columns:1fr}
  .project-content{padding-right:0}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-contact{grid-column:1/-1}
}

/* Phones: one-column flow, no squeezed cards, sensible media heights. */
@media (max-width:780px){
  .section-pad{width:min(calc(100% - 40px),var(--max))}
  .service-card-grid,.case-grid,.industry-grid,.editorial-grid,.feature-grid.three,.feature-grid.four,
  .usecase-grid,.exp-grid-2,.exp-grid-3,.exp-grid-4,.route-grid,.result-strip,.process-map,
  .lifecycle-track,.autonomy-scale,.agenda-grid,.checklist-grid,.compact-link-grid,
  .tech-rail,.system-flow{grid-template-columns:1fr}
  .service-card-large,.industry-card,.editorial-card,.exp-cell,.route-card{min-height:auto}
  .project-visual-main,.project-card .project-visual,.case-image{min-height:0;height:clamp(250px,72vw,360px)}
  .visual-frame,.art-frame{height:clamp(390px,112vw,500px)}
  .evidence-row{grid-template-columns:1fr}
  .compact-link-grid a{grid-template-columns:1fr 22px}
  .compact-link-grid span{grid-column:1}
  .decision-matrix{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .matrix-row{min-width:680px}
}

/* Very small phones. */
@media (max-width:420px){
  .section-pad{width:min(calc(100% - 32px),var(--max))}
  .site-header{padding-inline:16px}
  .brand,.brand img{width:142px}
  .btn{max-width:100%}
  .hero-actions,.contact-actions{width:100%}
  .hero-actions .btn,.contact-actions .btn{flex:1 1 auto}
}