/* ==========================================================================
   Offer funnel — blocks 2, 4, 7, 8, 9 of the offer article or page.
   Markup: evd/includes/offer-funnel.php (blocks 2/4) and the T7
   follow-ups (reviews / FAQ / final CTA — styled here by class name).
   Spec: docs/superpowers/specs/2026-10-04-offer-article-funnel.md § 7
   (the measured mock-up: positions, 24/32 px block scale, 16 px inside).

   Theme-safe: every colour is a --lw-* token the light theme remaps
   (functions.php), except the one documented gold-CTA ink exception shared
   with .lw-post-conv--c (see that note below). RTL-safe: logical properties
   only — Arabic needs no dedicated sheet.
   Loaded ONLY while the current post or page renders a funnel
   (offer-funnel.php): on posts the blocks live inside .lw-post-article,
   on pages (template-lightweight.php) directly under
   .lw-main--has-hero > .lw-container — the width/rhythm rules below are
   context-free so both shapes render identically.
   ========================================================================== */

:root {
	--evd-funnel-accent: var(--lw-gold-a11y-dark); /* text accent on navy; remapped in light */
}

/* Width aligned on .lw-article (800px), like .lw-post-conv. On pages the
   sections are direct children of .lw-container (not of .lw-post-article),
   so every block carries the cap itself — the column is the same either way. */
