/**
 * Feature Cards style: Color Panels
 *
 * The intro and the 2-up are the module's; everything here is the card, which trades the
 * photograph for a flat fill and stops collapsing its copy.
 */

.module.feature-cards.style-panel .container {
	row-gap: 0;
}

.module.feature-cards.style-panel .intro {
	gap: var(--text-spacing-xsmall);
	grid-column: 2 / span 10;
	margin-bottom: var(--module-spacing-small);
}

.module.feature-cards.style-panel .cards {
	grid-column: 1 / -1;
}

.module.feature-cards.style-panel .cards > li {
	grid-column: span 6;
}

.module.feature-cards.style-panel .cards > li:only-child {
	grid-column: 1 / -1;
}

.module.feature-cards.style-panel .card {
	height: 100%;
}

.module.feature-cards.style-panel .card.sage {
	background: var(--tea-green-pale);
}

.module.feature-cards.style-panel .card.peach {
	/* `--apricot-pale`, matching the comp — this was `--tangerine`, two steps more saturated,
	   which is what made the card read as a loud orange next to IBT's own. The comp's fill
	   is #ffe7cc.

	   A colour slot, not a colour: the charcoal card beside it already resolves through
	   `--charcoal` and so already follows a programme. This one was the odd slot out. */
	background: var(--program-warm, var(--apricot-pale));
}

/** Charcoal — the dark half of a light/dark CTA pair **/

.module.feature-cards.style-panel .card.charcoal {
	--card-hover-color: var(--white-60);
	background: var(--charcoal);
	color: var(--white);
}

.module.feature-cards.style-panel .card.charcoal .meta > li {
	color: var(--white);
}

.module.feature-cards.style-panel .card.charcoal .meta > li + li {
	border-left-color: var(--white-25);
}

.module.feature-cards.style-panel .card.charcoal .watermark svg {
	color: var(--white);
	opacity: .08;
}

.module.feature-cards.style-panel .card.charcoal:is(:hover, :focus-within) .watermark svg {
	opacity: .13;
}

.module.feature-cards.style-panel .card .content {
	flex: 1;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-medium);
	position: relative;
}

.module.feature-cards.style-panel .card:is(:hover, :focus-within) .btn.secondary {
	gap: 12px;
}

.module.feature-cards.style-panel .card:is(:hover, :focus-within) .btn.secondary .arrow {
	background: var(--sun-light);
}

.module.feature-cards.style-panel .card .content > .btn {
	margin-top: auto;
}

.module.feature-cards.style-panel .meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.feature-cards.style-panel .meta > li {
	color: var(--charcoal);
}

.module.feature-cards.style-panel .meta > li + li {
	border-left: 2px solid var(--charcoal-25);
	padding-left: var(--text-spacing-xxsmall);
}

.module.feature-cards.style-panel .watermark {
	border-radius: inherit;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
}

/* Tucked into the bottom-right corner with about a quarter of the mark masked off the edge: two
   thirds of the card's width, starting just past half way, which puts the hub about 85% across.

   Sized off the card's width rather than its height. Off the height, the mark was a different
   size on every card — too small and too far left on a wide one, and on the tall narrow cards the
   pair becomes at tablet it grew past the card entirely and showed as a single ray. Off the width
   it is the same share of every card, so it sits the same way in all of them. */
.module.feature-cards.style-panel .watermark svg {
	aspect-ratio: 990 / 434;
	bottom: 0;
	color: var(--charcoal);
	height: auto;
	left: 52%;
	max-width: none;
	opacity: .05;
	position: absolute;
	scale: -1 1;
	transition: opacity var(--motion) var(--ease-out);
	width: 66%;
}

.module.feature-cards.style-panel .card:is(:hover, :focus-within) .watermark svg {
	opacity: .09;
}

.module.feature-cards.style-panel .fine-print {
	grid-column: 1 / -1;
	margin-top: var(--text-spacing-xlarge);
	text-align: center;
}

.module.feature-cards.style-panel .fine-print > * {
	margin-block: 0;
}

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

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

	.module.feature-cards.style-panel .intro {
		grid-column: 1 / -1;
	}

}

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

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

	.module.feature-cards.style-panel .cards {
		gap: var(--text-spacing-medium);
	}

	/* A third larger on the narrower cards, where two thirds of the width was reading as a stamp in
	   the corner rather than a mark. Grown about its hub rather than its edge: the left edge comes
	   back so the hub stays 85% across and the base stays on the card's foot, which is the part of
	   the placement that was already right. A little more of it goes off the edge as a result. */
	.module.feature-cards.style-panel .watermark svg {
		left: 42%;
		width: 86%;
	}

}

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

/* Side by side until the phone. Two colour panels a tablet's half each are still two panels to
   compare; stacked a rung early they read as one long card with a colour change halfway down. */
@media only screen and (max-width: calc(650rem/16)) {

	.module.feature-cards.style-panel .cards {
		gap: 20px;
	}

	/* The card's copy is written as separate lines — a phone number under an address under a name —
	   and run together they read as one block of small type. */
	.module.feature-cards.style-panel .card .content-styles > * + * {
		margin-top: var(--text-spacing-xxsmall);
	}


	.module.feature-cards.style-panel .cards > li {
		grid-column: 1 / -1;
	}

	.module.feature-cards.style-panel .card .content {
		padding: var(--text-spacing-small);
	}

}

/* The card's pill, per the comp. The global `.pill` is `--tea-green` on `--charcoal`, which is
   right elsewhere but not here: on the sage card the comp fills it `--fern` and reverses the
   text, and on the peach card it is an outline rather than a fill — Res pill #637a36 on
   white, Comm pill stroked #3d443e. */

.module.feature-cards.style-panel .card.sage .pill {
	background: var(--fern);
	color: var(--white);
}

.module.feature-cards.style-panel .card.peach .pill {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--charcoal);
	color: var(--charcoal);
}