/**
 * SigmaGraft About — Vision / Mission cards.
 *
 * Defaults only: every value here is overridable by the widget's controls.
 *
 * ── The height model ──────────────────────────────────────────────────────
 *
 * The grid stretches every card to the tallest in the row. Inside a card the
 * BODY grows and the MEDIA does not:
 *
 *     body   flex-grow: 1   absorbs whatever slack the row hands the card
 *     media  flex-grow: 0   keeps the height the control asked for
 *
 * Because every card ends up the same height and every image is the same
 * height, each image necessarily starts on the same line — no matter how much
 * text sits above it. That is what keeps the four cards reading as one row.
 *
 * The widget's Height Behaviour control flips this by rewriting four custom
 * properties on the card, so Fill mode (media grows, body does not) and
 * Aspect-ratio mode are the same machinery with different values. The
 * properties live on the CARD rather than on each part, so one control can
 * drive both children at once.
 */

.sgxa-pillars {
	position: relative;
	overflow-x: clip;
	isolation: isolate;
	padding: 40px 0;
	background-color: #FFFFFF;
}

.sgxa-pillars__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.sgxa-pillars__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.sgxa-pillars--container-full .sgxa-pillars__inner {
	max-width: none;
}

/* ═════════ Cell + card ═════════ */

.sgxa-pillars__cell {
	display: flex;
}

.sgxa-pillars__card {
	--sgxa-p-t: 280ms;
	--sgxa-p-lift: 0px;
	--sgxa-p-scale: 1;

	/* Height model — rewritten as a set by the Height Behaviour control. */
	--sgxa-p-media-h: 120px;
	--sgxa-p-media-ar: 16 / 9;
	--sgxa-p-body-grow: 1;
	--sgxa-p-media-grow: 0;
	--sgxa-p-media-height: var(--sgxa-p-media-h);
	--sgxa-p-media-min: 0px;
	--sgxa-p-media-ratio: auto;

	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid #E6ECF3;
	border-radius: 4px;
	background-color: #FFFFFF;
	color: inherit;
	text-decoration: none;
	transition:
		background-color var(--sgxa-p-t) ease,
		border-color var(--sgxa-p-t) ease,
		box-shadow var(--sgxa-p-t) ease,
		transform var(--sgxa-p-t) ease;
}

.sgxa-pillars__card:hover {
	transform: translateY(var(--sgxa-p-lift)) scale(var(--sgxa-p-scale));
}

a.sgxa-pillars__card:focus-visible {
	outline: 2px solid #1A4C9B;
	outline-offset: 3px;
}

/* ═════════ Body ═════════ */

/*
 * min-height holds the image line steady when a card is on its own — one per
 * row on a phone, or a row of short cards where nothing stretches. Growing
 * past it is what pushes the image to the bottom edge in a stretched row.
 *
 * Gap is 0 by default: the spacing between the header, the description and
 * the list is set by each block's own margin control, so they can differ.
 */
.sgxa-pillars__body {
	display: flex;
	flex: var(--sgxa-p-body-grow, 1) 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
	min-height: 145px;
	padding: 15px 16px 13px;
	text-align: start;
}

.sgxa-pillars__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 9px;
	min-width: 0;
	margin-bottom: 8px;
}

.sgxa-pillars__icon {
	--sgxa-p-icon-scale: 1;
	--sgxa-p-icon-rotate: 0deg;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background-color: #EEF4FC;
	color: #1A62C4;
	font-size: 12px;
	line-height: 0;
	transition:
		color var(--sgxa-p-t) ease,
		background-color var(--sgxa-p-t) ease,
		border-color var(--sgxa-p-t) ease,
		transform var(--sgxa-p-t) ease;
}

.sgxa-pillars__card:hover .sgxa-pillars__icon {
	transform: rotate(var(--sgxa-p-icon-rotate)) scale(var(--sgxa-p-icon-scale));
}

.sgxa-pillars__title {
	margin: 0;
	min-width: 0;
	color: #0E2E5C;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	transition: color var(--sgxa-p-t) ease;
}

.sgxa-pillars__text {
	margin: 0;
	color: #5A6B7D;
	font-size: 12.5px;
	line-height: 1.55;
	text-wrap: pretty;
	transition: color var(--sgxa-p-t) ease;
}

.sgxa-pillars__list {
	width: 100%;
	--sgxa-li-gap: 5px;
	--sgxa-li-indent: 14px;
	--sgxa-li-marker-size: 5px;
}

.sgxa-pillars__list .sgxa-list__item {
	color: #41536A;
	font-size: 12.5px;
	line-height: 1.4;
}

/* ═════════ Media ═════════ */

.sgxa-pillars__media {
	--sgxa-p-media-w: 100%;
	--sgxa-p-img-scale: 1.06;
	--sgxa-p-img-rotate: 0deg;

	position: relative;
	flex: var(--sgxa-p-media-grow, 0) 0 auto;
	align-self: stretch;
	width: var(--sgxa-p-media-w);
	height: var(--sgxa-p-media-height, 120px);
	min-height: var(--sgxa-p-media-min, 0px);
	aspect-ratio: var(--sgxa-p-media-ratio, auto);
	overflow: hidden;
	background-color: #F4F7FA;
}

/*
 * Absolutely positioned, NOT height:100%.
 *
 * In Fill mode the frame's height comes from flexbox, not from a declared
 * value, so a percentage height resolves against `auto` and computes to
 * `auto` — the photograph would sit at its intrinsic aspect ratio, refuse to
 * crop, and leave the frame's background showing beneath it. Pinning the
 * image to all four edges makes it fill whatever box flexbox produces, in
 * every sizing mode, so object-fit can do its job.
 *
 * A short, wide frame is also what gets the crop right: cover scales the
 * photograph to the frame's width and trims the top and bottom, which is how
 * the mockup shows a wide band of landscape with the subject small in it.
 * Deepening the frame scales to height instead and the subject grows.
 */
.sgxa-pillars__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition:
		transform 520ms ease,
		opacity 520ms ease,
		filter 520ms ease;
}

.sgxa-pillars__card:hover .sgxa-pillars__img {
	transform: scale(var(--sgxa-p-img-scale)) rotate(var(--sgxa-p-img-rotate));
}

.sgxa-pillars__media-overlay {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
	transition: opacity 520ms ease;
}

/* ═════════ Responsive fallbacks ═════════ */

/*
 * Columns, gaps, padding, image height, body height, alignment and every type
 * size have responsive controls of their own, so only behaviour without a
 * control repeats here.
 *
 * There is deliberately no mobile height cap: at one card per row nothing
 * stretches to match a neighbour, so the image resolves to exactly the Height
 * control's mobile value, and capping it would override a number the client
 * set on purpose.
 */

@media (prefers-reduced-motion: reduce) {

	.sgxa-pillars__card,
	.sgxa-pillars__icon,
	.sgxa-pillars__title,
	.sgxa-pillars__text,
	.sgxa-pillars__img,
	.sgxa-pillars__media-overlay {
		transition: none !important;
	}

	.sgxa-pillars__card:hover {
		transform: none;
	}

	.sgxa-pillars__card:hover .sgxa-pillars__img,
	.sgxa-pillars__card:hover .sgxa-pillars__icon {
		transform: none;
	}
}