/* valeriux v1.5 — cross-device layout refinements
   Scope: spacing consistency, mobile edge cases, and overlap fixes only. */

:root{
  --layout-max:1480px;
  --layout-gutter:28px;
  --section-gap:18px;
  --section-pad-x:82px;
  --section-pad-y:88px;
}

/* One desktop footprint across every page */
.nav-wrap,
main,
.site-footer,
footer{
  width:min(calc(100% - var(--layout-gutter)),var(--layout-max)) !important;
}
main{
  margin:18px auto 28px !important;
  gap:var(--section-gap) !important;
}

/* Keep the main page rhythm consistent on wide screens. */
@media (min-width:1051px){
  /* Standalone pages */
  .agents-page,
  .contact-page,
  .error-page{
    padding-left:var(--section-pad-x) !important;
    padding-right:var(--section-pad-x) !important;
  }

  /* Work / cases catalog */
  .featured,
  .visuals,
  .contact{
    padding-left:var(--section-pad-x) !important;
    padding-right:var(--section-pad-x) !important;
  }
  .case-list{
    padding-left:var(--section-pad-x) !important;
    padding-right:var(--section-pad-x) !important;
  }

  /* Product case study */
  .pad,
  .artifact,
  .solution-head,
  .hero{
    padding-left:var(--section-pad-x) !important;
    padding-right:var(--section-pad-x) !important;
  }

  /* Home: trim the excess dead space between the intro and selected work. */
  main.shell > .site-card > .hero{
    min-height:680px !important;
  }
}

/* More consistent readable text rhythm without changing hierarchy. */
p,
.body,
.hero-lead,
.timeline-intro,
.project-desc,
.section-copy{
  text-wrap:pretty;
}

/* Pipo: reserve the image's space instead of letting it sit over the headline. */
.outside .fact-pipo{
  position:relative;
}
.outside .fact-pipo.has-media .fact-content{
  width:100% !important;
  max-width:none !important;
  padding-right:164px !important;
}
.outside .fact-pipo .fact-media{
  top:28px !important;
  right:28px !important;
  transform:none !important;
}

/* Mobile refinements */
@media (max-width:760px){
  :root{
    --layout-gutter:20px;
    --section-gap:12px;
  }

  /* Home had a legacy spacer that pushed the sticky menu too far from the top. */
  body{
    padding-top:0 !important;
  }
  .nav-wrap{
    top:10px !important;
    margin-top:10px !important;
  }
  .main-nav,
  .nav-wrap .main-nav{
    min-height:68px !important;
    padding:10px 14px 10px 16px !important;
    border-radius:22px !important;
  }
  .logo img,
  .nav-wrap .logo img{
    width:142px !important;
  }
  .mobile-nav summary{
    width:46px !important;
    height:46px !important;
  }

  /* Headline safety for narrow Android devices. */
  .hero h1,
  .about-hero h1{
    overflow-wrap:normal;
    word-break:normal;
  }
  .hero h1.serif,
  .hero .serif{
    font-size:clamp(34px,10.25vw,42px) !important;
    line-height:1.03 !important;
    letter-spacing:-.035em !important;
  }

  /* Tighten long-form mobile reading slightly. */
  .hero-lead,
  .timeline-intro,
  .process-copy,
  .learning-copy,
  .outside p,
  .milestone p,
  .value-card p,
  .body,
  .project-desc{
    line-height:1.58 !important;
  }
  .hero-lead{
    font-size:18px !important;
  }

  /* Pipo image stays visible, but gets its own protected corner. */
  .outside .fact-pipo{
    min-height:230px !important;
  }
  .outside .fact-pipo.has-media .fact-content{
    padding-right:92px !important;
  }
  .outside .fact-pipo .fact-media{
    width:72px !important;
    height:72px !important;
    right:20px !important;
    top:22px !important;
  }
  .outside .fact-pipo .fact-tag{
    max-width:calc(100% - 86px) !important;
  }

  /* Compact the floating section navigator and keep it clear of browser safe areas. */
  .scroll-nav{
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    max-width:calc(100vw - 20px) !important;
    gap:6px !important;
    padding:6px 8px !important;
    border-radius:22px !important;
  }
  .scroll-nav-copy{
    min-width:86px !important;
    max-width:116px !important;
    padding-right:2px !important;
  }
  .scroll-nav-current{
    font-size:12px !important;
    line-height:1.15 !important;
  }
  .scroll-nav-next{
    display:none !important;
  }
  .scroll-nav-controls{
    gap:6px !important;
  }
  .scroll-arrow{
    width:36px !important;
    height:36px !important;
  }
  .scroll-collapse{
    width:24px !important;
    height:34px !important;
  }

  /* Keep mobile section padding / outer spacing aligned across pages. */
  .hero,
  .timeline-section,
  .values,
  .process-section,
  .learning,
  .outside,
  .cta,
  .work,
  .philosophy,
  .skills,
  .contact,
  .featured,
  .visuals,
  .agents-page,
  .contact-page,
  .error-page,
  .pad,
  .artifact,
  .solution-head{
    padding-left:24px !important;
    padding-right:24px !important;
  }
}

/* Very narrow phones: preserve hierarchy without clipping long Spanish words. */
@media (max-width:360px){
  .logo img,
  .nav-wrap .logo img{
    width:132px !important;
  }
  .hero h1.serif,
  .hero .serif{
    font-size:32px !important;
    line-height:1.04 !important;
  }
  .hero-lead{
    font-size:17px !important;
  }
  .outside .fact-pipo.has-media .fact-content{
    padding-right:82px !important;
  }
  .outside .fact-pipo .fact-media{
    width:64px !important;
    height:64px !important;
    right:18px !important;
  }
}