/* ============================================================
   全站响应式架构层
   ------------------------------------------------------------
   原则：移动优先、内在布局、组件容器查询、可缩放触控目标。
   本文件必须在 style.css / theme.css / article.css 之后加载。
   ============================================================ */

:root{
  --layout-max:1240px;
  --page-gutter:clamp(16px,3vw,24px);
  --section-space:clamp(52px,7vw,90px);
  --grid-gap:clamp(16px,2.2vw,24px);
  --touch-target:44px;
}

html{
  overflow-x:clip;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{min-width:0;overflow-x:clip}

.container{
  width:100%;
  max-width:calc(var(--layout-max) + var(--page-gutter) + var(--page-gutter));
  margin-inline:auto;
  padding-inline:var(--page-gutter);
}

main,section,article,aside,header,footer,nav,form,
.container,.split-row,.split-text,.split-vis,.content-explorer,
.content-article-main,.rc-body,.footer-col{min-width:0}

img,picture,video,canvas,svg{max-inline-size:100%}
img,picture,video,canvas{block-size:auto}
iframe{max-inline-size:100%}
.content-sort select{min-height:var(--touch-target)}

.section{padding-block:var(--section-space)}
.section-head{margin-bottom:clamp(32px,4vw,56px)}
.page-hero{padding-block:calc(var(--header-h) + clamp(36px,5vw,64px)) clamp(54px,7vw,84px)}
.hero{min-height:100svh;min-height:100dvh}
.hero-radar{inline-size:min(52vw,620px);block-size:auto;aspect-ratio:1}

/* 内在网格：列数取决于可用空间，不依赖设备名称。 */
.biz-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:var(--grid-gap);
}
.product-grid,.news-grid,.tech-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  gap:var(--grid-gap);
}
.cap-grid,.uc-grid,.news-page-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:var(--grid-gap);
}
.resource-grid{
  container:resource-grid / inline-size;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));
  gap:var(--grid-gap);
}
.kpi-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
  gap:var(--grid-gap);
}
.steps{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
  gap:clamp(12px,1.5vw,16px);
}
.footer-cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.doctrine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:12px}

.about-grid,.contact-grid,.split-row{gap:clamp(24px,4vw,52px)}
.split-vis{min-height:clamp(260px,34vw,340px);padding:clamp(22px,4vw,34px)}
.arch-flow{padding:clamp(20px,4vw,34px) clamp(16px,3vw,26px)}

/* 组件级响应：同一组件放进侧栏、弹窗或主栏都会自行排版。 */
.content-explorer{container:content-explorer / inline-size}

@container content-explorer (inline-size < 44rem){
  .content-toolbar{grid-template-columns:minmax(0,1fr) minmax(9rem,.45fr)}
  .content-search{grid-column:1/-1}
  .content-reset{min-width:0}
  .content-filter-group{grid-template-columns:1fr;gap:6px}
  .content-filter-label{padding-top:0}
  .content-article-item{grid-template-columns:minmax(0,1fr) 36px;gap:10px}
  .content-article-date{grid-column:1/-1;padding-top:0}
  .content-article-arrow{grid-column:2;grid-row:2}
}

@container content-explorer (inline-size < 29rem){
  .content-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:9px}
  .content-sort span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .content-sort select{width:100%}
  .content-result-bar>span:last-child{display:none}
  .content-article-main h2{font-size:17px}
  .content-article-main p{-webkit-line-clamp:3}
}

@container resource-grid (inline-size < 40rem){
  .resource-card{align-items:flex-start;padding:18px;gap:14px}
  .rc-foot{align-items:flex-start}
}

/* 正文、表格、代码与超长链接在窄屏或高倍缩放下不撑破页面。 */
.article-detail{width:min(100%,868px);padding-inline:var(--page-gutter)}
.article-content{overflow-wrap:anywhere;word-break:break-word}
.article-content pre,.article-content .mermaid,.article-content .katex-display{
  max-inline-size:100%;overflow:auto;overscroll-behavior-inline:contain;
}
.article-content table{max-inline-size:100%}
.article-content img{max-inline-size:100%;height:auto}

/* 页面级断点只管理导航、主框架和阅读顺序。 */
@media (width <= 62rem){
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .split-row,.split-row.rev{flex-direction:column}
  .split-row>*{width:100%}
  .footer-inner{grid-template-columns:1fr}
}

@media (width <= 48rem){
  :root{--page-gutter:clamp(16px,4vw,22px)}
  .hero{min-height:auto;padding-block:calc(var(--header-h) + 44px) 52px}
  .hero-actions,.cta-actions{width:100%}
  .hero-actions .btn,.cta-actions .btn{flex:1 1 13rem}
  .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
  .contact-form-card{padding:clamp(18px,5vw,24px)!important}
  .form-row{grid-template-columns:1fr}
  .article-nav{grid-template-columns:1fr}
  .article-nav .an-next{text-align:left}
  .cta-inner{align-items:stretch}
  input,select,textarea{font-size:16px!important}
  .knowledge-map-head{align-items:flex-start;flex-direction:column}.knowledge-map-canvas{display:none}.knowledge-map-list{display:grid;gap:18px}.knowledge-map{border-radius:14px}
}

@media (width <= 30rem){
  :root{--page-gutter:16px}
  .page-hero h1,.hero-title{overflow-wrap:anywhere}
  .hero-actions,.cta-actions{flex-direction:column}
  .hero-actions .btn,.cta-actions .btn{width:100%;flex-basis:auto}
  .hero-stats{grid-template-columns:1fr 1fr}
  .content-explorer{padding:14px}
  .resource-card{flex-direction:column}
  .rc-top,.rc-foot{width:100%}
  .footer-cols{grid-template-columns:1fr}
  .beian-divider{display:none}
  .news-pagination{gap:6px}
  .page-btn,.page-ellipsis{min-width:var(--touch-target);height:var(--touch-target);padding-inline:9px}
}

/* 触屏设备不依赖 hover；操作目标满足舒适触控尺寸。 */
@media (hover:none),(pointer:coarse){
  .nav-link,.nav-trigger,.filter-tab,.active-filter,.content-reset,
  .btn-download,.page-btn,.back-top{min-height:var(--touch-target)}
  .biz-card:hover,.product-card:hover,.news-card:hover,.tech-card:hover,
  .resource-card:hover,.cap-card:hover,.uc-card:hover,.step:hover,
  .content-article-item:hover{transform:none}
  .bracket:hover::before,.bracket:hover::after{opacity:0}
}

/* 横屏手机优先保证正文空间，避免首屏被 Hero 占满。 */
@media (orientation:landscape) and (height < 32rem){
  .hero{min-height:auto;padding-block:calc(var(--header-h) + 28px) 36px}
  .hero-stats{margin-top:28px;padding-top:20px}
  .page-hero{padding-block:calc(var(--header-h) + 26px) 40px}
}

@supports (padding:max(0px)){
  .site-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .nav-menu{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .back-top{right:max(16px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom))}
}

@media (forced-colors:active){
  .btn,.filter-tab,.page-btn,.content-search input,.content-sort,.content-reset{border:1px solid ButtonText}
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--cyan,#38bdf8);
  outline-offset:3px;
}

@media print{
  .site-header,.cta-band,.site-footer,.back-top,.content-toolbar,.content-filter-group,
  .active-filters,.news-pagination{display:none!important}
  .page-hero{padding:24px 0;background:none;color:#000}
  .page-hero p,.breadcrumb,.breadcrumb a{color:#333}
  .section{padding:24px 0}
  a{color:inherit;text-decoration:underline}
}