/*
 * NPU Flex template — design tokens + base layout.
 * Values mirror Figma variables for file 0277aepgvQrSa8qJCDLosA.
 */

.npu-flex-template {
	/* Brand */
	--npu-purple: #5a308d;
	--npu-purple-deep: #2f1949;

	/* Text */
	--npu-text-01: #000000;
	--npu-text-02: #282828;
	--npu-text-muted: #6f7072;
	--npu-text-on-dark: #ffffff;

	/* Layout */
	--npu-wrapper-max: 1600px;
	--npu-section-padding-x: 64px;
	--npu-section-padding-y: 100px;

	/* Spacing scale */
	--npu-gap-nano: 8px;
	--npu-gap-small: 16px;
	--npu-gap-regular: 20px;
	--npu-gap-medium: 40px;

	/* Buttons */
	--npu-button-list-gap: 16px;

	/* Type */
	--npu-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--npu-font-display: 'Shift', 'Inter', system-ui, sans-serif;
	--npu-h-xs: 16px;

	/* Other */
	--npu-radius: 0;
}

.npu-flex-template > * + * {
	/* No vertical gap by default — each block owns its own padding. */
	margin: 0;
}

.npu-flex-template h3 {
	border-bottom: none;
}

/* ---------- Defensive reset against parent theme / Divi bleed ----------
 * Uses :where() so specificity stays at 0 and our own classes win.
 * The img rule uses !important to neutralize Divi's WooCommerce-style
 * `img { margin: 0 0 9px !important }` bleed in style-static.min.css.
 */

.npu-flex-template :where(section, article, header, footer, aside, figure, nav, ol, ul, li, p, span, picture, blockquote, img) {
	border: 0;
	box-shadow: none;
}

.npu-flex-template :where(p) {
	margin: 0;
	padding: 0;
}

.npu-flex-template :where(ol, ul) {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.npu-flex-template :where(li) {
	margin: 0;
	padding: 0;
}

.npu-flex-template img {
	margin: 0 !important;
	box-shadow: none !important;
}

.npu-flex-template .npu-block {
	position: relative;
	z-index: 0;
	width: 100%;
	--npu-block-padding-top: var(--npu-section-padding-y);
	--npu-block-padding-bottom: var(--npu-section-padding-y);
}

.npu-flex-template .npu-block.npu-spacing-top--none {
	--npu-block-padding-top: 0;
}

.npu-flex-template .npu-block.npu-spacing-top--small {
	--npu-block-padding-top: calc(var(--npu-section-padding-y) / 2);
}

.npu-flex-template .npu-block.npu-spacing-top--large {
	--npu-block-padding-top: calc(var(--npu-section-padding-y) * 1.5);
}

.npu-flex-template .npu-block.npu-spacing-bottom--none {
	--npu-block-padding-bottom: 0;
}

.npu-flex-template .npu-block.npu-spacing-bottom--small {
	--npu-block-padding-bottom: calc(var(--npu-section-padding-y) / 2);
}

.npu-flex-template .npu-block.npu-spacing-bottom--large {
	--npu-block-padding-bottom: calc(var(--npu-section-padding-y) * 1.5);
}

.npu-flex-template .npu-wrapper {
	position: relative;
	max-width: var(--npu-wrapper-max);
	margin-inline: auto;
	padding-inline: var(--npu-section-padding-x);
}

@media (max-width: 980px) {
	.npu-flex-template {
		--npu-section-padding-x: 40px;
		--npu-section-padding-y: 60px;
	}
}

@media (max-width: 600px) {
	.npu-flex-template {
		--npu-section-padding-x: 20px;
		--npu-section-padding-y: 48px;
	}
}

/* ---------- Section heading ---------- */

.npu-section-heading {
	font-family: var(--npu-font-display);
	font-weight: 700;
	font-size: 50px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--npu-purple);
	text-align: center;
	margin: 0;
}

