@use "../../abstracts/mixins";

.content {
	--columns: 0; // Fallback for single entries. Using 1 broke alignfull.
}

.entries {
	--entry-image-line-height: 0;
	--entry-meta-margin: 0 0 var(--spacing-md) 0;
}

.entries-archive {
	// Grid blocks have margin settings with default of None, so we don't need this on entries.
	margin-bottom: var(--entries-margin-bottom, var(--spacing-lg));
}

.entry {
	position: var(--entry-position, static);
	display: var(--entry-display, flex);
	flex-direction: var(--entry-flex-direction, column);
	flex-wrap: var(--entry-flex-wrap, nowrap);
	align-items: var(--align-text-vertical, initial);
	width: var(--entry-width, auto); // allows "auto" columns in grid and archives.
	margin: var(--entry-margin, 0);
	padding: var(--entry-padding, 0);
	overflow: var(--entry-overflow, unset);
	text-align: var(--align-text, inherit);
	background: var(--entry-background, unset);
	border: var(--entry-border, 0);
	border-radius: var(--entry-border-radius, var(--border-radius));
	box-shadow: var(--entry-box-shadow, unset);
}

.entry-archive,
.entry-grid {
	order: var(--entry-order, var(--entry-index, unset));
}

.has-image-left-full,
.has-image-right-full {

	.entry-image {
		aspect-ratio: var(--aspect-ratio, 4/3);
	}
}

.has-image-background {
	--entry-flex-direction: row;
	--align-text-vertical: start;
	/*
	for border radius on absolute positioned image.
	but can't use because it breaks aspect-ratio
	when content is larger than the container.
	*/
	// --entry-overflow: hidden;

	.has-image {
		--entry-background: var(--color-black);
	}

	.entry {
		aspect-ratio: var(--aspect-ratio, 4/3);
	}

	.entry-wrap {
		z-index: 0; /* this is needed for the overlay to work */
	}
}

[class*="has-image-left"],
[class*="has-image-right"] {
	--entry-flex-direction: row;
}

.has-boxed {
	color: var(--color-body); // Force dark incase these entries are inside has-dark-background.
	--heading-color: var(--color-heading); // Force dark incase these entries are inside has-dark-background.
	--entry-background: var(--color-white);
	--entry-border: var(--border);
	--entry-box-shadow: var(--shadow);
	--entry-overflow: hidden;
}

.has-boxed:not([class*="has-image-left-full"]):not([class*="has-image-right-full"]) {
	--entry-wrap-padding: var(--spacing-lg); /* Must be a single value for use in calc() full "full" images */
}

.has-image-background,
.has-boxed.has-image-left-full,
.has-boxed.has-image-right-full {
	--entry-wrap-padding: var(--spacing-lg);
}

.entry-wrap {
	display: flex;
	flex: 1; /* 1 1 100% breaks image-left/right-full */
	flex-direction: column;
	width: var(--entry-wrap-width, initial); /* using 100% was causing overflow issues and content too wide when boxed. */
	margin: var(--entry-wrap-margin, 0); /* using 0 auto caused issue when the content didn't fill up the container. */
	padding: var(--entry-wrap-padding, 0);
	color: var(--entry-wrap-color, inherit);
	background: var(--entry-wrap-background, transparent);
	border: var(--entry-wrap-border, unset);
	border-radius: var(--entry-wrap-border-radius, unset);
	box-shadow: var(--entry-wrap-box-shadow, unset);
	transition: all 0.3s ease-in-out;

	> .entry-overlay {
		z-index: -1;
	}
}

.widget {
	--entry-width: 100%;
	--entry-wrap-padding: 0;
}

@include mixins.mq(false, sm) {

	.has-image-stack {
		--entry-flex-direction: column;
		--entry-flex-wrap: nowrap;
		--entry-image-link-flex: initial;
		--entry-image-link-width: 100%;
		--entry-image-link-max-width: 100%;
		--entry-image-link-margin: 0 auto var(--spacing-md);
		--entry-image-link-before-display: none;

		// Needs to be more specific to intercept alternating images.
		.entry-image-link {
			--entry-image-link-order: -1;
		}

		.has-boxed & {
			--entry-image-link-margin: 0 auto;
		}
	}
}

// Mai Testimonials.
.entry-byline,
.entry-website {
	display: block;
	margin-top: var(--spacing-xs);
	font-weight: var(--body-font-weight);
	font-size: var(--font-size-sm);
	font-family: var(--body-font-family);
}