/* Topic pages + /topics/ index. Reference: ui_kits/blog/TopicScreen.jsx, HomeScreen.jsx (TopicTile) */

/* ---------- Hero ---------- */
.topic{padding-bottom:var(--space-8)}
.topic__hero{padding:72px 0 0;display:grid;gap:40px}
.topics-switcher{gap:8px}
.topics-switcher .tag--active{color:var(--fg-1);background:var(--metal-face);box-shadow:0 0 14px -6px rgba(168,132,255,.7);position:relative}
.topics-switcher .tag--active::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--rim);background:conic-gradient(from var(--rd-angle),#ffffff,#8b8e96 12%,#3D6BFF 20%,#2c2e33 30%,#e6e7ea 42%,#A884FF 52%,#5b5e66 60%,#F08A4B 70%,#ffffff 80%,#2c2e33 90%,#ffffff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.topic__intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.topic__intro{display:grid;gap:24px}
.topic__eyebrow{color:var(--topic-text,var(--accent))}
.topic__title{margin:0;font:var(--fw-display) 80px/.96 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1);text-wrap:balance}
.topic__body{display:grid;gap:16px;max-width:560px}
.topic__body>p{margin:0;font:400 17px/1.6 var(--font-sans);color:var(--fg-3);text-wrap:pretty}
.topic__body>p:first-child{font:var(--type-lead);color:var(--fg-2)}
.topic__body script,.topic__body .kg-card:has(script[data-topic-path]){display:none}
.topic__graphic{margin:0;display:grid;gap:12px;border-radius:20px}
.topic__graphic .glow__inner{border-radius:20px;padding:0}
.topic__graphic img{width:100%;display:block;border-radius:20px}
.topic__graphic figcaption{text-align:center}

/* ---------- Path ---------- */
.topic__path{margin-top:112px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:start}
.topic__anchor{position:sticky;top:100px;display:grid;gap:18px}
.topic-anchor__inner{display:grid}
.topic-anchor__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:var(--img-hero);border-radius:24px 24px 0 0}
.topic-anchor__body{display:grid;gap:12px;padding:28px 32px 32px}
.topic-anchor__role{color:var(--topic-text,var(--accent))}
.topic-anchor__title{margin:0;font:var(--fw-display) 36px/1.04 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1);text-wrap:balance}
.topic-anchor__summary{margin:0;font-size:16px;line-height:1.55;color:var(--fg-3);text-wrap:pretty}
.topic-anchor__meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;flex-wrap:wrap}
.topic-anchor{position:relative}
.topic-anchor .btn{position:relative;z-index:2;pointer-events:none}
.topic__steps-head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}
.topic__list{list-style:none;margin:0;padding:0}
.topic-step{position:relative}
.topic-step__link{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:clamp(16px,3vw,28px);padding:28px 0 36px;text-decoration:none;align-items:start;color:inherit}
.topic-step:not(:last-child)::after{content:"";position:absolute;left:27px;top:72px;bottom:-28px;width:1px;background:linear-gradient(180deg,var(--border-strong),var(--border-subtle))}
.topic-step__num{width:56px;height:56px;border-radius:50%;background:var(--metal-face);display:grid;place-items:center;font:500 13px/1 var(--font-mono);letter-spacing:.08em;color:var(--fg-3);transition:color var(--dur-base) var(--ease-out)}
.topic-step__body{display:grid;gap:10px;min-width:0}
.topic-step__title{font:var(--fw-display) clamp(22px,3vw,28px)/1.12 var(--font-display);letter-spacing:var(--tracking-heading);color:var(--fg-1);text-wrap:balance}
.topic-step__summary{max-width:620px;font-size:16px;line-height:1.55;color:var(--fg-3);text-wrap:pretty}
.topic-step__date{margin-top:4px}
.topic-step__arrow{align-self:center;--icon:20px;color:var(--fg-4);transition:transform var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.topic-step__link:hover .topic-step__num{color:var(--fg-1)}
.topic-step__link:hover .topic-step__arrow{color:var(--glow-a,var(--accent));transform:translateX(4px)}
.topic__empty{margin:24px 0 0;color:var(--fg-3)}

/* ---------- Next topic ---------- */
.topic__next{margin-top:96px;padding-top:40px;border-top:1px solid var(--border-subtle)}
.topic__next-link{display:flex;justify-content:space-between;align-items:center;gap:24px;text-decoration:none;flex-wrap:wrap}
.topic__next-link:not(:first-child){display:none}
.topic__next-copy{display:grid;gap:10px}
.topic__next-title{font:var(--fw-display) 36px/1 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1)}

/* ---------- Tiles (index + Home) ---------- */
.topics-index__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.topics-index__grid>.visually-hidden{position:absolute}
.topics-index__lead p{margin:0}
.topic-tile{height:100%}
.topic-tile__inner{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;height:100%;padding:32px}
.topic-tile__eyebrow{color:var(--topic-text,var(--accent))}
.topic-tile__title{margin:0;font:var(--fw-display) clamp(26px,2.6vw,34px)/1.02 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1);text-wrap:balance;overflow-wrap:anywhere}
.topic-tile__list{margin:0;padding:0;list-style:none;display:grid;gap:10px;align-content:start;counter-reset:tile}
.topic-tile__list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;counter-increment:tile}
.topic-tile__n{font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--fg-4)}
.topic-tile__n::before{content:counter(tile,decimal-leading-zero)}
.topic-tile__post{font-size:15px;line-height:1.4;color:var(--fg-3)}
.topic-tile__list li:first-child .topic-tile__post{color:var(--fg-1)}
.topic-tile__cta{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border-subtle);font-size:14px;font-weight:var(--fw-medium);color:var(--fg-2);transition:color var(--dur-base) var(--ease-out)}
.topic-tile__cta .icon{--icon:18px;transition:transform var(--dur-base) var(--ease-out)}
.topic-tile:hover .topic-tile__cta{color:var(--topic-text,var(--fg-1))}
.topic-tile:hover .topic-tile__cta .icon{stroke:url(#chrome-stroke);transform:translateX(4px)}

/* ---------- Breakpoints ---------- */
@media (max-width:1100px){
  .topic__intro-grid,.topic__path{grid-template-columns:minmax(0,1fr);gap:48px}
  .topic__anchor{position:static}
  .topics-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .topic__hero{padding-top:56px;gap:28px}
  .topic__title{font-size:clamp(44px,13vw,60px);line-height:.98}
  .topic__path{margin-top:72px}
  .topic-anchor__body{padding:20px}
  .topic-anchor__title{font-size:clamp(30px,8.5vw,40px)}
  .topic__next{margin-top:72px}
  .topics-index__grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .topic-step__link:hover .topic-step__arrow{transform:none!important}
}