/**
 * Media & Accordions style: Full-Width Rows
 *
 * One column of full-width disclosure rows; the open row's panel carries a full-bleed strip
 * of photographs on the global marquee. The row, the ring and the strip are all globals —
 * this file lays the row out on the grid, holds the open ring's state, and gets the strip
 * past the container without letting the collapsed panel leak.
 */

.module.media-accordions.style-rows {
	overflow-x: clip;
}

.module.media-accordions.style-rows .eyebrow {
	color: var(--storm);
	margin: 0 0 var(--text-spacing-xsmall);
}

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

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

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

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

.module.media-accordions.style-rows .accordion {
	padding: var(--text-spacing-xlarge) 0;
}

/* The row is an <a> in the linked variant, so it arrives in the browser's link blue: the whole
   row is the control and it takes the page's own colour, as the comp draws it. */
.module.media-accordions.style-rows .accordion > :first-child > :is(button, a) {
	align-items: end;
	color: var(--charcoal);
	display: grid;
	gap: var(--gap);
	grid-template-columns: var(--grid);
}

/* A linked row opens on hover and on the focus its own link takes, rather than on a click the
   click is spending on going somewhere. */
.module.media-accordions.style-rows .accordion.is-link {
	position: relative;
}

.module.media-accordions.style-rows .accordion.is-link:is(:hover, :focus-within) {
	grid-template-rows: auto 1fr;
}

.module.media-accordions.style-rows .accordion.is-link > :first-child > a::after {
	content: '';
	inset: 0 var(--viewport-edge);
	position: absolute;
	z-index: 1;
}

.module.media-accordions.style-rows .accordion.is-link:is(:hover, :focus-within) > :nth-child(n + 2) {
	opacity: 1;
	padding-bottom: var(--text-spacing-xxsmall);
	padding-top: var(--text-spacing-xlarge);
	visibility: visible;
}

.module.media-accordions.style-rows .accordion .title {
	grid-column: 1 / span 6;
}

.module.media-accordions.style-rows .accordion .summary {
	grid-column: 7 / span 5;
	margin-bottom: var(--text-spacing-xxsmall);
}

.module.media-accordions.style-rows .accordion .toggle {
	grid-column: 12;
	justify-self: end;
	margin-bottom: var(--text-spacing-xxsmall);
}

.module.media-accordions.style-rows .accordion .toggle .chevron {
	translate: 2px 0;
}

.module.media-accordions.style-rows .accordion .toggle .chevron svg {
	rotate: 90deg;
}

.module.media-accordions.style-rows .accordion .toggle::after {
	background: currentColor;
	bottom: auto;
	content: '';
	height: 2px;
	left: 50%;
	position: absolute;
	scale: 0 1;
	top: 50%;
	transform-origin: right center;
	transition: scale var(--motion) var(--ease-out);
	translate: -50% -50%;
	width: 26px;
}

.module.media-accordions.style-rows .accordion:is(.active, :hover, :has(:focus-visible)) .toggle {
	background: var(--sun);
	opacity: 1;
}

.module.media-accordions.style-rows .accordion:is(.active, :hover, :has(:focus-visible)) .toggle .chevron {
	translate: 9px 0;
}

.module.media-accordions.style-rows .accordion:is(.active, :hover, :has(:focus-visible)) .toggle::after {
	scale: 1 1;
}

.module.media-accordions.style-rows .accordion > :nth-child(n + 2) {
	overflow: visible clip;
	padding-right: 0;
}

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

.module.media-accordions.style-rows .marquee {
	margin: 0 var(--viewport-edge);
	width: 100vw;
}

.module.media-accordions.style-rows .marquee .media {
	aspect-ratio: 400 / 300;
	border-radius: 10px;
	flex: 0 0 auto;
	height: 300px;
}

.module.media-accordions.style-rows .pause {
	bottom: var(--text-spacing-small);
	display: none;
	opacity: 0;
	position: absolute;
	right: var(--text-spacing-small);
	transition: opacity var(--motion) var(--ease-out);
	z-index: 2;
}

.module.media-accordions.style-rows .marquee.scrolling .pause {
	display: grid;
	place-items: center;
}

.module.media-accordions.style-rows .pause:is(:hover, :focus-visible) {
	opacity: 1;
}

.module.media-accordions.style-rows .pause .icon-play {
	display: none;
}

.module.media-accordions.style-rows .marquee.paused .pause .icon-pause {
	display: none;
}

.module.media-accordions.style-rows .marquee.paused .pause .icon-play {
	display: block;
}

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

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

	.module.media-accordions.style-rows .accordion {
		padding: var(--text-spacing-medium) 0;
	}

	.module.media-accordions.style-rows .accordion > :first-child > :is(button, a) {
		gap: var(--text-spacing-small);
		grid-template-columns: 1fr auto;
	}

	.module.media-accordions.style-rows .accordion .title {
		grid-column: 1 / -1;
	}

	.module.media-accordions.style-rows .accordion .summary {
		grid-column: 1;
		margin-bottom: 0;
	}

	.module.media-accordions.style-rows .accordion .toggle {
		grid-column: 2;
		margin-bottom: 0;
	}

	.module.media-accordions.style-rows .marquee {
		--marquee-gap: 64px;
	}

	.module.media-accordions.style-rows .marquee .media {
		height: 240px;
	}

}

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

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

	.module.media-accordions.style-rows .accordion {
		padding-block: var(--text-spacing-small);
	}

	.module.media-accordions.style-rows .accordion > :first-child > :is(button, a) {
		gap: var(--text-spacing-xsmall);
	}

	.module.media-accordions.style-rows .eyebrow {
		margin: 0;
	}

	.module.media-accordions.style-rows .marquee {
		--marquee-gap: 56px;
	}

	.module.media-accordions.style-rows .marquee .media {
		height: 200px;
	}

}