/* base.css */
/* Auto-capitalize first letter of all text elements */
.ef-ih-heading::first-letter,
.ef-media-caption::first-letter,
.ef-hc-description::first-letter {
	text-transform: uppercase;
}

/* Prose — rich text link treatment */
.ef-prose a {
	color: var(--ef-color-primary);
	text-decoration: underline;
	text-decoration-color: var(--ef-color-secondary);
	text-underline-offset: var(--ef-radius-s);
}

/* Shared icon SVG sizing */
.ef-ih-icon svg,
.ef-label-icon svg,
.ef-card-logo-icon svg,
.ts-action-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
/* Shared placeholder for empty media slots */
.ef-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--ef-color-border);
	color: var(--ef-color-text);
	opacity: 0.3;
}

/* buttons.css */
/* Holy Albatross — binary inline/stack layout */
.ef-buttons {
	display: flex;
	flex-wrap: wrap;
	--btn-gap: var(--ef-gap-m);
	--btn-min-w: 150px;
	--btn-accent: var(--ef-color-primary);
	--btn-on-accent: var(--ef-color-white);
	--btn-accent-light: var(--ef-color-primary_light);
	--ts-icon-size: 1em;
	--ts-icon-color: currentColor;
	gap: var(--btn-gap);
	--threshold: calc(var(--count) * var(--btn-min-w) + (var(--count) - 1) * var(--btn-gap));
}

/* Shared button base — native items + Voxel action containers */
.ef-buttons-item,
.ef-buttons .ts-action-con {
	flex-grow: 1;
	flex-basis: calc((var(--threshold) - 100%) * 999);
	min-width: min-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ef-gap-s);
	white-space: nowrap;
	padding: var(--ef-pad-m) var(--ef-pad-l);
	border: var(--ef-border-s) solid transparent;
	border-radius: var(--ef-radius-m);
	font-size: 1rem;
	font-weight: var(--ef-weight-m);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ef-transition), color var(--ef-transition), border-color var(--ef-transition);
	box-sizing: border-box;
}

.ef-buttons-item:focus-visible {
	outline: var(--ef-border-m) solid var(--btn-accent);
	outline-offset: var(--ef-border-m);
}

/* Primary — filled with accent */
.ef-buttons-item--primary,
.ef-buttons .ef-btn--primary > .ts-action-con {
	background-color: var(--btn-accent);
	color: var(--btn-on-accent);
}
a.ef-buttons-item--primary { color: var(--btn-on-accent); }

/* Secondary — outlined with accent */
.ef-buttons-item--secondary,
.ef-buttons .ef-btn--secondary > .ts-action-con {
	border-color: var(--btn-accent);
	color: var(--btn-accent);
}

/* Ghost — text only */
.ef-buttons-item--ghost,
.ef-buttons .ef-btn--ghost > .ts-action-con {
	color: var(--btn-accent);
}

.ef-buttons-item--ghost:hover,
.ef-buttons .ef-btn--ghost > .ts-action-con:hover {
	background-color: var(--btn-accent-light);
}

/* Reset native button appearance */
button.ef-buttons-item {
	appearance: none;
	background: none;
	font: inherit;
}

/* Voxel actions inside button mode — display:contents flattens ul/li,
   ts-action-con becomes direct flex child of .ef-buttons */
.ef-buttons .ts-advanced-list,
.ef-buttons .ts-action {
	display: contents;
}

@media (prefers-reduced-motion: reduce) {
	.ef-buttons-item,
	.ef-buttons .ts-action-con {
		transition: none;
	}
}

/* heading-content.css */
.ef-heading-content {
	display: flex;
	flex-direction: column;
	gap: var(--ef-gap-l);
}

.ef-hc-description > *:last-child {
	margin-bottom: 0;
}

/* icon-heading.css */
.ef-ih-heading {
	display: flex;
	align-items: flex-start;
	gap: var(--ef-gap-s);
	margin: 0;
	font: inherit;
}

.ef-ih-heading a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ef-transition);
}

.ef-ih-heading a:hover {
	color: var(--ef-color-secondary);
}

.ef-ih-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 1lh;
	font-size: 1em;
	color: inherit;
	fill: inherit;
	transition: color var(--ef-transition);
}

/* Stacked layout — icon above heading */
.ef-icon-heading--stacked .ef-ih-heading {
	flex-direction: column;
}

/* Pill variants (shared base) */
.ef-icon-heading--label,
.ef-icon-heading--primary,
.ef-icon-heading--secondary {
	--label-color: var(--ef-color-secondary);
	display: inline-flex;
	align-self: flex-start;
	background-color: color-mix(in srgb, var(--label-color) 15%, white);
	color: color-mix(in srgb, var(--label-color) 60%, black);
	padding: var(--ef-pad-xs) var(--ef-pad-m);
	border-radius: var(--ef-radius-m);
	text-decoration: none;
}

.ef-icon-heading--primary {
	--label-color: var(--ef-color-primary);
}

/* Ghost variant */
.ef-icon-heading--ghost {
	opacity: 0.6;
}

/* Pill variants flow inline within lists; other items take full width. */
.ef-list:has(.ef-icon-heading--label, .ef-icon-heading--primary, .ef-icon-heading--secondary) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--ef-gap-s);
}

.ef-list:has(.ef-icon-heading--label, .ef-icon-heading--primary, .ef-icon-heading--secondary) > :has(.ef-icon-heading--label, .ef-icon-heading--primary, .ef-icon-heading--secondary) {
	margin-top: 0 !important;
}

.ef-list:has(.ef-icon-heading--label, .ef-icon-heading--primary, .ef-icon-heading--secondary) > :not(:has(.ef-icon-heading--label, .ef-icon-heading--primary, .ef-icon-heading--secondary)) {
	width: 100%;
}

/* Heading + Content wrapper (for repeater items) */
.ef-ih-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

/* Content (optional) */
.ef-ih-content > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ef-ih-heading a,
	.ef-ih-icon {
		transition: none;
	}
}

/* label.css */
.ef-labels {
	position: absolute;
	top: var(--ef-gap-l);
	left: var(--ef-gap-l);
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-gap-s);
}

.ef-label {
	display: inline-flex;
	align-items: center;
	gap: var(--ef-gap-s);
	background-color: var(--ef-color-accent);
	color: var(--ef-color-secondary) !important;
	font-weight: var(--ef-weight-m);
	padding: var(--ef-pad-xs) var(--ef-pad-m);
	border-radius: var(--ef-radius-m);
	text-decoration: none;
	transition: opacity var(--ef-transition);
}

.ef-label-icon {
	display: inline-flex;
	font-size: var(--ef-size-icon);
}

a.ef-label:hover,
a.ef-label:focus-visible {
	opacity: 0.8;
}

.ef-card:not(:has(> .ef-media-frame)) > .ef-labels {
	position: static;
	align-self: flex-start;
	margin-bottom: calc(var(--ef-gap-s) - var(--ef-gap-l));
}

/* list.css */
/* Stack (default) — vertical column */
.ef-list {
	--ef-list-gap: var(--ef-gap-m);
	display: flex;
	flex-direction: column;
	gap: var(--ef-list-gap);
}

/* Inline — equal-width columns */
.ef-list--inline {
	flex-direction: row;
}

.ef-list--inline > * {
	flex: 1 1 0%;
}

/* First item — no gap above */
.ef-list > :first-child {
	margin-top: 0 !important;
}

/* media.css */
.ef-media-frame {
	position: relative;
	margin: 0;
}

.ef-media-frame a {
	display: block;
}

.ef-media-frame img,
.ef-media-frame video,
.ef-media-frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--ef-radius-m);
}