/**
 * Out-N-Out Feature Cards / Trust Badges widget.
 * -----------------------------------------------------------------------------
 * Structural CSS Grid + token-driven defaults. Colors/type/spacing resolve from
 * the global design tokens (--oon-*, handle: oon-tokens). Elementor Style
 * controls override per-widget via {{WRAPPER}} selectors. The DEFAULT look is
 * intentionally clean and borderless (no card bg/border/shadow) so it can
 * reproduce the live site's borderless feature sections; card chrome is opt-in
 * through the Card style controls. No JavaScript.
 *
 * Loaded only where the widget is used (handle: oon-widget-feature-cards).
 */

.oon-feature-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--oon-column-gap, 30px);
	row-gap: var(--oon-column-gap, 30px);
}

/* One item per column. Flex column lets the optional link pin to the bottom
   when equal-height is enabled — without duplicating markup per breakpoint. */
.oon-feature-cards__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.oon-feature-cards--equal .oon-feature-cards__item {
	height: 100%;
}

/* ---- Icon ---------------------------------------------------------------- */
.oon-feature-cards__icon {
	display: inline-flex;
	line-height: 1;
	font-size: 40px; /* token-free structural default; overridable */
	color: var(--oon-color-heading, #332d55);
}

.oon-feature-cards__icon svg {
	width: 40px;
	height: 40px;
	fill: currentColor;
}

/* When centered/right aligned, text-align on the item positions the inline icon;
   keep the icon box from stretching full width. */
.oon-feature-cards__icon,
.oon-feature-cards__image {
	margin-bottom: 16px;
}

/* ---- Image --------------------------------------------------------------- */
.oon-feature-cards__image {
	line-height: 0;
}

.oon-feature-cards__image img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

/* Clickable image (whole image links). Subtle zoom on hover, like the live cards. */
.oon-feature-cards__image-link {
	display: block;
	overflow: hidden;
	border-radius: var(--oon-radius-sm, 4px);
}
.oon-feature-cards__image-link img {
	width: 100%;
	transition: transform var(--oon-transition, 0.25s ease);
}
.oon-feature-cards__image-link:hover img,
.oon-feature-cards__image-link:focus-visible img {
	transform: scale(1.04);
}

/* ---- Heading ------------------------------------------------------------- */
.oon-feature-cards__title {
	margin: 0 0 10px;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	line-height: var(--oon-heading-line-height, 1.2);
	letter-spacing: var(--oon-heading-letter-spacing, 0);
	color: var(--oon-color-heading, #332d55);
}

/* ---- Description --------------------------------------------------------- */
.oon-feature-cards__desc {
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-regular, 400);
	line-height: var(--oon-body-line-height, 1.6);
	color: var(--oon-color-text-secondary, #666666);
}

/* ---- Link ---------------------------------------------------------------- */
/* margin-top:auto pins the link row to the card bottom in equal-height mode. */
.oon-feature-cards__actions {
	margin-top: auto;
	padding-top: 16px;
}

.oon-feature-cards__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	color: var(--oon-color-heading, #332d55);
	text-decoration: none;
	transition: color var(--oon-transition, 0.25s ease);
}

.oon-feature-cards__link:hover,
.oon-feature-cards__link:focus {
	color: var(--oon-color-accent, #9a84c8);
}

.oon-feature-cards__link:focus-visible {
	outline: 2px solid var(--oon-color-accent, #9a84c8);
	outline-offset: 2px;
}

/* ---- Responsive safety net ----------------------------------------------- */
/* The Columns control is responsive (desktop 3 / tablet 2 / mobile 1 by
   default) and drives grid-template-columns per device. This fallback only
   applies if a template provides no mobile column value, preventing cramped
   multi-column layouts on small screens. Verified breakpoint: 768px. */
@media (max-width: 768px) {
	.oon-feature-cards {
		column-gap: var(--oon-column-gap-mobile, 16px);
	}
}