/**
 * Homepage (front-page.php) styles — Corsica content in the new design.
 * Theme-only. (Search uses the v2 component styled by homepage-v2.css.)
 */

/* Hero headline a touch smaller */
.dma-hero .display { font-size: clamp(40px, 5vw, 70px) !important; line-height: 1.04; }
.dma-hero .lede { max-width: 46ch; }

/* =============================================================================
   V2 SEARCH COMPONENT
   Extracted from homepage-v2.css and DE-SCOPED from `body.home-v2` so it works
   on front-page.php without that body class (which would hijack .container +
   apply a base-body rule). Markup ported from template-homepage-v2.php; behaviour
   driven by homepage-v2.js ([data-v2-dd] dropdowns, initialised globally). All
   colour/type tokens (--ivory, --gold-deep, --serif, etc.) are global :root vars
   in style.css.
   ========================================================================== */

.v2-search {
	background: var(--ivory);
	padding: 88px 32px 80px;
	position: relative;
}
.v2-search__panel {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.v2-search__eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold-text);
	margin-bottom: 14px;
}
.v2-search__heading {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(32px, 3.4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--txt);
	margin-bottom: 38px;
}
.v2-search__heading em {
	font-style: italic;
	color: var(--gold-text);
}

.v2-search__form {
	display: grid;
	grid-template-columns: 1fr 1px 1fr auto;
	align-items: stretch;
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid rgba(20,32,46,0.08);
	border-radius: 999px;
	padding: 8px 8px 8px 32px;
	box-shadow: 0 24px 60px -20px rgba(20,32,46,0.18), 0 2px 6px rgba(20,32,46,0.04);
	transition: box-shadow .25s ease;
}
.v2-search__form:focus-within {
	box-shadow: 0 30px 70px -20px rgba(20,32,46,0.28), 0 2px 6px rgba(20,32,46,0.06);
}

.v2-search__field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 14px 44px 14px 8px;
	text-align: left;
	cursor: pointer;
	border-radius: 999px;
	transition: background .2s ease;
	outline: none;
}
.v2-search__field:hover,
.v2-search__field:focus,
.v2-search__field.is-open {
	background: rgba(20,32,46,0.04);
}
.v2-search__field:nth-of-type(2) {
	padding-left: 32px;
}
.v2-search__label {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--txt-3);
	margin-bottom: 4px;
	pointer-events: none;
}
.v2-search__value {
	display: block;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--txt);
	pointer-events: none;
	line-height: 1.3;
}
.v2-search__value.is-placeholder {
	color: var(--txt-3);
	font-weight: 400;
}
.v2-search__caret {
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px; height: 8px;
	border-right: 1.5px solid var(--txt-2);
	border-bottom: 1.5px solid var(--txt-2);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
	transition: transform .2s ease;
}
.v2-search__field.is-open .v2-search__caret {
	transform: translateY(-30%) rotate(-135deg);
}
.v2-search__divider {
	width: 1px;
	background: rgba(20,32,46,0.1);
	margin: 14px 0;
}

/* Custom dropdown menu */
.v2-search__menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid rgba(20,32,46,0.08);
	border-radius: 16px;
	box-shadow: 0 24px 60px -12px rgba(20,32,46,0.22), 0 6px 16px rgba(20,32,46,0.06);
	padding: 8px;
	max-height: 360px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(20,32,46,0.18) transparent;
	min-width: 240px;
	animation: v2dd-in .16s ease-out;
}
.v2-search__menu::-webkit-scrollbar { width: 6px; }
.v2-search__menu::-webkit-scrollbar-thumb { background: rgba(20,32,46,0.18); border-radius: 999px; }
@keyframes v2dd-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.v2-search__opt {
	display: block;
	width: 100%;
	text-align: left;
	padding: 11px 14px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--txt);
	background: transparent;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.v2-search__opt:hover,
.v2-search__opt.is-active {
	background: var(--ivory-2);
}
.v2-search__opt.is-selected {
	background: var(--navy);
	color: var(--ivory);
}
.v2-search__opt.is-selected:hover {
	background: var(--gold-deep);
}
.v2-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--navy);
	color: var(--ivory);
	font-family: var(--sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
	white-space: nowrap;
}
.v2-search__submit:hover {
	background: var(--gold-deep);
	transform: translateX(2px);
}
.v2-search__submit svg { display: block; }

