/* ==========================================================================
   半岛体育中心 · 共享样式 /assets/site.css
   负责：reset、变量、中文排版、页头、页脚、通用按钮与基础组件
   ========================================================================== */

:root{
  /* 色彩 */
  --ink:#0C2E22;
  --ink-deep:#061913;
  --pitch:#17513E;
  --signal:#35F0C8;
  --teal:#0E7C63;
  --amber:#FF7A2F;
  --amber-deep:#B84A0F;
  --paper:#F2F4F1;
  --rule:#C7CEC9;
  --text:#101614;
  --mist:#DDFBF3;
  --muted:#5C6A64;

  /* 字体 */
  --font-sans:"Noto Sans SC","Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 字阶 76 / 48 / 32 / 20 / 16 / 13 */
  --fs-display:clamp(2.6rem,7vw,4.75rem);
  --fs-h1:clamp(2rem,5vw,3rem);
  --fs-h2:clamp(1.5rem,3.2vw,2rem);
  --fs-h3:1.25rem;
  --fs-body:1rem;
  --fs-small:.8125rem;

  /* 度量 */
  --gutter:clamp(1rem,4vw,2.5rem);
  --shell:1240px;
  --header-h:74px;
  --r-sm:10px;
  --r-md:18px;
  --r-lg:30px;
  --r-pill:999px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ---------- 焦点与动效偏好 ---------- */
:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- 通用容器与排版 ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.shell--narrow{max-width:880px}

#main-content{scroll-margin-top:calc(var(--header-h) + 14px)}

.stack{display:flex;flex-direction:column;gap:var(--stack-gap,1rem)}

.rule-line{
  height:1px;
  border:0;
  background:var(--rule);
  margin-block:clamp(1.5rem,4vw,2.5rem);
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:-120px;
  left:var(--gutter);
  z-index:140;
  padding:.6rem 1.15rem;
  border-radius:var(--r-pill);
  background:var(--signal);
  color:var(--ink-deep);
  font-weight:700;
  font-size:var(--fs-small);
  transition:top .18s ease;
}

.skip-link:focus{top:10px}

/* ==========================================================================
   页头
   ========================================================================== */
.md-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid rgba(53,240,200,.18);
}

.md-header__inner{
  display:flex;
  align-items:center;
  gap:clamp(.6rem,1.8vw,1.6rem);
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
}

.md-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex:0 0 auto;
  white-space:nowrap;
}

.md-brand__mark{
  width:12px;height:12px;
  flex:0 0 auto;
  border-radius:3px;
  background:var(--signal);
  transform:rotate(45deg);
  box-shadow:0 0 0 4px rgba(53,240,200,.14);
}

.md-brand__text{
  font-weight:900;
  font-size:1.0625rem;
  letter-spacing:-.02em;
  color:#fff;
}

.md-brand__sub{
  padding-left:.6rem;
  border-left:1px solid rgba(53,240,200,.32);
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  color:rgba(242,244,241,.52);
}

.md-header__rule{
  flex:1 1 auto;
  min-width:16px;
  height:1px;
  background:linear-gradient(90deg,rgba(53,240,200,.55),rgba(53,240,200,.06));
}

/* 主导航 */
.md-nav{flex:0 0 auto}

.md-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(.1rem,1.2vw,.9rem);
}

.md-nav__item{position:relative}

.md-nav__link{
  position:relative;
  display:inline-block;
  padding:.55rem .5rem;
  border-radius:var(--r-pill);
  font-size:.9375rem;
  font-weight:700;
  color:rgba(242,244,241,.78);
  transition:color .18s ease;
}

.md-nav__link::after{
  content:"";
  position:absolute;
  left:.5rem;right:.5rem;bottom:.18rem;
  height:2px;
  border-radius:2px;
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}

.md-nav__link:hover{color:#fff}
.md-nav__link:hover::after{transform:scaleX(1)}
.md-nav__link[aria-current="page"]{color:var(--signal)}
.md-nav__link[aria-current="page"]::after{transform:scaleX(1)}

/* 行动按钮 */
.md-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem 1.1rem;
  border-radius:var(--r-pill);
  background:var(--signal);
  color:var(--ink-deep);
  font-weight:900;
  font-size:var(--fs-small);
  letter-spacing:.01em;
  transition:transform .18s ease,background-color .18s ease;
}

.md-cta::after{
  content:"→";
  font-family:var(--font-mono);
  font-size:.8rem;
}

