/*
 * digiloom: logo concepts page.
 * Source: Figma Make `Concepts.tsx` — three explored directions, each shown as
 * a wide horizontal lockup beside a square lockup, then a dark summary panel.
 */

.digiloom-concept {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--slate-line);
	border-radius: 32px;
	box-shadow: var(--wp--preset--shadow--light);
	padding: 32px;
	position: relative;
	transition: box-shadow var(--wp--custom--transition--slow);
	z-index: 1;
}

.digiloom-concept + .digiloom-concept {
	margin-top: 48px;
}

.digiloom-concept:hover {
	box-shadow: var(--wp--preset--shadow--card);
}

@media (min-width: 782px) {

	.digiloom-concept {
		padding: 40px;
	}
}

.digiloom-concept__head {
	margin-bottom: 40px;
	max-width: 42rem;
}

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

.digiloom-concept__title {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 0;
}

/* The A / B / C chip, part of the heading so it stays with the title. */
.digiloom-concept__badge {
	align-items: center;
	background-color: var(--wp--preset--color--slate-tint);
	border-radius: var(--wp--custom--radius--full);
	color: #334155;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--xx-small);
	height: 32px;
	justify-content: center;
	width: 32px;
}

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

/* Lockup panels ------------------------------------------------------ */

.digiloom-concept__lockups {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {

	.digiloom-concept__lockups {
		grid-template-columns: 7fr 5fr;
	}
}

.digiloom-concept__panel {
	background-color: rgba(248, 250, 252, 0.8);
	border: 1px solid var(--wp--preset--color--slate-tint);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 280px;
	padding: 48px;
	position: relative;
}

.digiloom-concept__label {
	color: var(--wp--preset--color--slate-muted);
	font-size: 10px;
	font-weight: var(--wp--custom--font-weight--bold);
	left: 16px;
	letter-spacing: 0.12em;
	margin: 0;
	position: absolute;
	text-transform: uppercase;
	top: 16px;
}

.digiloom-concept__mark {
	margin: 0;
}

.digiloom-concept__icon {
	margin: 0;
	transition: transform 500ms ease;
}

.digiloom-concept:hover .digiloom-concept__panel--horizontal .digiloom-concept__icon {
	transform: scale(1.05);
}

.digiloom-concept:hover .digiloom-concept__panel--square .digiloom-concept__icon {
	transform: translateY(-4px);
}

.digiloom-concept__word {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 44px;
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}

.digiloom-concept__word--sm {
	font-size: 30px;
}

/* Dark summary panel ------------------------------------------------- */

.digiloom-concept-summary {
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--lifted);
	color: var(--wp--preset--color--slate-light);
	overflow: hidden;
	padding: 40px;
	position: relative;
	z-index: 1;
}

/* Decorative threads sweeping in from the top right. */
.digiloom-concept-summary::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M 0 100 C 150 100, 200 300, 400 300' fill='none' stroke='%23ec4899' stroke-width='4'/%3E%3Cpath d='M 0 150 C 200 150, 150 350, 400 350' fill='none' stroke='%234f46e5' stroke-width='4'/%3E%3Cpath d='M 0 200 C 150 200, 250 250, 400 250' fill='none' stroke='%239333ea' stroke-width='4'/%3E%3C/svg%3E");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 600px 600px;
	content: "";
	inset: 0;
	opacity: 0.2;
	pointer-events: none;
	position: absolute;
}

.digiloom-concept-summary > * {
	position: relative;
	z-index: 1;
}

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

.digiloom-concept-summary__title {
	color: var(--wp--preset--color--white);
	margin: 0;
}

.digiloom-concept-summary__lead {
	color: var(--wp--preset--color--slate-light);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.digiloom-concept-summary__lead strong {
	color: var(--wp--preset--color--white);
}

.digiloom-concept-summary__cols {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {

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

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

.digiloom-concept-summary__kicker {
	color: var(--wp--preset--color--slate-muted);
	font-weight: var(--wp--custom--font-weight--semi-bold);
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

/* Mini swatches ------------------------------------------------------ */

.digiloom-mini-swatch {
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: var(--wp--custom--font-weight--semi-bold);
	margin: 0;
	padding: 12px 16px;
	transition: transform var(--wp--custom--transition--base);
}

.digiloom-mini-swatch:hover {
	transform: translateY(-2px);
}

.digiloom-mini-swatch.is-copied::after {
	content: " ✓";
}

.digiloom-mini-swatch--indigo { background-color: var(--wp--preset--color--indigo); }
.digiloom-mini-swatch--purple { background-color: var(--wp--preset--color--purple); }
.digiloom-mini-swatch--pink { background-color: var(--wp--preset--color--pink); }

/* Font pairing card -------------------------------------------------- */

.digiloom-font-card {
	background-color: rgba(30, 41, 59, 0.5);
	border: 1px solid #334155;
	border-radius: var(--wp--custom--radius--md);
	padding: 16px;
}

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

.digiloom-font-card__name {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--bold);
	margin: 0;
}

.digiloom-font-card__note {
	color: var(--wp--preset--color--slate-muted);
	font-size: var(--wp--preset--font-size--xx-small);
	margin: 0;
}