/* ========================================================================================
 * timeline-tabs.css - .timeline-tabs, its tab list and crossfading media (L2 layer).
 * Ported from the homepage COURSES section's inline tablist pattern (docs/design-source/
 * homepage-template.html, search 'role="tablist" aria-label="Course timeline"'): a bar of
 * title-only tabs, a text panel that swaps, and a stack of
 * absolutely-positioned background photos crossfaded by opacity.
 *
 * site.js's initTimelineTabs() toggles [aria-selected]/[data-active] and, below 900px,
 * this file itself falls back to a stacked list (every panel visible, tabs hidden) so
 * no-JS and small screens both show real content instead of a broken tab strip.
 * ======================================================================================== */

/* The tab strip reads as tabs, not a row of labels (owner, 2026-09-28): course titles only, as
   rounded buttons in one bar, the active one filled with the brand dark green. Each course's
   date, place and format live in its panel's eyebrow instead. */
.timeline-tabs__list{
	display:flex;flex-wrap:wrap;gap:var(--cd-2);margin:0;padding:var(--cd-2);list-style:none;
	background:var(--cd-ground-raised);border:1px solid var(--cd-line);border-radius:var(--cd-r-lg);
	box-shadow:var(--cd-shadow-1);
}
.timeline-tabs__tab{
	all:unset;box-sizing:border-box;flex:1 1 auto;cursor:pointer;text-align:center;
	padding:var(--cd-3) var(--cd-4);border-radius:var(--cd-r-md);
	font-weight:700;color:var(--cd-ink-strong);
	transition:background-color .25s ease,color .25s ease;
}
.timeline-tabs__tab:hover{background:var(--cd-ground-tint)}
.timeline-tabs__tab[aria-selected="true"]{background:var(--cd-ground-deep);color:var(--cd-white)}
.timeline-tabs__tab:focus-visible{box-shadow:var(--cd-ring)}

.timeline-tabs__panels{
	display:grid;gap:var(--cd-6);margin-top:var(--cd-6);align-items:stretch;
	grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));
}
.timeline-tabs__panel{display:none;flex-direction:column;gap:var(--cd-4);justify-content:center;min-height:420px}
.timeline-tabs__panel[data-active]{display:flex}
/* The course name heads each panel's copy at every width (owner, 2026-09-28: the panel had
   room for it above the description, even with the tab strip naming it too). */
.timeline-tabs__panel-title{font-size:var(--cd-h3)}

.timeline-tabs__media{position:relative;min-height:420px;border-radius:var(--cd-r-lg);overflow:hidden;box-shadow:var(--cd-shadow-2)}
.timeline-tabs__bg{
	position:absolute;inset:0;background-size:cover;background-position:center;
	background-image:var(--bg, linear-gradient(135deg,var(--cd-teal-300),var(--cd-teal-700)));
	opacity:0;transition:opacity .6s ease;
}
.timeline-tabs__bg[data-active]{opacity:1}
.timeline-tabs__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--cd-ground-deeper) 72%,transparent) 0%,color-mix(in srgb,var(--cd-ground-deeper) 0%,transparent) 45%)}
.timeline-tabs__bg-caption{
	position:absolute;left:var(--cd-5);bottom:var(--cd-5);z-index:1;max-width:calc(100% - 2 * var(--cd-5));
	padding:var(--cd-1) var(--cd-3);border-radius:var(--cd-r-sm);
	background:var(--cd-ground-deep);color:var(--cd-white);font-weight:700;font-size:var(--cd-small);
}

/* below 900px: no room for a synced tab strip + crossfading media stack, so show every
   text panel as a plain stacked list instead (the shared .timeline-tabs__media block, one
   layer per tab, has no single-column layout that makes sense here, so it is hidden and
   each panel's own text carries the content). */
@media (max-width:899px){
	.timeline-tabs__list{display:none}
	.timeline-tabs__panel{display:flex !important;min-height:0}
	.timeline-tabs__panel + .timeline-tabs__panel{margin-top:var(--cd-6);padding-top:var(--cd-6);border-top:1px solid var(--cd-line)}
	.timeline-tabs__media{display:none}
}

/* --- .timeline-tabs--guide: the course guide on Upcoming Courses (template-parts/
 * course-guide.php variant="guide"). No photo column, so each panel spans the full width
 * and splits into the course facts (lede, best for, format, buttons) and a "what you'll
 * learn" card. Below 900px it falls back to the stacked list like every timeline-tabs. */
.timeline-tabs--guide .timeline-tabs__panels{grid-template-columns:minmax(0,1fr)}
.timeline-tabs--guide .timeline-tabs__panel{min-height:0;justify-content:flex-start}
.course-guide{display:grid;gap:var(--cd-6);grid-template-columns:minmax(0,1fr);align-items:start}
.course-guide__about{display:flex;flex-direction:column;gap:var(--cd-4)}
.course-guide__facts{display:flex;flex-direction:column;gap:var(--cd-3);margin:0}
.course-guide__facts dt{font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cd-ink-accent)}
.course-guide__facts dd{margin:var(--cd-1) 0 0;color:var(--cd-ink)}
.course-guide__learn{gap:var(--cd-2)}
.course-guide__learn .card__list + .card__eyebrow{margin-top:var(--cd-4)}
@media (min-width:900px){
	.course-guide{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--cd-8)}
}