/*
 * A column: its elements one under another (Arrange can put them side by side or in a
 * grid, utilities.css, ADR 0028). It is a size container, so an Image's size slider
 * measures against the column's width (cqi) wherever the image sits in it.
 */
.sv-column {
	/* Its own arrangement (utilities.css), not the one of a column it sits in. */
	--sv-in-row: 0;
	--sv-flow-basis: initial;
	--sv-flow-min: initial;
	--sv-row-self: initial;
	/* Not the space of a column it sits in (a column that fits its content sets it, ADR 0029). */
	--sv-fit-base: initial;
	display: flex;
	flex-direction: column;
	justify-content: var(--sv-column-justify, flex-start);
	min-inline-size: 0;
	container-type: inline-size;
}

/* Default gap; "Space between elements" (sv-gap-*) wins. */
:where(.sv-column) {
	gap: var(--sv-space-sm);
}

/*
 * A background color or photo (ADR 0026) gets some room around the content unless
 * "Space inside" says otherwise (zero specificity here).
 */
:where(.sv-column:is(.sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse), :is(.sv-column, .sv-contact-box):has(> .sv-column__bg)) {
	padding: var(--sv-space-md);
}

/* Background photo: covers the column (or a Contact box, ADR 0034), behind its content; rounded corners clip it. */
:is(.sv-column, .sv-contact-box):has(> .sv-column__bg) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sv-column__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.sv-column__bg-img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

/* A layer over the photo: light (the page color, dark text) or dark (85%, light text). */
.sv-column__bg::after {
	position: absolute;
	inset: 0;
	background: var(--sv-color-inverse);
	content: "";
	opacity: 0.85;
}

.sv-column__bg--light::after {
	background: var(--sv-color-background);
	opacity: 0.78;
}

.sv-column__bg--none::after {
	content: none;
}

/* Where the picture sits, and Contain: the whole picture, with the background's color around it (ADR 0074). */
.sv-column__bg--at-top :is(.sv-column__bg-img, .sv-column__bg-video) {
	object-position: 50% 0;
}

.sv-column__bg--at-bottom :is(.sv-column__bg-img, .sv-column__bg-video) {
	object-position: 50% 100%;
}

.sv-column__bg--at-left :is(.sv-column__bg-img, .sv-column__bg-video) {
	object-position: 0 50%;
}

.sv-column__bg--at-right :is(.sv-column__bg-img, .sv-column__bg-video) {
	object-position: 100% 50%;
}

.sv-column__bg--contain :is(.sv-column__bg-img, .sv-column__bg-video) {
	object-fit: contain;
}

/* A custom layer: its own color at its own strength; the text color is chosen with it. */
.sv-column__bg--custom::after {
	background: var(--sv-overlay-color, #000);
	opacity: var(--sv-overlay-strength, 50%);
}


/* Light text over the dark layer (zero specificity: a chosen color wins). */
:where(:is(.sv-column, .sv-contact-box):has(> .sv-column__bg--dark)) {
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 78%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	--sv-accent-dark: var(--sv-color-primary);
	color: var(--sv-color-text);
}

:where(:is(.sv-column, .sv-contact-box):has(> .sv-column__bg--light)) {
	--sv-color-text: var(--sv-ink);
	--sv-accent: initial;
	--sv-accent-dark: initial;
	--sv-button-main-bg: initial;
	--sv-button-main-text: initial;
	--sv-color-muted: var(--sv-ink-muted);
	color: var(--sv-color-text);
}

/*
 * The room inside a column's box and the box's corners (ADR 0050), for a photo at the box's top or
 * bottom edge (image/style.css): it sits close to the edge, with corners that follow the box's. A
 * background color is square until Rounded corners says otherwise; a box look has medium corners.
 */
.sv-column:is(.sv-bg-background, .sv-bg-surface, .sv-bg-primary, .sv-bg-secondary, .sv-bg-inverse) {
	--sv-box-pad: var(--sv-space-md);
	--sv-box-radius: 0px;
}

.sv-column:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) {
	--sv-box-pad: var(--sv-space-md);
	--sv-box-radius: var(--sv-radius-md);
}

.sv-column.sv-inset-sm {
	--sv-box-pad: var(--sv-space-sm);
}

.sv-column.sv-inset-md {
	--sv-box-pad: var(--sv-space-md);
}

.sv-column.sv-inset-lg {
	--sv-box-pad: var(--sv-space-lg);
}

.sv-column.sv-inset-custom {
	--sv-box-pad: var(--sv-custom-inset);
}

.sv-column.sv-round-none {
	--sv-box-radius: 0px;
}

.sv-column.sv-round-sm {
	--sv-box-radius: var(--sv-radius-sm);
}

.sv-column.sv-round-md {
	--sv-box-radius: var(--sv-radius-md);
}

.sv-column:is(.sv-round-lg, .sv-round-full) {
	--sv-box-radius: var(--sv-radius-lg);
}

.sv-column.sv-round-custom {
	--sv-box-radius: var(--sv-custom-round);
}