/**
 * Event Profile History Styles
 */

/* ==========================================================================
   Main Container
   ========================================================================== */

.event-profile-history {
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 20px;
}

/* ==========================================================================
   Past Events – Grid of Cards
   ========================================================================== */

.event-timeline {
	background-color: var(--gray-f8);
	padding: 20px;
	margin-top: 10px;
}

.timeline-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	align-items: start;
}

/* Timeline Card */
.timeline-card {
	background: white;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.timeline-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	transform: translateY(-3px);
}

/* Thumbnail from photorealistic PNG */
.timeline-card-image {
	background: #1a1a2e;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* NOTE: #maincol img { height: auto } (main.css) beats any class-level height
   here -> the aspect-ratio is what actually sizes the photo (card width / 2.134,
   ~98px in the 4-column grid). Heights that must win need !important. */
.card-car-photo {
	width: 100%;
	aspect-ratio: 2.134 / 1;
	object-fit: contain;
	background: white;
	background-size: 12px 12px;
}

.timeline-card-header {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	cursor: pointer;
	background: linear-gradient(135deg, var(--fsg_cyan_light) 0%, var(--fsg_blue) 100%);
	color: white;
}

.timeline-card-header:hover {
	background: linear-gradient(135deg, var(--fsg_cyan_deep) 0%, var(--fsg_blue) 100%);
}

.timeline-year {
	font-size: 1.3em;
	font-weight: 800;
	min-width: auto;
	text-align: center;
}

.timeline-summary {
	flex: 1;
	padding: 0 10px;
}

.timeline-summary h4 {
	margin: 0 0 6px 0;
	font-size: 1.1em;
	font-weight: 600;
}

.timeline-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.car-number-small {
	font-weight: 700;
	background: rgba(255, 255, 255, 0.2);
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.75em;
	white-space: nowrap;
}

/* collapsed compact card: no room for the car name next to the year */
.timeline-card:not(.expanded) .car-name-small {
	display: none;
}

.car-name-small {
	font-style: italic;
	font-size: 0.85em;
	opacity: 0.9;
}

.status-badge-small {
	padding: 3px 10px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
}

.expand-indicator {
	font-size: 1.2em;
	transition: transform 0.3s ease;
	margin-left: 8px;
}

.timeline-card.expanded .expand-indicator {
	transform: rotate(180deg);
}

/* Expanded card: break out of the compact column and span the whole grid row.
   Photo and header return to full size, Info + Engineering Design Priorities
   run full width, the spec tables (General | Powertrain | Driverless) sit
   side by side in their own columns. */
.timeline-card.expanded {
	grid-column: 1 / -1;
}

.timeline-card.expanded .card-car-photo {
	/* !important to beat #maincol img { height: auto }; keeps the full-width
	   white strip at a sane height instead of aspect-ratio * full width (~413px) */
	height: 220px !important;
}

.timeline-card.expanded .timeline-card-header {
	padding: 16px 20px;
}

.timeline-card.expanded .timeline-year {
	font-size: 2em;
	min-width: 90px;
}

.timeline-card.expanded .car-number-small {
	padding: 3px 10px;
	font-size: 0.85em;
}

.timeline-card.expanded .car-specs-section-compact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 20px;
	align-items: start;
}

.timeline-card.expanded .car-specs-section-compact > h5 {
	grid-column: 1 / -1;
}

/* Current event: the expanded past-event card, rendered permanently open.
   Only the differences carry this modifier: nothing toggles, and in light
   mode the car floats directly on the page grey instead of a white strip
   (dark mode keeps the white ground from darkmode.css - a transparent car
   render can be black and would vanish on a dark strip). */
.current-event-card {
	margin-bottom: 10px;
}

.current-event-card .timeline-card-image,
.current-event-card .timeline-card-header {
	cursor: default;
}

/* no hover lift either - the card is a static block, nothing to click open */
.current-event-card:hover {
	box-shadow: none;
	transform: none;
}

.current-event-card .timeline-card-header:hover {
	background: linear-gradient(135deg, var(--fsg_cyan_light) 0%, var(--fsg_blue) 100%);
}

