/* kern-it.be 2026 : tools page, on top of home26.css (scoped under .h26.tl). Same layout as magnet.kern-it.be/tools. */

.h26.tl .hero h1 { margin-top: var(--space-m); }
.h26.tl .hero h1 .big { max-width: 16ch; }

/* ---------- "where to start" : the dark card of the home hero, used as a routing table ---------- */
.h26.tl .tl-start { background: var(--ink-2); color: #DDDBF0; border-radius: var(--radius); padding: var(--space-l) var(--space-m) var(--space-m); box-shadow: 0 30px 60px -30px rgba(36, 36, 60, .5); }
.h26.tl .tl-start h2 { font-size: var(--step-1); color: #fff; letter-spacing: -0.02em; line-height: 1.2; padding-inline: var(--space-xs); }
.h26.tl .tl-start ul { margin-top: var(--space-m); display: grid; gap: .35rem; }
.h26.tl .tl-start a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem var(--space-s); align-items: center; padding: var(--space-s) var(--space-xs); border-top: 1px solid var(--line-dark); border-radius: 10px; text-decoration: none; transition: background .25s var(--ease); }
.h26.tl .tl-start li:first-child a { border-top-color: transparent; }
.h26.tl .tl-start a:hover { background: rgba(255, 255, 255, .06); color: inherit; }
.h26.tl .tl-start .when { font-size: var(--step--1); color: #A8A8F0; }
.h26.tl .tl-start .what { grid-column: 1; font: 600 1rem/1.3 var(--display); letter-spacing: -0.01em; color: #fff; }
.h26.tl .tl-start .go { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background .25s var(--ease), transform .25s var(--ease); }
.h26.tl .tl-start a:hover .go { background: var(--accent); transform: translateX(3px); }

/* ---------- catalogue ---------- */
.h26.tl .tl-catalogue { padding-block: var(--space-xl) var(--space-2xl); }
.h26.tl .tl-catalogue .section-head { margin-bottom: var(--space-l); }
.h26.tl .tl-catalogue .section-head h2 { margin-top: 0; }
.h26.tl .tl-catalogue .section-head p { max-width: 40ch; font-size: var(--step-0); }
.h26.tl .tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.h26.tl .tl-grid li { display: flex; }

.h26.tl .tl-card { flex: 1; display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-m); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.h26.tl .tl-card:hover { color: var(--ink); transform: translateY(-3px); border-color: rgba(96, 96, 240, .45); box-shadow: 0 24px 48px -28px rgba(36, 36, 60, .35); }
.h26.tl .tl-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.h26.tl .glyph { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--lavande); color: var(--accent-deep); }
.h26.tl .glyph svg { width: 26px; height: 26px; }
.h26.tl .tag { font: 600 .78rem/1 var(--text); letter-spacing: .02em; padding: .45rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.h26.tl .tl-body { flex: 1; display: grid; align-content: start; gap: var(--space-xs); }
.h26.tl .theme { font: 500 var(--step--1)/1.3 var(--text); color: var(--accent-deep); }
.h26.tl .tl-card h3 { font-size: var(--step-1); }
.h26.tl .tl-card p { font-size: .95rem; line-height: 1.55; color: var(--muted); }
.h26.tl .tl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-top: var(--space-s); border-top: 1px solid var(--line); }
.h26.tl .meta { font: 500 var(--step--1)/1.3 var(--text); color: var(--muted); font-variant-numeric: tabular-nums; }
.h26.tl .open { display: inline-flex; align-items: center; gap: .4rem; font: 600 var(--step--1)/1 var(--display); color: var(--ink-2); }
.h26.tl .open::after { content: '\2192'; transition: transform .25s var(--ease); }
.h26.tl .tl-card:hover .open { color: var(--accent-deep); }
.h26.tl .tl-card:hover .open::after { transform: translateX(4px); }

/* the PDF guide stands out : dark card, same footprint */
.h26.tl .tl-card.is-guide { background: var(--ink-2); border-color: var(--ink-2); color: #DDDBF0; }
.h26.tl .tl-card.is-guide:hover { border-color: var(--accent); color: #DDDBF0; }
.h26.tl .is-guide .glyph { background: rgba(255, 255, 255, .08); color: #fff; }
.h26.tl .is-guide .tag { border-color: var(--line-dark); color: #DDDBF0; }
.h26.tl .is-guide .theme { color: #A8A8F0; }
.h26.tl .is-guide h3 { color: #fff; }
.h26.tl .is-guide p, .h26.tl .is-guide .meta { color: #B9B7D2; }
.h26.tl .is-guide .tl-foot { border-top-color: var(--line-dark); }
.h26.tl .is-guide .open, .h26.tl .tl-card.is-guide:hover .open { color: #fff; }

.h26.tl .tl-note { margin-top: var(--space-l); font-size: var(--step--1); color: var(--muted); }
.h26.tl .tl-note a { color: var(--accent-deep); }

@media (max-width: 1100px) {
  .h26.tl .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .h26.tl .tl-grid { grid-template-columns: 1fr; }
}