/* ============================================================
   Casa Lago Booking - villa product page (Phase 7).

   Rendered by the [casa_lago_booking] shortcode, to the approved
   Airbnb-style mockup in the Casa Lago design language:
   - a title block on plaster (location, villa name, a row of
     key facts),
   - a photo mosaic that opens the lightbox,
   - a two-column body (the editorial intro and amenities on the
     left, the sticky booking card on the right - the card itself
     is styled in booking-calendar.css),
   - a things-to-do section (the nearby beaches, days out, and the
     weekly markets).

   House craft rules applied here:
   - Sentence case everywhere; no uppercase, no wide tracking.
   - Line icons on facts, amenities, distance headings, labels.
   - Hairlines are inset box-shadows, never a 1px border, and only
     where there is no distinguishing background.
   - Motion is transform / opacity only, eased with --clb-ease.
   - Hover effects are gated behind (hover: hover).
   - Imagery uses object-fit: cover (photographed subjects).
   - Focus is a 2px ochre outline, offset 3px.
   - Reduced motion settles to the end state.
   ============================================================ */

.clb-villa {
	box-sizing: border-box;
	background: var(--surface-base);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.clb-villa *,
.clb-villa *::before,
.clb-villa *::after {
	box-sizing: border-box;
}

.clb-villa :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* The villa page is its own hero; hide the theme's page header on pages that
   render the shortcode (this stylesheet only loads where the shortcode does). */
.page-header {
	display: none;
}

.clb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Shared editorial type -------------------------------- */
.clb-display {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-variation-settings: var(--display-settings);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	margin: 0;
}

.clb-villa .clb-title {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-variation-settings: var(--display-settings);
	line-height: var(--leading-title);
	letter-spacing: var(--tracking-title);
	font-size: var(--text-display-m);
	margin: 0;
}

.clb-villa .clb-title em {
	font-style: italic;
}

/* Sentence-case label: the new quiet eyebrow. No uppercase, no
   wide tracking. An optional leading line icon, optional accent. */
.clb-villa .clb-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-meta);
	letter-spacing: var(--tracking-body);
	color: var(--text-muted);
}

.clb-villa .clb-label--accent {
	color: var(--accent);
}

/* --- Line icons ------------------------------------------- */
.clb-villa .clb-icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	display: inline-block;
	vertical-align: middle;
	color: inherit;
}

.clb-villa-img--placeholder {
	background: var(--surface-sunk);
}

/* --- Section shell ---------------------------------------- */
.clb-villa-section {
	padding: var(--section-gap-tight) var(--margin-page);
}

.clb-villa-section[data-theme="ink"] {
	background: var(--color-ink);
	color: var(--text-on-ink);
}

/* --- Title block ------------------------------------------ */
.clb-villa-title {
	padding-bottom: var(--space-xl);
}

.clb-villa-title__inner {
	margin: 0 0 var(--space-xl);
}

.clb-villa-title__location {
	color: var(--text-muted);
	margin-bottom: 1rem;
}

.clb-villa-title__name {
	font-size: var(--text-display-l);
	max-width: 16ch;
	margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}

.clb-villa-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.clb-villa-facts__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	letter-spacing: var(--tracking-body);
}

.clb-villa-facts__item .clb-icon {
	color: var(--accent);
	width: 1.25em;
	height: 1.25em;
}

/* --- Photo mosaic ----------------------------------------- */
.clb-villa-mosaic {
	padding-top: 100px;
	padding-bottom: var(--space-xl);
}

.clb-villa-mosaic__inner {
	position: relative;
	max-width: var(--container-max);
	margin: 0 auto;
}

.clb-villa-mosaic__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 2px;
	aspect-ratio: 30 / 9;
	overflow: hidden;
	border-radius: var(--radius-xs);
}

.clb-villa-mosaic__cell {
	position: relative;
	margin: 0;
	min-height: 0;
	min-width: 0;
	background: var(--surface-sunk);
	overflow: hidden;
}

.clb-villa-mosaic__cell--lead {
	grid-row: span 2;
}

.clb-villa-mosaic__btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.clb-villa-mosaic__img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	filter: var(--image-warm);
	transform: scale(1);
	transition: transform var(--dur-slow) var(--clb-ease), filter var(--dur-slow) var(--clb-ease);
}

