/* M2A V8 English homepage — production overrides only.
   Scope is strictly limited to the English homepage. */

/* =========================================================
   M2A DIGITAL OS — COMPLETE ENGLISH COMMAND CENTER VIEW
   Rendered as a stable container layer for cross-browser parity.
   ========================================================= */
html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-visual{
  width:min(100%,920px) !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}

html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen{
  --m2a-os-bar-height:46px;
  position:relative !important;
  width:100% !important;
  max-width:920px !important;
  margin-inline:auto !important;
  transform:none !important;
  overflow:hidden !important;
  background:#05090b !important;
  isolation:isolate !important;
}

html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen:hover{
  transform:translateY(-4px) !important;
}

html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen-bar{
  position:relative !important;
  z-index:4 !important;
}

html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:8/5 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  opacity:0 !important;
  background:#05090b !important;
}

html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen::after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:var(--m2a-os-bar-height);
  bottom:0;
  pointer-events:none;
  background-color:#05090b;
  background-image:url("/v8/assets/images/m2a-digital-os-command-center-en.svg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
}

/* =========================================================
   ENGLISH MASTER HEADER — BALANCED THREE-ZONE LAYOUT
   Logo | evenly distributed navigation | actions
   ========================================================= */
@media (min-width:1101px){
  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .header-container{
    display:grid !important;
    width:min(1580px,calc(100% - 48px)) !important;
    max-width:none !important;
    margin-inline:auto !important;
    padding-inline:0 !important;
    grid-template-columns:minmax(210px,240px) minmax(0,1fr) minmax(210px,240px) !important;
    grid-template-areas:"brand nav actions" !important;
    align-items:center !important;
    column-gap:clamp(14px,1.4vw,24px) !important;
    direction:ltr !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .brand{
    position:static !important;
    grid-area:brand !important;
    justify-self:start !important;
    align-self:center !important;
    transform:none !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .desktop-nav{
    position:static !important;
    grid-area:nav !important;
    justify-self:center !important;
    align-self:center !important;
    display:grid !important;
    grid-template-columns:repeat(8,max-content) !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:min(100%,880px) !important;
    min-width:0 !important;
    gap:clamp(10px,1.05vw,20px) !important;
    direction:ltr !important;
    inset:auto !important;
    transform:none !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .desktop-nav a{
    min-width:0 !important;
    padding-block:8px !important;
    font-size:clamp(12.5px,.85vw,14px) !important;
    line-height:1.25 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .desktop-nav a.active{
    padding:7px 13px !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .header-actions{
    position:static !important;
    grid-area:actions !important;
    justify-self:end !important;
    align-self:center !important;
    display:flex !important;
    width:auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    direction:ltr !important;
    white-space:nowrap !important;
    inset:auto !important;
    transform:none !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .language-link,
  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .header-cta{
    flex:0 0 auto !important;
  }
}

/* Compact desktop / small laptop: keep all eight links readable without collision. */
@media (min-width:1101px) and (max-width:1240px){
  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .header-container{
    width:calc(100% - 28px) !important;
    grid-template-columns:190px minmax(0,1fr) 190px !important;
    column-gap:12px !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .desktop-nav{
    width:100% !important;
    gap:8px !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .desktop-nav a{
    font-size:11.5px !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .desktop-nav a.active{
    padding:6px 10px !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .header-actions{
    gap:8px !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .language-link,
  html[dir="ltr"] body.m2a-global-shell.english-home-page .m2a-master-header .header-cta{
    min-height:38px !important;
    padding:8px 11px !important;
    font-size:11.5px !important;
  }
}

/* Tablet/mobile keeps the proven V8 mobile shell unchanged. */
@media (max-width:1100px){
  html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen{
    --m2a-os-bar-height:40px;
    max-width:820px !important;
    transform:none !important;
  }

  html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen img{
    aspect-ratio:8/5 !important;
    object-fit:contain !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen,
  html[dir="ltr"] body.m2a-global-shell.english-home-page .digital-os-screen:hover{
    transform:none !important;
  }
}