/* ==========================================================================
   INDUVRA — LAYOUT
   Containers, sections and reusable grid primitives.
   ========================================================================== */

/* ---- Containers ----------------------------------------------------- */
.induvra-container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

.induvra-container--content {
	max-width: var(--content-width);
}

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

/* ---- Sections ------------------------------------------------------- */
.induvra-section {
	padding-block: var(--space-2xl);
}

.induvra-section--tight {
	padding-block: var(--space-xl);
}

.induvra-section--loose {
	padding-block: var(--space-3xl);
}

.induvra-section--surface {
	background-color: var(--color-surface);
}

.induvra-section--blue {
	background-color: var(--color-surface-blue);
}

.induvra-section__inner {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

/* ---- Section heading ------------------------------------------------ */
.induvra-section-heading {
	margin-bottom: var(--space-lg);
}

.induvra-section-heading--center {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.induvra-section-heading__title {
	margin: 0;
	font-size: var(--font-size-h2);
	font-weight: var(--weight-medium);
}

.induvra-section-heading__text {
	margin: var(--space-sm) 0 0;
	color: var(--color-text-secondary);
}

/* Split heading: title left, action right. */
.induvra-section-heading--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md);
}

/* ---- Grids ---------------------------------------------------------- */
.induvra-grid {
	display: grid;
	gap: var(--space-md);
}

.induvra-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.induvra-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.induvra-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.induvra-grid--wide {
	gap: var(--space-lg);
}

/* Reusable product grid (WooCommerce loops and custom queries). */
.induvra-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-lg) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.induvra-product-grid > li,
.induvra-product-grid > .product {
	margin: 0;
	width: auto;
	float: none;
}

/* Split content rows (image / text). */
.induvra-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: var(--space-2xl);
}

.induvra-split--reverse .induvra-split__media {
	order: 2;
}

.induvra-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-medium);
}

/* --------------------------------------------------------------------------
   Storefront content-wrapper compatibility.
   Storefront's templates render inside `<div class="col-full">`; retarget it
   to the Induvra container width/padding without touching parent files.
   -------------------------------------------------------------------------- */
.site-content .col-full {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-md);
	box-sizing: border-box;
	float: none;
}

/* Avoid double gutters/width caps when a container nests inside .col-full. */
.col-full .induvra-container {
	max-width: none;
	padding-inline: 0;
}

/* Storefront sets overflow-x:hidden on #page, which creates a scroll
   container and can break position:sticky and full-bleed sections. */
#page.site {
	overflow-x: clip;
}

/* ---- Utilities ------------------------------------------------------ */
.induvra-stack > * + * {
	margin-top: var(--space-sm);
}

.induvra-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.induvra-center {
	text-align: center;
}

.induvra-mx-auto {
	margin-inline: auto;
}