.clb-villa-mosaic__all {
	position: absolute;
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
}

/* --- Pill button (on a plaster-deep fill, no border) ------ */
.clb-villa .clb-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 11px 20px;
	appearance: none;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-paper);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-body);
	line-height: 1;
	cursor: pointer;
	transition: background var(--dur-quick) var(--clb-ease), transform var(--dur-quick) var(--clb-ease);
}

.clb-villa .clb-pill .clb-icon {
	color: var(--accent);
}

/* --- Two-column body -------------------------------------- */
.clb-villa-body {
	padding-top: 20px;
	padding-bottom: var(--space-3xl);
}

.clb-villa-body__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 656px;
	gap: clamp(2.5rem, 6vw, 6rem);
	max-width: var(--container-max);
	margin: 0 auto;
	align-items: start;
}

.clb-villa-body__main {
	min-width: 0;
}

.clb-villa-body__side {
	min-width: 0;
}

/* --- Intro standfirst ------------------------------------- */
.clb-villa-intro {
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	max-width: 30ch;
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: var(--text-display-s);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-title);
	color: var(--text-primary);
}

/* --- What this place offers ------------------------------- */
.clb-villa-offers__label {
	color: var(--text-muted);
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.clb-villa-offers__label .clb-icon {
	color: var(--accent);
}

.clb-villa-offers__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.clb-villa-offers__title {
	margin: 0 0 0.6rem;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-variation-settings: var(--display-settings);
	font-size: var(--text-display-s);
	line-height: var(--leading-title);
	letter-spacing: var(--tracking-title);
}

.clb-villa-offers__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.clb-villa-offers__item {
	display: flex;
	align-items: flex-start;
	gap: 0.8em;
	padding: 0.9rem 0;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	box-shadow: inset 0 1px 0 0 var(--border-faint);
}

.clb-villa-offers__item .clb-icon {
	color: var(--accent);
	margin-top: 0.1em;
}

/* --- Things to do (the area, three editorial sections) ---- */
/* Beaches, days out, and the weekly market schedule. Light sections that
   alternate plaster and the deeper plaster surface; no ink scope. */
.clb-explore {
	padding-top: clamp(4rem, 8vw, 7.5rem);
	padding-bottom: clamp(4rem, 8vw, 7.5rem);
}

.clb-explore--sunk {
	background: var(--surface-sunk);
}

.clb-explore__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.clb-explore__head {
	margin: 0 0 clamp(2.5rem, 6vw, 4rem);
	max-width: 900px;
}

.clb-explore__eyebrow {
	margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-meta);
	letter-spacing: var(--tracking-body);
	color: var(--accent);
}

.clb-explore__title {
	margin: 0;
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: clamp(2.3rem, 5.4vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
	color: var(--text-primary);
}

.clb-explore__title em {
	font-style: italic;
}

.clb-explore__lead {
	max-width: 60ch;
	margin: clamp(1.2rem, 2.6vw, 1.8rem) 0 0;
	font-size: var(--text-lead);
	font-weight: var(--weight-light);
	line-height: 1.55;
	letter-spacing: var(--tracking-body);
	color: var(--text-muted);
}

/* Place cards: a photo with a distance badge, a name, and a line. */
.clb-explore__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1.6rem, 3vw, 2.6rem);
}

.clb-explore__card {
	display: flex;
	flex-direction: column;
}

.clb-explore__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-xs);
	background: var(--surface-sunk);
}

.clb-explore__img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	filter: var(--image-warm);
	transform: scale(1);
	transition: transform 1.3s var(--clb-ease), filter var(--dur-slow) var(--clb-ease);
}

.clb-explore__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.5em 0.75em;
	background: var(--color-paper);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-body);
	border-radius: var(--radius-xs);
}

.clb-explore__name {
	margin: 0.95rem 0 0;
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: clamp(1.3rem, 2.1vw, 1.7rem);
	line-height: 1.1;
	letter-spacing: var(--tracking-title);
	color: var(--text-primary);
}

.clb-explore__line {
	max-width: 40ch;
	margin: 0.45rem 0 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	line-height: 1.55;
	color: var(--text-secondary);
}

