/*
 * digiloom: values grid + CTA banner.
 * Source: Figma Make `Values.tsx`. The four cards share one markup shape; the
 * per-card accent colour and icon are applied by nth-child so editors never
 * have to touch a class to keep the sequence looking right.
 */

.digiloom-values {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: 1024px;
	position: relative;
	z-index: 1;
}

@media (min-width: 782px) {

	.digiloom-values {
		gap: 40px;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Card --------------------------------------------------------------- */

.digiloom-value-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--slate-line);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--light);
	overflow: hidden;
	padding: 32px;
	position: relative;
	transition: transform var(--wp--custom--transition--slow), box-shadow var(--wp--custom--transition--slow), border-color var(--wp--custom--transition--slow);
}

@media (min-width: 782px) {

	.digiloom-value-card {
		padding: 40px;
	}
}

.digiloom-value-card:hover {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-4px);
}

/* Accent bar across the top of each card. */
.digiloom-value-card::before {
	content: "";
	height: 6px;
	inset: 0 0 auto 0;
	opacity: 0.8;
	position: absolute;
}

/* The pulsing node in the top-right corner. */
.digiloom-value-card::after {
	border-radius: var(--wp--custom--radius--full);
	content: "";
	height: 12px;
	position: absolute;
	right: 32px;
	top: 32px;
	width: 12px;
}

@media (prefers-reduced-motion: no-preference) {

	.digiloom-value-card::after {
		animation: digiloom-node-pulse 3s ease-in-out infinite;
	}
}

@keyframes digiloom-node-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 currentColor;
	}

	70% {
		box-shadow: 0 0 0 14px transparent;
	}
}

.digiloom-value-card__icon {
	border-radius: var(--wp--custom--radius--lg);
	height: 56px;
	margin: 0 0 32px;
	width: 56px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 28px 28px;
	transition: transform var(--wp--custom--transition--slow);
}

.digiloom-value-card:hover .digiloom-value-card__icon {
	transform: scale(1.1);
}

.digiloom-value-card__title {
	margin: 0 0 16px;
}

.digiloom-value-card__text {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	margin: 0;
}

/* Per-card palettes -------------------------------------------------- */

/* 1 — Open Source First (indigo, code glyph) */
.digiloom-value-card:nth-child(1)::before { background-color: var(--wp--preset--color--indigo-line); }
.digiloom-value-card:nth-child(1)::after { background-color: var(--wp--preset--color--indigo-light); color: rgba(99, 102, 241, 0.25); }
.digiloom-value-card:nth-child(1):hover { border-color: var(--wp--preset--color--indigo-pale); }

.digiloom-value-card:nth-child(1) .digiloom-value-card__icon {
	background-color: var(--wp--preset--color--indigo-line);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E");
}

/* 2 — Co-operative Spirit (purple, users glyph) */
.digiloom-value-card:nth-child(2)::before { background-color: #f3e8ff; }
.digiloom-value-card:nth-child(2)::after { background-color: #a855f7; color: rgba(168, 85, 247, 0.25); }
.digiloom-value-card:nth-child(2):hover { border-color: #d8b4fe; }

.digiloom-value-card:nth-child(2) .digiloom-value-card__icon {
	background-color: #f3e8ff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239333ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* 3 — Broadcasting Impact (pink, radio glyph) */
.digiloom-value-card:nth-child(3)::before { background-color: #fce7f3; }
.digiloom-value-card:nth-child(3)::after { background-color: var(--wp--preset--color--pink); color: rgba(236, 72, 153, 0.25); }
.digiloom-value-card:nth-child(3):hover { border-color: #f9a8d4; }

.digiloom-value-card:nth-child(3) .digiloom-value-card__icon {
	background-color: #fce7f3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23db2777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E");
}

/* 4 — Affordable Solutions (fuchsia, hand-heart glyph) */
.digiloom-value-card:nth-child(4)::before { background-color: #fae8ff; }
.digiloom-value-card:nth-child(4)::after { background-color: #d946ef; color: rgba(217, 70, 239, 0.25); }
.digiloom-value-card:nth-child(4):hover { border-color: #f0abfc; }

.digiloom-value-card:nth-child(4) .digiloom-value-card__icon {
	background-color: #fae8ff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c026d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16'/%3E%3Cpath d='m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9'/%3E%3Cpath d='m2 15 6 6'/%3E%3Cpath d='M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.7 2.7 0 0 0 16 4a2.7 2.7 0 0 0-5 1.8c0 1.2.8 2 1.5 2.7L16 12Z'/%3E%3C/svg%3E");
}

/* CTA banner --------------------------------------------------------- */

.digiloom-cta-banner {
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--xxl);
	box-shadow: var(--wp--preset--shadow--deep);
	color: var(--wp--preset--color--white);
	margin-inline: auto;
	max-width: 1024px;
	overflow: hidden;
	padding: 40px;
	position: relative;
	z-index: 1;
}

@media (min-width: 782px) {

	.digiloom-cta-banner {
		padding: 64px;
	}
}

/* Woven background mesh — three brand-gradient curves at low opacity. */
.digiloom-cta-banner::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234f46e5'/%3E%3Cstop offset='50%25' stop-color='%239333ea'/%3E%3Cstop offset='100%25' stop-color='%23ec4899'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-100,100 Q 200,300 500,100 T 1100,200' fill='none' stroke='url(%23g)' stroke-width='4' opacity='0.5'/%3E%3Cpath d='M-50,200 Q 300,50 600,250 T 1200,150' fill='none' stroke='url(%23g)' stroke-width='6' opacity='0.7'/%3E%3Cpath d='M-200,50 Q 150,200 450,50 T 1000,100' fill='none' stroke='url(%23g)' stroke-width='3' opacity='0.3'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	inset: 0;
	opacity: 0.2;
	pointer-events: none;
	position: absolute;
	transition: opacity 700ms ease;
}

.digiloom-cta-banner:hover::before {
	opacity: 0.3;
}

.digiloom-cta-banner__body {
	flex: 1 1 32rem;
	max-width: 36rem;
	position: relative;
	z-index: 1;
}

.digiloom-cta-banner__body > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.digiloom-cta-banner__title {
	color: var(--wp--preset--color--white);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
}

.digiloom-cta-banner__lead {
	color: var(--wp--preset--color--slate-light);
	font-size: clamp(18px, 2vw, 20px);
	line-height: var(--wp--custom--line-height--body);
	margin: 0;
}

.digiloom-cta-banner__action {
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

/* Gradient pill button. */
.digiloom-button--gradient .wp-block-button__link {
	background-color: transparent;
	background-image: var(--wp--custom--brand--gradient-light);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--white);
	padding: 16px 32px;
	transition: transform var(--wp--custom--transition--slow), box-shadow var(--wp--custom--transition--slow);
}

.digiloom-button--gradient .wp-block-button__link:hover,
.digiloom-button--gradient .wp-block-button__link:focus {
	background-image: var(--wp--custom--brand--gradient-light);
	box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.3);
	transform: scale(1.04);
}