/* ═══════════════════════════════════════════════════════════
   AEROVANIA — Courses page: "Choose your certification track"
   Option A from _preview/track-options.html (picked 2026-10-14):
   both tracks side by side as cards, RPAS II highlighted.
   Uses only the site's existing --fx-* colours and fonts.
   Linked after refine.css on courses.html only.
   ═══════════════════════════════════════════════════════════ */

/* section head: label, heading and intro in one block */
.tk-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 16px 48px; align-items: end; margin-bottom: 36px; }
.tk-head .fx-kicker { grid-column: 1 / -1; }
body .fx .tk-head h2 { font: 600 clamp(32px, 4vw, 52px)/1.05 var(--fx-sans) !important; letter-spacing: -.035em; }
.tk-head h2 span { color: var(--fx-cyan); }
.tk-head p { color: var(--fx-tx); font-size: 16px; line-height: 1.6; }
@media (max-width: 820px) { .tk-head { grid-template-columns: 1fr; } }

/* hours split into theory / simulator / flight */
.tk-split { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 99px; background: var(--fx-line); }
.tk-split i { display: block; height: 100%; }
.tk-split .t { background: var(--fx-cyan); }
.tk-split .s { background: var(--fx-violet); }
.tk-split .f { background: var(--fx-orange); }
.tk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font: 400 14.5px/1.3 var(--fx-sans); color: var(--fx-tx); }
.tk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tk-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.tk-legend b { font-weight: 600; color: var(--fx-ink); }

/* the two track cards */
.tkA { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.tkA-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--fx-line); border-radius: 14px; background: var(--fx-solid); box-shadow: 0 1px 2px rgba(7, 17, 31, .06); }
.tkA-card.pop {
  border-color: color-mix(in srgb, var(--fx-cyan) 55%, var(--fx-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-cyan) 35%, transparent), 0 10px 30px -18px rgba(7, 17, 31, .35);
}
html[data-theme="dark"] .tkA-card:not(.pop) { box-shadow: none; }
.tkA-media { position: relative; aspect-ratio: 16 / 8; margin: 0; overflow: hidden; background: var(--fx-bg2); }
.tkA-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tkA-media .fx-tag { position: absolute; top: 14px; left: 14px; background: var(--fx-solid); }
.tkA-body { display: flex; flex-direction: column; gap: 20px; padding: 26px 28px 28px; }
.tkA-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
body .fx .tkA-title h3 { font: 600 30px/1.1 var(--fx-sans) !important; letter-spacing: -.03em; }
.tkA-title span { font-size: 15px; color: var(--fx-mut); white-space: nowrap; }
.tkA-body > p { font-size: 15.5px; line-height: 1.6; color: var(--fx-tx); }
.tkA-facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); }
.tkA-facts div { padding: 14px 0; }
.tkA-facts div + div { padding-left: 20px; border-left: 1px solid var(--fx-line); }
.tkA-facts strong { display: block; font: 600 30px/1 var(--fx-sans); letter-spacing: -.03em; color: var(--fx-ink); }
.tkA-facts span { display: block; margin-top: 6px; font-size: 14px; color: var(--fx-mut); }

/* modules fold open */
.tkA details { border-radius: 10px; background: color-mix(in srgb, var(--fx-cyan) 5%, var(--fx-solid)); }
.tkA summary { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; cursor: pointer; list-style: none; border-radius: 10px; font: 600 15px/1.3 var(--fx-sans); color: var(--fx-ink); }
.tkA summary::-webkit-details-marker { display: none; }
.tkA summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--fx-cyan); transition: transform .2s; }
.tkA details[open] summary::after { transform: rotate(45deg); }
.tkA summary:focus-visible { outline: 2px solid var(--fx-cyan); outline-offset: 2px; }
.tkA details ol { margin: 0; padding: 0 16px 14px; list-style: none; counter-reset: m; }
.tkA details li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--fx-line); font-size: 14.5px; color: var(--fx-tx); counter-increment: m; }
.tkA details li::before { content: counter(m); min-width: 14px; font-weight: 600; color: var(--fx-cyan); }

.tkA .fx-actions { margin-top: 0; }
.tkA .fx-btn { width: 100%; justify-content: center; }
.tk-foot-note { margin-top: 22px; font-size: 14px; color: var(--fx-mut); }

@media (max-width: 820px) { .tkA { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tkA summary::after { transition: none; } }