﻿/* Homepage PAI logo motion. */
.home-hero{position:relative}
.home-hero .hero-grid{position:static}
.home-hero .hero-art{visibility:hidden}
.home-hero .hero-art.pai-logo-motion-host{
  position:absolute;
  left:50%;
  top:62px;
  right:auto;
  bottom:auto;
  width:190px;
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateX(-50%);
  opacity:1;
  pointer-events:none;
  z-index:1;
  transition:opacity .7s ease;
}
.home-hero .hero-art.pai-logo-motion-host.pai-logo-motion-ready{visibility:visible}
.home-hero .pai-logo-motion{display:block;width:100%;height:100%}
.home-hero .hero-art.pai-logo-motion-host.pai-logo-motion-exit{opacity:0}
.home-hero .hero-art.pai-logo-motion-host.pai-logo-motion-hidden{visibility:hidden}
@media(min-width:769px){.home-hero .hero-art.pai-logo-motion-host{left:70%;top:54px;width:200px;height:200px}}
@media(max-width:768px){.home-hero .hero-art.pai-logo-motion-host{top:34px;width:160px;height:160px}}
@media(max-width:390px){.home-hero .hero-art.pai-logo-motion-host{top:30px;width:150px;height:150px}}

/* Desktop editorial layout: concentrated reading widths, wider visual/research sections. */
@media(min-width:1100px){
  .site-header .container,
  .site-footer .container{max-width:1120px}

  /* Header reads as one left-anchored system instead of two distant islands. */
  .site-header .nav{justify-content:flex-start;gap:0}
  .site-header .nav-links{margin-left:58px}

  /* Hero text and animated mark share one local composition. */
  .home-hero{padding-top:64px;padding-bottom:70px}
  .home-hero>.container{max-width:1060px}
  .home-hero .hero-grid{
    position:relative;
    grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);
    gap:52px;
  }
  .home-hero .hero-art.pai-logo-motion-host{
    left:auto;
    right:190px;
    top:calc(34% - 10px);
    width:224px;
    height:224px;
    transform:translateY(-50%);
  }

  /* Use width according to content type rather than one universal desktop canvas. */
  .home-hero~.section>.container{max-width:1000px}
  .home-hero~.section:has(.challenge-grid)>.container{max-width:1020px}
  .home-hero~.section:has(.research-grid)>.container{max-width:1100px}
  .home-hero~.section:has(.numbers)>.container{max-width:860px}
  .home-hero~.section:has(.partner-grid)>.container{max-width:980px}
  .home-hero~.section:has(.home-achievement-stories)>.container{max-width:1100px}
  .selected-updates>.container{max-width:960px}
  .home-media-section>.container{max-width:960px}

  /* Desktop type should read as an editorial site, not a scaled-down mobile page. */
  .home-hero~.section .title-section{font-size:38px!important;line-height:1.15!important}
  .home-hero~.section .eyebrow,
  .home-hero~.join .eyebrow{font-size:11px!important;letter-spacing:.145em!important}
  .home-hero~.section .title-item{font-size:19px!important;line-height:1.38!important}
  .home-hero~.section .research-title.title-feature{font-size:23px!important;line-height:1.28!important}
  .home-hero~.section :is(.challenge p,.research p,.partner p,.update-item p){font-size:16.5px;line-height:1.72}
  .home-hero~.section .text-link{font-size:14.5px}
  .home-hero~.section .media-title{font-size:15px;line-height:1.55}
  .home-hero~.section .media-meta{font-size:12px}

  /* Collaboration network: a little denser and stronger inside the same 2x2 frame. */
  .home-hero~.section:has(.partner-grid) .partner{padding-top:25px;padding-bottom:27px}
  .home-hero~.section:has(.partner-grid) .partner h3{font-size:20px!important;margin-bottom:12px}
  .home-hero~.section:has(.partner-grid) .partner p{font-size:16.5px;line-height:1.66}

  /* Reduce generic vertical drift after narrowing the content canvas. */
  .home-hero~.section:has(.challenge-grid){padding-top:110px;padding-bottom:110px}
  .home-hero~.section:has(.research-grid){padding-top:110px;padding-bottom:112px}
  .home-hero~.section:has(.numbers){padding-top:90px;padding-bottom:92px}
  .home-hero~.section:has(.partner-grid){padding-top:96px;padding-bottom:98px}
  .home-hero~.section:has(.home-achievement-stories){padding-top:118px;padding-bottom:116px}
  .selected-updates{padding-top:106px;padding-bottom:106px}
  .home-media-section{padding-top:82px;padding-bottom:78px}

  /* The two compact information tables need a little more typographic presence. */
  .selected-updates .update-item h3{font-size:18.5px!important}
  .selected-updates .update-item p{font-size:15.5px;line-height:1.62}
  .home-media-section .media-list{line-height:1.5}
}

/* Deploy sync: Chinese homepage copy update. */

@media(min-width:769px){
  /* Native image ratios share one height (up to 165px), shrinking together on narrow desktops. */
  .home-achievement-stories{
    grid-template-columns:minmax(0,1.80961357fr) minmax(0,2.40903388fr) minmax(0,2.09150327fr);
    max-width:1077.18px;
    margin-inline:auto;
    gap:18px;
    justify-content:center;
    align-items:start;
  }
  .home-achievement-story{height:auto;width:100%}
  .home-achievement-story>a{height:auto;display:block;width:100%}
  .home-achievement-story img,
  .home-achievement-story:nth-child(3) img{
    display:block;
    width:100%!important;
    height:auto!important;
    max-width:none;
    margin:0;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .home-achievement-story figcaption{min-height:0}

}