/* Styles specific to pages/kursuebersicht.html, split out of components.css
   to keep that file under the project's 400-line limit (same pattern as
   css/legal.css for the legal/*.html pages). */

/* Individual course/group card within .course-grid (css/layout.css) */
.course-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; }

.course-card.course-ki { border-left-color: var(--orange); }

.course-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.course-category { font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-on-dark); }

.course-status { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

.status-ongoing { background: var(--teal-soft); color: #1f7d79; }

.status-upcoming { background: var(--orange-soft); color: #a85f2c; }

.course-meta { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; color: #555; }

/* Each row is its own flex-wrap line: label + value sit side by side when
   there's room, and the value drops to its own full-width line the moment
   it doesn't fit next to the label - self-adapting to the card's actual
   rendered width (280-300px in a squeezed 2-up grid, a full-width mobile
   card, etc.) instead of a single viewport breakpoint that can't tell the
   two apart. */
.course-meta > div { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }

.course-meta .k { flex: 0 0 92px; color: var(--muted-on-dark); font-size: .8rem; }

.course-meta .v { flex: 1 1 140px; min-width: 0; }

.course-date { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .88rem; background: var(--offwhite); display: flex; flex-direction: column; gap: 2px; }

.course-date .when { font-weight: 800; }

.course-date .note { color: var(--muted-on-dark); font-size: .8rem; }

/* Grow-in underline + orange on hover, matching the footer links'
   currentColor-gradient technique (css/footer.css .footer a) instead of
   the arrow-slide hover used on .compare-card/.audience-card .link. */
.course-card .link { margin-top: auto; display: inline-flex; align-items: center; width: fit-content; color: var(--charcoal); font-weight: 900; text-decoration: none; background-image: linear-gradient(currentColor,currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; padding-bottom: 2px; transition: color .2s ease, background-size .25s ease; }

.course-card .link:hover { color: var(--orange); background-size: 100% 1px; }

/* Legend explaining the ongoing/upcoming status dots */
.status-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; font-size: .88rem; color: var(--muted-on-dark); }

.status-legend .item { display: flex; align-items: center; gap: 8px; }

.status-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.status-legend .dot.ongoing { background: var(--teal); }

.status-legend .dot.upcoming { background: var(--orange); }

/* Row of buttons inside the closing .cta panel (primary action + secondary link).
   The shared .cta component (css/components.css) is only ever used elsewhere
   with a single small button, so it never needs to fight the headline for
   space. With two non-shrinking .btn pills here, the headline (no max-width
   of its own) otherwise claims the full row and squeezes .cta-buttons down
   to a column narrower than the buttons' own content - wrapping the button
   LABEL text mid-phrase instead of the pill staying one line. Giving both
   flex items an explicit basis (and letting the row wrap as a whole once
   it's genuinely too tight) fixes that without touching the shared .cta. */
.sub-cta .cta { flex-wrap: wrap; }

.sub-cta .cta > div:first-child { flex: 1 1 320px; min-width: 0; }

.cta-buttons { display: flex; flex: 0 0 auto; gap: 12px; flex-wrap: wrap; }