/* Piikula Soluni page ----------------------------------------------------- */

.pk-soluni [id] {
	scroll-margin-top: 6rem;
}

.pk-soluni-hero {
	background-color: var(--pk-color-blush);
	background-image: radial-gradient(48rem 26rem at 10% 0%, var(--pk-color-rose-surface), transparent 72%);
}

.pk-soluni-hero__inner {
	display: grid;
	gap: var(--pk-space-2xl);
	align-items: center;
}

.pk-soluni-hero__eyebrow {
	margin: 0 0 var(--pk-space-sm);
	color: var(--pk-color-primary);
	font-size: var(--pk-font-size-sm);
	font-weight: var(--pk-font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pk-soluni-hero__title,
.pk-soluni__title {
	margin: 0 0 var(--pk-space-sm);
	font-size: var(--pk-font-size-h2);
}

.pk-soluni-hero__title {
	font-size: var(--pk-font-size-h1);
}

.pk-soluni-hero__tagline {
	margin: 0;
	font-family: var(--pk-font-heading);
	font-size: var(--pk-font-size-h3);
	font-weight: var(--pk-font-weight-heading);
	line-height: var(--pk-line-height-snug);
}

.pk-soluni-hero__lead,
.pk-soluni__lead {
	margin: var(--pk-space-xs) 0 0;
	color: var(--pk-color-text-secondary);
	font-size: var(--pk-font-size-lead);
}

.pk-soluni-hero__text {
	max-width: 35rem;
	margin: var(--pk-space-lg) 0 var(--pk-space-xl);
	color: var(--pk-color-text-secondary);
}

.pk-soluni-product-slot {
	margin: 0;
	aspect-ratio: 1200 / 791;
	border: 1px dashed var(--pk-color-rose-border);
	border-radius: var(--pk-radius-lg);
	background-color: var(--pk-color-rose-surface);
	background-image: radial-gradient(20rem 16rem at 70% 20%, var(--pk-color-blush), transparent 70%);
	display: grid;
	place-items: center;
	padding: var(--pk-space-lg);
	text-align: center;
	overflow: hidden;
}

.pk-soluni-product-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.pk-soluni-product-slot:has(img) {
	border-style: none;
	padding: 0;
	background-image: none;
}

.pk-soluni-opportunity,
.pk-soluni-contact {
	max-width: var(--pk-width-narrow);
}

.pk-soluni-products__layout {
	display: grid;
	gap: var(--pk-space-xl);
}

.pk-soluni-products__intro,
.pk-soluni-products__personal {
	max-width: var(--pk-width-narrow);
}

.pk-soluni-product-media,
.pk-soluni-lifestyle-media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--pk-radius-lg);
	background-color: var(--pk-color-rose-surface);
}

.pk-soluni-product-media {
	aspect-ratio: 1;
}

.pk-soluni-lifestyle-media {
	max-width: 44rem;
	margin-inline: auto;
	aspect-ratio: 4 / 5;
}

.pk-soluni-product-media img,
.pk-soluni-lifestyle-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.pk-soluni-opportunity,
.pk-soluni-contact {
	padding: var(--pk-space-xl);
	border: 1px solid var(--pk-color-rose-border);
	border-radius: var(--pk-radius-lg);
	background-color: var(--pk-color-surface);
	box-shadow: var(--pk-shadow-sm);
}

.pk-soluni-products__intro .pk-actions,
.pk-soluni-products__personal .pk-actions,
.pk-soluni-opportunity .pk-actions,
.pk-soluni-contact .pk-actions {
	margin-top: var(--pk-space-xl);
}

.pk-soluni__subheading {
	margin: var(--pk-space-2xl) 0 var(--pk-space-sm);
	font-size: var(--pk-font-size-h3);
}

.pk-soluni__emphasis {
	margin: var(--pk-space-2xl) 0 var(--pk-space-md);
	color: var(--pk-color-primary);
	font-family: var(--pk-font-heading);
	font-size: var(--pk-font-size-h4);
	font-weight: var(--pk-font-weight-heading);
	line-height: var(--pk-line-height-snug);
}

.pk-soluni__affiliate-note {
	margin: var(--pk-space-sm) 0 0;
	color: var(--pk-color-text-muted);
	font-size: var(--pk-font-size-sm);
}

.pk-soluni__affiliate-note p {
	margin: 0;
}

.pk-soluni__affiliate-note p + p {
	margin-top: var(--pk-space-2xs);
}

.pk-soluni__affiliate-note strong {
	color: var(--pk-color-text-secondary);
	font-weight: var(--pk-font-weight-medium);
}

.pk-soluni-contact__details {
	margin: var(--pk-space-lg) 0 0;
	font-size: var(--pk-font-size-sm);
}

.pk-soluni-contact__details a {
	font-weight: var(--pk-font-weight-medium);
	word-break: break-word;
}

@media (max-width: 47.99em) {
	/* The contact actions naturally sit inline on wider screens. Once the card
	 * reaches phone widths, make the stack explicit so its controls retain the
	 * same deliberate spacing as other Piikula action groups. */
	.pk-soluni-contact .pk-actions {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pk-space-sm);
	}
}

@media (max-width: 61.99em) {
	/* The inline phone and email links need the same comfortable target size as
	 * the primary SMS and call buttons on touch devices. */
	.pk-soluni-contact__details a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

@media (min-width: 52em) {
	.pk-soluni-hero__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: var(--pk-space-3xl);
	}

	.pk-soluni-product-slot {
		aspect-ratio: 1200 / 791;
	}

	.pk-soluni-products__layout {
		grid-template-columns: minmax(0, 6fr) minmax(18rem, 5fr);
		column-gap: var(--pk-space-3xl);
		align-items: start;
	}

	.pk-soluni-products__intro,
	.pk-soluni-products__personal {
		grid-column: 1;
	}

	.pk-soluni-product-media {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}
}