/**
 * Service Detail — an icon, heading and introduction above a panel of offerings.
 *
 * The introduction and the panel's items share one text edge, a column in from the container.
 * The panel breaks out by up to a gap and pads back in by the same amount plus that column; the
 * section icon hangs to the left of the text edge.
 */

/*** Module: Service Detail ***/

.module.service-detail .intro {
	column-gap: var(--text-spacing-medium);
	display: grid;
	grid-template-columns: calc(40rem / 16) minmax(0, 1fr);
	margin-left: calc(var(--one-column-width) - calc(40rem / 16) - var(--text-spacing-medium));
	margin-right: calc(2 * var(--one-column-width) + 2 * var(--gap));
}

.module.service-detail .intro > * {
	grid-column: 2;
	margin: 0;
}

.module.service-detail .intro > .icon {
	align-self: start;
	color: var(--cyan);
	grid-column: 1;
	grid-row: 1;
	height: calc(40rem / 16);
	margin-top: calc((var(--heading-3-size) * 58 / 40 - calc(40rem / 16)) / 2);
	width: auto;
}

.module.service-detail .intro > .heading-3 {
	color: var(--cyan);
}

.module.service-detail .intro > .heading-4 {
	color: var(--text);
	margin-top: var(--text-spacing-xxsmall);
}

.module.service-detail .intro > .description {
	color: var(--white);
	margin-top: var(--text-spacing-medium);
}

.module.service-detail .description,
.module.service-detail .description p {
	font-weight: 400;
}

.module.service-detail .description :is(strong, b) {
	font-weight: 500;
}

.module.service-detail :is(.description, .small-text) > :first-child {
	margin-top: 0;
}

.module.service-detail :is(.description, .small-text) > :last-child {
	margin-bottom: 0;
}

/** Panel **/

.module.service-detail .panel {
	--panel-breakout: max(var(--container-breakout), calc(var(--gap) * -1));
	--texture-opacity: 0.08;
	margin: 0 var(--panel-breakout);
	padding: var(--module-spacing-medium) calc(var(--one-column-width) - var(--panel-breakout));
}

.module.service-detail .intro + .panel {
	margin-top: var(--module-spacing-small);
}

.module.service-detail .items {
	display: grid;
	gap: var(--module-spacing-small);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.service-detail .items.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module.service-detail .items li {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.module.service-detail .items li > .icon {
	color: var(--cyan);
	height: calc(28rem / 16);
	margin: calc(2rem / 16) 0;
	width: auto;
}

.module.service-detail .items li > .icon + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.service-detail .items li > .heading-6 + * {
	margin-top: var(--text-spacing-xxsmall);
}

.module.service-detail .panel > .btn {
	bottom: var(--text-spacing-xxsmall);
	gap: 0;
	height: var(--icon-button-size);
	min-height: 0;
	padding: 0 calc((var(--icon-button-size) - 1.25em) / 2);
	position: absolute;
	right: var(--text-spacing-xxsmall);
}

.module.service-detail .panel > .btn svg {
	flex-shrink: 0;
	height: 1.25em;
	width: 1.25em;
}

.module.service-detail .panel > .btn .label {
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	width: 0;
}

.module.service-detail .panel:is(:hover, :focus-within) > .btn .label {
	margin-right: var(--text-spacing-xxsmall);
	opacity: 1;
	width: auto;
}

@media (hover: none), (pointer: coarse), (max-width: calc(650rem / 16)) {

	.module.service-detail .panel > .btn .label {
		margin-right: var(--text-spacing-xxsmall);
		opacity: 1;
		width: auto;
	}

}

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

	.module.service-detail .panel > .btn .label {
		transition: width .3s cubic-bezier(0.25, 1, 0.5, 1), margin-right .3s cubic-bezier(0.25, 1, 0.5, 1), opacity .2s ease;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.service-detail .intro {
		margin-left: 0;
	}

	.module.service-detail .panel {
		padding-inline: calc(40rem / 16 + var(--text-spacing-medium));
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.service-detail .intro {
		margin-right: 0;
	}

	.module.service-detail .items {
		gap: var(--text-spacing-xlarge) var(--gap);
	}

	.module.service-detail .items.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.service-detail .intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.service-detail .intro > * {
		grid-column: 1;
	}

	.module.service-detail .intro > .icon {
		grid-row: auto;
		margin: 0 0 var(--text-spacing-xsmall);
	}

	.module.service-detail .panel {
		padding: var(--module-spacing-small) var(--text-spacing-small);
	}

	.module.service-detail .items.columns-3,
	.module.service-detail .items.columns-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.service-detail .panel > .btn {
		align-self: flex-end;
		margin: var(--text-spacing-medium) calc(var(--text-spacing-small) * -1 + var(--text-spacing-xxsmall)) calc(var(--module-spacing-small) * -1 + var(--text-spacing-xxsmall)) 0;
		position: relative;
		inset: auto;
	}

}