.evd-offer-funnel,
.evd-offer-funnel__villas,
.evd-offer-funnel__reviews,
.evd-offer-funnel__faq,
.evd-offer-funnel__final {
	max-width: 800px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   THE shared outer-margin rule for every funnel block — spec § 7 spacing
   scale: 24px between blocks on mobile, 32px from 768px, never under 16px.
   No per-block margin hack anywhere else in this sheet.
   -------------------------------------------------------------------------- */
.evd-offer-funnel,
.evd-offer-funnel__villas,
.evd-offer-funnel__reviews,
.evd-offer-funnel__faq,
.evd-offer-funnel__final {
	margin-block: 24px;
}

@media (min-width: 768px) {
	.evd-offer-funnel,
	.evd-offer-funnel__villas,
	.evd-offer-funnel__reviews,
	.evd-offer-funnel__faq,
	.evd-offer-funnel__final {
		margin-block: 32px;
	}
}

/* --------------------------------------------------------------------------
   Page opening gap (template-lightweight.php): the funnel replaces
   .lw-default-hero, so <main> opens directly under the in-flow solid header
   — the slot the article template fills with its breadcrumb.
   .lw-main--has-hero zeroes main's top padding with !important
   (lightweight.css); the more specific rule below re-opens the scale gap on
   funnel pages, and the offer block's shared top margin is dropped so the
   gap stays exactly one scale step. Articles are untouched — their <main>
   carries no --offer-funnel.
   -------------------------------------------------------------------------- */
.lw-main.lw-main--offer-funnel {
	padding-block-start: 24px !important;
}

.lw-main--offer-funnel > .evd-offer-funnel:first-child {
	margin-block-start: 0;
}

@media (min-width: 768px) {
	.lw-main.lw-main--offer-funnel {
		padding-block-start: 32px !important;
	}
}

/* --------------------------------------------------------------------------
   Shared blog chrome, funnel context only (this sheet never loads on
   ordinary articles). The mock-up measures the breadcrumb without its
   12px vertical padding: the 24px block gap then lands exactly and the H1
   stays ≤ 200px at 390px.
   -------------------------------------------------------------------------- */
.lw-breadcrumbs {
	padding-block: 0;
}

/* Block 3 (hero + meta line) is followed by block 4 (villas): drop the
   article header's trailing padding/border/bottom margin so the gap between
   the meta line and the villas is the shared scale value. */
.lw-post-article > .lw-post-header {
	margin-block-end: 0;
	padding-block-end: 0;
	border-block-end: 0;
}

/* Meta line: 12px under the hero photo (mock-up). */
.lw-post-article .lw-post-meta {
	margin-block-start: 12px;
}

/* The article content starts right at the block gap after the last funnel
   block (its first heading's margin would otherwise collapse out to 2em).
   Scoped to .lw-article (not .lw-post-article) so the page template — where
   block 4 is a sibling before the article — gets the same rule. */
.lw-article .entry-content > :first-child {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Block 2 — the offer block: eyebrow, short H1, bullets, preset date form,
   computed price line, WhatsApp link.
   -------------------------------------------------------------------------- */
/* The mock-up contract budgets ONE line for the breadcrumb (its last crumb
   is the long article title) and one line for the eyebrow — otherwise the
   H1 cannot stay ≤ 200px at 390px. */
.lw-breadcrumbs__list li:last-child {
	/* flex-basis 0: the flex line must not wrap before the shrink — a wrapped
	   two-row breadcrumb would push the H1 past 200px. */
	flex: 1 1 0;
	min-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.evd-offer-funnel__eyebrow {
	display: block;
	/* 8px, not the 16px intra-block step: the mock-up puts the H1 top ≤ 200px
	   at 390px, and 16px here would push it past the fold. */
	margin-block-end: 8px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--evd-funnel-accent);
}

/* Arabic is a connected script: letter-spacing breaks ligatures. */
.evd-offer-funnel[dir="rtl"] .evd-offer-funnel__eyebrow {
	letter-spacing: 0;
}

.evd-offer-funnel__title {
	margin: 0 0 16px;
	font-family: var(--lw-font-heading);
	font-size: clamp(26px, 1.5rem + 1vw, 30px); /* mock-up: 26-28px at 390px */
	font-weight: 400;
	line-height: 1.25;
	color: var(--lw-section-heading);
}

/* Arabic headings keep the blog surface's mixed-script font handling
   (same convention as body.rtl .lw-post-title in page-blog-post.css). */
body.rtl .evd-offer-funnel__title,
body.pll-ar .evd-offer-funnel__title,
body.rtl .evd-offer-funnel__villas-title,
body.pll-ar .evd-offer-funnel__villas-title,
body.rtl .evd-offer-funnel__reviews-title,
body.pll-ar .evd-offer-funnel__reviews-title,
body.rtl .evd-offer-funnel__faq-title,
body.pll-ar .evd-offer-funnel__faq-title,
body.rtl .evd-offer-funnel__final-title,
body.pll-ar .evd-offer-funnel__final-title {
	font-family: 'Cinzel', 'Marcellus', 'Noto Sans Arabic', 'Tahoma', serif;
}

.evd-offer-funnel__bullets {
	display: flex;
	flex-direction: column;
	gap: 8px; /* mock-up: 8px between bullets */
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.evd-offer-funnel__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--lw-section-text);
}

.evd-offer-funnel__bullets svg {
	flex: 0 0 20px;
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 2px;
	color: var(--evd-funnel-accent); /* gold stroke icon */
}

/* --------------------------------------------------------------------------
   The preset date form — brand styling of the cs-home-search component in
   its --offer-funnel modifier (layout of the modifier itself lives in
   home-search-form.css). Fields: 48px, stacked 12px apart on mobile.
   -------------------------------------------------------------------------- */
.evd-offer-funnel__form {
	margin-block-end: 0;
}

.cs-home-search--offer-funnel .cs-daterange > p {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-block-size: 48px;
	margin: 0;
	padding: 2px 14px;
	background: var(--lw-white-08);
	border: 1px solid var(--lw-card-border);
	border-radius: var(--lw-radius-sm);
}

/* The travellers field puts its label and the stepper on one row so the
   whole control stays at the mock-up's 48px. */
.cs-home-search--offer-funnel .mphb_sc_search-adults {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-block-size: 48px;
	margin: 0;
	padding: 4px 14px;
	background: var(--lw-white-08);
	border: 1px solid var(--lw-card-border);
	border-radius: var(--lw-radius-sm);
}

.cs-home-search--offer-funnel label {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lw-section-muted);
}

