/* Villa detail — overview section. Matches Figma node 1:5973.
   Renders inside .ibv-villa-detail__main (shell owns vertical rhythm).
   The top border + padding-block-start is section-specific chrome from
   the design, not the rhythm system. */

.ibv-villa-overview {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-block-start: 1px solid var(--ibv-color-border);
	/* Match `.ibv-villa-detail__main--villa`'s gap: the flex gap sits above
	   the divider line, this padding sits below it, so the two must be the
	   same value for the divider to bisect the gap equally. */
	padding-block-start: var(--ibv-space-2xl);
}

/* Type comes from the shared .ibv-h3 utility on the element — the same
   treatment the prose description gives its h3s — so the section title
   and the description's headings read as one family. */
.ibv-villa-overview__heading {
	margin: 0 0 var(--ibv-space-md);
	color: var(--ibv-color-text);
}

/* Description ------------------------------------------------------- */
/* Always-visible one-paragraph summary (villa_summary field); the Read more
   toggle sits directly beneath it and reveals the full description. */
.ibv-villa-overview__summary {
	margin: 0;
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-body);
	line-height: var(--ibv-lh-relaxed);
	color: var(--ibv-color-text);
}

.ibv-villa-overview__description {
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-small);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-text);
}

/* Breathing room above the revealed prose: a margin on the first child,
   not padding on the collapsible itself — with border-box sizing, padding
   floors the element's height (12px showed through at max-height: 0).
   The child margin is just content, clipped away when closed. */
.ibv-villa-overview__description > :first-child {
	margin-block-start: var(--ibv-space-sm);
}

/* The collapsible "Read more" behaviour (toggle button, height animation,
   reduced-motion) is shared — see assets/css/readmore.css (.ibv-readmore__*).
   The description div carries .ibv-readmore__content--collapse (fully hidden
   until opened); readmore.js toggles .is-open. */

/* Amenities --------------------------------------------------------- */
.ibv-villa-overview .ibv-amenity-ticks {
	margin-block-start: var(--ibv-space-2xl);
}

/* Price block ------------------------------------------------------- */
.ibv-villa-overview__price {
	margin-block-start: var(--ibv-space-xl);
	display: flex;
	flex-direction: column;
}

/* Unpriced villas render an empty amount span (kept for the enquiry-panel
   JS to hydrate a dated rate into) — while it's empty the block shows
   nothing, so drop its margin too. The JS resets the amount to empty when
   dates clear, which restores this state. */
.ibv-villa-overview__price:has(.ibv-villa-overview__price-amount:empty) {
	margin-block-start: 0;
}

.ibv-villa-overview__price-row {
	display: flex;
	align-items: baseline;
	gap: var(--ibv-space-2xs);
	margin: 0;
}

.ibv-villa-overview__price-from,
.ibv-villa-overview__price-unit,
.ibv-villa-overview__price-note {
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-micro);
	color: var(--ibv-color-text);
}

.ibv-villa-overview__price-note {
	margin: 0;
}

.ibv-villa-overview__price-amount {
	font-family: var(--ibv-font-display);
	font-weight: var(--ibv-font-weight-regular);
	/* --ibv-fs-h2 clamps 24→36px — closest semantic token to Figma's 32px.
	   Renders ~4px taller than the design on desktop; deliberate trade for
	   staying on the named scale. */
	font-size: var(--ibv-fs-h2);
	line-height: var(--ibv-lh-snug);
	color: var(--ibv-color-forest-green-deep);
}