/**
 * Media & Accordions style: Photo + Accordions
 *
 * A photo on five columns that breaks 42px past the container and pins while the seven
 * columns of accordions scroll past it. Nothing here restyles a row beyond its padding, its
 * optional number and its list markers — the list is the global .accordions at its Small
 * size. The Full-Width Rows style is in media-accordions/rows.css.
 */

/* Clipped at the section, because half of a 110px mark centred on the crop's corner hangs outside
   it — and wherever the crop is wide enough, that reaches past the screen and the document grows
   to fit it. A page that scrolls sideways is a worse bargain than a few pixels of a mark nobody
   can see. Not a rung's problem: it happens at any width where the sums land that way, which on
   the partners page is the tablet range and again around 1200-1400.

   `clip` rather than `hidden`, which would make a scroll container and strand anything sticky. */
.module.media-accordions.style-default {
	overflow-x: clip;
}

.module.media-accordions.style-default .media {
	align-self: start;
	aspect-ratio: 517 / 389.378;
	grid-row: 1;
	overflow: visible;
	position: sticky;
	top: calc(var(--text-spacing-xsmall) + var(--sticky-nav-height) + var(--text-spacing-small));
}

.module.media-accordions.style-default .media img {
	border-radius: 10px;
}

.module.media-accordions.style-default .sunray {
	color: var(--pollen);
	pointer-events: none;
	position: absolute;
	top: -55px;
	width: 110px;
	z-index: 1;
}

.module.media-accordions.style-default .sunray svg {
	display: block;
	height: auto;
	max-width: none;
	width: 100%;
}

.module.media-accordions.style-default .content {
	grid-row: 1;
	padding-top: var(--module-spacing-medium);
}

.module.media-accordions.style-default .content > .eyebrow {
	margin: 0 0 var(--text-spacing-small);
}

.module.media-accordions.style-default .content > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--text-spacing-xsmall);
}

.module.media-accordions.style-default .content > .intro {
	margin: 0 0 var(--text-spacing-xsmall);
}

.module.media-accordions.style-default .content > .intro > :first-child {
	margin-top: 0;
}

.module.media-accordions.style-default .content > .intro > :last-child {
	margin-bottom: 0;
}

.module.media-accordions.style-default .accordion {
	--accordion-toggle: 44px;
	padding: var(--text-spacing-small) 0;
}

.module.media-accordions.style-default .accordion.active > :nth-child(n + 2) {
	padding-bottom: var(--text-spacing-xsmall);
}

.module.media-accordions.style-default .toggle svg {
	height: 8px;
	width: 16px;
}

.module.media-accordions.style-default .accordion .btn {
	margin-top: var(--text-spacing-xsmall);
}

.module.media-accordions.style-default .accordion .content-styles > :has(+ .btn) {
	margin-bottom: 0;
}

/** Numbered rows **/

.module.media-accordions.style-default .accordion .text {
	align-items: center;
	display: flex;
	gap: 12px;
}

.module.media-accordions.style-default .accordion .pill {
	background: var(--pollen);
	flex-shrink: 0;
	min-width: 24px;
	padding-inline: var(--text-spacing-xxsmall);
}

.module.media-accordions.style-default .accordions.numbered .accordion > :nth-child(n + 2) {
	padding-left: 36px;
}

/** Checked list — the panel's answer to "what does this include?" **/

.module.media-accordions.style-default .accordion .content-styles ul:not([class]) {
	margin-top: var(--text-spacing-xsmall);
	padding-left: 28px;
}

.module.media-accordions.style-default .accordion .content-styles ul:not([class]) > li::before {
	background: var(--ray) url('../../svgs/check.svg') no-repeat center / 10px auto;
	border-radius: 50%;
	height: 20px;
	left: -28px;
	top: calc(0.5lh - 10px);
	width: 20px;
}

/** Layout: image left (default) **/

.module.media-accordions.style-default.image-left .media {
	grid-column: 1 / span 5;
	margin-left: var(--container-breakout);
}

.module.media-accordions.style-default.image-left .content {
	grid-column: 6 / span 7;
	padding-left: var(--gap);
}

.module.media-accordions.style-default.image-left .sunray {
	left: -55px;
}

/** Layout: image right **/

.module.media-accordions.style-default.image-right .media {
	grid-column: 8 / span 5;
	margin-right: var(--container-breakout);
}

.module.media-accordions.style-default.image-right .content {
	grid-column: 1 / span 7;
	padding-right: var(--gap);
}

.module.media-accordions.style-default.image-right .sunray {
	right: -55px;
}

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

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

	.module.media-accordions.style-default.image-left .sunray {
		left: 0;
	}

	.module.media-accordions.style-default.image-right .sunray {
		right: 0;
	}

}

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

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

	/* Back onto the corner it marks: half the mark's 110 either side of it, where 1200 pushed the
	   whole thing inside the crop to keep it off the screen edge.
 */
	.module.media-accordions.style-default.image-left .sunray {
		left: -55px;
	}

	.module.media-accordions.style-default.image-right .sunray {
		right: -55px;
	}

	.module.media-accordions.style-default:is(.image-left, .image-right) .media {
		grid-column: 1 / -1;
		grid-row: auto;
		position: relative;
		top: auto;
	}

	.module.media-accordions.style-default:is(.image-left, .image-right) .content {
		grid-column: 1 / -1;
		grid-row: auto;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
	}

}

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

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

	/* The first row's own top padding is the step under the heading here; a margin on top of it
	   read as a gap in the run. A deck between them is copy rather than a row, and takes its own. */
	.module.media-accordions.style-default .content > :is(h1, h2, h3, h4, h5, h6) {
		margin-bottom: 0;
	}

	.module.media-accordions.style-default .content > :is(h1, h2, h3, h4, h5, h6):has(+ .intro) {
		margin-bottom: var(--text-spacing-xxsmall);
	}

}