.npu-section-subhead {
	font-family: var(--npu-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: var(--npu-text-muted);
	text-align: center;
	margin: 0;
}

@media (max-width: 980px) {
	.npu-section-heading {
		font-size: 38px;
	}
}

@media (max-width: 600px) {
	.npu-section-heading {
		font-size: 28px;
	}
}

/* ---------- Card (shared) ---------- */

.npu-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	position: relative;
}

.npu-card__media {
	height: 250px;
	overflow: hidden;
	position: relative;
}

.npu-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
	position: relative;
	z-index: 0;
}

/* Blend layers on .npu-card__media so mix-blend-mode targets the image (z-index stack).
 * Only linked cards get pseudo-elements (content set under .has-link). */
.npu-card.has-link:hover .npu-card__media::before,
.npu-card.has-link:focus-within .npu-card__media::before,
.npu-card.has-link:hover .npu-card__media::after,
.npu-card.has-link:focus-within .npu-card__media::after {
	opacity: 1;
}

.npu-card.has-link:hover .npu-card__media-overlay-plus,
.npu-card.has-link:focus-within .npu-card__media-overlay-plus {
	opacity: 1;
}

.npu-card.has-link .npu-card__media::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	background: #fff;
	mix-blend-mode: color;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.npu-card.has-link .npu-card__media::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 2;
	background-color: #49307d;
	background-size: contain;
	mix-blend-mode: multiply;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.npu-card__media-overlay-plus {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background-image: url("/wp-content/uploads/2023/11/plus-full-width.png");
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.npu-card__media-overlay-content {
	position: absolute;
	top: 5px;
	left: 5px;
	max-width: 100%;
	display: inline;
	z-index: 4;
	color: var(--npu-text-on-dark);
	font-size: 23px;
	line-height: 1.5;
}

.npu-card__media-overlay-content span {
	background-color: var(--npu-purple);
	display: inline;
}

.npu-card__title {
	font-family: var(--npu-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--npu-text-01);
	margin: 0;
}

.npu-card__link {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
}

.npu-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

.npu-card__link:focus-visible::before {
	outline: 2px solid var(--npu-purple);
	outline-offset: 2px;
}

.npu-card.has-link {
	transition: transform 200ms ease;
}

.npu-card.has-link:hover .npu-card__title {
	color: var(--npu-purple);
}

.npu-card__body {
	font-family: var(--npu-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: var(--npu-text-muted);
	margin: 0;
}

.npu-card__overline {
	font-family: var(--npu-font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	color: var(--npu-text-02);
	text-transform: uppercase;
	opacity: 0.5;
	margin: auto 0 0;
}

.npu-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
}

@media (max-width: 980px) {
	.npu-card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
}

@media (max-width: 600px) {
	.npu-card-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ---------- Buttons ---------- */

.npu-button-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--npu-button-list-gap);
	align-items: flex-start;
}

.et_pb_button {
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	border-width: 1px;
}

.et_pb_button:hover {
	border-width: 1px;
}


.et_pb_button:after {
	font-size: 1.5em;
}

.et_pb_button.primary {
	background-color: var(--npu-purple);
	color: var(--npu-text-on-dark);
	border-color: var(--npu-purple);
}

.et_pb_button.primary:hover,
.et_pb_button.primary:focus-visible {
	background-color: var(--npu-purple-deep);
	border-color: var(--npu-purple-deep);
	color: var(--npu-text-on-dark);
}

.et_pb_button.primary-light {
	background-color: var(--npu-text-on-dark);
	color: var(--npu-text-01);
	border-color: var(--npu-text-on-dark);
}

.et_pb_button.primary-light:hover,
.et_pb_button.primary-light:focus-visible {
	background-color: transparent;
	color: var(--npu-text-on-dark);
}

.et_pb_button.secondary {
	background-color: transparent;
	color: var(--npu-text-on-dark);
	border-color: var(--npu-text-on-dark);
}

.et_pb_button.secondary:hover,
.et_pb_button.secondary:focus-visible {
	background-color: var(--npu-text-on-dark);
	color: var(--npu-text-01);
}