@media (max-width: 991px) {
	.v2-search__form {
		grid-template-columns: 1fr;
		border-radius: 18px;
		padding: 14px;
		gap: 6px;
	}
	.v2-search__divider { display: none; }
	.v2-search__field {
		padding: 14px 44px 14px 18px;
		border: 1px solid rgba(20,32,46,0.08);
		border-radius: 12px;
	}
	.v2-search__field:nth-of-type(2) { padding-left: 18px; }
	.v2-search__submit {
		padding: 16px 24px;
		justify-content: center;
		border-radius: 12px;
	}
}

/* -----------------------------------------------------------------------------
   Corsica hero filter — 4 fields (Propulsion / Hull / Budget / Yacht name),
   ported from the old theme into the v2 search styling. Additive only: a --quad
   modifier + a free-text field variant. Base .v2-search rules are left untouched
   so template-homepage-v2/v3 keep their original 2-field layout.
   ----------------------------------------------------------------------------- */
.v2-search .v2-search__form--quad {
	grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1.15fr auto;
	max-width: 1060px;
}
/* 3-field variant — used when one optional dropdown is skipped (site lacks
   the source taxonomy). 2-field sites fall back to the base .v2-search__form. */
.v2-search .v2-search__form--triple {
	grid-template-columns: 1fr 1px 1fr 1px 1.15fr auto;
	max-width: 940px;
}
.v2-search__form--quad .v2-search__field:not(:first-of-type),
.v2-search__form--triple .v2-search__field:not(:first-of-type) {
	padding-left: 22px;
}
/* Free-text field (Yacht name) — matches a dropdown field but has no caret. */
.v2-search__field--input {
	padding-right: 10px;
	cursor: text;
}
.v2-search__field--input:hover,
.v2-search__field--input:focus-within {
	background: rgba(20,32,46,0.04);
}
.v2-search__input {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	outline: none;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--txt);
}
.v2-search__input::placeholder {
	color: var(--txt-3);
	font-weight: 400;
}
@media (max-width: 991px) {
	.v2-search .v2-search__form--quad,
	.v2-search .v2-search__form--triple {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   CORSICA HOMEPAGE SECTIONS
   Old Corsica homepage content rebuilt in the new theme design. Theme-only.
   Reuses theme tokens + base classes (.dma-section/.container/.eyebrow/.h1/.h2/
   .body/.tlink/.btn). All component selectors are corsica-* (no collisions).
   ========================================================================== */

/* --- shared --------------------------------------------------------------- */
.corsica-cta { margin-top: 56px; text-align: center; }
.tlink--ivory { color: var(--ivory); }

.corsica-video {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 70px -28px rgba(20,32,46,0.45);
	line-height: 0;
}
/* mo_plyr outputs a responsive (img-fluid w-100) lazyload + fancybox facade.
   Neutralise its Bootstrap mb-5 margin and inner radius so the poster sits flush
   inside our single rounded frame. */
.corsica-video > div { margin-bottom: 0 !important; border-radius: 0 !important; }
.corsica-video img { display: block; }
/* Direct <iframe>/<video> fallback (if ever used instead of mo_plyr) */
.corsica-video > iframe,
.corsica-video > video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* --- Section 3: Intro ----------------------------------------------------- */
.corsica-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.corsica-intro__copy .body { color: var(--txt-2); }

/* --- Section 4: Types of charters ----------------------------------------- */
.corsica-types__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}
/* Full-bleed portrait card — image fills the whole 3/4 frame, glass label bar overlaid at bottom */
.corsica-types__card {
	display: block;
	text-decoration: none;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
}
/* Square frame — landscape yacht photos fill it without wasted sky/water */
.corsica-types__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.corsica-types__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.corsica-types__card:hover .corsica-types__photo img { transform: scale(1.05); }
/* Very light vignette — just enough depth for the glass pill to pop */
.corsica-types__shade {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(11,23,34,0.55) 0%, rgba(11,23,34,0.08) 32%, transparent 52%);
	pointer-events: none;
}
/* Glass pill — sits over the image, anchored to bottom */
.corsica-types__label {
	position: absolute;
	left: 12px; right: 12px; bottom: 12px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 11px 14px 11px 18px;
	background: rgba(11,23,34,.42);
	backdrop-filter: blur(16px) saturate(1.8);
	-webkit-backdrop-filter: blur(16px) saturate(1.8);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 12px;
	color: var(--ivory, #efe7d6);
}
.corsica-types__name {
	font-family: var(--serif);
	font-size: clamp(17px, 1.4vw, 22px);
	font-weight: 400;
	letter-spacing: .01em;
}
.corsica-types__arrow {
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(200,169,106,.4);
	color: var(--gold, #c8a96a);
	flex-shrink: 0;
	transition: background .25s ease, border-color .25s ease, transform .3s ease;
}
.corsica-types__card:hover .corsica-types__arrow {
	background: rgba(200,169,106,.2);
	border-color: var(--gold, #c8a96a);
	transform: translate(2px,-2px);
}

/* --- Section 5: Why Corsica ----------------------------------------------- */
.corsica-why__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: stretch;
}
.corsica-why__media {
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	min-height: 460px;
	box-shadow: 0 30px 70px -28px rgba(20,32,46,0.4);
}
.corsica-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.corsica-why__list li {
	position: relative;
	padding-left: 30px;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--txt-2);
}
/* Gold checkmark (not a chevron — these are benefits, and a chevron read as
   "expandable" which the rows are not). */
.corsica-why__list li::before {
	content: "";
	position: absolute;
	left: 3px; top: 3px;
	width: 6px; height: 11px;
	border-right: 2px solid var(--gold-deep);
	border-bottom: 2px solid var(--gold-deep);
	transform: rotate(45deg);
}

/* --- Section 6: Top yachts (navy, a touch lighter than the hero/footer) --- */
.corsica-yachts { background: radial-gradient(120% 90% at 50% 0%, #1d3150 0%, #16273c 65%) !important; }
.corsica-yachts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 48px;
}
/* Liquid-glass card: frosted panel framing the photo + specs (on navy). */
.corsica-yachts__card {
	display: block; text-decoration: none;
	background: linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 60%, rgba(255,255,255,0.02) 100%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 18px;
	padding: 12px;
	box-shadow: 0 16px 42px -22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.22);
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.corsica-yachts__card:hover {
	transform: translateY(-4px);
	border-color: rgba(255,255,255,0.28);
	box-shadow: 0 26px 54px -22px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.3);
}
.corsica-yachts__photo {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255,255,255,0.05);
}
.corsica-yachts__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.corsica-yachts__card:hover .corsica-yachts__photo img { transform: scale(1.05); }
.corsica-yachts__meta { padding: 16px 6px 4px; }
.corsica-yachts__name { font-family: var(--serif); font-size: 21px; color: var(--ivory); letter-spacing: .01em; }
.corsica-yachts__spec {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(239,231,214,0.6);
	margin-top: 6px;
}
.corsica-yachts__build {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(239,231,214,0.42);
	margin-top: 4px;
}
.corsica-yachts__price {
	font-family: var(--serif);
	font-size: 15px;
	color: var(--gold-text);
	margin-top: 8px;
}
.corsica-yachts__price span { color: rgba(239,231,214,0.55); font-size: 13px; }

