/*
 * About: Decentral House band (patterns/about-decentral-house.php). Values
 * from the old about-decentral-house-section.tsx: a -15deg skewed two-column
 * photo grid bleeding off the right edge, lg and up.
 */
.sp-about-decentral-house {
	position: relative;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
.sp-about-decentral-house .sp-about-decentral-house__container {
	overflow: hidden;
	padding-block: 64px;
}
@media (min-width: 1024px) {
	.sp-about-decentral-house .sp-about-decentral-house__container { padding-block: 0; }
}
.sp-about-decentral-house .sp-about-decentral-house__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
@media (min-width: 1024px) {
	.sp-about-decentral-house .sp-about-decentral-house__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 32px;
	}
	.sp-about-decentral-house .sp-about-decentral-house__content { grid-column: span 4 / span 4; }
	.sp-about-decentral-house .sp-about-decentral-house__collage { grid-column: span 8 / span 8; }
}
@media (min-width: 1280px) {
	.sp-about-decentral-house .sp-about-decentral-house__grid { column-gap: 48px; }
	.sp-about-decentral-house .sp-about-decentral-house__content { grid-column: span 5 / span 5; }
	.sp-about-decentral-house .sp-about-decentral-house__collage { grid-column: span 7 / span 7; }
}

.sp-about-decentral-house .sp-about-decentral-house__logo.sp-about-decentral-house__logo { margin-bottom: 32px; }
@media (min-width: 1024px) {
	.sp-about-decentral-house .sp-about-decentral-house__logo.sp-about-decentral-house__logo { margin-bottom: 40px; }
}
.sp-about-decentral-house .sp-about-decentral-house__logo img {
	width: auto;
	height: 24px;
}
.sp-about-decentral-house .sp-about-decentral-house__title.sp-about-decentral-house__title {
	max-width: 560px;
	margin-bottom: 24px;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--wp--preset--color--white);
}
.sp-about-decentral-house .sp-about-decentral-house__text.sp-about-decentral-house__text {
	max-width: 450px;
	margin-bottom: 32px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--white) 65%, transparent);
}
@media (min-width: 1280px) {
	.sp-about-decentral-house .sp-about-decentral-house__text.sp-about-decentral-house__text { font-size: var(--wp--preset--font-size--large); }
}
.sp-about-decentral-house .sp-about-decentral-house__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--black-light);
	font-size: var(--wp--preset--font-size--label);
	line-height: 16px;
}
.sp-about-decentral-house .sp-about-decentral-house__button .wp-block-button__link:hover,
.sp-about-decentral-house .sp-about-decentral-house__button .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--black-light);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--green);
}
.sp-about-decentral-house .sp-about-decentral-house__button img {
	display: block;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

/* ---------- Collage (lg and up; always shown in the editor) ---------- */
.sp-about-decentral-house .sp-about-decentral-house__collage {
	position: relative;
	height: 620px;
	overflow: hidden;
}
body:not(.editor-styles-wrapper) .sp-about-decentral-house .sp-about-decentral-house__collage { display: none; }
@media (min-width: 1024px) {
	body:not(.editor-styles-wrapper) .sp-about-decentral-house .sp-about-decentral-house__collage { display: block; }
}
@media (min-width: 1280px) {
	.sp-about-decentral-house .sp-about-decentral-house__collage { height: 680px; }
}
.sp-about-decentral-house .sp-about-decentral-house__skew {
	position: absolute;
	top: 0;
	right: -220px;
	bottom: 0;
	left: 193px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	transform: skewX(-15deg);
	transform-origin: 0 0;
}
@media (min-width: 1280px) {
	.sp-about-decentral-house .sp-about-decentral-house__skew { gap: 24px; }
}
.sp-about-decentral-house .sp-about-decentral-house__col {
	display: grid;
	gap: 8px;
}
@media (min-width: 1280px) {
	.sp-about-decentral-house .sp-about-decentral-house__col { gap: 24px; }
}
.sp-about-decentral-house .sp-about-decentral-house__col--left {
	grid-template-rows: 3fr 2fr;
	width: 80%;
	height: 85%;
	margin-top: auto;
	margin-left: auto;
	align-self: end;
}
.sp-about-decentral-house .sp-about-decentral-house__col--right {
	grid-template-rows: 2fr 3fr;
	height: 100%;
}
.sp-about-decentral-house .sp-about-decentral-house__tile {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--white) 4%, transparent);
}
.sp-about-decentral-house .sp-about-decentral-house__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: skewX(15deg) scale(1.28);
}