.md-cta:hover{background:#7FF7DD;transform:translateY(-1px)}

/* 移动导航按钮 */
.md-nav-toggle{
  display:none;
  align-items:center;
  gap:.5rem;
  flex:0 0 auto;
  padding:.5rem .85rem;
  border:1px solid rgba(53,240,200,.35);
  border-radius:var(--r-pill);
  color:var(--paper);
  font-size:var(--fs-small);
  font-weight:700;
}

.md-nav-toggle__bars{
  position:relative;
  display:block;
  width:18px;height:10px;
  flex:0 0 auto;
}

.md-nav-toggle__bars::before,
.md-nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease,top .2s ease,bottom .2s ease;
}

.md-nav-toggle__bars::before{top:0}
.md-nav-toggle__bars::after{bottom:0}

.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bars::before{top:4px;transform:rotate(45deg)}
.md-nav-toggle[aria-expanded="true"] .md-nav-toggle__bars::after{bottom:4px;transform:rotate(-45deg)}

/* 阅读进度 */
.md-progress{
  position:absolute;
  left:0;bottom:-1px;
  width:100%;height:2px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--signal),var(--amber));
  transition:transform .1s linear;
}

html[data-nav-locked]{overflow:hidden}

/* ==========================================================================
   侧边悬浮比赛日切换器
   ========================================================================== */
.md-switcher{
  position:fixed;
  right:clamp(.7rem,2vw,1.5rem);
  top:50%;
  transform:translateY(-50%);
  z-index:75;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  padding:.9rem .5rem;
  border:1px solid rgba(53,240,200,.22);
  border-radius:var(--r-pill);
  background:rgba(6,25,19,.86);
  backdrop-filter:blur(6px);
  transition:opacity .2s ease,visibility .2s ease;
}

html[data-nav-locked] .md-switcher{opacity:0;visibility:hidden}

.md-switcher__label{
  writing-mode:vertical-rl;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.22em;
  color:rgba(53,240,200,.78);
}

.md-switcher__pills{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.md-switcher__pill{
  padding:.45rem .6rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap;
  color:rgba(242,244,241,.72);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

.md-switcher__pill:hover{color:#fff;border-color:rgba(53,240,200,.45)}
.md-switcher__pill[aria-pressed="true"]{background:var(--signal);color:var(--ink-deep)}

/* 比赛日内容面板 */
.md-day-track{position:relative;overflow:hidden}

.md-day-panel.is-day-in{animation:md-day-in .22s ease both}

@keyframes md-day-in{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   页脚
   ========================================================================== */
.md-footer{
  position:relative;
  margin-top:clamp(3rem,8vw,6rem);
  background:var(--ink-deep);
  color:rgba(242,244,241,.82);
}

.md-footer__stripes{
  height:12px;
  background:repeating-linear-gradient(90deg,var(--pitch) 0 44px,var(--ink-deep) 44px 88px);
  border-bottom:1px solid rgba(53,240,200,.14);
}

.md-footer__inner{
  display:grid;
  grid-template-columns:minmax(200px,1fr) 2fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(2.5rem,6vw,4rem) var(--gutter) 2rem;
}

.md-footer__brand{min-width:0}

.md-footer__name{
  display:inline-block;
  font-weight:900;
  font-size:1.5rem;
  letter-spacing:-.02em;
  color:#fff;
}

.md-footer__name:hover{color:var(--signal)}

.md-footer__tag{
  margin-top:.45rem;
  font-size:var(--fs-small);
  line-height:1.7;
  color:rgba(242,244,241,.58);
}

.md-footer__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,3vw,2rem);
}

.md-footer__title{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--signal);
}

.md-footer__list{
  display:grid;
  gap:.5rem;
  margin-top:.95rem;
}

.md-footer__list a{
  font-size:.9375rem;
  color:rgba(242,244,241,.78);
  transition:color .18s ease;
}

.md-footer__list a:hover{color:var(--signal)}

.md-footer__meta{
  display:grid;
  gap:.6rem;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding:1.6rem var(--gutter) clamp(2rem,5vw,3rem);
  border-top:1px solid rgba(199,206,201,.16);
}

.md-footer__contact{
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  line-height:1.9;
  color:rgba(242,244,241,.66);
  word-break:break-word;
}

.md-footer__community{
  font-size:.875rem;
  line-height:1.8;
  color:rgba(242,244,241,.68);
}

.md-footer__community::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  margin-right:.5rem;
  border-radius:50%;
  background:var(--amber);
  vertical-align:middle;
}

.md-footer__legal{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.06em;
  color:rgba(242,244,241,.45);
}

/* ==========================================================================
   通用内容组件
   ========================================================================== */

/* 面包屑 */
.crumb{padding-top:clamp(1rem,3vw,1.75rem)}

.crumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  letter-spacing:.04em;
  color:var(--teal);
}

.crumb__item{display:inline-flex;align-items:center;gap:.5rem}

.crumb__item + .crumb__item::before{
  content:"/";
  color:var(--rule);
}

.crumb__link{
  color:var(--teal);
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}

.crumb__link:hover{border-bottom-color:currentColor}