/* --- Section 7: Destinations ---------------------------------------------- */
.corsica-dest__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 24px;
	margin-top: 48px;
}
/* Frosted-glass card — image on top (never covered), name + teaser in a
   translucent panel below (the glass look, moved off the photo). */
.corsica-dest__card {
	display: block;
	text-decoration: none;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255,255,255,0.55);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow: 0 1px 4px rgba(20,32,46,0.06), 0 16px 34px -20px rgba(20,32,46,0.30);
	transition: transform .3s ease, box-shadow .3s ease;
}
.corsica-dest__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -22px rgba(20,32,46,0.42);
}
.corsica-dest__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.corsica-dest__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.corsica-dest__card:hover .corsica-dest__photo img { transform: scale(1.05); }
.corsica-dest__body {
	padding: 15px 18px 17px;
}
.corsica-dest__title {
	display: block;
	font-family: var(--serif);
	font-size: clamp(19px, 1.5vw, 24px);
	line-height: 1.1;
	color: var(--navy, #0e1b2a);
}
.corsica-dest__card.has-teaser .corsica-dest__title { margin-bottom: 6px; }
.corsica-dest__teaser {
	margin: 0;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--txt-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Section 8: Itinerary (split + teal panel) ---------------------------- */
.corsica-itin__grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: clamp(24px, 3vw, 48px);
	align-items: stretch;
}
.corsica-itin__media { display: flex; align-items: center; }
.corsica-itin__panel {
	background: radial-gradient(120% 90% at 50% 0%, #1d3150 0%, #16273c 65%);
	border-radius: 18px;
	padding: clamp(32px, 3.4vw, 52px);
	color: #fff;
}
.corsica-itin__days { list-style: none; margin: 0 0 36px; padding: 0; }
.corsica-itin__days li {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px solid rgba(255,255,255,0.22);
}
.corsica-itin__days li:last-child { border-bottom: 1px solid rgba(255,255,255,0.22); }
.corsica-itin__day {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	min-width: 52px;
}
.corsica-itin__leg { font-family: var(--serif); font-size: 18px; color: #fff; }

/* --- Section 9: FAQ ------------------------------------------------------- */
.corsica-faq .container { max-width: 880px; }
.corsica-faq__head { text-align: center; margin-bottom: 44px; }
.corsica-faq__item { border-top: 1px solid rgba(20,32,46,0.12); }
.corsica-faq__item:last-child { border-bottom: 1px solid rgba(20,32,46,0.12); }
.corsica-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	list-style: none;
	padding: 26px 0;
	font-family: var(--serif);
	font-size: clamp(18px, 1.5vw, 22px);
	color: var(--txt);
}
.corsica-faq__q::-webkit-details-marker { display: none; }
.corsica-faq__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.corsica-faq__icon::before,
.corsica-faq__icon::after {
	content: "";
	position: absolute;
	background: var(--gold-deep);
	transition: transform .25s ease, opacity .25s ease;
}
.corsica-faq__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.corsica-faq__icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.corsica-faq__item[open] .corsica-faq__icon::after { transform: scaleY(0); opacity: 0; }
.corsica-faq__a {
	padding: 0 0 28px;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--txt-2);
	max-width: 72ch;
}
.corsica-faq__a a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.corsica-faq__sublist { margin: 14px 0 0; padding-left: 20px; }
/* ACF wysiwyg fields wrap rich text in <p>; trim the outer margins so block-edited
   FAQ answers / intro copy keep the original tight spacing. */
.corsica-faq__a > p:first-child { margin-top: 0; }
.corsica-faq__a > p:last-child  { margin-bottom: 0; }
.corsica-faq__sublist li { margin: 6px 0; }
.corsica-faq__video { margin-top: 56px; }

/* --- Section 10: Testimonials (navy + liquid-glass cards) ----------------- */
/* Subtle navy gradient gives the frosted cards something to refract against. */
.corsica-reviews { background: radial-gradient(120% 90% at 50% 0%, #1d3150 0%, #16273c 65%); }
.corsica-reviews__head { text-align: center; max-width: 820px; margin: 0 auto 52px; }
/* Cap the heading so "What our clients say." stays on one line (the global .h1
   scales with viewport and grows too large on wide screens). */
.corsica-reviews__head .h1 { font-size: clamp(32px, 3.6vw, 54px); }
.corsica-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Liquid glass: translucent tint + backdrop blur, light edge + top sheen.
   Card text is light (the card is now a dark frosted panel, not white). */
.corsica-reviews__card {
	background: linear-gradient(152deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.02) 100%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 20px;
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 18px 50px -22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.corsica-reviews__stars { color: var(--gold); letter-spacing: 3px; font-size: 15px; }
.corsica-reviews__title {
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.25;
	color: var(--ivory);
	margin: 16px 0 14px;
}
.corsica-reviews__text { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: rgba(244,239,230,0.82); margin: 0 0 24px; }
.corsica-reviews__author {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: 1px solid rgba(255,255,255,0.14);
	padding-top: 18px;
}
.corsica-reviews__name { font-family: var(--sans); font-weight: 600; color: var(--ivory); }
.corsica-reviews__date { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,239,230,0.55); }
/* Per-card Trustpilot link (content-writer request 2026-07-02). */
.corsica-reviews__tp {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(201,169,110,0.45);
	transition: color .2s ease, text-decoration-color .2s ease;
}
.corsica-reviews__tp:hover { color: var(--ivory); text-decoration-color: var(--ivory); }

/* --- Top Pages: hand-picked guide-page cards on navy (Section 4 alt) ------ */
.corsica-toppages__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
/* Liquid glass on navy — matches the testimonial/destination cards
   (was a solid white panel until 2026-07-25). The section wrapper is always
   .surface-navy, so there is no light-background variant to guard against. */
.corsica-toppages__card {
	display: flex;
	flex-direction: column;
	background: linear-gradient(152deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.02) 100%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 18px 50px -22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 0 0 1px rgba(255,255,255,0.04);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.corsica-toppages__card:hover {
	transform: translateY(-4px);
	border-color: rgba(255,255,255,0.28);
	box-shadow: 0 26px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.36), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.corsica-toppages__img { aspect-ratio: 3 / 2; overflow: hidden; }
.corsica-toppages__img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.corsica-toppages__card:hover .corsica-toppages__img img { transform: scale(1.05); }
.corsica-toppages__img--placeholder { background: linear-gradient(150deg, #24344d 0%, #16273c 100%); }
.corsica-toppages__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 26px;
}
.corsica-toppages__title {
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--ivory, #f4efe6);
	margin: 0 0 10px;
}
.corsica-toppages__excerpt {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	color: rgba(244,239,230,0.72);
	margin: 0 0 18px;
	flex: 1;
}
.corsica-toppages__cta {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	/* --gold-text flips to the bright gold inside .surface-navy, which is the
	   only surface this card renders on (glass restyle 2026-07-25) */
	color: var(--gold-text, #c9a96e);
	margin-top: auto; /* pin to card bottom when there is no excerpt */
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.corsica-types__grid,
	.corsica-yachts__grid,
	.corsica-dest__grid,
	.corsica-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.corsica-intro__grid,
	.corsica-why__grid,
	.corsica-itin__grid { grid-template-columns: 1fr; }
	.corsica-why__media { min-height: 280px; order: -1; }
	.corsica-dest__grid,
	.corsica-reviews__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.corsica-types__grid,
	.corsica-yachts__grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   AUTO-RENDERING SECTIONS (v19)
   Section 6b: Yacht Slider · Section 7b: Article Cards · Section 9b: Brokers
   ============================================================================ */

/* ── Yacht Slider ── */
.dma-yachtslider {
	background: var(--navy, #0e1b2a);
	color: #fff;
	padding: 72px 0 80px;
	overflow: hidden;
}
.dma-yachtslider__head {
	text-align: center;
	margin-bottom: 44px;
}
.dma-yachtslider__head .eyebrow { color: var(--gold, #c9a96e); }
.dma-yachtslider__head .h1 { color: #fff; margin: 0; }
.dma-yachtslider__head .h1 em { color: var(--gold, #c9a96e); }

.dma-yachtslider__outer {
	padding: 0 0 8px;
	position: relative;
}
.dma-yachtslider__swiper {
	overflow: hidden;
	padding: 0 calc(50vw - 590px);       /* full-width feel on wide screens */
	margin: 0;
}
@media (max-width: 1240px) {
	.dma-yachtslider__swiper { padding: 0 24px; }
}

/* Pre-init FOUC/CLS fix: Swiper's bundle loads late (from the plugin, ~1-2s),
   so before it sizes the slides they'd stack full-width and the 3/2 card images
   balloon for a moment. Pre-size the slides to match Swiper's slidesPerView
   (3 / 2 / 1 with 20/16/12 gap). These :not(.swiper-initialized) rules stop
   applying the instant Swiper adds its class. */
.dma-yachtslider__swiper:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: 20px;
}
.dma-yachtslider__swiper:not(.swiper-initialized) .swiper-slide {
	flex: 0 0 calc((100% - 40px) / 3);
}
@media (max-width: 991px) {
	.dma-yachtslider__swiper:not(.swiper-initialized) .swiper-wrapper { gap: 16px; }
	.dma-yachtslider__swiper:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 639px) {
	.dma-yachtslider__swiper:not(.swiper-initialized) .swiper-wrapper { gap: 12px; }
	.dma-yachtslider__swiper:not(.swiper-initialized) .swiper-slide { flex-basis: 100%; }
}

/* Yacht card */
.dma-ycard {
	display: block;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.dma-ycard:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 36px rgba(0,0,0,0.35);
	color: #fff;
}
.dma-ycard__img {
	aspect-ratio: 3/2;
	overflow: hidden;
}
.dma-ycard__img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.dma-ycard:hover .dma-ycard__img img { transform: scale(1.04); }
.dma-ycard__img-placeholder {
	aspect-ratio: 3/2;
	background: rgba(255,255,255,0.08);
}
.dma-ycard__body {
	padding: 16px 18px 20px;
}
.dma-ycard__name {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 8px;
	color: #fff;
	letter-spacing: 0.01em;
}
.dma-ycard__meta {
	list-style: none;
	padding: 0; margin: 0 0 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.65);
}
.dma-ycard__meta li::before { content: '·'; margin-right: 4px; }
.dma-ycard__meta li:first-child::before { display: none; }
.dma-ycard__price {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gold, #c9a96e);
	letter-spacing: 0.02em;
}

/* Swiper nav buttons – override mo_filter defaults inside our slider */
.dma-yachtslider__swiper .swiper-button-prev,
.dma-yachtslider__swiper .swiper-button-next {
	color: var(--gold, #c9a96a);
	background: rgba(14,27,42,0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(201,169,106,0.45);
	border-radius: 50%;
	width: 46px; height: 46px;
	top: 50%;
	transform: translateY(-50%);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dma-yachtslider__swiper .swiper-button-prev { left: 20px; }
.dma-yachtslider__swiper .swiper-button-next { right: 20px; }
.dma-yachtslider__swiper .swiper-button-prev:hover,
.dma-yachtslider__swiper .swiper-button-next:hover {
	background: var(--gold, #c9a96a);
	color: #14202e;
	border-color: var(--gold, #c9a96a);
}
.dma-yachtslider__swiper .swiper-button-prev::after,
.dma-yachtslider__swiper .swiper-button-next::after {
	font-size: 13px;
	font-weight: 700;
}

/* ── Article Cards ── */
.dma-articles { padding: 80px 0; }
.dma-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 44px;
}
@media (max-width: 900px) {
	.dma-articles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.dma-articles__grid { grid-template-columns: 1fr; }
}

.dma-artcard {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05);
	text-decoration: none;
	color: var(--navy, #0e1b2a);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.dma-artcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.13);
	color: var(--navy, #0e1b2a);
}
.dma-artcard__img {
	aspect-ratio: 16/9;
	overflow: hidden;
}
.dma-artcard__img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.dma-artcard:hover .dma-artcard__img img { transform: scale(1.04); }
.dma-artcard__img--placeholder {
	aspect-ratio: 16/9;
	background: var(--surface-stone, #e0ddd7);
}
.dma-artcard__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.dma-artcard__eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-text, #846a3a);
	margin-bottom: 8px;
}
.dma-artcard__title {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 10px;
}
.dma-artcard__excerpt {
	font-size: 0.88rem;
	color: var(--txt-3, #646e7c);
	line-height: 1.6;
	margin-bottom: 16px;
	flex: 1;
}
.dma-artcard__cta {
	font-size: 0.82rem;
	font-weight: 600;
	/* gold-deep fails AA on white at this size (a11y 2026-07-03) */
	color: var(--gold-text, #846a3a);
	letter-spacing: 0.03em;
}

/* ── Broker Cards ── */
.dma-brokers { padding: 80px 0; }
.dma-brokers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 44px;
}
@media (max-width: 900px) {
	.dma-brokers__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.dma-brokers__grid { grid-template-columns: 1fr; }
}

.dma-broker-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05);
}
.dma-broker-card__photo {
	aspect-ratio: 1;
	overflow: hidden;
}
.dma-broker-card__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.dma-broker-card__photo-placeholder {
	aspect-ratio: 1;
	background: var(--surface-stone, #e0ddd7);
}
.dma-broker-card__body {
	padding: 20px 22px 24px;
}
.dma-broker-card__name {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--navy, #0e1b2a);
}
.dma-broker-card__role {
	font-size: 0.8rem;
	color: var(--txt-3, #646e7c);
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}
.dma-broker-card__bio {
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--txt-2, #3d4554);
	margin-bottom: 14px;
}
.dma-broker-card__link {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gold-text, #846a3a); /* gold-deep fails AA on white (a11y 2026-07-03) */
	text-decoration: none;
	letter-spacing: 0.03em;
}
.dma-broker-card__link:hover { text-decoration: underline; }

/* ── Skeleton shimmer ─────────────────────────────────────────────────────────
   Card photo containers already reserve their box via aspect-ratio; this paints
   a subtle animated placeholder behind the image while it loads. The global
   prefers-reduced-motion block (style.css) freezes the animation automatically. */
.corsica-yachts__photo,
.corsica-dest__photo,
.dma-ycard__photo,
.dma-artcard__photo,
.dma-broker-card__photo {
	background: linear-gradient(100deg, #e8e4dc 40%, #f2efe9 50%, #e8e4dc 60%);
	background-size: 200% 100%;
	/* Finite, not infinite: a background-position animation is NOT composited,
	   so every running shimmer costs a style+paint pass per frame on the main
	   thread. Lazy card images below the fold do not load until scrolled to,
	   which left 14 shimmers running for the whole visit (measured 2026-09-09:
	   Lighthouse "Rendering" 6.2s on the corsica homepage vs 0.4s on a yacht
	   page; field INP 439-473ms on the Italian / South of France homepages).
	   8 loops = ~13s of placeholder, then it rests; header.php's load marker
	   ends it the moment the image arrives (.is-loaded below). */
	animation: dmaSkeleton 1.6s ease-in-out 8;
}
.corsica-yachts__photo.is-loaded,
.corsica-dest__photo.is-loaded,
.dma-ycard__photo.is-loaded,
.dma-artcard__photo.is-loaded,
.dma-broker-card__photo.is-loaded,
.corsica-itincards__img.is-loaded {
	animation: none;
}
.corsica-yachts__photo,
.dma-ycard__photo {
	/* dark sections get a navy-tinted skeleton */
	background: linear-gradient(100deg, #1b2c44 40%, #24364f 50%, #1b2c44 60%);
	background-size: 200% 100%;
}
@keyframes dmaSkeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Intro: image media + single-column variant ─────────────────────────────
   Sites without an intro video can set dma_intro_image; with neither, the
   copy takes a comfortable single-column measure instead of sitting beside
   an empty media column. */
.corsica-intro__img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}
.corsica-intro__grid--single {
	grid-template-columns: 1fr;
}
.corsica-intro__grid--single .corsica-intro__copy {
	max-width: 72ch;
}
/* Media with no prose yet (auto-derived intro video): single centered column */
.corsica-intro__grid--media-only {
	grid-template-columns: 1fr;
}
.corsica-intro__grid--media-only .corsica-intro__media {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
}

/* ── Sample itineraries (auto from charter-itinerary category) + map ──────── */
.corsica-itincards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin-top: 44px;
}
@media (max-width: 820px) {
	.corsica-itincards__grid { grid-template-columns: 1fr; }
}
/* 3 cards in a row when 3+ are picked, otherwise the default 2 above.
   Scoped to min-width so it can't override the single-column mobile rule. */
@media (min-width: 821px) {
	.corsica-itincards__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.corsica-itincards__card {
	display: block;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05);
	transition: transform .25s ease, box-shadow .25s ease;
}
.corsica-itincards__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 14px 34px rgba(0,0,0,0.10);
}
.corsica-itincards__img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(100deg, #e8e4dc 40%, #f2efe9 50%, #e8e4dc 60%);
	background-size: 200% 100%;
	animation: dmaSkeleton 1.6s ease-in-out 8; /* finite — see the card-photo skeleton note above */
}
.corsica-itincards__img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.corsica-itincards__body { padding: 24px 26px 28px; }
.corsica-itincards__title {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--navy, #0e1b2a);
}
.corsica-itincards__excerpt {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--txt-2, #3d4554);
	margin: 0 0 16px;
}
.corsica-itincards__cta {
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gold-text, #846a3a);
}
.corsica-itincards__map {
	margin-top: 36px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05);
}
.corsica-itincards__map iframe {
	display: block;
	width: 100%;
	height: 440px;
	border: 0;
}

/* ── Itinerary: single-column when no video + calmer panel title ──────────── */
.corsica-itin__grid--single {
	grid-template-columns: 1fr;
}
.corsica-itin__grid--single .corsica-itin__panel {
	max-width: 760px;
	margin: 0 auto;
	width: 100%;
}
.corsica-itin__panel .h2 {
	font-size: clamp(30px, 3.2vw, 44px) !important;
}

/* ── Gold tlink variant (section-header links on light surfaces — the default
      inherited color was nearly invisible on ivory) ─────────────────────────── */
.tlink--gold {
	color: var(--gold-deep, #846a3a);
}
.tlink--gold:hover {
	color: var(--navy, #0e1b2a);
}