/* The weekly market schedule. */
.clb-explore__week {
	margin: 0;
	padding: 0;
	list-style: none;
}

.clb-explore__week-row {
	display: grid;
	grid-template-columns: minmax(110px, 150px) 1fr auto;
	gap: 0.6rem 1.5rem;
	align-items: baseline;
	padding: clamp(1.05rem, 2.3vw, 1.55rem) 0;
	box-shadow: inset 0 -1px 0 0 var(--border-faint);
}

.clb-explore__week-row:first-child {
	box-shadow: inset 0 1px 0 0 var(--border-faint), inset 0 -1px 0 0 var(--border-faint);
}

.clb-explore__week-day {
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	letter-spacing: var(--tracking-title);
	color: var(--text-primary);
}

.clb-explore__week-where {
	font-size: var(--text-body);
	font-weight: var(--weight-light);
	line-height: 1.5;
	color: var(--text-secondary);
}

.clb-explore__week-where b {
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

.clb-explore__week-tag {
	font-size: var(--text-meta);
	letter-spacing: var(--tracking-body);
	color: var(--text-muted);
	white-space: nowrap;
	text-align: right;
}

.clb-explore__week-tag--near {
	color: var(--accent);
}

.clb-explore__note {
	max-width: 64ch;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding-top: clamp(1.4rem, 2.6vw, 1.9rem);
	font-size: var(--text-body);
	font-weight: var(--weight-light);
	line-height: 1.65;
	color: var(--text-secondary);
	box-shadow: inset 0 1px 0 0 var(--border-faint);
}

.clb-explore__note b {
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

/* Per-word title rise, built by villa-landing.js. The hidden start state lives
   only in the JS-created .clb-w spans, so with no JS the title is plain text. */
.clb-explore__title .clb-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.clb-explore__title .clb-w > span {
	display: inline-block;
	transform: translateY(116%);
	transition: transform 1.05s var(--clb-ease);
	transition-delay: calc(60ms + var(--wi, 0) * 62ms);
	will-change: transform;
}

.clb-explore__title.is-in .clb-w > span {
	transform: translateY(0);
}

@media (hover: hover) {
	.clb-explore__card:hover .clb-explore__img {
		transform: scale(1.05);
		filter: var(--image-warm-strong);
	}
}

@media (max-width: 600px) {
	.clb-explore {
		padding-top: clamp(2.75rem, 9vw, 3.75rem);
		padding-bottom: clamp(2.75rem, 9vw, 3.75rem);
	}

	.clb-explore__head {
		margin-bottom: clamp(1.8rem, 6vw, 2.6rem);
	}

	.clb-explore__media {
		aspect-ratio: 3 / 4;
	}

	.clb-explore__week-row {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}

	.clb-explore__week-tag {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clb-explore__title .clb-w > span {
		transform: none !important;
		transition: none !important;
	}
}

/* --- Lightbox --------------------------------------------- */
.clb-villa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.25rem, 5vw, 4rem);
	background: rgba(22, 21, 15, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) var(--clb-ease), visibility var(--dur-base) var(--clb-ease);
}

.clb-villa-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.clb-villa-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clb-villa-lightbox__img {
	width: min(92vw, 1280px);
	height: min(85vh, 860px);
	max-width: 100%;
	object-fit: contain;
	filter: var(--image-warm);
	opacity: 0;
	transform: scale(0.985);
	transition: opacity var(--dur-base) var(--clb-ease), transform var(--dur-base) var(--clb-ease);
}

.clb-villa-lightbox.is-open .clb-villa-lightbox__img {
	opacity: 1;
	transform: scale(1);
}

.clb-villa-lightbox__btn {
	position: absolute;
	appearance: none;
	background: transparent;
	border: 0;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-limewash);
	box-shadow: inset 0 0 0 1px var(--line-paper);
	border-radius: var(--radius-pill);
	transition: background var(--dur-quick) var(--clb-ease), box-shadow var(--dur-quick) var(--clb-ease);
}

.clb-villa-lightbox__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.clb-villa-lightbox__close {
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
}

.clb-villa-lightbox__prev {
	left: clamp(0.75rem, 3vw, 2rem);
	top: 50%;
	transform: translateY(-50%);
}

