/* AXION Portfolio V2 — mobile responsive architecture
   Loaded after axion.css. This file owns phone/tablet geometry and deliberately
   overrides inherited desktop/inline layout rules without changing content. */

@media (max-width:1199px){
  html,body,.page-wrap{max-width:100%}
  body{overflow-x:clip!important}

  .navbar.glass-nav{
    width:calc(100% - 16px)!important;
    max-width:calc(100% - 16px)!important;
    border-radius:24px!important;
  }
  .navbar .brand{min-width:0;flex:0 1 auto}
  .navbar .brand img{height:38px!important;max-width:120px!important}
  .navbar .nav-tools{
    width:100%!important;
    min-width:0!important;
    margin-inline:0!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
  }
  #langBar{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain}
}

@media (max-width:900px){
  :root{--safe-x:clamp(16px,4vw,28px)}

  .section{
    width:100%;
    max-width:100%;
    padding:32px var(--safe-x) 48px!important;
  }

  .grid-12{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:20px!important;
  }
  .grid-12>[class*="col-"]{
    grid-column:1/-1!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .cover-split{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-height:0!important;
  }
  .cover-left{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:28px var(--safe-x)!important;
  }
  .cover-right{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:260px!important;
    aspect-ratio:16/9;
  }

  .hero-media{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .hero-media[style*="height"]{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/10;
  }
  #cover .hero-media{aspect-ratio:16/9}
  .roadmap-static{height:auto!important;min-height:0!important;aspect-ratio:16/10}

  .four-cards,
  .hub-grid,
  .sustain-cards,
  .office-grid,
  .leadership-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }

  /* Inline two-column content cards inherited from the legacy template. */
  .card.glass-card[style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Global Trade KPI row has no reusable class in the inherited template. */
  #trade .col-6:first-child > div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .card,.glass-card,.office-card,.leader,.leader>div{min-width:0!important;max-width:100%!important}
  .leader{grid-column:auto!important}

  .contact-strip{max-width:100%;flex-wrap:wrap!important}
  .contact-strip a{max-width:100%!important;overflow-wrap:anywhere}

  .hero-title{
    max-width:100%!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  .section h2,.section h3,.section h4,.lede,.fine,.role,p,li{max-width:100%}

  .footer{width:100%;padding:28px var(--safe-x)!important}
}

@media (max-width:620px){
  .section{padding:28px var(--safe-x) 42px!important}

  .four-cards,
  .hub-grid,
  .sustain-cards,
  .office-grid,
  .leadership-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Keep compact KPI tiles usable on ordinary phones. */
  #trade .col-6:first-child > div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .cover-left .brand{
    width:100%!important;
    max-width:100%!important;
    padding:10px 12px!important;
    gap:8px!important;
    align-items:flex-start!important;
  }
  .cover-left .brand img{height:64px!important;max-width:180px!important}
  .cover-left .brand span{
    font-size:1rem!important;
    letter-spacing:.10em!important;
    overflow-wrap:break-word!important;
  }

  .hero-title{
    font-size:clamp(2.15rem,9.5vw,3rem)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }
  .section h2,.section h2.thesis{
    font-size:clamp(1.75rem,8vw,2.4rem)!important;
    line-height:1.08!important;
  }

  .card{padding:18px!important}
  .office-card{padding:20px!important}

  .leader{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
  }
  .leader img{width:88px!important;height:88px!important}

  .hero-media[style*="height"]{aspect-ratio:16/10}
  #cover .hero-media{min-height:220px!important;aspect-ratio:16/9}

  .navbar.glass-nav{padding:8px 10px!important;row-gap:8px!important}
  .navbar .nav-tools{gap:6px!important}
  .lang-link{padding:5px 8px!important;font-size:.68rem!important}
}

@media (max-width:420px){
  :root{--safe-x:14px}

  .navbar.glass-nav{
    width:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;
    border-radius:20px!important;
    margin-top:8px!important;
  }
  .navbar .brand img{height:34px!important;max-width:105px!important}
  .menu-toggle{padding:7px 10px!important;font-size:.70rem!important}
  #themeToggle{width:34px!important;height:34px!important;flex:0 0 34px!important}

  .contact-strip{flex-direction:column!important;align-items:stretch!important}
  .contact-strip a{width:100%!important;text-align:center}

  #trade .col-6:first-child > div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .hero-title{font-size:clamp(2rem,9vw,2.55rem)!important}
  .section h2,.section h2.thesis{font-size:clamp(1.65rem,7.5vw,2.15rem)!important}
}

@media (orientation:landscape) and (max-width:900px) and (max-height:500px){
  .cover-right{min-height:210px!important}
  .hero-media[style*="height"]{aspect-ratio:16/9}
}