/* Accommodation overview — Apartments main column.
 * Heading + body prose + free-text fact pills + static "from" price.
 * Lives inside .ibv-villa-detail__main (shell owns outer rhythm). */

.ibv-accommodation-overview {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-lg);
	/* The villa-detail __main column adds a 24px (--ibv-space-lg) flex gap to
	   the gallery below; +18px here makes 42px from "Price varies by season"
	   to the Gallery heading (Figma). Scoped to accommodation pages. */
	margin-bottom: 1.125rem;
}

/* Intro group — heading + body sit tight together (Figma 347-3681), grouped
   apart from the 24px rhythm down to pills/price. Reset the section-heading
   component's default 48px (--ibv-space-2xl) margin (mirrors the gallery). */
.ibv-accommodation-overview__intro {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-md);
}

.ibv-accommodation-overview .ibv-section-heading {
	margin-bottom: 0;
}

.ibv-accommodation-overview__body {
	color: var(--ibv-color-text);
	line-height: var(--ibv-lh-relaxed);
}

.ibv-accommodation-overview__body-block {
	margin: 0;
}

/* The collapsible "Read more" behaviour (clamp, teaser fade, toggle button,
   reduced-motion) is shared — see assets/css/readmore.css (.ibv-readmore__*).
   The body div carries .ibv-readmore__content--clamp when over the length
   threshold; readmore.js toggles .is-open. */

/* Fact pills — free-text chips (location / sleeps / availability).
   Figma node 347-3680: saturated 100-ramp fills, 10px Uncut Sans, 1.4 lh.
   Location/sleeps text is forest-green; the blue pill uses black text. */
.ibv-accommodation-overview__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ibv-space-2xs);
}

.ibv-accommodation-overview__pill {
	display: inline-flex;
	align-items: center;
	padding: var(--ibv-space-2xs) var(--ibv-space-sm);
	border-radius: var(--ibv-radius-pill);
	font-size: var(--ibv-fs-micro);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-forest-green-deep);
	background: var(--ibv-color-mint-100);
}

.ibv-accommodation-overview__pill--location {
	background: var(--ibv-color-gold-100);
}

.ibv-accommodation-overview__pill--sleeps {
	background: var(--ibv-color-mint-100);
}

.ibv-accommodation-overview__pill--availability {
	color: var(--ibv-color-text);
	background: var(--ibv-color-blue-100);
}

/* "From €X,XXX / wk" + season note. Figma: 12px gap, 10px black labels. */
.ibv-accommodation-overview__price {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-sm);
}

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

.ibv-accommodation-overview__price-from {
	font-size: var(--ibv-fs-micro);
	color: var(--ibv-color-text);
}

.ibv-accommodation-overview__price-amount {
	font-family: var(--ibv-font-display);
	font-size: var(--ibv-fs-h2);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-tight);
	color: var(--ibv-color-forest-green-deep);
}

.ibv-accommodation-overview__price-unit {
	font-size: var(--ibv-fs-micro);
	color: var(--ibv-color-text);
}

.ibv-accommodation-overview__price-note {
	margin: 0;
	font-size: var(--ibv-fs-micro);
	color: var(--ibv-color-text);
}