.crumb__item[aria-current="page"]{
  color:var(--text);
  font-weight:700;
}

/* 按钮 */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.78rem 1.4rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:.9375rem;
  line-height:1;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}

.btn:hover{transform:translateY(-2px)}

.btn--signal{background:var(--signal);color:var(--ink-deep)}
.btn--signal:hover{background:#7FF7DD}

.btn--ghost{border-color:var(--rule);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal)}

/* 胶囊标签 */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.26rem .72rem;
  border-radius:var(--r-pill);
  background:var(--mist);
  color:var(--teal);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}

.chip--amber{background:rgba(255,122,47,.15);color:var(--amber-deep)}
.chip--dark{background:rgba(53,240,200,.14);color:var(--signal)}

/* 栅格 */
.grid{display:grid;gap:clamp(1.25rem,3vw,2.25rem)}

.grid--5-7{grid-template-columns:5fr 7fr}
.grid--4-8{grid-template-columns:4fr 8fr}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* 面板 */
.panel{
  position:relative;
  padding:clamp(1.25rem,3vw,1.9rem);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  background:#fff;
}

.panel__eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--teal);
}

.panel__title{
  margin-top:.4rem;
  font-size:var(--fs-h3);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.4;
}

/* 数据块 */
.stat{display:grid;gap:.25rem;align-content:start}

.stat__value{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(2.5rem,5vw,3rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink);
}

.stat__value--signal{color:var(--teal)}
.stat__value--amber{color:var(--amber)}

.stat__label{
  font-size:var(--fs-small);
  letter-spacing:.04em;
  color:var(--muted);
}

/* 图片容器（页面阶段放入 <img class="media-frame__img">） */
.media-frame{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(53,240,200,.18);
  border-radius:var(--r-md);
  background:
    repeating-linear-gradient(115deg,rgba(53,240,200,.06) 0 2px,transparent 2px 26px),
    linear-gradient(150deg,var(--pitch),var(--ink-deep));
}

.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(6,25,19,.55),transparent 58%);
}

.media-frame--wide{aspect-ratio:16/9}
.media-frame--square{aspect-ratio:1/1}
.media-frame--portrait{aspect-ratio:3/4}
.media-frame--tall{aspect-ratio:4/5}

.media-frame__img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-frame__cap{
  position:absolute;
  left:.75rem;right:.75rem;bottom:.75rem;
  z-index:2;
  padding:.35rem .75rem;
  border-radius:var(--r-pill);
  background:rgba(6,25,19,.74);
  color:rgba(242,244,241,.88);
  font-size:.75rem;
  line-height:1.5;
}

/* 进入视口显现 */
html[data-js] [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}

html[data-js] [data-reveal].is-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  html[data-js] [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1080px){
  .md-brand__sub{display:none}
  .md-nav__list{gap:.1rem}
  .md-nav__link{padding:.5rem .45rem;font-size:.875rem}
}

@media (max-width:1100px){
  .md-switcher{
    top:auto;
    bottom:1rem;
    right:auto;
    left:50%;
    transform:translateX(-50%);
    flex-direction:row;
    align-items:center;
    padding:.45rem .6rem;
  }

  .md-switcher__label{writing-mode:horizontal-tb;letter-spacing:.14em}

  .md-switcher__pills{flex-direction:row}
}

@media (max-width:900px){
  :root{--header-h:64px}

  .md-header__rule{display:none}
  .md-nav-toggle{display:inline-flex}

  .md-nav{
    position:fixed;
    left:0;right:0;
    top:var(--header-h);
    bottom:0;
    z-index:70;
    padding:1.25rem var(--gutter) 3rem;
    overflow-y:auto;
    background:var(--ink);
    border-top:1px solid rgba(53,240,200,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }

  .md-nav[data-open]{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .md-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
  }

  .md-nav__link{
    display:block;
    padding:.95rem .25rem;
    border-bottom:1px solid rgba(53,240,200,.12);
    border-radius:0;
    font-size:1.25rem;
    font-weight:900;
  }

  .md-nav__link::after{display:none}

  .md-nav__link[aria-current="page"]{padding-left:1.15rem}

  .md-nav__link[aria-current="page"]::before{
    content:"";
    position:absolute;
    left:0;top:50%;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--signal);
    transform:translateY(-50%);
  }

  .grid--5-7,
  .grid--4-8{grid-template-columns:1fr}

  .md-footer__inner{grid-template-columns:1fr}
}

@media (max-width:640px){
  .md-cta{display:none}
  .md-nav-toggle__label{display:none}
  .md-footer__cols{grid-template-columns:1fr 1fr}
  .btn{width:100%;justify-content:center}
}

@media (max-width:420px){
  .md-footer__cols{grid-template-columns:1fr}
}