/* LDR_FleetList */
.ldr-fleet-list { padding: 64px 0; background: var(--ldr-bg); }

.ldr-fleet-list__card {
	background: #fff;
	border-radius: var(--ldr-radius-lg);
	overflow: hidden;
	box-shadow: var(--ldr-shadow-xl);
	display: grid;
	grid-template-columns: 1fr;
}
.ldr-fleet-list__card + .ldr-fleet-list__card { margin-top: 48px; }

@media (min-width: 1024px) {
	.ldr-fleet-list__card { grid-template-columns: 1fr 1fr; }
	.ldr-fleet-list__card--reverse .ldr-fleet-list__image { order: 2; }
	.ldr-fleet-list__card--reverse .ldr-fleet-list__body  { order: 1; }
}

.ldr-fleet-list__image {
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
@media (min-width: 1024px) { .ldr-fleet-list__image { aspect-ratio: auto; } }
.ldr-fleet-list .ldr-fleet-list__image img,
.ldr-fleet-list__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}

.ldr-fleet-list__body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 1024px) { .ldr-fleet-list__body { padding: 48px; } }

.ldr-fleet-list__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ldr-fleet-list__title {
	font-family: var(--ldr-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--ldr-navy);
	margin: 0;
	line-height: 1.2;
}
@media (min-width: 640px) { .ldr-fleet-list__title { font-size: 1.875rem; } }

.ldr-fleet-list__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--ldr-lake-light);
	color: var(--ldr-lake-dark);
	padding: 4px 10px;
	border-radius: var(--ldr-radius-pill);
	font-family: var(--ldr-font-heading);
	font-weight: 600;
	font-size: 0.75rem;
}

.ldr-fleet-list__desc { color: var(--ldr-muted-fg); line-height: 1.625; margin-bottom: 24px; }
.ldr-fleet-list__desc p { margin: 0 0 0.75em; }
.ldr-fleet-list__desc p:last-child { margin-bottom: 0; }

.ldr-fleet-list__features {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	font-size: 0.875rem;
}
@media (min-width: 640px) { .ldr-fleet-list__features { grid-template-columns: repeat(2, 1fr); } }
.ldr-fleet-list__features li { display: flex; align-items: center; gap: 8px; color: var(--ldr-fg); }
.ldr-fleet-list__features svg { color: var(--ldr-lake); flex-shrink: 0; }

.ldr-fleet-list__pricing {
	background: oklch(0.96 0.008 230 / 0.5);
	border-radius: var(--ldr-radius-md);
	padding: 16px;
	margin-bottom: 24px;
}
.ldr-fleet-list__pricing-heading {
	font-family: var(--ldr-font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--ldr-navy);
	margin: 0 0 12px;
}
.ldr-fleet-list__tiers { display: flex; flex-direction: column; gap: 8px; }
.ldr-fleet-list__tier { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--ldr-fg); }
.ldr-fleet-list__tier-price { font-weight: 700; color: var(--ldr-navy); }
.ldr-fleet-list__tier--highlight .ldr-fleet-list__tier-price { color: var(--ldr-lake); }
.ldr-fleet-list__fineprint {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid oklch(0.91 0.01 230);
	font-size: 0.75rem;
	color: var(--ldr-muted-fg);
	font-style: italic;
}

.ldr-fleet-list__cta {
	align-self: flex-start;
	padding: 1rem 2rem;
	font-size: 1rem;
}
@media (max-width: 640px) { .ldr-fleet-list__cta { width: 100%; align-self: stretch; } }

/* ============================================================================
   Photo carousel (auto-rotating slider used on boat cards in the Fleet list).
   ============================================================================ */
.ldr-carousel {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ldr-radius-lg, 12px);
	background: oklch(0.92 0.01 230);
}
.ldr-carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 360px;
}
.ldr-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 700ms ease-in-out;
	pointer-events: none;
}
.ldr-carousel__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.ldr-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ldr-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 9999px;
	background: #ffffff;
	color: var(--ldr-navy, #1B2A3D);
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(27, 42, 61, 0.22), 0 2px 4px rgba(27, 42, 61, 0.12);
	transition: transform 200ms ease, background 200ms ease, color 200ms ease, box-shadow 200ms ease;
	z-index: 3;
	padding: 0;
	line-height: 0;
}
.ldr-carousel__nav svg { display: block; }
/* Explicit stroke so we don't depend on inherited `color` (some themes override
   button color to white which made the chevron invisible against white bg). */
.ldr-carousel__nav svg path {
	stroke: var(--ldr-navy, #1B2A3D) !important;
	stroke-width: 2.5px;
}
.ldr-carousel__nav:hover {
	background: var(--ldr-lake, #2A8DB5);
	color: #ffffff;
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 8px 22px rgba(42, 141, 181, 0.45), 0 2px 4px rgba(27, 42, 61, 0.15);
}
.ldr-carousel__nav:hover svg path { stroke: #ffffff !important; }
.ldr-carousel__nav:focus-visible {
	outline: 3px solid var(--ldr-lake, #2A8DB5);
	outline-offset: 2px;
}
.ldr-carousel__nav--prev { left: 14px; }
.ldr-carousel__nav--next { right: 14px; }

.ldr-carousel__dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(27, 42, 61, 0.4);
	border-radius: 9999px;
	z-index: 2;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.ldr-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: all 200ms ease;
}
.ldr-carousel__dot.is-active {
	background: #ffffff;
	width: 22px;
	border-radius: 9999px;
}

@media (max-width: 640px) {
	.ldr-carousel__nav { width: 38px; height: 38px; }
	.ldr-carousel__nav--prev { left: 10px; }
	.ldr-carousel__nav--next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.ldr-carousel__slide { transition: none; }
}
