/* Global layout primitives — container, grid, utilities. Section rhythm lives in sections.css. */

.ibv-container {
	width: 100%;
	max-width: var(--ibv-container-max);
	margin-inline: auto;
	padding-inline: var(--ibv-container-pad-x);
}

.ibv-container--narrow {
	max-width: var(--ibv-container-narrow);
}

.ibv-stack > * + * {
	margin-top: var(--ibv-space-lg);
}

.ibv-grid {
	display: grid;
	gap: var(--ibv-grid-gutter);
}

/* Responsive grids — min column widths are project defaults; tune per template
   if needed. auto-fill (not auto-fit) keeps empty tracks when there are fewer
   items than columns, so cards hold their N-up size instead of stretching. */
.ibv-grid--2 {
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.ibv-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.ibv-grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}

/* Short hairline accent rule used under section headings (Figma standard
   100×1px). Default colour is gold; `.ibv-rule--sage` swaps the variant
   used on sage-accented sections. Per-instance override via the
   `--ibv-rule-color` custom property (e.g. inline style on the element).
   Works on either `<hr>` or `<span>` — `display: block` ensures the
   inline `<span>` use cases (hero, villa-listing-hero) lay out the same. */
.ibv-rule {
	display: block;
	width: 6.25rem;
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--ibv-rule-color, var(--ibv-color-gold-500));
}

.ibv-rule--gold {
	--ibv-rule-color: var(--ibv-color-gold-500);
}

.ibv-rule--sage {
	--ibv-rule-color: var(--ibv-color-sage-500);
}

/* Elevated card surface — the canonical box-on-light-bg treatment used
   anywhere a panel sits on the off-white page background (accommodation
   tile, concierge service card, etc). Composed onto a component class
   so each consumer adds its own layout rules; this only owns the
   background, radius, and shadow. */
.ibv-surface-card {
	background: var(--ibv-color-surface);
	border-radius: var(--ibv-radius-md);
	box-shadow: var(--ibv-shadow-md);
}

/* `.screen-reader-text` is the WordPress / plugin convention for
   accessibility-only text (GF date sublabels, post navigation labels,
   etc). Most themes ship this rule via `wp_body_open` styles — alias
   it onto the project's `.ibv-u-visually-hidden` so any plugin that
   emits it is hidden visually without per-plugin scoping. */
.ibv-u-visually-hidden,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}