/**
 * Experiences landing page (/experiences/ index — templates/page-experiences.html).
 *
 * Page-specific layout only: bento grid, why-us layout, and small heading
 * overrides for reused components. Reused components' own CSS (dr-exp-hero,
 * dr-benefit-card, dr-how, dr-testimonial-card, dr-faq-item, dr-cta-section)
 * stays in its existing files — not duplicated here. Tokens only, no new hex.
 */

/* ---------------------------------------------------------------------------
 * Experience categories (bento)
 * ------------------------------------------------------------------------ */

.dr-exp-bento {
	display: grid;
	gap: var(--dr-space-3);
	grid-template-columns: 1fr;
	margin-block-start: var(--dr-space-4);
}

.dr-exp-bento__card {
	aspect-ratio: 4 / 5;
	border-radius: var(--dr-radius-4);
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

@media (min-width: 64rem) {
	.dr-exp-bento {
		grid-template-areas:
			"black-car black-car van van"
			"black-car black-car e-bike jet-ski"
			"exotic-cars exotic-cars motorcycle motorcycle";
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: repeat(3, minmax(14rem, auto));
	}

	.dr-exp-bento__card {
		aspect-ratio: auto;
		height: 100%;
	}

	.dr-exp-bento__card--black-car {
		grid-area: black-car;
	}

	.dr-exp-bento__card--van {
		grid-area: van;
	}

	.dr-exp-bento__card--e-bike {
		grid-area: e-bike;
	}

	.dr-exp-bento__card--jet-ski {
		grid-area: jet-ski;
	}

	.dr-exp-bento__card--exotic-cars {
		grid-area: exotic-cars;
	}

	.dr-exp-bento__card--motorcycle {
		grid-area: motorcycle;
	}
}

.dr-exp-bento__photo {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center 18%;
	position: absolute;
	transition: transform var(--dr-duration-slow, 400ms) var(--dr-ease-standard);
	width: 100%;
}

.dr-exp-bento__card:hover .dr-exp-bento__photo {
	transform: scale(1.04);
}

.dr-exp-bento__card--black-car .dr-exp-bento__photo {
	object-fit: cover;
	object-position: center 72%;
}

.dr-exp-bento__card--e-bike .dr-exp-bento__photo {
	object-position: center 78%;
}

.dr-exp-bento__card--jet-ski .dr-exp-bento__photo {
	object-position: center 64%;
}

.dr-exp-bento__card--exotic-cars .dr-exp-bento__photo {
	object-position: center 72%;
}

.dr-exp-bento__card--motorcycle .dr-exp-bento__photo {
	object-position: center 70%;
}

/* The fleet photos behind these cards are studio product shots on a white/
 * light background (unlike the lifestyle photos used elsewhere on this
 * page), so a thin bottom-only fade leaves the upper card area with almost
 * no contrast — the title/body text was unreadable against the bright
 * vehicle photo. Strong coverage across most of the card height instead,
 * fading out only in the top quarter. */
.dr-exp-bento__veil {
	background: linear-gradient(
		0deg,
		color-mix(in srgb, var(--dr-color-ink-900) 92%, transparent) 0%,
		color-mix(in srgb, var(--dr-color-ink-900) 78%, transparent) 45%,
		color-mix(in srgb, var(--dr-color-ink-900) 35%, transparent) 70%,
		transparent 100%
	);
	inset: 0;
	position: absolute;
}

.dr-exp-bento__body {
	bottom: 0;
	left: 0;
	padding: var(--dr-space-3);
	position: absolute;
	right: 0;
}

.dr-exp-bento__eyebrow {
	color: var(--dr-color-premium);
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-bold);
	letter-spacing: var(--dr-letter-spacing-wide);
	margin: 0;
	text-transform: uppercase;
}

.dr-exp-bento__title {
	color: var(--dr-color-text-inverse);
	font-size: var(--dr-font-size-500);
	font-weight: var(--dr-font-weight-bold);
	line-height: var(--dr-line-height-heading);
	margin: var(--dr-space-1) 0 0;
}

.dr-exp-bento__text {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 85%, transparent);
	font-size: var(--dr-font-size-200);
	margin: var(--dr-space-1) 0 0;
	max-width: 26rem;
}

.dr-exp-bento__link {
	color: var(--dr-color-text-inverse);
	display: inline-block;
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-semibold);
	margin-top: var(--dr-space-2);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------------
 * What's Included
 * ------------------------------------------------------------------------ */

.dr-exp-included {
	background: var(--dr-color-bg-subtle);
}

.dr-exp-included .dr-benefit-card__icon {
	background: color-mix(in srgb, var(--dr-color-premium-strong) 10%, var(--dr-color-surface));
	border-color: color-mix(in srgb, var(--dr-color-premium-strong) 20%, transparent);
	color: var(--dr-color-premium-strong);
}

