/* Public Image Card: recipe styles come from image-grid-card; geometry stays with Grid. */
.etb-component-image-card {
	width: 100%;
}

.etb-component-image-card:not(.etb-component-image-card--ratio-auto) {
	min-height: 0 !important;
}

.etb-component-image-card--ratio-square { aspect-ratio: 1 / 1; }
.etb-component-image-card--ratio-4-3 { aspect-ratio: 4 / 3; }
.etb-component-image-card--ratio-3-2 { aspect-ratio: 3 / 2; }
.etb-component-image-card--ratio-16-9 { aspect-ratio: 16 / 9; }
.etb-component-image-card--ratio-portrait { aspect-ratio: 4 / 5; }

.etb-component-image-card.is-style-eth-overlay-count {
	min-height: clamp(17rem, 25vw, 23rem);
	border-radius: var(--eth-radius-l, 1rem);
	color: var(--eth-light, #fff);
	box-shadow: var(--eth-shadow-m, 0 1rem 2.4rem rgba(15, 23, 42, .12));
}

.etb-component-image-card.is-style-eth-overlay-count .etb-image-grid__overlay {
	background: linear-gradient(to top, rgba(8, 15, 28, .82), rgba(8, 15, 28, .12) 72%);
}

.etb-component-image-card.is-style-eth-overlay-count .etb-image-grid__content {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.15rem, 2.4vw, 2rem);
}

.etb-component-image-card.is-style-eth-overlay-count .etb-component-image-card__meta {
	margin: var(--eth-space-2xs, .5rem) 0 0;
	color: rgba(255, 255, 255, .78);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.etb-component-image-card.is-style-eth-portfolio-link {
	display: flex;
	flex-direction: column;
	min-height: 0;
	aspect-ratio: auto !important;
	overflow: hidden;
	border: 1px solid var(--eth-border, rgba(17, 24, 39, .12));
	border-radius: var(--eth-radius-l, 1rem);
	background: var(--eth-bg-surface, #fff);
	color: var(--eth-text, #1f2937);
	box-shadow: var(--eth-shadow-s, 0 2px 6px rgba(0, 0, 0, .08));
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-component-image-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--eth-bg-muted, #dfe3e8);
}

.etb-component-image-card.is-style-eth-portfolio-link.etb-component-image-card--ratio-square .etb-component-image-card__media { aspect-ratio: 1 / 1; }
.etb-component-image-card.is-style-eth-portfolio-link.etb-component-image-card--ratio-4-3 .etb-component-image-card__media { aspect-ratio: 4 / 3; }
.etb-component-image-card.is-style-eth-portfolio-link.etb-component-image-card--ratio-3-2 .etb-component-image-card__media { aspect-ratio: 3 / 2; }
.etb-component-image-card.is-style-eth-portfolio-link.etb-component-image-card--ratio-portrait .etb-component-image-card__media { aspect-ratio: 4 / 5; }

.etb-component-image-card.is-style-eth-portfolio-link .etb-component-image-card__media .etb-image-grid__image,
.etb-component-image-card.is-style-eth-portfolio-link .etb-component-image-card__media > .components-placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__overlay {
	display: none;
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__content {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--eth-space-m, 1.5rem);
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__eyebrow,
.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__eyebrow-link {
	display: inline-flex;
	margin-bottom: var(--eth-space-xs, .75rem);
	color: var(--eth-primary, #4f46e5);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__title {
	color: var(--eth-heading, var(--eth-text, #111827));
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__title a::after {
	display: none;
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__card-description {
	margin-top: var(--eth-space-xs, .75rem);
	color: var(--eth-text-muted, #667085);
}

.etb-component-image-card.is-style-eth-portfolio-link .etb-image-grid__link-icon {
	color: var(--eth-primary, #4f46e5);
}

.etb-component-image-card.etb-component--heading-s .etb-component-heading {
	font-size: var(--eth-fs-body, 1rem);
}

.etb-component-image-card.etb-component--heading-m .etb-component-heading {
	font-size: calc(var(--eth-fs-h3, 1.35rem) * .78);
}

.etb-component-image-card.etb-component--heading-l .etb-component-heading {
	font-size: var(--eth-fs-h3, 1.35rem);
}

.etb-component-image-card.etb-component--motion-none,
.etb-component-image-card.etb-component--motion-none *,
.etb-component-image-card.etb-component--motion-none *::before,
.etb-component-image-card.etb-component--motion-none *::after {
	transition: none !important;
}

.etb-component-image-card.etb-component--motion-none:hover,
.etb-component-image-card.etb-component--motion-none:focus-within,
.etb-component-image-card.etb-component--motion-none:hover .etb-image-grid__image,
.etb-component-image-card.etb-component--motion-none:focus-within .etb-image-grid__image,
.etb-component-image-card.etb-component--motion-none:hover .etb-image-grid__content,
.etb-component-image-card.etb-component--motion-none:focus-within .etb-image-grid__content {
	transform: none !important;
}

@media (hover: hover) {
	.etb-component-image-card.etb-component--motion-emphasized:hover,
	.etb-component-image-card.etb-component--motion-emphasized:focus-within {
		transform: translateY(-.65rem) !important;
		box-shadow: var(--eth-shadow-l, 0 18px 36px rgba(0, 0, 0, .2));
	}

	.etb-component-image-card.etb-component--motion-emphasized:hover .etb-image-grid__image,
	.etb-component-image-card.etb-component--motion-emphasized:focus-within .etb-image-grid__image {
		transform: scale(1.08);
	}
}

@media (max-width: 600px) {
	.etb-component-image-card--ratio-16-9 {
		aspect-ratio: 4 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etb-component-image-card,
	.etb-component-image-card *,
	.etb-component-image-card *::before,
	.etb-component-image-card *::after {
		transition: none !important;
	}
}