/* Shared "Keep learning" guide cards at the end of articles and answers
   (ui/_keep_learning.html). Selectors carry three classes so the reading
   prose rules (.rc-foundation-reader .rc-prose h2/p/ul) cannot restyle them.
   Card edges and hover come from the shared [data-card-role="link"] contract. */
.kl-cards.kl-block { container-type:inline-size; margin:32px 0 0; padding-top:24px; border-top:1px solid var(--border-hairline, #eef2f7); }
.kl-cards.kl-block .kl-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kl-cards.kl-block .kl-title { margin:0; color:var(--text, #0f172a); font-size:28px; font-weight:600; line-height:1.25; letter-spacing:-.03em; }
.kl-cards.kl-block .kl-arrows { display:flex; gap:8px; }
.kl-cards.kl-block .kl-arrows[hidden] { display:none; }
.kl-cards.kl-block .kl-arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--btn-secondary-border, var(--border-strong, #cbd5e1)); border-radius:6px; background:var(--surface, #fff); color:var(--text, #0f172a); font-size:22px; line-height:1; cursor:pointer; }
.kl-cards.kl-block .kl-arrow:is(:hover, :focus-visible):not(:disabled) { border-color:var(--interaction-ink, #7b58ea); color:var(--interaction-ink, #7b58ea); }
.kl-cards.kl-block .kl-arrow:focus-visible { outline:2px solid var(--interaction-ink, #7b58ea); outline-offset:2px; }
.kl-cards.kl-block .kl-arrow:disabled { opacity:.35; cursor:default; }
.kl-cards.kl-block .kl-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3); gap:16px; margin:16px 0 0; padding:0 0 6px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.kl-cards.kl-block .kl-track::-webkit-scrollbar { display:none; }
.kl-cards.kl-block .kl-track > li { min-width:0; margin:0; scroll-snap-align:start; }
.kl-cards.kl-block .kl-card { display:flex; flex-direction:column; height:100%; overflow:hidden; color:var(--text, #0f172a); text-decoration:none; overflow-wrap:normal; }
.kl-cards.kl-block .kl-cover { display:block; aspect-ratio:1.65; overflow:hidden; background:var(--surface-alt, #f1f5f9); }
.kl-cards.kl-block .kl-cover img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.kl-cards.kl-block .kl-copy { display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; }
.kl-cards.kl-block .kl-tag { color:var(--brand-deep-purple, #7b58ea); font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
.kl-cards.kl-block .kl-card-title { margin:0; color:var(--text, #0f172a); font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
.kl-cards.kl-block .kl-excerpt { margin:0; color:var(--text-muted, #354358); font-size:14px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kl-cards.kl-block .kl-foot { margin:14px 0 0; }
.kl-cards.kl-block .kl-all { color:var(--link-ink, #006cb4); font-size:14px; font-weight:600; text-decoration:none; }
.kl-cards.kl-block .kl-all:is(:hover, :focus-visible) { text-decoration:underline; text-underline-offset:4px; }
@container (max-width:520px) {
  .kl-cards.kl-block .kl-title { font-size:22px; }
  .kl-cards.kl-block .kl-track { grid-auto-columns:84%; gap:12px; }
}
@media (prefers-reduced-motion:reduce) { .kl-cards.kl-block .kl-track { scroll-behavior:auto; } }
@media print { .kl-cards.kl-block { display:none; } }