/*
 * digiloom: contact page.
 * Source: Figma Make `Contact.tsx` — a dark mailto panel with two blurred
 * colour blooms, followed by a pair of info cards.
 */

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

@media (min-width: 782px) {

	.digiloom-contact-panel {
		padding: 64px;
	}
}

/* Indigo bloom, top left. */
.digiloom-contact-panel::before {
	background-color: rgba(99, 102, 241, 0.2);
	border-radius: var(--wp--custom--radius--full);
	content: "";
	filter: blur(100px);
	height: 150%;
	left: -10%;
	pointer-events: none;
	position: absolute;
	top: -20%;
	width: 50%;
}

/* Pink bloom, bottom right. */
.digiloom-contact-panel::after {
	background-color: rgba(236, 72, 153, 0.2);
	border-radius: var(--wp--custom--radius--full);
	bottom: -20%;
	content: "";
	filter: blur(100px);
	height: 150%;
	pointer-events: none;
	position: absolute;
	right: -10%;
	width: 50%;
}

.digiloom-contact-panel > * {
	position: relative;
	z-index: 1;
}

/* Frosted mail emblem. */
.digiloom-contact-panel__emblem {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wp--custom--radius--lg);
	height: 80px;
	margin-inline: auto;
	width: 80px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

.digiloom-contact-panel__address {
	color: var(--wp--preset--color--white);
	overflow-wrap: anywhere;
}

.digiloom-contact-panel__lead {
	color: var(--wp--preset--color--slate-light);
	font-size: var(--wp--preset--font-size--small);
	margin-inline: auto;
	max-width: 32rem;
}

/* Light button used on the dark panel. */
.digiloom-button--light .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--lifted);
	color: var(--wp--preset--color--ink);
	transition: transform var(--wp--custom--transition--slow), background-color var(--wp--custom--transition--base);
}

.digiloom-button--light .wp-block-button__link:hover,
.digiloom-button--light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	transform: scale(1.04);
}

/* Info cards --------------------------------------------------------- */

.digiloom-info-cards {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: 896px;
	position: relative;
	z-index: 1;
}

@media (min-width: 782px) {

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

.digiloom-info-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);
	padding: 32px;
	padding-left: 100px;
	position: relative;
}

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

.digiloom-info-card__icon {
	border-radius: var(--wp--custom--radius--md);
	height: 48px;
	left: 32px;
	margin: 0;
	position: absolute;
	top: 32px;
	width: 48px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
}

/* Location — indigo pin */
.digiloom-info-card:nth-child(1) .digiloom-info-card__icon {
	background-color: var(--wp--preset--color--indigo-tint);
	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='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Response Time — pink clock */
.digiloom-info-card:nth-child(2) .digiloom-info-card__icon {
	background-color: #fdf2f8;
	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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.digiloom-info-card__title {
	margin: 0;
}

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