/* ZOLVEX M17 — 16:9 DESKTOP BASELINE
   Primary target: desktop browser viewports around 16:9.
   Other aspect ratios remain responsive through existing breakpoints. */

/* STEP 1 — HOME FIRST VIEW: decisive 16:9 rebalance */
@media (min-width:1280px){
  body[data-zvx-area="home"] .z2-hero{
    min-height:calc(100dvh - 72px);
    padding:clamp(54px,5.8vh,76px) 0 clamp(54px,5.8vh,76px);
    display:flex;
    align-items:center;
  }
  body[data-zvx-area="home"] .z2-hero .z2-wrap{
    width:min(1440px,calc(100% - 96px));
    margin-inline:auto;
  }
  body[data-zvx-area="home"] .z2-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(480px,.70fr);
    gap:clamp(60px,4.2vw,82px);
    align-items:center;
  }
  body[data-zvx-area="home"] .z2-hero-grid>div:first-child{
    max-width:800px;
    min-width:0;
  }
  body[data-zvx-area="home"] .z2-hero .z2-h1{
    max-width:800px;
    font-size:clamp(4.25rem,4.9vw,5.85rem);
    line-height:.92;
    letter-spacing:.01em;
    text-wrap:balance;
  }
  body[data-zvx-area="home"] .z2-hero .z2-lead{
    max-width:770px;
    margin-top:25px;
    font-size:clamp(1.05rem,1.02vw,1.16rem);
    line-height:1.72;
    color:#bcc8c4;
  }
  body[data-zvx-area="home"] .z2-hero .z2-actions{
    margin-top:31px;
    gap:12px;
  }
  body[data-zvx-area="home"] .z2-hero .z2-btn{
    min-height:50px;
    padding-inline:23px;
    font-size:.84rem;
  }
  body[data-zvx-area="home"] .z2-hero-side{
    width:100%;
    max-width:560px;
    justify-self:end;
    padding:36px 36px 37px;
    border:1px solid rgba(215,235,229,.16);
    border-left:2px solid rgba(71,213,93,.58);
    background:linear-gradient(120deg,rgba(71,213,93,.055),rgba(8,15,13,.88) 46%,rgba(7,12,11,.72));
    box-shadow:0 22px 70px rgba(0,0,0,.22);
  }
  body[data-zvx-area="home"] .z2-hero-side .z2-meta{
    margin-bottom:15px;
    font-size:.86rem;
    line-height:1.45;
    letter-spacing:.07em;
    color:#8b9b96;
  }
  body[data-zvx-area="home"] .z2-hero-side strong{
    font-size:1.46rem;
    line-height:1.24;
    color:#edf5f2;
  }
  body[data-zvx-area="home"] .z2-hero-side p{
    margin-top:16px;
    font-size:1.06rem;
    line-height:1.72;
    color:#b2c0bb;
  }
  body[data-zvx-area="home"] .z2-hero-side .z2-statusline{
    margin-top:26px;
    gap:9px;
  }
  body[data-zvx-area="home"] .z2-hero-side .z2-chip{
    min-height:33px;
    padding-inline:11px;
    font-size:.80rem;
  }
}

/* Keep the existing stacked tablet/mobile composition. */
@media (max-width:1279px){
  body[data-zvx-area="home"] .z2-hero-grid{grid-template-columns:1fr}
  body[data-zvx-area="home"] .z2-hero-side{justify-self:start}
}

/* STEP 2 — SITE-WIDE 16:9 GEOMETRY
   Use more horizontal canvas on widescreen instead of compressing content into narrow columns. */
