/* ==========================================================================
   Homepage — New sections (2026 redesign)
   ========================================================================== */

/* ---------- Check icon (reusable SVG via CSS) ---------- */
.check-icon {
	
}

.check-icon::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.5em;
	background-color: var(--color-secondary);
	-webkit-mask: url("../check-circle.svg") center left / 1em 1em no-repeat;
	mask: url("../check-circle.svg") center left / 1em 1em no-repeat;
	transform: translateY(0.1em);
}

/* ---------- Hero split layout ---------- */
.hero-section.hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	justify-content: center;
	gap: 48px;
	align-items: center;
	padding-left: max(var(--spacing-large), calc((100% - 1500px) / 2)) !important;
	padding-right: max(var(--spacing-large), calc((100% - 1500px) / 2)) !important;
}

.hero-split .hero-content {
	align-items: flex-start;
	text-align: left;
}

.hero-split .hero-title {
	text-align: left;
}

.hero-split .hero-subtitle {
	text-align: left;
}

.hero-split .hero-image img {
	width: 100%;
	height: auto;
	border-radius: 24px;
	object-fit: cover;
	aspect-ratio: 4/3;
}

.hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-top: 8px;
	font-family: var(--font-primary);
	font-size: var(--font-size-x-small);
	color: var(--color-gris);
}

/* ---------- Pain points (4 cards) ---------- */
.pain-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.pain-card {
	background: var(--color-base);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	padding: 28px 24px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pain-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px var(--overlay-medium);
}

.pain-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--color-cream);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.pain-card-icon img {
	width: 24px;
	height: 24px;
}

.pain-card strong {
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: var(--font-weight-semi-bold);
	display: block;
	margin-bottom: 8px;
}

.pain-card p {
	font-size: var(--font-size-x-small);
	color: var(--color-gris);
	margin: 0;
	line-height: var(--line-height-body);
}

/* ---------- Differentiation (split + dark card) ---------- */
.diff-section {
	padding: var(--spacing-x-large) 0;
}

.diff-wrap {
	margin: 0 auto;
}

.diff-eyebrow {
	font-family: var(--font-heading);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: var(--font-weight-bold);
	color: var(--color-secondary);
	margin: 0 0 12px;
}

.diff-marquee {
	overflow: hidden;
	margin: 40px -20px 0;
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.diff-marquee-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: diff-marquee-scroll 28s linear infinite;
}

@keyframes diff-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.diff-slide {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 0;
}

.diff-slide-icon img {
	width: 18px;
	height: 18px;
	filter: invert(1);
	display: block;
}

.diff-slide-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 15px;
	color: var(--color-base);
	line-height: 1.3;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.diff-marquee-track {
		animation: none;
	}
}

/* ---------- Benefits (split + grid) ---------- */
.benefits-section {
	padding: var(--spacing-x-large) 0;
}

.benefits-split {
	max-width: var(--content-width);
	margin: 0 auto;
	align-items: flex-start;
}

.benefit-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--font-size-small);
	color: var(--color-contrast);
	line-height: var(--line-height-body);
}

.benefits-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.benefits-figure figcaption {
	font-size: var(--font-size-x-small);
	color: var(--color-gris);
	line-height: var(--line-height-body);
	font-style: italic;
}

/* ---------- Collaboration section ---------- */
.collab-header-text {
	margin: 0;
}

.collab-card .wp-block-image {
	margin: 0 0 16px;
}

.collab-card img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 16px;
}

.collab-card p {
	margin: 0;
	font-size: 15px;
	color: var(--color-contrast);
}

/* ---------- Image with rounded corners in sections ---------- */
.section-image img {
	border-radius: 20px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.section-image-tall img {
	aspect-ratio: 3/4;
}

/* ==========================================================================
   Homepage Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.hero-section.hero-split {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hero-split .hero-content {
		align-items: center;
		text-align: center;
	}

	.hero-split .hero-title,
	.hero-split .hero-subtitle {
		text-align: center;
	}

	.hero-proof {
		justify-content: center;
	}

	.collab-header.wp-block-columns,
	.collab-cards.wp-block-columns {
		flex-wrap: wrap;
	}

	.collab-header.wp-block-columns > .wp-block-column,
	.collab-cards.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.pain-cards {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 768px) {
	.hero-section.hero-split {
		padding: var(--spacing-large) var(--spacing-x-small);
	}

	.pain-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.pain-card {
		border-radius: 12px;
		padding: 14px 12px;
	}

	.pain-card-icon {
		width: 32px;
		height: 32px;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.pain-card-icon img {
		width: 18px;
		height: 18px;
	}

	.pain-card strong {
		font-size: 14px;
		line-height: 1.2;
		margin-bottom: 4px;
	}

	.pain-card p {
		font-size: 12px;
	}
}