/* The trigger sits on a theme-following surface here, not on the always-dark
   home hero: the hero-white rule in home-search-form.css must be beaten
   (higher specificity + !important, same convention as that file). */
.cs-home-search--offer-funnel .cs-home-search__date {
	color: var(--lw-section-heading) !important;
}

.cs-home-search--offer-funnel .cs-home-search__date::placeholder {
	color: var(--lw-section-muted) !important;
}

.cs-home-search--offer-funnel .cs-home-search__date-icon {
	color: var(--evd-funnel-accent);
}

.cs-home-search--offer-funnel .cs-home-search__stepper {
	display: flex;
	align-items: center;
	gap: 4px;
	inline-size: 100%;
	color: var(--lw-section-heading);
}

.cs-home-search--offer-funnel .cs-home-search__step {
	flex: 0 0 44px; /* ≥ 44px touch target */
	block-size: 38px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--lw-radius-sm);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--lw-transition);
}

.cs-home-search--offer-funnel .cs-home-search__step:hover {
	background: var(--lw-bg-hover);
}

.cs-home-search--offer-funnel .mphb_sc_search-submit-button-wrapper {
	margin: 0;
}

/* Primary gold CTA — the documented ink exception, same as variant C
   (.lw-post-conv--c__submit in page-blog-post.css): literal colours on
   purpose, because --lw-btn-on-gold/--lw-navy get remapped by the
   theme-toggle JS (--lw-* remap trap) and wash the text out on gold.
   Dark: gold #b99d75 bg → #14202e text. Light override below (gold flips
   to dark brown #6b5a42 → white text). */
body.lw-page .cs-home-search--offer-funnel .cs-home-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 48px;
	padding: 12px 20px;
	background: var(--lw-gold);
	color: #14202e; /* literal — see variant C note (--lw-* remap trap) */
	border: none;
	border-radius: var(--lw-radius-sm);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--lw-transition);
}

body.lw-page .cs-home-search--offer-funnel .cs-home-search__submit:hover {
	background: var(--lw-gold-hover);
	color: #14202e; /* literal — see variant C note (--lw-* remap trap) */
}

body[data-pp-theme="light"] .cs-home-search--offer-funnel .cs-home-search__submit,
body[data-pp-theme="light"] .cs-home-search--offer-funnel .cs-home-search__submit:hover {
	color: #fff;
}

/* Price line: 12px under the button, 13px muted (mock-up). */
.evd-offer-funnel__price {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lw-section-muted);
}

/* Secondary WhatsApp link: 44px touch zone, 16px under the price line. */
/* Every link rule below is prefixed with body.lw-page: the theme's generic
   link colours (body.lw-page a / a:hover, lightweight.css) sit at (0,1,2) /
   (0,2,2) and would otherwise paint these buttons gold on gold at rest and
   white on white on hover. */
body.lw-page .evd-offer-funnel__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	margin-block-start: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--evd-funnel-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Desktop: eyebrow and H1 span the full width, then bullets | form, price
   line and WhatsApp link in two columns (32px). */
@media (min-width: 768px) {
	.evd-offer-funnel__offer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"eyebrow eyebrow"
			"title title"
			"bullets form"
			"bullets price"
			"bullets wa";
		/* The last row absorbs the bullets' extra height, so the price line
		   and the WhatsApp link stay tight under the button. */
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: 32px;
		align-items: start;
	}

	.evd-offer-funnel__eyebrow {
		grid-area: eyebrow;
	}

	.evd-offer-funnel__title {
		grid-area: title;
	}

	.evd-offer-funnel__bullets {
		grid-area: bullets;
	}

	.evd-offer-funnel__form {
		grid-area: form;
	}

	.evd-offer-funnel__price {
		grid-area: price;
	}

	.evd-offer-funnel__wa {
		grid-area: wa;
		justify-self: start;
	}

	/* Dates + stepper side by side, the button on its own full-width row. */
	.cs-home-search--offer-funnel .mphb_sc_search-submit-button-wrapper {
		flex-basis: 100%;
	}
}