.clb-villa-lightbox__next {
	right: clamp(0.75rem, 3vw, 2rem);
	top: 50%;
	transform: translateY(-50%);
}

.clb-villa-lightbox__counter {
	position: absolute;
	bottom: clamp(1rem, 3vw, 2rem);
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--text-meta);
	letter-spacing: 0.06em;
	color: rgba(243, 238, 229, 0.74);
}

.clb-villa-lightbox[hidden] {
	display: none;
}

/* --- Entrance animations (added by villa-landing.js) ------ */
/* The hidden start state lives only in these classes, which the script adds at
   runtime. With no JS, or under reduced motion, the script never adds them, so
   every block shows in full. Transform and opacity only, eased with --clb-ease. */
.clb-villa .clb-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--clb-ease), transform var(--dur-slow) var(--clb-ease);
	will-change: opacity, transform;
}

.clb-villa .clb-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* The lead photo mosaic eases in with a touch of scale on load. */
.clb-villa .clb-villa-mosaic__inner.clb-reveal {
	transform: translateY(26px) scale(0.986);
}

.clb-villa .clb-villa-mosaic__inner.clb-reveal.is-in {
	transform: none;
}

/* Staggered children: each item in a list rises a beat after the last. */
.clb-villa .clb-reveal-group > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur-base) var(--clb-ease), transform var(--dur-base) var(--clb-ease);
	will-change: opacity, transform;
}

.clb-villa .clb-reveal-group.is-in > * {
	opacity: 1;
	transform: none;
}

.clb-villa .clb-reveal-group.is-in > *:nth-child(1) { transition-delay: 40ms; }
.clb-villa .clb-reveal-group.is-in > *:nth-child(2) { transition-delay: 90ms; }
.clb-villa .clb-reveal-group.is-in > *:nth-child(3) { transition-delay: 140ms; }
.clb-villa .clb-reveal-group.is-in > *:nth-child(4) { transition-delay: 190ms; }
.clb-villa .clb-reveal-group.is-in > *:nth-child(5) { transition-delay: 240ms; }
.clb-villa .clb-reveal-group.is-in > *:nth-child(6) { transition-delay: 290ms; }
.clb-villa .clb-reveal-group.is-in > *:nth-child(n+7) { transition-delay: 340ms; }

/* --- Hover (pointer devices only) ------------------------- */
@media (hover: hover) {
	.clb-villa-mosaic__btn:hover .clb-villa-mosaic__img {
		transform: scale(var(--hover-image-scale));
		filter: var(--image-warm-strong);
	}

	.clb-villa .clb-pill:hover {
		background: var(--color-limewash-deep);
	}

	.clb-villa-lightbox__btn:hover {
		background: rgba(243, 238, 229, 0.08);
		box-shadow: inset 0 0 0 1px var(--color-limewash);
	}
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 900px) {
	.clb-villa-body__inner {
		grid-template-columns: 1fr;
	}

	/* The side column stays in the flow so the booking widget (and its
	   fixed bottom bar) still mount; booking-calendar.css hides the tall
	   card on mobile and shows the slim sticky bottom bar instead, with
	   the card revealed on demand. */
	.clb-villa-body__side {
		min-width: 0;
	}
}

@media (max-width: 760px) {
	.clb-villa-mosaic__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		aspect-ratio: auto;
	}

	.clb-villa-mosaic__cell {
		aspect-ratio: 4 / 3;
	}

	.clb-villa-mosaic__cell--lead {
		grid-row: auto;
		grid-column: span 2;
		aspect-ratio: 16 / 10;
	}

	.clb-villa-offers__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Reduced motion: settle to the end state -------------- */
@media (prefers-reduced-motion: reduce) {
	.clb-villa *,
	.clb-villa *::before,
	.clb-villa *::after,
	.clb-villa-lightbox,
	.clb-villa-lightbox * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.clb-villa-mosaic__btn:hover .clb-villa-mosaic__img {
		transform: none;
	}

	/* If the reveal classes were ever added, settle them to the shown state. */
	.clb-villa .clb-reveal,
	.clb-villa .clb-villa-mosaic__inner.clb-reveal,
	.clb-villa .clb-reveal-group > * {
		opacity: 1 !important;
		transform: none !important;
	}
}