/* Hallmark · component: image card · macrostructure: editorial image mosaic · genre: editorial · theme: studied-DNA (Ivanko/Osty)
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * states: default · hover · focus-visible · active · disabled · loading · error · success
 * contrast: pass · responsive: 320/375/414/768 pass · motion: content-stagger/border-draw · slop: pass
 */

.elementor.elementor .e-con > .elementor-widget.elementor-widget-ivanko-image-cards {
	margin-inline: auto;
	max-width: 1340px;
	min-width: 0;
	width: 100%;
}

@media (max-width: 64rem) {
	.elementor.elementor .e-con > .elementor-widget.elementor-widget-ivanko-image-cards {
		width: calc(100% - 10px);
	}
}

.ivanko-image-cards {
	--ivanko-card-columns: 6;
	--ivanko-card-gap: var(--ivanko-space-lg);
	display: grid;
	grid-template-columns: repeat(var(--ivanko-card-columns), minmax(0, 1fr));
	gap: var(--ivanko-card-gap);
	font-family: var(--ivanko-font-body);
	min-width: 0;
	overflow-x: clip;
	width: 100%;
}

.ivanko-image-cards *,
.ivanko-image-cards *::before,
.ivanko-image-cards *::after {
	box-sizing: border-box;
}

.ivanko-image-card {
	--ivanko-card-overlay: var(--ivanko-color-card-veil);
	--ivanko-card-overlay-strength: 88%;
	align-content: end;
	background-color: var(--ivanko-color-card-veil);
	border-radius: var(--ivanko-radius-card);
	box-shadow: var(--ivanko-shadow-image-card);
	color: var(--ivanko-color-card-ink);
	display: grid;
	isolation: isolate;
	min-height: 18rem;
	min-width: 0;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.ivanko-image-card::before,
.ivanko-image-card::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

.ivanko-image-card::before {
	border: var(--ivanko-rule-hairline) solid var(--ivanko-color-card-border-rest);
	border-radius: inherit;
	inset: 0;
	opacity: 0;
	transition: opacity var(--ivanko-dur-short) var(--ivanko-ease-out);
	z-index: 4;
}

.ivanko-image-card::after {
	background: linear-gradient(112deg, transparent 36%, color-mix(in oklch, var(--ivanko-color-card-sheen) 24%, transparent) 50%, transparent 64%);
	inset: -28% -52%;
	opacity: 0.72;
	transform: translateX(-42%) rotate(7deg);
	transition: transform calc(var(--ivanko-dur-long) * 1.45) var(--ivanko-ease-out);
	z-index: 1;
}

.ivanko-image-card__draw-border {
	height: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 5;
}

.ivanko-image-card__draw-border rect {
	fill: none;
	stroke: var(--ivanko-color-accent);
	stroke-dasharray: var(--ivanko-border-length, 1000);
	stroke-dashoffset: var(--ivanko-border-length, 1000);
	stroke-width: 2;
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card:not(.is-revealed) .ivanko-image-card__state,
.ivanko-image-cards.is-reveal-ready .ivanko-image-card:not(.is-revealed) .ivanko-image-card__title,
.ivanko-image-cards.is-reveal-ready .ivanko-image-card:not(.is-revealed) .ivanko-image-card__meta {
	opacity: 0;
	transform: translateY(2rem);
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card:not(.is-revealed) .ivanko-image-card__action {
	opacity: 0;
	transform: translateY(2.5rem) scale(0.94);
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card:not(.is-revealed) .ivanko-image-card__action > span:first-child {
	transform: translateY(120%);
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card:not(.is-revealed) .ivanko-image-card__arrow {
	opacity: 0;
	transform: translateX(calc(var(--ivanko-space-xs) * -1));
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed .ivanko-image-card__state,
.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed .ivanko-image-card__title {
	animation: ivanko-card-copy-enter 520ms var(--ivanko-ease-out) both;
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed .ivanko-image-card__meta {
	animation: ivanko-card-copy-enter 520ms var(--ivanko-ease-out) 140ms both;
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed .ivanko-image-card__action {
	animation: ivanko-card-action-enter 560ms var(--ivanko-ease-out) 300ms both;
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed .ivanko-image-card__action > span:first-child {
	animation: ivanko-card-label-enter 500ms var(--ivanko-ease-out) 380ms both;
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed .ivanko-image-card__arrow {
	animation: ivanko-card-arrow-enter 420ms var(--ivanko-ease-out) 460ms both;
}

.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed:not([data-state="disabled"]):not([data-state="loading"]) .ivanko-image-card__draw-border rect {
	animation: ivanko-card-border-draw 1300ms var(--ivanko-ease-in-out) 100ms forwards;
}

@keyframes ivanko-card-copy-enter {
	from { opacity: 0; transform: translateY(2rem); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes ivanko-card-action-enter {
	from { opacity: 0; transform: translateY(2.5rem) scale(0.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ivanko-card-label-enter {
	from { transform: translateY(120%); }
	to { transform: translateY(0); }
}

@keyframes ivanko-card-arrow-enter {
	from { opacity: 0; transform: translateX(calc(var(--ivanko-space-xs) * -1)); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes ivanko-card-border-draw {
	to { stroke-dashoffset: 0; }
}

.ivanko-image-card--portrait {
	aspect-ratio: 32 / 45;
}

.ivanko-image-card--landscape {
	aspect-ratio: 45 / 32;
}

.ivanko-image-card--wide {
	aspect-ratio: 7 / 4;
}

.ivanko-image-card--square {
	aspect-ratio: 1;
}

.ivanko-image-cards--editorial .ivanko-image-card--portrait,
.ivanko-image-cards--editorial .ivanko-image-card--square,
.ivanko-image-cards--uniform .ivanko-image-card {
	grid-column: span 2;
}

.ivanko-image-cards--editorial .ivanko-image-card--landscape,
.ivanko-image-cards--editorial .ivanko-image-card--wide {
	grid-column: span 3;
}

.ivanko-image-card__image,
.ivanko-image-card__scrim {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.ivanko-image-card__image {
	object-fit: cover;
	object-position: center;
	transition: transform var(--ivanko-dur-long) var(--ivanko-ease-out);
	z-index: -2;
}

.ivanko-image-card--focus-top .ivanko-image-card__image {
	object-position: top;
}

.ivanko-image-card--focus-bottom .ivanko-image-card__image {
	object-position: bottom;
}

.ivanko-image-card--focus-left .ivanko-image-card__image {
	object-position: left;
}

.ivanko-image-card--focus-right .ivanko-image-card__image {
	object-position: right;
}

.ivanko-image-card__scrim {
	background: linear-gradient(to top, var(--ivanko-card-overlay) 0%, var(--ivanko-card-overlay) 34%, transparent 76%);
	opacity: var(--ivanko-card-overlay-strength);
	z-index: -1;
}

.ivanko-image-card__body {
	display: grid;
	gap: var(--ivanko-space-lg);
	min-width: 0;
	padding: var(--ivanko-space-lg);
	position: relative;
	z-index: 2;
}

.ivanko-image-card__copy {
	display: grid;
	gap: var(--ivanko-space-xs);
	min-width: 0;
	transition: transform var(--ivanko-dur-short) var(--ivanko-ease-out);
}

.ivanko-image-card__title {
	color: var(--ivanko-color-card-ink);
	font-family: var(--ivanko-font-display);
	font-size: clamp(1.75rem, 2.8vw, 2.45rem);
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0;
	overflow-wrap: anywhere;
}

.ivanko-image-card__meta {
	color: var(--ivanko-color-card-muted);
	font-size: var(--ivanko-text-sm);
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
	max-width: 42ch;
}

.ivanko-image-card__action {
	align-items: center;
	background-color: var(--ivanko-color-card-rail);
	background-color: color-mix(in oklch, var(--ivanko-color-card-rail) 76%, transparent);
	border: var(--ivanko-rule-hairline) solid var(--ivanko-color-card-rule);
	border-radius: calc(var(--ivanko-radius-card) * 0.62);
	color: var(--ivanko-color-card-ink);
	display: flex;
	font-size: var(--ivanko-text-sm);
	font-weight: 600;
	justify-content: space-between;
	line-height: 1.2;
	min-height: 2.875rem;
	min-width: 0;
	overflow: hidden;
	padding: var(--ivanko-space-sm) var(--ivanko-space-md);
	position: relative;
	box-shadow: var(--ivanko-shadow-glass-inset);
	text-decoration: none;
	transition: background-color var(--ivanko-dur-short) var(--ivanko-ease-out),
		border-color var(--ivanko-dur-short) var(--ivanko-ease-out),
		color var(--ivanko-dur-short) var(--ivanko-ease-out);
	-webkit-backdrop-filter: blur(0.7rem) saturate(1.14);
	backdrop-filter: blur(0.7rem) saturate(1.14);
}

.ivanko-image-card__action::before {
	background: linear-gradient(104deg, transparent 30%, color-mix(in oklch, var(--ivanko-color-card-sheen) 38%, transparent) 50%, transparent 70%);
	content: "";
	inset: 0;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transform: translateX(-118%) skewX(-12deg);
	transition: transform calc(var(--ivanko-dur-long) * 1.35) var(--ivanko-ease-out);
}

.ivanko-image-card__action > span:first-child {
	overflow: hidden;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	z-index: 1;
}

.ivanko-image-card__arrow {
	fill: none;
	flex: 0 0 1.25rem;
	height: 1.25rem;
	margin-inline-start: var(--ivanko-space-md);
	stroke: var(--ivanko-color-accent);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.75;
	transition: stroke var(--ivanko-dur-short) var(--ivanko-ease-out);
	width: 1.25rem;
	z-index: 1;
}

.ivanko-image-card__state {
	align-items: center;
	color: var(--ivanko-color-card-muted);
	display: inline-flex;
	font-size: var(--ivanko-text-xs);
	font-weight: 600;
	gap: var(--ivanko-space-xs);
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ivanko-image-card__state-mark {
	background-color: currentColor;
	border-radius: 50%;
	flex: 0 0 var(--ivanko-space-xs);
	height: var(--ivanko-space-xs);
	width: var(--ivanko-space-xs);
}

.ivanko-image-card:focus-visible,
.ivanko-image-card.is-focus {
	box-shadow: var(--ivanko-shadow-focus-card);
	outline: 2px solid var(--ivanko-color-focus);
	outline-offset: 3px;
}

.ivanko-image-card:active,
.ivanko-image-card.is-active {
	transform: translateY(1px);
}

.ivanko-image-card[data-state="disabled"] {
	cursor: not-allowed;
	opacity: 0.55;
}

.ivanko-image-card[data-state="disabled"] .ivanko-image-card__image {
	filter: grayscale(1);
	opacity: 0.58;
}

.ivanko-image-card[data-state="disabled"] .ivanko-image-card__state {
	color: var(--ivanko-color-card-muted);
}

.ivanko-image-card[data-state="loading"] .ivanko-image-card__image {
	opacity: 0.72;
}

.ivanko-image-card[data-state="loading"] .ivanko-image-card__state {
	color: var(--ivanko-color-card-loading);
}

.ivanko-image-card[data-state="loading"] .ivanko-image-card__state-mark {
	animation: ivanko-card-pulse 900ms var(--ivanko-ease-in-out) infinite alternate;
}

.ivanko-image-card[data-state="error"] {
	box-shadow: inset 0 0 0 2px var(--ivanko-color-card-error), var(--ivanko-shadow-image-card);
}

.ivanko-image-card[data-state="error"] .ivanko-image-card__state {
	color: var(--ivanko-color-card-error);
}

.ivanko-image-card[data-state="success"] {
	box-shadow: inset 0 0 0 2px var(--ivanko-color-card-success), var(--ivanko-shadow-image-card);
}

.ivanko-image-card[data-state="success"] .ivanko-image-card__state {
	color: var(--ivanko-color-card-success);
}

.ivanko-image-card--wide .ivanko-image-card__body {
	align-items: end;
	grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.44fr);
}

@keyframes ivanko-card-pulse {
	from { opacity: 0.35; }
	to { opacity: 1; }
}

.ivanko-image-card:focus-visible::before,
.ivanko-image-card.is-focus::before {
	border-color: var(--ivanko-color-accent);
	opacity: 1;
}

.ivanko-image-card:focus-visible .ivanko-image-card__action,
.ivanko-image-card.is-focus .ivanko-image-card__action {
	background-color: var(--ivanko-color-accent);
	background-color: color-mix(in oklch, var(--ivanko-color-accent) 82%, transparent);
	border-color: var(--ivanko-color-accent);
	color: var(--ivanko-color-card-ink);
}

.ivanko-image-card:focus-visible .ivanko-image-card__action::before,
.ivanko-image-card.is-focus .ivanko-image-card__action::before {
	transform: translateX(118%) skewX(-12deg);
}

.ivanko-image-card:focus-visible .ivanko-image-card__arrow,
.ivanko-image-card.is-focus .ivanko-image-card__arrow {
	stroke: var(--ivanko-color-card-ink);
}

@media (hover: hover) and (pointer: fine) {
	.ivanko-image-cards.has-hover .ivanko-image-card:not([data-state="disabled"]):not([data-state="loading"]):hover::before,
	.ivanko-image-card.is-hover::before {
		border-color: var(--ivanko-color-accent);
		opacity: 1;
	}

	.ivanko-image-cards.has-hover .ivanko-image-card:not([data-state="disabled"]):not([data-state="loading"]):hover::after,
	.ivanko-image-card.is-hover::after,
	.ivanko-image-card:focus-visible::after,
	.ivanko-image-card.is-focus::after {
		transform: translateX(42%) rotate(7deg);
	}

	.ivanko-image-cards.has-hover .ivanko-image-card:not([data-state="disabled"]):not([data-state="loading"]):hover .ivanko-image-card__image,
	.ivanko-image-card.is-hover .ivanko-image-card__image,
	.ivanko-image-card:focus-visible .ivanko-image-card__image,
	.ivanko-image-card.is-focus .ivanko-image-card__image {
		transform: scale(1.055);
	}

	.ivanko-image-cards.has-hover .ivanko-image-card:not([data-state="disabled"]):not([data-state="loading"]):hover .ivanko-image-card__copy,
	.ivanko-image-card.is-hover .ivanko-image-card__copy,
	.ivanko-image-card:focus-visible .ivanko-image-card__copy,
	.ivanko-image-card.is-focus .ivanko-image-card__copy {
		transform: translateY(calc(var(--ivanko-space-2xs) * -1));
	}

	.ivanko-image-card__action:hover,
	.ivanko-image-card.is-hover .ivanko-image-card__action,
	.ivanko-image-card:focus-visible .ivanko-image-card__action,
	.ivanko-image-card.is-focus .ivanko-image-card__action {
		background-color: var(--ivanko-color-accent);
		background-color: color-mix(in oklch, var(--ivanko-color-accent) 82%, transparent);
		border-color: var(--ivanko-color-accent);
		color: var(--ivanko-color-card-ink);
	}

	.ivanko-image-card__action:hover::before,
	.ivanko-image-card.is-hover .ivanko-image-card__action::before,
	.ivanko-image-card:focus-visible .ivanko-image-card__action::before,
	.ivanko-image-card.is-focus .ivanko-image-card__action::before {
		transform: translateX(118%) skewX(-12deg);
	}

	.ivanko-image-card__action:hover .ivanko-image-card__arrow,
	.ivanko-image-card.is-hover .ivanko-image-card__arrow,
	.ivanko-image-card:focus-visible .ivanko-image-card__arrow,
	.ivanko-image-card.is-focus .ivanko-image-card__arrow {
		stroke: var(--ivanko-color-card-ink);
	}
}

@media (max-width: 63.99rem) {
	.ivanko-image-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ivanko-image-cards .ivanko-image-card {
		grid-column: span 1;
		min-height: 0;
	}

	.ivanko-image-card--landscape,
	.ivanko-image-card--wide {
		aspect-ratio: 4 / 3;
	}

	.ivanko-image-card--wide .ivanko-image-card__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 47.99rem) {
	.elementor-widget-ivanko-image-cards {
		margin-inline: auto;
	}

	.ivanko-image-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.ivanko-image-cards .ivanko-image-card {
		grid-column: span 1;
	}

	.ivanko-image-card,
	.ivanko-image-card--portrait,
	.ivanko-image-card--landscape,
	.ivanko-image-card--wide,
	.ivanko-image-card--square {
		aspect-ratio: 4 / 5;
	}

	.ivanko-image-card--wide .ivanko-image-card__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card__image,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card__state,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card__title,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card__meta,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card__action,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card__action > span:first-child,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card__arrow {
		animation: none;
		opacity: 1;
		transform: none;
		transition-duration: 0ms;
		transition-delay: 0ms;
	}

	.ivanko-image-card__draw-border rect,
	.ivanko-image-cards.is-reveal-ready .ivanko-image-card.is-revealed:not([data-state="disabled"]):not([data-state="loading"]) .ivanko-image-card__draw-border rect {
		animation: none;
		stroke-dashoffset: 0;
	}

	.ivanko-image-card::before,
	.ivanko-image-card::after,
	.ivanko-image-card__image,
	.ivanko-image-card__copy,
	.ivanko-image-card__action,
	.ivanko-image-card__action::before,
	.ivanko-image-card__arrow {
		transition-duration: 150ms;
	}

	.ivanko-image-cards.has-hover .ivanko-image-card:hover::after,
	.ivanko-image-card.is-hover::after,
	.ivanko-image-card:focus-visible::after,
	.ivanko-image-card.is-focus::after,
	.ivanko-image-card__action:hover::before,
	.ivanko-image-card.is-hover .ivanko-image-card__action::before,
	.ivanko-image-card:focus-visible .ivanko-image-card__action::before,
	.ivanko-image-card.is-focus .ivanko-image-card__action::before {
		opacity: 0;
	}

	.ivanko-image-cards.has-hover .ivanko-image-card:hover .ivanko-image-card__image,
	.ivanko-image-card.is-hover .ivanko-image-card__image,
	.ivanko-image-card:focus-visible .ivanko-image-card__image,
	.ivanko-image-card.is-focus .ivanko-image-card__image,
	.ivanko-image-cards.has-hover .ivanko-image-card:hover .ivanko-image-card__copy,
	.ivanko-image-card.is-hover .ivanko-image-card__copy,
	.ivanko-image-card:focus-visible .ivanko-image-card__copy,
	.ivanko-image-card.is-focus .ivanko-image-card__copy,
	.ivanko-image-card__action:hover::before,
	.ivanko-image-card.is-hover .ivanko-image-card__action::before,
	.ivanko-image-card:focus-visible .ivanko-image-card__action::before,
	.ivanko-image-card.is-focus .ivanko-image-card__action::before {
		transform: none;
	}

	.ivanko-image-card[data-state="loading"] .ivanko-image-card__state-mark {
		animation-duration: 150ms;
		animation-iteration-count: 1;
	}
}
