/* =========================================================================
   SIM CTA Cards
   Rotating, pinnable call-to-action cards. Whole card is the link.
   Built on the theme's brand tokens (--accent-green-*, --black-green,
   --sim-red, --h3/--body, --sans). Root font-size = 100% (1rem = 16px).
   ========================================================================= */

.sim-cta-cards {
	--gap: 0px; /* cards sit flush — no gutter */
	--card-min-h: clamp(260px, 24vw, 340px);
	--padding: clamp(2.5rem, 5vw, 4.5rem); /* doubled */
	--row-gap: clamp(0.6rem, 1.2vw, 1rem); /* title → body */
	--link-gap: calc(3 * var(--row-gap)); /* body → link (3×) */
	--crossfade: 600ms;
	--card-text: var(--black-green, #14332d);
	--card-accent: var(--sim-red, #da2b1f);

	display: block;
	width: 100%;
}

/* Grid -------------------------------------------------------------------- */

/* No-JS / pre-init fallback: a clean responsive grid that shows ALL cards. */
.sim-cta-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--gap);
}

/* Enhanced (JS active): JS drives the column count via --cols. */
.sim-cta-cards.is-enhanced .sim-cta-cards__grid {
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}

/* Rotating mode (desktop/tablet): JS assigns each card an explicit row + column,
   so swapped cards overlap cleanly within their own cell. */
.sim-cta-cards.is-enhanced.is-rotating .sim-cta-cards__grid {
	grid-auto-rows: minmax(var(--card-min-h), auto);
}

/* Card ------------------------------------------------------------------- */
.sim-cta-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--padding);
	color: var(--card-text);
	text-decoration: none;
	overflow: hidden;
	background-color: var(--tint, var(--accent-green-50, #f7ffc6));
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease,
		opacity var(--crossfade) ease;
}

/* Soft "catching the light" highlight — a faint radial fill from the top centre,
   layered above the tint but below the text. Fades in on hover for added depth. */
.sim-cta-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(120% 85% at 50% 0%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 60%);
	transition: opacity 0.35s ease;
}

/* Tint cascade by position; pinned always strongest; per-card --tint wins. */
.sim-cta-card:nth-of-type(4n + 1) { background-color: var(--tint, var(--accent-green-100, #e0ec92)); }
.sim-cta-card:nth-of-type(4n + 2) { background-color: var(--tint, var(--accent-green-75,  #effaa9)); }
.sim-cta-card:nth-of-type(4n + 3) { background-color: var(--tint, var(--accent-green-50,  #f7ffc6)); }
.sim-cta-card:nth-of-type(4n + 4) { background-color: var(--tint, var(--accent-green-25,  #fbffe4)); }
.sim-cta-card.is-pinned           { background-color: var(--tint, var(--accent-green-100, #e0ec92)); }

.sim-cta-card__face {
	position: relative;
	z-index: 1; /* keep content above the radial highlight */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sim-cta-card__title {
	font-family: var(--sans);
	font-weight: 700;
	font-size: var(--h3, clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem));
	line-height: 1.05;
	margin: 0 0 var(--row-gap); /* title → body */
	text-wrap: balance;
}

.sim-cta-card__body {
	font-family: var(--sans);
	font-size: var(--body, clamp(1rem, 0.8rem + 0.2vw, 1.15rem));
	line-height: 1.4em;
	margin: 0;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.sim-cta-card__link {
	margin-top: auto; /* flush to the bottom of the card */
	padding-top: var(--link-gap); /* 3× the body → link spacing */
	display: flex;
	align-items: center; /* vertically centre the text with the arrow */
	gap: 1rem; /* breathing room between link text and arrow */
	font-size: var(--body, clamp(1rem, 0.8rem + 0.2vw, 1.15rem)); /* match body copy */
	font-weight: 600;
	line-height: 1em;
	color: var(--card-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

.sim-cta-card__link-text {
	text-wrap: balance;
}

/* Arrow — masked SVG chevron, mirrors .mega-menu-sub-item in style.css.
   Sits flush to the card's bottom-right corner, centred to the link, 50% larger. */
.sim-cta-card__arrow {
	--arrow-size: 1.5em;
	--arrow-shift: 0.32em;
	--p: 0;
	flex: none;
	margin-left: auto; /* push to the right edge → bottom-right corner */
	width: var(--arrow-size);
	height: var(--arrow-size);
	color: var(--card-text);
	background-color: currentColor;
	translate: calc(var(--p) * var(--arrow-shift)) 0;
	transform-origin: 60% 50%;
	transition: translate 280ms cubic-bezier(0.25, 0.7, 0.2, 1), scale 180ms ease-out, color 0.3s ease;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h12"/><path d="M13 6l6 6-6 6"/></g></svg>') center/contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h12"/><path d="M13 6l6 6-6 6"/></g></svg>') center/contain no-repeat;
}

/* Accessible focus ring (keyboard) */
.sim-cta-card:focus-visible {
	outline: 3px solid var(--card-accent);
	outline-offset: 2px;
}

/* Hover micro-animation — only on real (fine, hover-capable) pointers so it
   never gets stuck after a tap on touch devices. */
@media (hover: hover) and (pointer: fine) {
	.sim-cta-card {
		cursor: pointer;
	}
	.sim-cta-card:hover,
	.sim-cta-card:focus-visible {
		transform: translateY(-6px);
		z-index: 30; /* lift above neighbours and the banner above */
		/* Matches the theme's .bricks-button:hover shadow for a consistent feel */
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	}
	.sim-cta-card:hover::before,
	.sim-cta-card:focus-visible::before {
		opacity: 1; /* reveal the top-centre light */
	}
	.sim-cta-card:hover .sim-cta-card__link,
	.sim-cta-card:focus-visible .sim-cta-card__link {
		color: var(--card-accent);
	}
	.sim-cta-card:hover .sim-cta-card__arrow,
	.sim-cta-card:focus-visible .sim-cta-card__arrow {
		--p: 1;
		color: var(--card-accent);
		animation: sim-cta-arrow-breathe 900ms ease-in-out infinite alternate;
	}
}

@keyframes sim-cta-arrow-breathe {
	0%   { scale: 1; }
	45%  { scale: 1.18; }
	100% { scale: 1.02; }
}

/* Phones: tighter padding (still doubled); arrow nudged out as a static affordance. */
@media (max-width: 478px) {
	.sim-cta-cards {
		--padding: clamp(2rem, 10vw, 3rem);
	}
	.sim-cta-card__arrow {
		--p: 0.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sim-cta-card,
	.sim-cta-card::before,
	.sim-cta-card__arrow,
	.sim-cta-card__link {
		transition: none !important;
	}
	.sim-cta-card:hover .sim-cta-card__arrow,
	.sim-cta-card:focus-visible .sim-cta-card__arrow {
		animation: none !important;
		--p: 1;
	}
}