.current-event-card .timeline-card-image {
	background: var(--gray-f8, #f8f8f8);
}

/* Bigger render that deliberately overlaps the blue header bar: the wheels
   sink a few px into the bar so the car "stands" on it. margin-bottom pulls
   the header up (the PNG frame carries ~10px transparent margin at this
   height, so the visible overlap is ~14px); z-index paints the car above
   the bar, overflow:visible on the strip stops the clip. */
.current-event-card .timeline-card-image {
	overflow: visible;
}

/* 300px tall at the full 912px card width, scaling proportionally below that
   (aspect-ratio instead of a fixed height). !important + the extra .expanded
   class are needed to beat the 220px !important of the generic expanded card.
   The overlap is a width percentage for the same reason - it shrinks with
   the card. */
.timeline-card.expanded.current-event-card .card-car-photo {
	background: transparent;
	height: auto !important;
	aspect-ratio: 912 / 300;
	margin-bottom: -4.2%;
	object-position: 90% center;
	position: relative;
	z-index: 1;
}

/* Card Content: hidden by default, shown when parent has .expanded */
.timeline-card-content {
	padding: 20px;
	background: white;
	flex: 1;
	display: none;
}

.timeline-card.expanded .timeline-card-content {
	display: block;
}

.magazine-section-compact {
	background: white;
	padding: 16px;
	margin-bottom: 15px;
}

.magazine-section-compact h5 {
	color: #2c3e50;
	font-size: 1.3em;
	margin: 0 0 10px 0;
	border-bottom: 2px solid #3498db;
	padding-bottom: 6px;
}

/* Info heading with right-aligned media-server images link; the blue underline
   moves from the h5 onto the row so the link sits on the same line */
.info-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 2px solid #3498db;
	margin-bottom: 10px;
}

.info-heading-row h5 {
	border-bottom: none;
	margin: 0;
}

.media-images-link {
	font-size: 0.9em;
	font-weight: 600;
	white-space: nowrap;
}

.magazine-text-compact {
	font-size: 0.95em;
	line-height: 1.6;
	color: #34495e;
}

.keywords-section-compact {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #ecf0f1;
	font-size: 0.9em;
}

.keywords-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.keyword-tag-small {
	display: inline-block;
	background-color: #3498db;
	color: white;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.82em;
	font-weight: 600;
	margin: 2px;
}

.no-magazine-info {
	color: #7f8c8d;
	font-style: italic;
	padding: 15px;
	text-align: center;
}

/* Car Specs – Compact */
.car-specs-section-compact {
	background: white;
	padding: 16px;
	border-radius: 6px;
	margin-bottom: 15px;
}

/* identical to the Info heading (.magazine-section-compact h5) on request */
.car-specs-section-compact h5 {
	color: #2c3e50;
	font-size: 1.3em;
	margin: 0 0 10px 0;
	border-bottom: 2px solid #3498db;
	padding-bottom: 6px;
}

.specs-collapsible {
	margin-bottom: 10px;
	border: 1px solid #ecf0f1;
	border-radius: 4px;
	overflow: hidden;
}

.specs-collapsible summary {
	padding: 10px 12px;
	background-color: #f5f7fa;
	cursor: pointer;
	font-weight: 600;
	color: #34495e;
}

.specs-collapsible summary:hover { background-color: #e9ecef; }

.specs-table-compact { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.specs-table-compact tr { border-bottom: 1px solid #ecf0f1; }
.specs-table-compact th { text-align: left; padding: 8px 10px; font-weight: 600; color: #2c3e50; width: 45%; background-color: #f8f9fa; }
.specs-table-compact td { padding: 8px 10px; color: #34495e; }

/* Upload compact */
.upload-section-compact {
	background: white;
	padding: 12px 16px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.download-button-small {
	background-color: #27ae60;
	color: white;
	padding: 7px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.download-button-small:hover { background-color: #229954; }
.upload-date-small { color: #7f8c8d; font-size: 0.82em; }

/* Empty states */
.no-current-event,
.no-past-events {
	text-align: center;
	padding: 40px;
	color: #7f8c8d;
	font-size: 1.1em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* timeline-grid: no override — auto-fill/minmax(200px) reflows to
   2 columns on tablets and 1 column on phones by itself */

@media (max-width: 600px) {
	.timeline-card-header { flex-wrap: wrap; }
	.timeline-card.expanded .timeline-year { font-size: 1.6em; min-width: auto; }

	.upload-section-compact { flex-direction: column; text-align: center; }
}

/* TIS sticker strip (inline, responsive - replaces the old fixed iframe embed).
   flex-wrap lets the stickers reflow on narrow screens instead of overflowing.
   The two brake halves (M | EBS) live in one span so they stay flush. */
.tis-stickers { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; max-width: 100%; }
.tis-stickers > span { display: inline-flex; }
.tis-stickers img { display: block; }
.tis-stickers img.inact { filter: grayscale(1); }
/* dark mode dims all images (brightness), cancelling the grayscale on inactive
   stickers -> re-apply grayscale so they stay grey rather than coloured */
html[data-theme="dark"] .tis-stickers img.inact { filter: grayscale(1) brightness(0.88) !important; }