/* "AQW in Action" (#company-life): events, office and people. 2026-10-20
   Built by company-life.js. Dark section to sit between the light #licensing
   and the team block without another hard seam. */

#company-life{
  position:relative;isolation:isolate;
  background:
    radial-gradient(900px 520px at 85% 0%,rgba(72,149,255,.10),transparent 70%),
    radial-gradient(700px 480px at 0% 100%,rgba(73,226,205,.07),transparent 70%),
    #06121a;
}
/* Hidden proxy the v2 lightbox binds to; never rendered. */
#company-life-zoom{display:none!important}

/* ------------------------------------------------------------ stats --- */
.life-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 0 34px;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--line);
}
.life-stats>div{background:#081720;padding:20px 22px}
.life-stats dt{font-size:clamp(24px,2.3vw,32px);font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(90deg,#5ee5d6,#7ec6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.life-stats dd{margin:4px 0 0;color:#8ea6b4;font-size:13px}

/* ------------------------------------------------------------- tabs --- */
.life-tabs{display:inline-flex;gap:4px;padding:5px;margin:0 0 26px;border:1px solid var(--line);border-radius:999px;background:rgba(8,22,31,.7)}
.life-tabs button{
  border:0;background:none;color:#9fb3bf;font-weight:800;font-size:14px;
  padding:10px 20px;border-radius:999px;cursor:pointer;transition:background .25s ease,color .25s ease;
}
.life-tabs button:hover{color:#fff}
.life-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#49e2cd,#59bfff);color:#031118}
.life-panel[hidden]{display:none!important}
.life-panel:not([hidden]){animation:life-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes life-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* shared image treatment */
#company-life figure{margin:0;position:relative;overflow:hidden;border-radius:16px;background:#0b1b25}
#company-life figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
#company-life figure:hover img{transform:scale(1.04)}

/* ----------------------------------------------------------- events --- */
.life-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.life-event{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,31,42,.92),rgba(8,20,29,.96));
}
.life-event-wide{grid-column:1/-1;flex-direction:row}
.life-event-wide .life-event-media{flex:1.35;aspect-ratio:16/9}
.life-event-wide .life-event-body{flex:1;align-self:center}
.life-event-media{border-radius:0!important;aspect-ratio:4/3}
.life-badge{
  position:absolute;left:16px;top:16px;padding:6px 12px;border-radius:999px;
  background:rgba(4,12,18,.78);backdrop-filter:blur(8px);border:1px solid rgba(94,229,214,.35);
  color:#a8fff0;font-size:12px;font-weight:800;letter-spacing:.04em;
}
.life-event-body{padding:24px 26px 26px}
.life-when{margin:0 0 8px;color:#6ee6d6;font-size:13px;font-weight:700;letter-spacing:.02em}
.life-event h3{font-size:clamp(20px,1.7vw,26px);margin:0 0 10px;line-height:1.25}
.life-event-body>p:not(.life-when){color:#a9bbc5;font-size:15px;line-height:1.7;margin:0}
.life-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:18px}
.life-thumb{aspect-ratio:4/3;border-radius:12px!important}

/* ----------------------------------------------------------- office --- */
.life-office-head{max-width:760px;margin:0 0 24px}
.life-office-head h3{font-size:clamp(24px,2.2vw,34px);margin:8px 0 10px;line-height:1.2}
.life-office-head p{color:#a9bbc5;font-size:16px;line-height:1.7;margin:0}
.life-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,14vw,210px);gap:12px}
.life-tile{grid-row:span 1}
.life-tile-wide{grid-column:span 2;grid-row:span 2}
.life-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(3,10,15,.86));
  color:#e6f4f6;font-size:13px;font-weight:700;pointer-events:none;
}

/* ----------------------------------------------------------- people --- */
.life-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.life-person{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#081720;display:flex;flex-direction:column}
.life-person figure{aspect-ratio:720/1569;border-radius:0!important}
.life-person figure img{object-fit:contain}
/* Name and title are printed on the poster; keep them for screen readers
   and search, show only the focus line visually. */
.life-person-body{padding:0}
.life-person h3,.life-role,.life-sub,.life-tags{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.life-role{margin:0 0 6px;color:#6ee6d6;font-size:13px;font-weight:800}
.life-sub{margin:0 0 8px;color:#a9bbc5;font-size:13px;line-height:1.55}
.life-tags{margin:0;color:#9fb3bf;font-size:13px;line-height:1.55}

/* ------------------------------------------------------- responsive --- */
@media(max-width:1100px){
  .life-people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .life-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .life-events{grid-template-columns:1fr}
  .life-event-wide{flex-direction:column}
  .life-event-wide .life-event-media{aspect-ratio:16/9}
  .life-stats{grid-template-columns:1fr}
  .life-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
}
@media(max-width:520px){
  .life-tabs{display:flex;width:100%}
  .life-tabs button{flex:1;padding:10px 8px}
  .life-people{grid-template-columns:1fr 1fr;gap:10px}
  .life-person-body{padding:12px}
  .life-tags{font-size:12px}
  .life-mosaic{grid-auto-rows:120px;gap:8px}
  .life-tile figcaption{font-size:11px;padding:20px 10px 8px}
}

@media(prefers-reduced-motion:reduce){
  .life-panel:not([hidden]){animation:none}
  #company-life figure img{transition:none}
  #company-life figure:hover img{transform:none}
}

/* The section headline is short; let it use the full width instead of the
   split section-head column, which broke "市场" across two lines. */
#company-life .section-head{display:block;max-width:880px}
#company-life .section-head>p{max-width:720px;margin-top:6px}