/* Single-row auto-scrolling marquee instead of a 4x2 grid — pure CSS
 * @keyframes, no JS/library. The track renders the 8 cards twice back to
 * back (see the pattern file) and only ever needs to travel exactly one
 * set's width (translateX(-50%)) before jumping back to 0%, which is what
 * makes the loop invisible/seamless. margin/padding trick lets the row
 * bleed to the true viewport edge on both sides while cards stay aligned
 * to the wide content width. Hovering pauses the animation so the copy
 * stays readable; prefers-reduced-motion disables it entirely. */
.dr-exp-included__scroll {
	margin-inline: max(calc((100vw - var(--wp--style--global--wide-size, 80rem)) / -2), calc(var(--dr-space-3) * -1));
	overflow: hidden;
	padding-block: var(--dr-space-1);
	padding-inline: max(calc((100vw - var(--wp--style--global--wide-size, 80rem)) / 2), var(--dr-space-3));
}

.dr-exp-included__track {
	align-items: stretch;
	animation: dr-exp-included-marquee 36s linear infinite;
	display: flex;
	gap: var(--dr-space-3);
	width: max-content;
}

.dr-exp-included__scroll:hover .dr-exp-included__track {
	animation-play-state: paused;
}

/* min-height instead of relying on flex stretch alone: .dr-exp-included__card
 * IS a .dr-benefit-card (not a wrapper around one), so its own height:100%
 * rule (main.css) resolves against itself and doesn't reliably equalize
 * row height on its own — description length varies from one line
 * (Premium Quality) to three (Purpose-Driven), so without this the cards
 * visibly differ in height. 26rem comfortably fits the longest card. */
.dr-exp-included__card {
	flex: 0 0 auto;
	margin: 0;
	min-height: 26rem;
	width: min(16rem, 78vw);
}

@keyframes dr-exp-included-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dr-exp-included__track {
		animation: none;
	}

	.dr-exp-included__scroll {
		overflow-x: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Why Donation Ride
 * ------------------------------------------------------------------------ */

.dr-exp-why-us {
	background: var(--dr-color-bg-subtle);
}

/* Groups & Celebrations (experiences-why-us-reverse.php) reads better on
 * plain white, breaking up the subtle-gray background repeating across
 * every other section in this stack. */
.dr-exp-why-us--white {
	background: var(--dr-color-bg);
}

.dr-exp-why-us__layout {
	align-items: center;
	display: grid;
	gap: var(--dr-space-5);
	grid-template-columns: 1fr;
}

/* WP core injects an unlayered margin-block-start on flow-layout children
 * after the first (:where(.is-layout-flow) > * { margin-block-start: 24px }).
 * That extra 24px on .dr-exp-why-us__media was exactly why the stretched
 * photo came out 24px shorter than the text column instead of matching it
 * exactly — the grid gap already owns the spacing between columns. */
.dr-exp-why-us__layout > * {
	margin-block-start: 0;
}

/* Below the 2-column breakpoint only, always stack text above the photo —
 * regardless of which one comes first in source order for a given section
 * (half of these six alternate media-first/text-first on desktop for
 * visual rhythm). Without this, two consecutive reversed sections would
 * each put their photo right before the next section's photo, putting two
 * images back to back in the mobile scroll. Desktop (>=64rem) is
 * untouched — no order rule applied there at all, so its existing
 * alternating layout can't be affected by this. */
@media (max-width: 63.9375rem) {
	.dr-exp-why-us__text {
		order: 1;
	}

	.dr-exp-why-us__media {
		order: 2;
	}
}

@media (min-width: 64rem) {
	.dr-exp-why-us__layout {
		align-items: stretch;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Grid items default to a content-based height floor, so a tall
	 * portrait photo was dictating the row's height and overflowing past
	 * the (shorter) text column on both ends. min-height: 0 removes that
	 * floor so the row's height comes from the text column only, and the
	 * photo (height: 100% below) stretches or crops to match exactly —
	 * never taller than the heading-to-button span. */
	.dr-exp-why-us__media {
		min-height: 0;
	}
}

.dr-exp-why-us__category {
	color: var(--dr-color-text-subtle);
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-medium);
	margin: var(--dr-space-1) 0 0;
}

.dr-exp-why-us__heading {
	margin-block: var(--dr-space-1) var(--dr-space-2);
}

.dr-exp-why-us__lead {
	color: var(--dr-color-text-subtle);
	font-size: var(--dr-font-size-300);
	margin: 0 0 var(--dr-space-3);
	max-width: 34rem;
}

.dr-exp-why-us__cta {
	margin-block-start: var(--dr-space-2);
}

/* Absolute positioning takes the photo out of normal flow entirely, so it
 * can never contribute its own intrinsic height back into the grid row's
 * size computation — without this, a few pixels of the tall source photo
 * still leaked into the row height (stretch alone wasn't quite exact).
 * The media column becomes the photo's sole sizing reference, and that
 * column is 100% driven by the grid row height (i.e. the text column). */
.dr-exp-why-us__media {
	position: relative;
}

.dr-exp-why-us__media img {
	border-radius: var(--dr-radius-4);
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center 18%;
	position: absolute;
	width: 100%;
}

#coastal-ebike .dr-exp-why-us__media img {
	object-position: center 74%;
}

#business-executive .dr-exp-why-us__media img {
	object-position: center 72%;
}