/*
 * Ethan Image Grid 1.4.0
 * The section shell is shared; every named design owns its card composition
 * and motion. Theme tokens are optional and always include portable fallbacks.
 */
.etb-image-grid {
	--etb-image-grid-gap: clamp(0.85rem, 1.7vw, 1.5rem);
	--etb-image-grid-radius: var(--eth-radius-l, 0.75rem);
	--etb-image-grid-ink: var(--eth-text-body, #18202a);
	--etb-image-grid-muted: var(--eth-text-muted, #5d6673);
	--etb-image-grid-primary: var(--eth-primary, #3157d5);
	--etb-image-grid-dark: var(--eth-dark, #111820);
	--etb-image-grid-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding-block: var(--eth-section-space-y, clamp(3rem, 6vw, 5rem));
	color: var(--etb-image-grid-ink);
}

.etb-image-grid *,
.etb-image-grid *::before,
.etb-image-grid *::after { box-sizing: border-box; }

.etb-image-grid__inner {
	width: 100%;
	max-width: var(--eth-container, 1350px);
	margin-inline: auto;
	padding-inline: var(--eth-section-space-x, clamp(1rem, 3vw, 1.5rem));
}

.etb-image-grid__card-description > :first-child { margin-top: 0; }
.etb-image-grid__card-description > :last-child { margin-bottom: 0; }

.etb-image-grid__grid {
	display: grid;
	grid-template-columns: repeat(var(--etb-image-grid-columns, 3), minmax(0, 1fr));
	gap: var(--etb-image-grid-gap);
	align-items: stretch;
}

.etb-image-grid__card {
	position: relative;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background: var(--eth-bg-muted, #dfe3e8);
	isolation: isolate;
}

.etb-image-grid__image,
.etb-image-grid__card > .components-placeholder {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 680ms var(--etb-image-grid-ease), opacity 560ms ease, filter 560ms ease;
}

.etb-image-grid__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: opacity 420ms ease, background-color 420ms ease;
}

.etb-image-grid__content {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.etb-image-grid .etb-image-grid__card .etb-image-grid__title {
	margin: 0;
	color: inherit;
	font-family: var(--eth-font-heading, inherit);
	font-size: calc(var(--eth-fs-h3, 1.35rem) * 0.7);
	font-weight: var(--eth-fw-semibold, 600);
	line-height: 1.25;
}

.etb-image-grid__title a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: inherit;
	text-decoration: none;
}

.etb-image-grid__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.etb-image-grid__link-icon {
	display: inline-grid;
	place-items: center;
	width: 1.45em;
	height: 1.45em;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.7em;
	line-height: 1;
	transition: transform 300ms var(--etb-image-grid-ease);
}

.etb-image-grid__card-description {
	font-size: 0.96rem;
	line-height: 1.6;
}

.etb-image-grid__card-description a { position: relative; z-index: 3; color: inherit; }
.etb-image-grid__card-description :is(ul, ol) { margin-block: 0.75rem 0; padding-inline-start: 1.25rem; }
.etb-image-grid__card-description .wp-block-button { position: relative; z-index: 3; }

.etb-image-grid__card:focus-visible {
	outline: 3px solid var(--eth-primary-50, #6f8cff);
	outline: 3px solid color-mix(in srgb, var(--etb-image-grid-primary) 72%, white);
	outline-offset: 3px;
}

/* India: image overlay with an always-visible title and hover-revealed detail. */
.etb-image-grid--style-caption .etb-image-grid__card {
	min-height: clamp(18rem, 28vw, 25rem);
	border-radius: var(--etb-image-grid-radius);
	color: var(--eth-light, #fff);
}

.etb-image-grid--style-caption .etb-image-grid__overlay {
	background: linear-gradient(to top, var(--eth-dark-60, rgba(8, 12, 18, 0.58)), var(--eth-dark-10, rgba(8, 12, 18, 0.12)) 68%, transparent 100%);
	transition: none;
}

.etb-image-grid--style-caption .etb-image-grid__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--etb-overlay-dark-soft);
	opacity: 0;
	transition: opacity 680ms var(--etb-image-grid-ease);
}

.etb-image-grid--style-caption .etb-image-grid__content {
	position: absolute;
	inset: auto 0 0;
	max-height: 4.8rem;
	padding: 1.15rem 1.35rem;
	overflow: hidden;
	transition: max-height 680ms var(--etb-image-grid-ease);
}

.etb-image-grid--style-caption .etb-image-grid__card-description {
	margin-top: 0;
	opacity: 0;
	transform: translateY(0.45rem);
	transition: margin 640ms var(--etb-image-grid-ease), opacity 420ms ease 100ms, transform 640ms var(--etb-image-grid-ease) 60ms;
}

.etb-image-grid--style-caption .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__content {
	max-height: calc(100% - 0.6rem);
}
.etb-image-grid--style-caption .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__overlay::after { opacity: 1; }
.etb-image-grid--style-caption .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__card-description { margin-top: 0.65rem; opacity: 1; transform: none; }
.etb-image-grid--style-caption .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__image { transform: scale(1.02); }
.etb-image-grid--style-caption .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__link-icon { transform: translate(0.08rem, -0.08rem); }

/* Golf: equal immersive cards, centred copy and a deliberate vertical lift. */
.etb-image-grid--style-centered-overlay .etb-image-grid__card {
	min-height: clamp(20rem, 31vw, 28rem);
	border-radius: var(--etb-image-grid-radius);
	color: var(--eth-light, #fff);
	box-shadow: var(--eth-shadow-m, 0 1rem 2.4rem rgba(15, 23, 42, 0.12));
	transition: transform 600ms var(--etb-image-grid-ease), box-shadow 600ms var(--etb-image-grid-ease);
}

.etb-image-grid--style-centered-overlay .etb-image-grid__overlay { background: var(--eth-dark-60, rgba(5, 9, 15, 0.58)); }
.etb-image-grid--style-centered-overlay .etb-image-grid__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: clamp(1.35rem, 3vw, 2.25rem);
	text-align: center;
}
.etb-image-grid--style-centered-overlay .etb-image-grid__card-description { max-width: 32ch; margin-top: 0.75rem; color: var(--etb-overlay-light-muted); }
.etb-image-grid--style-centered-overlay .etb-image-grid__card:is(:hover, :focus-within) {
	transform: translateY(-0.7rem);
	box-shadow: var(--eth-shadow-l, 0 1.6rem 3rem rgba(15, 23, 42, 0.24));
}
.etb-image-grid--style-centered-overlay .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__image { transform: scale(1.055); }
.etb-image-grid--style-centered-overlay .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__overlay { background: var(--eth-dark-40, rgba(5, 9, 15, 0.46)); }

/* Kilo: image cards and typographic highlight cards form a strong checkerboard. */
.etb-image-grid--style-numbered-overlay .etb-image-grid__grid {
	gap: 0;
	overflow: hidden;
	border-radius: calc(var(--etb-image-grid-radius) * 0.7);
	background: var(--etb-image-grid-dark);
	counter-reset: etb-kilo;
}
.etb-image-grid--style-numbered-overlay .etb-image-grid__card {
	min-height: clamp(17rem, 25vw, 23rem);
	border-radius: 0;
	color: var(--eth-light, #fff);
	counter-increment: etb-kilo;
}
.etb-image-grid--style-numbered-overlay .etb-image-grid__overlay { background: linear-gradient(to top, var(--eth-dark-60, rgba(6, 9, 14, 0.78)), var(--eth-dark-10, rgba(6, 9, 14, 0.08)) 68%); }
.etb-image-grid--style-numbered-overlay .etb-image-grid__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: clamp(1.25rem, 2.4vw, 2rem);
}
.etb-image-grid--style-numbered-overlay .etb-image-grid__number { display: none; }
.etb-image-grid--style-numbered-overlay .etb-image-grid__eyebrow { margin-bottom: 0.55rem; color: var(--eth-light-60, rgba(255,255,255,0.72)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.etb-image-grid--style-numbered-overlay .etb-image-grid__card-description { margin-top: 0.6rem; color: var(--etb-overlay-light-muted); }
.etb-image-grid--style-numbered-overlay .etb-image-grid__card:not(.etb-image-grid__card--type-highlight):is(:hover, :focus-within) .etb-image-grid__image { transform: scale(1.06); }
.etb-image-grid--style-numbered-overlay .etb-image-grid__card:not(.etb-image-grid__card--type-highlight):is(:hover, :focus-within) .etb-image-grid__overlay {
	background: var(--eth-primary-50, rgba(25, 44, 91, 0.78));
	background: color-mix(in srgb, var(--etb-image-grid-primary) 66%, rgba(6,9,14,0.72));
}

.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-highlight,
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-auto:nth-child(even) {
	background: var(--etb-image-grid-dark);
}
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-highlight .etb-image-grid__image,
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-auto:nth-child(even) .etb-image-grid__image { display: none; }
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-highlight .etb-image-grid__overlay,
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-auto:nth-child(even) .etb-image-grid__overlay {
	background: radial-gradient(circle at 80% 15%, rgba(49,87,213,0.5), transparent 48%), var(--etb-image-grid-dark);
	background: radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--etb-image-grid-primary) 52%, transparent), transparent 48%), var(--etb-image-grid-dark);
}
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-highlight .etb-image-grid__content,
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-auto:nth-child(even) .etb-image-grid__content {
	align-items: center;
	justify-content: center;
	text-align: center;
}
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-highlight .etb-image-grid__number,
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-auto:nth-child(even) .etb-image-grid__number {
	display: block;
	margin-bottom: 0.55rem;
	font-size: clamp(3rem, 7vw, 6.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.05em;
	transition: transform 480ms var(--etb-image-grid-ease), color 360ms ease;
}
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-auto:nth-child(even) .etb-image-grid__number:empty::before { content: counter(etb-kilo, decimal-leading-zero); }
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-highlight .etb-image-grid__number--auto:empty::before { content: "101"; }
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-highlight:is(:hover, :focus-within) .etb-image-grid__number,
.etb-image-grid--style-numbered-overlay .etb-image-grid__card--type-auto:nth-child(even):is(:hover, :focus-within) .etb-image-grid__number { transform: translateY(-0.35rem) scale(1.035); color: #9aafff; color: color-mix(in srgb, var(--etb-image-grid-primary) 55%, white); }

/* Romeo: Brixies-inspired expandable gallery, implemented with a real CSS Grid. */
.etb-image-grid--style-editorial .etb-image-grid__grid {
	gap: clamp(0.55rem, 1vw, 0.9rem);
	transition: grid-template-columns 620ms var(--etb-image-grid-ease);
}
.etb-image-grid--style-editorial .etb-image-grid__card {
	min-height: clamp(23rem, 36vw, 32rem);
	border-radius: calc(var(--etb-image-grid-radius) * 0.8);
	color: var(--eth-light, #fff);
	cursor: pointer;
}
.etb-image-grid--style-editorial .etb-image-grid__overlay { background: linear-gradient(to top, var(--eth-dark-60, rgba(5,8,13,0.86)), var(--eth-dark-10, rgba(5,8,13,0.05)) 72%); }
.etb-image-grid--style-editorial .etb-image-grid__content {
	position: absolute;
	inset: auto 0 0;
	padding: clamp(1.2rem, 2.5vw, 2rem);
}
.etb-image-grid--style-editorial .etb-image-grid__card-description {
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(1rem);
	visibility: hidden;
	transition: max-height 460ms var(--etb-image-grid-ease), margin 360ms ease, opacity 300ms ease, transform 460ms var(--etb-image-grid-ease);
}
.etb-image-grid--style-editorial .etb-image-grid__card:not(.is-active):not(:hover):not(:focus-within) .etb-image-grid__title {
	max-height: 12rem;
	font-size: 1.05rem;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.etb-image-grid--style-editorial .etb-image-grid__card:is(.is-active, :hover, :focus-within) .etb-image-grid__card-description { max-height: 18rem; margin-top: 0.7rem; opacity: 1; transform: none; visibility: visible; }
.etb-image-grid--style-editorial .etb-image-grid__card:is(.is-active, :hover, :focus-within) .etb-image-grid__image { transform: scale(1.045); }
.etb-image-grid--style-editorial .etb-image-grid__card:is(.is-active, :hover, :focus-within) .etb-image-grid__overlay { background: linear-gradient(to top, var(--eth-dark-60, rgba(5,8,13,0.82)), var(--eth-dark-10, rgba(5,8,13,0.04)) 64%); }

.etb-image-grid--style-editorial.etb-image-grid--cols-2 .etb-image-grid__grid { grid-template-columns: 2.6fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-3 .etb-image-grid__grid { grid-template-columns: 3.2fr 1fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-4 .etb-image-grid__grid { grid-template-columns: 4fr 1fr 1fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-5 .etb-image-grid__grid { grid-template-columns: 5fr 1fr 1fr 1fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-2 .etb-image-grid__grid[data-etb-active-column="2"] { grid-template-columns: 1fr 2.6fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-3 .etb-image-grid__grid[data-etb-active-column="2"] { grid-template-columns: 1fr 3.2fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-3 .etb-image-grid__grid[data-etb-active-column="3"] { grid-template-columns: 1fr 1fr 3.2fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-4 .etb-image-grid__grid[data-etb-active-column="2"] { grid-template-columns: 1fr 4fr 1fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-4 .etb-image-grid__grid[data-etb-active-column="3"] { grid-template-columns: 1fr 1fr 4fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-4 .etb-image-grid__grid[data-etb-active-column="4"] { grid-template-columns: 1fr 1fr 1fr 4fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-5 .etb-image-grid__grid[data-etb-active-column="2"] { grid-template-columns: 1fr 5fr 1fr 1fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-5 .etb-image-grid__grid[data-etb-active-column="3"] { grid-template-columns: 1fr 1fr 5fr 1fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-5 .etb-image-grid__grid[data-etb-active-column="4"] { grid-template-columns: 1fr 1fr 1fr 5fr 1fr; }
.etb-image-grid--style-editorial.etb-image-grid--cols-5 .etb-image-grid__grid[data-etb-active-column="5"] { grid-template-columns: 1fr 1fr 1fr 1fr 5fr; }

/* Victor: dark information cards with a legible image before interaction. */
.etb-image-grid--style-meta-overlay .etb-image-grid__card {
	min-height: clamp(21rem, 30vw, 27rem);
	border: 1px solid var(--eth-light-10, rgba(255,255,255,0.1));
	border-radius: calc(var(--etb-image-grid-radius) * 0.65);
	background: var(--etb-image-grid-dark);
	color: var(--eth-light, #fff);
}
.etb-image-grid--style-meta-overlay .etb-image-grid__image { opacity: 0.34; filter: saturate(0.82) contrast(0.96); }
.etb-image-grid--style-meta-overlay .etb-image-grid__overlay { background: linear-gradient(145deg, rgba(10,15,22,0.08), rgba(10,15,22,0.6)); }
.etb-image-grid--style-meta-overlay .etb-image-grid__content {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	padding: clamp(1.25rem, 2.5vw, 2rem);
}
.etb-image-grid--style-meta-overlay .etb-image-grid__eyebrow {
	grid-row: 1;
	justify-self: start;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--eth-light-10, rgba(255,255,255,0.18));
	border-radius: 999px;
	background: var(--eth-dark-40, rgba(4,8,13,0.48));
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.etb-image-grid--style-meta-overlay .etb-image-grid__title { grid-row: 2; align-self: end; }
.etb-image-grid--style-meta-overlay .etb-image-grid__card-description { grid-row: 3; margin-top: 0.65rem; color: var(--eth-light-60, rgba(255,255,255,0.75)); }
.etb-image-grid--style-meta-overlay .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__image { opacity: 0.72; transform: scale(1.07); filter: saturate(1) contrast(1); }
.etb-image-grid--style-meta-overlay .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__overlay { opacity: 0.78; }
.etb-image-grid--style-meta-overlay .etb-image-grid__card:is(:hover, :focus-within) .etb-image-grid__link-icon { transform: translate(0.12rem, -0.12rem); }

/* Staggered entrance is shared, while each design keeps its own hover motion. */
:where(html.etb-has-js) .etb-image-grid.etb-reveal .etb-image-grid__card { opacity: 0; translate: 0 0.75rem; }
.etb-image-grid.etb-reveal--visible .etb-image-grid__card,
.etb-image-grid.etb-no-anim .etb-image-grid__card {
	opacity: 1;
	translate: none;
	transition-property: opacity, translate, transform, box-shadow;
	transition-duration: 560ms;
	transition-timing-function: var(--etb-image-grid-ease);
	transition-delay: var(--etb-reveal-delay, 0ms);
}
.etb-image-grid__card:nth-child(2) { --etb-reveal-delay: 70ms; }
.etb-image-grid__card:nth-child(3) { --etb-reveal-delay: 140ms; }
.etb-image-grid__card:nth-child(4) { --etb-reveal-delay: 210ms; }
.etb-image-grid__card:nth-child(5) { --etb-reveal-delay: 280ms; }
.etb-image-grid__card:nth-child(n+6) { --etb-reveal-delay: 350ms; }
.etb-image-grid.etb-reveal--visible .etb-image-grid__card:is(:hover, :focus-within) { transition-delay: 0ms; }

@media (max-width: 1024px) {
	.etb-image-grid--cols-5 .etb-image-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.etb-image-grid--cols-4 .etb-image-grid__grid,
	.etb-image-grid--cols-3 .etb-image-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.etb-image-grid--style-editorial .etb-image-grid__grid { grid-template-columns: 2.6fr 1fr !important; }
	.etb-image-grid--style-editorial .etb-image-grid__grid[data-etb-active-column="2"] { grid-template-columns: 1fr 2.6fr !important; }
}

@media (max-width: 767px) {
	.etb-image-grid__inner { padding-inline: min(var(--eth-section-space-x, 1rem), 1rem); }
	.etb-image-grid__grid,
	.etb-image-grid--cols-2 .etb-image-grid__grid,
	.etb-image-grid--cols-3 .etb-image-grid__grid,
	.etb-image-grid--cols-4 .etb-image-grid__grid,
	.etb-image-grid--cols-5 .etb-image-grid__grid,
	.etb-image-grid--style-editorial .etb-image-grid__grid { grid-template-columns: minmax(0, 1fr) !important; }
	.etb-image-grid--style-editorial .etb-image-grid__card { min-height: 22rem; cursor: default; }
	.etb-image-grid--style-editorial .etb-image-grid__card .etb-image-grid__title { writing-mode: initial !important; transform: none !important; }
	.etb-image-grid--style-editorial .etb-image-grid__card-description { max-height: none; margin-top: 0.7rem; opacity: 1; transform: none; visibility: visible; }
}

@media (hover: none) {
	.etb-image-grid--style-caption .etb-image-grid__content { max-height: calc(100% - 0.6rem); }
	.etb-image-grid--style-caption .etb-image-grid__card-description { margin-top: 0.65rem; opacity: 1; transform: none; }
	.etb-image-grid--style-editorial .etb-image-grid__card .etb-image-grid__title { writing-mode: initial; transform: none; }
	.etb-image-grid--style-editorial .etb-image-grid__card-description { max-height: none; margin-top: 0.7rem; opacity: 1; transform: none; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
	.etb-image-grid *,
	.etb-image-grid *::before,
	.etb-image-grid *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.etb-image-grid.etb-reveal .etb-image-grid__card { opacity: 1; translate: none; }
}