/* ==========================================================================
   VIC Theme — Layout
   Page shell, container, sections, surfaces, grids, stacks, entry content.
   Site header and footer styles live in components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell — footer sits at the bottom on short pages.
   -------------------------------------------------------------------------- */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

/* --------------------------------------------------------------------------
   Container — horizontal padding follows the responsive matrix via
   --container-pad; content never exceeds --container-max.
   -------------------------------------------------------------------------- */
.container,
.vic-container {
	width: min(100% - (var(--container-pad) * 2), var(--container-max));
	margin-inline: auto;
}

/* Readable measure for sustained body copy (≈ 60–75 characters). */
.container--narrow,
.vic-container--narrow {
	width: min(100% - (var(--container-pad) * 2), var(--measure-body));
}

.measure {
	max-width: var(--measure-body);
}

.measure-hero {
	max-width: var(--measure-hero);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
/* Theme markup. Elementor Containers get the same presets via padding
   variables in elementor.css (:not(.e-con) avoids double padding). */
.section,
.vic-section:not(.e-con) {
	padding-block: var(--section-pad-y);
}

.vic-section--compact:not(.e-con) {
	padding-block: var(--section-pad-y-compact);
}

.vic-section--large:not(.e-con) {
	padding-block: var(--section-pad-y-large);
}

.section--hero,
.vic-section--hero:not(.e-con) {
	padding-block: var(--hero-pad-y);
}

/* --------------------------------------------------------------------------
   Gap presets (flex/grid containers)
   -------------------------------------------------------------------------- */
.vic-gap-xs { gap: var(--gap-xs); }
.vic-gap-sm { gap: var(--gap-sm); }
.vic-gap-md { gap: var(--gap-md); }
.vic-gap-lg { gap: var(--gap-lg); }
.vic-gap-xl { gap: var(--gap-xl); }

/* --------------------------------------------------------------------------
   Media ratios — reserve space (no layout shift); opt-in, never global.
   Product 16:10 · Hero 16:9 · Editorial 4:3 · Square 1:1
   -------------------------------------------------------------------------- */
:is(.vic-media--16x10, .vic-media--16x9, .vic-media--4x3, .vic-media--1x1) {
	overflow: hidden;
}

.vic-media--16x10 { aspect-ratio: 16 / 10; }
.vic-media--16x9  { aspect-ratio: 16 / 9; }
.vic-media--4x3   { aspect-ratio: 4 / 3; }
.vic-media--1x1   { aspect-ratio: 1 / 1; }

:is(.vic-media--16x10, .vic-media--16x9, .vic-media--4x3, .vic-media--1x1) :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section--flush-top {
	padding-block-start: 0;
}

/* Surfaces */
.surface-soft {
	background-color: var(--color-surface-soft);
}

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

/* On tinted surfaces --color-muted drops below 4.5:1; use body colour instead. */
.surface-soft .text-muted,
.surface-muted .text-muted {
	color: var(--color-body);
}

/* .surface-dark = navy background + light text.
   .on-dark      = light text only, for content placed on a navy background
                   that something else paints (e.g. an Elementor container). */
.surface-dark,
.on-dark {
	--color-focus-ring: var(--color-on-dark);
	--color-link: var(--color-on-dark);
	--color-link-hover: var(--color-on-dark-muted);

	color: var(--color-on-dark-muted);
}

.surface-dark {
	background-color: var(--vic-blue-deep);
}

:is(.surface-dark, .on-dark) :is(h1, h2, h3, h4, h5, h6, .display, .h1, .h2, .h3, .h4, .h5, .h6),
.on-dark:is(h1, h2, h3, h4, h5, h6) {
	color: var(--color-on-dark);
}

:is(.surface-dark, .on-dark) :is(.eyebrow, .vic-eyebrow) {
	color: var(--vic-orange); /* 7.9:1 on --vic-blue-deep */
}

:is(.surface-dark, .on-dark) .text-muted {
	color: var(--color-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Stack — consistent vertical rhythm between direct children.
   -------------------------------------------------------------------------- */
.stack > * + * {
	margin-block-start: var(--stack-gap, var(--gap-paragraph));
}

.stack--sm { --stack-gap: var(--space-2); }
.stack--md { --stack-gap: var(--space-6); }
.stack--lg { --stack-gap: var(--heading-gap); }

/* --------------------------------------------------------------------------
   Grid
   .grid           — layout grid: 4 cols (XS/SM), 8 (MD), 12 (LG/XL).
                     Children are full width by default; components set
                     their own grid-column spans where they need them.
   .grid--cards    — card grid: 1 col → 2 (MD, 3rd item wraps) → 3 (LG+).
   .grid--2        — 1 col → 2 (MD+).
   -------------------------------------------------------------------------- */
.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	gap: var(--grid-gap);
}

.grid > * {
	grid-column: 1 / -1;
}

.grid--cards,
.grid--2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gap);
}

.grid--cards > *,
.grid--2 > * {
	grid-column: auto;
}

@media (min-width: 768px) {
	.grid--cards,
	.grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* MD: an odd last card wraps to its own row, centred at the same width,
	   so no card looks larger or smaller than the others. */
	.grid--cards > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--grid-gap)) / 2);
	}
}

@media (min-width: 1024px) {
	.grid--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grid--cards > :last-child:nth-child(odd) {
		grid-column: auto;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   Cluster — horizontal group that wraps (button groups, inline lists).
   -------------------------------------------------------------------------- */
.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-gap, var(--gap-buttons));
}

/* --------------------------------------------------------------------------
   Default page / entry content
   -------------------------------------------------------------------------- */
.page-header {
	padding-block-end: var(--heading-gap);
}

.entry-content > * + * {
	margin-block-start: var(--gap-paragraph);
}

.entry-content > :is(h2, h3, h4, h5, h6) {
	margin-block-start: var(--space-10);
}

.entry-content > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--space-3);
}

.entry-content :is(ul, ol) {
	padding-inline-start: var(--space-6);
}

.entry-content li + li {
	margin-block-start: var(--space-2);
}

.pagination {
	margin-block-start: var(--heading-gap);
}