/* Ride card — "progressive" variant. All styles scoped under .ride-card.
 * Default state is a compact summary; the embed + gallery reveal via
 * a native <details>/<summary> toggle. No JS. */

.ride-card {
	--rc-recovery:  var(--ok, #7a9a5e);
	--rc-moderate:  #c98a3f;
	--rc-hard:      var(--accent, #d97a2c);
	--rc-very-hard: var(--ussr-red, #a23426);

	--rc-pad-x: 14px;

	display: block;
	max-width: 600px;
	margin: 20px auto;
	background: var(--bg-2);
	border: 1px solid var(--rule-strong);
	position: relative;
}

/* Header */
.ride-card__header {
	padding: 12px var(--rc-pad-x) 2px;
}
.ride-card__name {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
	font-variation-settings: "opsz" 144;
	margin: 0;
}
.ride-card__bus { font-size: 0.8em; vertical-align: baseline; }
.ride-card__tagline {
	font-family: var(--serif);
	font-style: italic;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink-2);
	margin: 2px 0 0;
}

/* Stats */
.ride-card__stats {
	padding: 6px var(--rc-pad-x) 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.ride-card__badge {
	display: inline-block;
	padding: 2px 7px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--rc-moderate);
	border-radius: 2px;
	line-height: 1.3;
}
.ride-card__badge--recovery  { background: var(--rc-recovery); }
.ride-card__badge--moderate  { background: var(--rc-moderate); }
.ride-card__badge--hard      { background: var(--rc-hard); }
.ride-card__badge--very_hard { background: var(--rc-very-hard); }

/* Description */
.ride-card__description {
	padding: 0 var(--rc-pad-x) 2px;
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}
.ride-card__description p { margin: 0 0 8px; }
.ride-card__description p:last-child { margin-bottom: 0; }

/* Toggle (<summary>) */
.ride-card__details {
	padding: 0 var(--rc-pad-x) 2px;
}
.ride-card__toggle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	padding: 4px 0;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
	list-style: none;
	user-select: none;
	transition: color 0.2s;
}
.ride-card__toggle::-webkit-details-marker { display: none; }
.ride-card__toggle::before {
	content: "▸";
	display: inline-block;
	margin-right: 7px;
	color: var(--accent);
}
.ride-card__details[open] .ride-card__toggle::before { content: "▾"; }
.ride-card__toggle:hover { color: var(--ink); }

/* Media — only visible when <details> is open */
.ride-card__media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 8px 0 6px;
}
.ride-card__embed { min-width: 0; }
.ride-card__embed .strava-embed-placeholder,
.ride-card__embed iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
}
.ride-card__embed-fallback {
	display: inline-block;
	padding: 10px 0;
	color: var(--accent);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.ride-card__gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	min-width: 0;
}
.ride-card__gallery-img { width: 100%; height: auto; display: block; }

/* Footer */
.ride-card__footer {
	padding: 8px var(--rc-pad-x) 10px;
	border-top: 1px solid var(--rule);
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 3px 14px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ride-card__link {
	color: var(--ink-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.ride-card__link:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

@media (max-width: 600px) {
	.ride-card { --rc-pad-x: 12px; margin: 16px auto; }
	.ride-card__footer { justify-content: flex-start; }
}