/* =============================================================
   ARADEL – OUR VALUE CHAIN
   File: aradel-value-chain/assets/aradel-value-chain.css

   This file contains ONLY module-level additions.
   All base card styles (.ar-card, .ar-card--media, .ar-card-section,
   .ar-card-grid) are already defined in aradel-design-system.css.
   ============================================================= */

/* ── Section heading ─────────────────────────────────────────────────────── */

.ar-vc__heading {
	font-family: var(--ads-font, "Nunito Sans", sans-serif);
	font-size: var(--ads-h2, 48px);
	line-height: var(--ads-h2-lh, 64px);
	font-weight: 400;
	color: var(--ads-brand-blue, #01303A);
	margin: 0 0 40px;
	letter-spacing: 0.014px;
}

/* ── Image placeholder (no image supplied yet) ───────────────────────────── */

.ar-vc__img-placeholder {
	position: absolute;
	inset: 0;
	background: #1a2a2e;
}

/* ── Full-card link overlay ──────────────────────────────────────────────── */
/*
   .ar-vc__card-link is an absolutely-positioned anchor that covers the
   entire card, making the whole surface clickable. It sits below the
   card body (z-index 1) so the ar_action circle (z-index 2) remains
   independently interactive for WAAPI hover animation.
*/

.ar-vc__card {
	position: relative; /* already set by .ar-card--media; belt-and-braces */
}

.ar-vc__card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 20px;
}

/* Card body must sit above the overlay link — z-index only, never override position */
.ar-vc__card .ar-card__body {
	z-index: 2;
}

/* ar_action circle inherits white tone from [tone="white"] data attribute */
.ar-vc__card .ar-action[data-tone="white"] {
	color: #fff;
}

/* ── Ensure anchor cards strip default link decoration ──────────────────── */

a.ar-vc__card,
a.ar-vc__card:hover {
	text-decoration: none;
	color: inherit;
}

/* ── Responsive heading ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ar-vc__heading {
		font-size: 38px;
		line-height: 48px;
		margin-bottom: 32px;
	}
}

@media (max-width: 640px) {
	.ar-vc__heading {
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 24px;
	}
}