/* --------------------------------------------------------------------------
   Section headings shared by blocks 4/7/8/9.
   -------------------------------------------------------------------------- */
.evd-offer-funnel__villas-title,
.evd-offer-funnel__reviews-title,
.evd-offer-funnel__faq-title,
.evd-offer-funnel__final-title {
	margin: 0 0 16px;
	font-family: var(--lw-font-heading);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--lw-section-heading);
}

/* --------------------------------------------------------------------------
   Block 4 — villa cards: 1 column on mobile, 3 on desktop (24px gap).
   -------------------------------------------------------------------------- */
.evd-offer-funnel__villa-grid,
.evd-offer-funnel__review-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.evd-offer-funnel__villa-grid,
	.evd-offer-funnel__review-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

.evd-offer-funnel__villa {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--lw-card-bg);
	border: 1px solid var(--lw-card-border);
	border-radius: var(--lw-radius-md);
}

.evd-offer-funnel__villa-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.evd-offer-funnel__villa-media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.evd-offer-funnel__villa-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.evd-offer-funnel__villa-name {
	margin: 0;
	font-family: var(--lw-font-heading);
	font-size: 17px;
	font-weight: 400;
}

body.lw-page .evd-offer-funnel__villa-name a {
	color: var(--lw-section-heading);
	text-decoration: none;
}

body.lw-page .evd-offer-funnel__villa-name a:hover {
	color: var(--evd-funnel-accent);
}

.evd-offer-funnel__villa-cap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	color: var(--lw-section-muted);
}

.evd-offer-funnel__spec-icon {
	inline-size: 18px;
	block-size: 18px;
	color: var(--evd-funnel-accent);
}

.evd-offer-funnel__villa-price {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lw-section-text);
}

/* Secondary-style card CTA (mock-up), 44px touch target. */
body.lw-page .evd-offer-funnel__villa-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	/* Pushed to the card bottom: the CTAs of a row line up whatever the
	   title length (12px minimum gap = 8px flex gap + the price's 4px). */
	margin-block-start: auto;
	padding: 8px 16px;
	border: 1px solid var(--lw-section-heading);
	border-radius: var(--lw-radius-sm);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lw-section-heading);
	transition: background-color var(--lw-transition), color var(--lw-transition);
}

body.lw-page .evd-offer-funnel__villa-cta:hover {
	background: var(--lw-section-heading);
	color: var(--lw-navy-dark);
}

/* --------------------------------------------------------------------------
   Block 7 — real Google reviews (T7 markup, styled by class name from the
   spec). Cards share the villa grid behaviour: 1 column → 3 (24px).
   -------------------------------------------------------------------------- */
.evd-offer-funnel__reviews-rating {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lw-section-text);
}

.evd-offer-funnel__review {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: var(--lw-card-bg);
	border: 1px solid var(--lw-card-border);
	border-radius: var(--lw-radius-md);
}

.evd-offer-funnel__review p {
	margin: 0;
}

.evd-offer-funnel__review-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	color: var(--lw-section-muted);
}

.evd-offer-funnel__review-name {
	font-weight: 600;
	color: var(--lw-section-heading);
}

.evd-offer-funnel__review-stars {
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--lw-gr-star);
}

.evd-offer-funnel__review-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--lw-section-text);
}

