/* Страница «Жолдаулар» по годам (30.09.2026). Шаблон: templates/html/page/message.html.twig */
.zh{--zh-ink:#15171f;--zh-tx:#1c1d22;--zh-tx2:#5d5f6b;--zh-line:#e6e5ee;--zh-vio:#502197;--zh-vioS:#f3effb;--zh-out:cubic-bezier(.22,1,.36,1);padding-bottom:56px;color:var(--zh-tx)}
.zh *{box-sizing:border-box}
.zh .zh-h1{margin:0 0 10px;font:700 clamp(26px,3.4vw,38px)/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance;color:var(--zh-tx)}
.zh-lead{margin:0 0 22px;max-width:64ch;color:var(--zh-tx2);font-size:16px;line-height:1.55}
.zh-years{position:relative;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0;margin-bottom:12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.zh-years::-webkit-scrollbar{display:none}
.zh .zh-years a{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--zh-line);font:600 14px/1 Inter,system-ui,sans-serif;color:var(--zh-tx);text-decoration:none;font-variant-numeric:tabular-nums;transition:background-color .2s,border-color .2s,color .2s}
.zh .zh-years a:hover{border-color:var(--zh-vio);color:var(--zh-vio)}
.zh-list{list-style:none;margin:0;padding:0}
.zh-item{display:grid;grid-template-columns:88px 1fr;gap:0 24px;position:relative;scroll-margin-top:72px}
.zh-item::before{content:"";position:absolute;left:92px;top:0;bottom:0;width:2px;background:var(--zh-line)}
.zh-item::after{content:"";position:absolute;left:86px;top:30px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #c9c6d8}
.zh-item--last::after{border-color:var(--zh-vio);background:var(--zh-vio);box-shadow:0 0 0 5px rgba(80,33,151,.15)}
.zh-year{padding-top:22px;font:700 24px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:var(--zh-tx);font-variant-numeric:tabular-nums}
.zh-card{margin:10px 0 10px 12px;padding:20px 22px;border-radius:16px;border:1px solid var(--zh-line);background:#fff;transition:border-color .25s,box-shadow .25s var(--zh-out),transform .25s var(--zh-out)}
.zh-card:hover{border-color:#cfc6e6;box-shadow:0 14px 34px -18px rgba(80,33,151,.35);transform:translateY(-2px)}
.zh-item--last .zh-card{background:linear-gradient(135deg,var(--zh-vioS),#fff 60%);border-color:#d9cdf3}
.zh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:500 14px Inter,system-ui,sans-serif;color:var(--zh-tx2)}
.zh-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--zh-vio);color:#fff;font:600 12px/1.2 Inter,system-ui,sans-serif}
.zh .zh-title{margin:8px 0 6px;font:700 clamp(18px,2vw,22px)/1.3 Inter,system-ui,sans-serif;letter-spacing:-.01em;color:var(--zh-tx);text-wrap:balance}
.zh-sub{margin:0;color:var(--zh-tx2);font-size:14px;line-height:1.45}
.zh-acts{margin-top:14px}
.zh .zh-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--zh-ink);color:#fff;font:600 14px Inter,system-ui,sans-serif;text-decoration:none;transition:background-color .2s,transform .2s var(--zh-out)}
.zh .zh-btn:hover{background:var(--zh-vio);color:#fff}
.zh .zh-btn:active{transform:scale(.97)}
.zh-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zh :focus-visible{outline:2px solid var(--zh-vio);outline-offset:3px;border-radius:8px}
.zh-full{margin-top:14px;border-top:1px solid var(--zh-line);padding-top:12px}
.zh-full summary{cursor:pointer;font:600 14px Inter,system-ui,sans-serif;color:var(--zh-vio);list-style:none;display:inline-flex;align-items:center;gap:6px}
.zh-full summary::-webkit-details-marker{display:none}
.zh-full summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--zh-out)}
.zh-full[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.zh-full .page__text{margin-top:14px}
@media (max-width:600px){
  .zh-item{grid-template-columns:1fr;padding-left:22px}
  .zh-item::before{left:6px}
  .zh-item::after{left:0;top:24px}
  .zh-year{padding-top:18px;font-size:20px}
  .zh-year:empty{display:none}
  .zh-card{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.zh *{transition:none!important}}