/* ==========================================================================
   AVP 2026 Transatlantic Index — Custom Styles
   ========================================================================== */

/* ---------- Global resets for block theme ---------- */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
body {
	margin: 0;
	padding: 0;
}

/* ---------- Font helpers ---------- */
.font-regular {
	font-family: "Karlsbader Grotesk 400", sans-serif !important;
	font-weight: 400 !important;
}
.font-semibold {
	font-family: "Karlsbader Grotesk 600", sans-serif !important;
	font-weight: 600 !important;
}
.font-extrabold {
	font-family: "Karlsbader Grotesk 600", sans-serif !important;
	font-weight: 800 !important;
}

/* ---------- Hero images — overlapping layout (Figma: 756 × 673) ---------- */
.avp-hero-images {
	position: relative;
	width: clamp(300px, 44vw, 756px);
	aspect-ratio: 756 / 673;
	flex-shrink: 0;
}
.avp-hero-images img {
	position: absolute;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	object-fit: cover;
}
.avp-hero-img-1 {
	width: 65.6%;  /* 496 / 756 */
	aspect-ratio: 1;
	top: 0;
	right: 0;
}
.avp-hero-img-2 {
	width: 48.4%;  /* 366 / 756 */
	aspect-ratio: 1;
	top: 45.6%;   /* 307 / 673 */
	left: 0;
}
.avp-hero-img-3 {
	width: 31.2%;  /* 236 / 756 */
	aspect-ratio: 1;
	top: 56.2%;   /* 378 / 673 */
	left: 43.1%;  /* 326 / 756 */
}
.avp-hero-pill {
	position: absolute;
	top: 11.3%;   /* 76 / 673 */
	left: 18.1%;  /* 137 / 756 */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	background: #fff;
	border-radius: 96px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	font-family: "Karlsbader Grotesk 400", sans-serif;
	font-size: 16px;
	color: #000;
	z-index: 10;
	white-space: nowrap;
}
.avp-hero-pill img {
	position: static;
	width: 16px;
	height: 16px;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Column layout & card sizing ---------- */
/* Make columns flex containers so children can stretch */
.wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}
/* Six-themes cards: equal-height within each row */
#themes .wp-block-columns > .wp-block-column > .wp-block-group {
	flex: 1;
}
/* Photo/cover blocks always fill their column height */
.wp-block-columns > .wp-block-column > .wp-block-cover {
	flex: 1;
}
/* Nested columns fill their parent column (stat grids match photo height) */
.wp-block-column > .wp-block-columns {
	flex: 1;
}
/* Nested stat cards stretch to fill their row */
.wp-block-column > .wp-block-columns > .wp-block-column > .wp-block-group {
	flex: 1;
}
/* Gap between stacked stat-card rows (Figma: 24px) */
.wp-block-column > .wp-block-columns + .wp-block-columns {
	margin-top: 24px;
}

/* ---------- Fluid section padding (96px @ 1728 → scales down) ---------- */
.wp-block-group[style*="padding-right:96px"] {
	padding-left: clamp(24px, 5.56vw, 96px) !important;
	padding-right: clamp(24px, 5.56vw, 96px) !important;
}
.wp-block-group[style*="padding-top:96px"][style*="padding-bottom:96px"] {
	padding-top: clamp(48px, 5.56vw, 96px) !important;
	padding-bottom: clamp(48px, 5.56vw, 96px) !important;
}
/* CTA cover vertical padding (144px @ 1728) */
.wp-block-cover[style*="padding-top:144px"] {
	padding-top: clamp(64px, 8.33vw, 144px) !important;
	padding-bottom: clamp(64px, 8.33vw, 144px) !important;
}
.wp-block-cover[style*="padding-right:96px"] {
	padding-left: clamp(24px, 5.56vw, 96px) !important;
	padding-right: clamp(24px, 5.56vw, 96px) !important;
}

/* ---------- Fluid card / stat padding (48px @ 1728 → scales down) ---------- */
.wp-block-group[style*="padding-top:48px"][style*="padding-right:48px"] {
	padding: clamp(24px, 2.78vw, 48px) !important;
}
.wp-block-cover[style*="padding-top:48px"][style*="padding-right:48px"] {
	padding: clamp(24px, 2.78vw, 48px) !important;
}

/* ---------- Fluid typography ---------- */
/* Hero h1 — 96px @ 1728 */
h1.wp-block-heading[style*="font-size:96px"] {
	font-size: clamp(36px, 5.56vw, 96px) !important;
}
/* Section headings — 48px @ 1728 */
h2.wp-block-heading[style*="font-size:48px"] {
	font-size: clamp(28px, 2.78vw, 48px) !important;
}
/* CTA heading — 64px @ 1728 */
h2.wp-block-heading[style*="font-size:64px"] {
	font-size: clamp(28px, 3.7vw, 64px) !important;
}
/* Stat numbers & quote — 48px paragraphs */
p[style*="font-size:48px"] {
	font-size: clamp(28px, 2.78vw, 48px) !important;
}
/* Card titles, subtitles, cover text — 32px paragraphs */
p[style*="font-size:32px"] {
	font-size: clamp(20px, 1.85vw, 32px) !important;
}
/* Sub-headings — 24px paragraphs */
p[style*="font-size:24px"] {
	font-size: clamp(18px, 1.39vw, 24px) !important;
}

/* ---------- SVG logo fix ---------- */
.avp-logo-svg {
	display: block;
}
.avp-logo-svg img,
.avp-logo-svg svg {
	width: 72px;
	height: 33px;
	display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	/* WordPress stacks columns at this breakpoint */
	/* Photo covers need a min-height when stacked */
	.wp-block-cover[style*="min-height:100%"] {
		min-height: 300px !important;
	}
	/* Remove stat-row gap when columns stack */
	.wp-block-column > .wp-block-columns + .wp-block-columns {
		margin-top: 0;
	}

	/* ---------- Hero mobile layout ---------- */
	/* Stack text above images */
	.avp-hero-section {
		flex-wrap: wrap !important;
		gap: 40px !important;
	}
	/* Text block takes full width */
	.avp-hero-section > .wp-block-group {
		flex-basis: 100% !important;
		min-width: 100% !important;
	}
	/* Images container: full-width below text */
	.avp-hero-images {
		width: 100%;
	}
	/* Hero stats: stack to 1 column */
	.avp-hero-section .wp-block-columns {
		flex-direction: column !important;
	}
	.avp-hero-section .wp-block-column {
		flex-basis: auto !important;
	}
	.avp-hero-pill {
		font-size: 14px;
		padding: 10px 16px;
	}

	/* Header padding override for mobile */
	.wp-block-group[style*="min-height:108px"] {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}