body.lw-page .evd-offer-funnel__review-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	margin-block-start: auto; /* pinned to the card foot (equal-height rows) */
	font-size: 13px;
	font-weight: 600;
	color: var(--evd-funnel-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Block 8 — short FAQ. The items reuse the lw-faq-item component; scoped
   here at raised specificity because the component's literal colours are
   light-first and the funnel article is dark-first. Contract: closed
   <details> = 48px (46px summary + 2×1px border), 1px --lw-card-border,
   8px between items, chevron rotates on [open].
   -------------------------------------------------------------------------- */
.evd-offer-funnel__faq .lw-faq-item {
	margin: 0;
	padding: 0;
	background: var(--lw-card-bg);
	border: 1px solid var(--lw-card-border);
	border-radius: var(--lw-radius-sm);
	box-shadow: none;
}

.evd-offer-funnel__faq .lw-faq-item + .lw-faq-item {
	margin-block-start: 8px;
}

.evd-offer-funnel__faq .lw-faq-item__q {
	position: relative;
	display: flex;
	align-items: center;
	/* A single-line closed item totals 48px (46px summary + 2×1px border);
	   a question that wraps at 360px grows — questions are never truncated. */
	min-block-size: 46px;
	padding-block: 0;
	padding-inline: 16px 40px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	color: var(--lw-section-heading);
}

.evd-offer-funnel__faq .lw-faq-item__q::after {
	content: "";
	position: absolute;
	inset-inline-end: 16px;
	inset-block-start: calc(50% - 4px);
	inline-size: 8px;
	block-size: 8px;
	border-inline-end: 2px solid var(--evd-funnel-accent);
	border-block-end: 2px solid var(--evd-funnel-accent);
	transform: rotate(45deg);
	transition: transform var(--lw-transition);
}

.evd-offer-funnel__faq .lw-faq-item[open] .lw-faq-item__q::after {
	transform: rotate(-135deg);
}

.evd-offer-funnel__faq .lw-faq-item__a {
	margin: 0;
	padding: 0 16px 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--lw-section-text);
}

/* --------------------------------------------------------------------------
   Block 9 — final CTA: title, gold primary button, WhatsApp link.
   -------------------------------------------------------------------------- */
.evd-offer-funnel__final {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.evd-offer-funnel__final-title {
	margin-block-end: 0; /* the flex gap owns the 16px spacing */
}

body.lw-page .evd-offer-funnel__final-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding: 12px 32px;
	background: var(--lw-gold);
	color: #14202e; /* literal — see variant C note (--lw-* remap trap) */
	border-radius: var(--lw-radius-sm);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--lw-transition);
}

body.lw-page .evd-offer-funnel__final-cta:hover {
	background: var(--lw-gold-hover);
	color: #14202e; /* literal — see variant C note (--lw-* remap trap) */
}

body.lw-page[data-pp-theme="light"] .evd-offer-funnel__final-cta,
body.lw-page[data-pp-theme="light"] .evd-offer-funnel__final-cta:hover {
	color: #fff;
}

/* --lw-gold-hover is not remapped in light: lift the dark bronze instead
   (same lift as the theme's light buttons, lightweight.css). */
body.lw-page[data-pp-theme="light"] .evd-offer-funnel__final-cta:hover {
	background: #836f53;
}

body.lw-page .evd-offer-funnel__final-wa {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--evd-funnel-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Focus rings and reduced motion.
   -------------------------------------------------------------------------- */
.evd-offer-funnel a:focus-visible,
.evd-offer-funnel button:focus-visible,
.evd-offer-funnel__villas a:focus-visible,
.evd-offer-funnel__reviews a:focus-visible,
.evd-offer-funnel__final a:focus-visible,
.evd-offer-funnel__faq summary:focus-visible {
	outline: 2px solid var(--evd-funnel-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cs-home-search--offer-funnel .cs-home-search__step,
	.cs-home-search--offer-funnel .cs-home-search__submit,
	.evd-offer-funnel__villa-cta,
	.evd-offer-funnel__final-cta,
	.evd-offer-funnel__faq .lw-faq-item__q::after {
		transition: none;
	}
}

/* Machine-translation notice under the reviews (non-French pages). */
.evd-offer-funnel__reviews-note {
	margin: 16px 0 0;
	font-size: 13px;
	opacity: 0.75;
}