@media (min-width:1180px){
  :root{
    --z2-max:1440px;
    --max:1320px;
  }

  .z2-wrap{
    width:min(1440px,calc(100% - 96px));
    margin-inline:auto;
  }
  .wrap{
    max-width:1320px;
    padding-left:40px;
    padding-right:40px;
  }

  .z2-section{
    padding:clamp(72px,7vh,104px) 0;
  }
  section:not(.z2-section):not(.z2-hero){
    padding-top:clamp(68px,6.5vh,94px);
    padding-bottom:clamp(68px,6.5vh,94px);
  }
  .z2-pagehero{
    padding:clamp(84px,8vh,112px) 0 clamp(58px,6vh,82px);
  }
  .hero:not(.z2-hero){
    padding:clamp(82px,8vh,110px) 0 clamp(58px,6vh,82px);
  }

  .z2-split{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(72px,5.4vw,104px);
  }
  .z2-stream-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
    gap:22px;
  }
  .z2-paths,
  .z2-market-grid,
  .z2-teaser-grid,
  .z2-detail-grid{
    width:100%;
  }

  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-layout{grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)}

  .z2-pagehero .z2-lead,
  .hero:not(.z2-hero) .lead,
  .section-lead{
    max-width:940px;
  }
}

/* Strongest widescreen treatment: browser viewports around 16:9 / 16:10. */
@media (min-width:1280px) and (min-aspect-ratio:8/5){
  .z2-wrap{width:min(1440px,calc(100% - 112px))}
  .wrap{max-width:1360px;padding-left:44px;padding-right:44px}
  .z2-section{padding-top:clamp(70px,7.1vh,102px);padding-bottom:clamp(70px,7.1vh,102px)}
  .z2-pagehero{min-height:min(46vh,500px);display:flex;align-items:center}
}

/* STEP 3 — SITE-WIDE READABILITY ON WIDESCREEN
   Preserve the technical hierarchy, but supporting copy must be readable at normal viewing distance. */
@media (min-width:1180px){
  .z2-eyebrow,.z2-meta,.z2-path-num,.z2-detail .code,
  .z2-streamname,.z2-streamdetail,.z2-flow-step .n,
  .card-code,.eyebrow,.tag,.state,.timeline-date,.runtime,
  .field label,.metric span,.spec-item span,.utility-card .code,
  .level-entry label,.privacy-chip,.clock-card span,.session-badge,
  .filter-btn,.event-cat,.event-impact,.event-date,.event-times span,
  .m13-zvx-label,.m13-compare-field label,.m13-filter-label{
    font-size:max(.80rem,12.8px)!important;
  }

  .z2-copy,.z2-prose p,.z2-path p,.z2-market p,.z2-detail p,
  .z2-teaser p,.z2-stream-card p,.z2-rule span,
  .card p,.card li,.panel p,.panel li,.callout,
  .timeline-copy p,.deflist dd,.utility-card p,.session-card p,.event-card p,
  .tool-note,.tool-error,.m13-deep p,.m13-research-search .result-card p{
    font-size:max(.90rem,14.4px)!important;
    line-height:1.68;
  }

  .lead,.section-lead,.z2-lead{
    font-size:max(1.04rem,16.64px);
    line-height:1.76;
  }

  th,td{font-size:max(.86rem,13.76px)}
  .helper,.metric small,.event-times b,.countdown,.event-card a,
  .m13-fit-chip,.m13-compare-path,.m13-compare-kv,.m13-compare-remove,
  .m13-live-state,.m13-live-meta,.m13-stream-note,.m13-compare-btn,
  .m13-compare-msg,.m13-compare-empty{
    font-size:max(.82rem,13.12px)!important;
  }

  .zvx-shell-link,.zvx-shell-dropdown>summary,.zvx-shell-watch,.zvx-shell-menu-toggle,
  .zvx-shell-dropdown-panel a,.zvx-footer-brandcol p,.zvx-footer-title,
  .zvx-footer-group a,.zvx-footer-bottom{
    font-size:max(.82rem,13.12px);
  }
}

/* STEP 4 — RESPONSIVE GUARDS
   Below widescreen desktop, prioritize readability over forcing a two-column first view. */
@media (min-width:901px) and (max-width:1279px){
  body[data-zvx-area="home"] .z2-hero{
    min-height:auto;
    padding:76px 0 68px;
  }
  body[data-zvx-area="home"] .z2-hero .z2-wrap{
    width:min(900px,calc(100% - 56px));
  }
  body[data-zvx-area="home"] .z2-hero-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  body[data-zvx-area="home"] .z2-hero-side{
    width:100%;
    max-width:820px;
  }
}

@media (max-width:900px){
  .z2-wrap{width:min(var(--z2-max),calc(100% - 32px))}
}