/**
 * In Our Words
 *
 * A curated stack: featured story, a three-up story grid, press releases beside the media
 * contact, press mentions, then events. Every card is a global; this file only places them.
 *
 * The page carried the name The Current until the blog took it; the archive at /the-current/
 * is that blog, and this is the section page above it.
 */

.in-our-words {
	--carousel-breakout: 58px;
	--carousel-clip: max(0px, calc(var(--viewport-edge) * -1 - var(--carousel-breakout)));
	--carousel-rest-width: calc(100vw - var(--carousel-clip) * 2);
	overflow-x: clip;
}

/*** Page title ***/

.in-our-words .page-title {
	align-items: start;
	display: grid;
	gap: var(--text-spacing-large);
	grid-template-columns: 1fr 1fr;
	margin: var(--module-spacing-large) 0 var(--module-spacing-medium);
}

.in-our-words .page-title > * {
	margin: 0;
}

.in-our-words .page-title .intro {
	padding: var(--text-spacing-xsmall) 0 0 var(--text-spacing-xsmall);
}

.in-our-words .page-title .intro > :first-child {
	margin-top: 0;
}

.in-our-words .page-title .intro > :last-child {
	margin-bottom: 0;
}

/*** Aqua wash ***/

/*** Featured carousel ***/

.in-our-words .jazzy-carousel-wrapper,
.in-our-words .featured-carousel:is(.jazzy-fade, .jazzy-static) {
	margin-bottom: var(--module-spacing-medium);
	margin-left: var(--viewport-edge);
	margin-right: var(--viewport-edge);
	position: relative;
}

.in-our-words .container:has(+ .releases) :is(.jazzy-carousel-wrapper, .featured-carousel:is(.jazzy-fade, .jazzy-static)) {
	margin-bottom: 0;
}

.in-our-words .jazzy-arrows {
	bottom: var(--text-spacing-medium);
	gap: 12px;
	position: absolute;
	right: calc(var(--carousel-clip) + var(--text-spacing-medium));
	z-index: 2;
}

.in-our-words .container > .jazzy-arrows {
	right: calc(var(--carousel-clip) + var(--text-spacing-medium) - var(--container-outer-margin));
}

.in-our-words .jazzy-arrows button {
	align-items: center;
	background: none;
	border: 2px solid var(--white);
	border-radius: 40px;
	color: var(--white);
	display: flex;
	height: 48px;
	justify-content: center;
	width: 64px;
}

.in-our-words .jazzy-arrows button:is(:hover, :focus-visible) {
	background: var(--white);
	color: var(--charcoal);
}

.in-our-words .jazzy-arrows button svg {
	display: none;
}

.in-our-words .jazzy-arrows button::before {
	background: currentColor;
	content: '';
	height: 13px;
	-webkit-mask-image: url("../svgs/arrow.svg");
	mask-image: url("../svgs/arrow.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 15px;
}

.in-our-words .jazzy-arrows .jazzy-prev::before {
	rotate: 180deg;
}

.in-our-words .featured {
	clip-path: inset(0 calc(var(--carousel-clip) * (1 - var(--jazzy-progress, 0))));
	color: var(--white);
	display: flex;
	flex-direction: column;
	isolation: isolate;
	justify-content: flex-end;
	min-height: calc(var(--carousel-rest-width) * 740 / 1312);
	overflow: hidden;
	padding-block: var(--module-spacing-small);
	padding-inline: calc(var(--viewport-edge) * -1 + var(--text-spacing-medium));
	position: relative;
}

.in-our-words .featured .media {
	aspect-ratio: auto;
	background: var(--charcoal);
	inset: 0;
	position: absolute;
	z-index: -1;
}

.in-our-words .featured .media::after {
	background: linear-gradient(to left, transparent, var(--overlay-dark)), var(--overlay-medium);
	content: '';
	inset: 0;
	position: absolute;
}

.in-our-words .featured .content {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	max-width: 752px;
}

.in-our-words .featured .content > * {
	margin: 0;
}

.in-our-words .featured .meta-row {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xsmall);
}

.in-our-words .featured .location {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
}

.in-our-words .featured .location .meta {
	color: var(--white);
	font-size: calc(14rem / 16);
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: calc(20 / 14);
}

.in-our-words .featured .location .icon {
	align-items: center;
	background: rgb(255 255 255 / 15%);
	border-radius: 30px;
	color: var(--white);
	display: flex;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.in-our-words .featured .location .icon svg {
	height: 12px;
	width: auto;
}

.in-our-words .featured .btn {
	align-self: flex-start;
}

.in-our-words .featured:hover .btn.primary,
.in-our-words .featured:focus-within .btn.primary {
	background: var(--sun-light);
	gap: 12px;
}

/*** Sections ***/

.in-our-words .releases,
.in-our-words .mentions {
	padding: var(--module-spacing-large) 0;
}

.in-our-words .releases {
	padding-top: var(--module-spacing-medium);
}

.in-our-words .section-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-small);
	justify-content: space-between;
	margin-bottom: var(--text-spacing-xxlarge);
}

.in-our-words .section-head > * {
	margin: 0;
}

/*** Stories ***/

.in-our-words .stories .cards {
	display: grid;
	gap: var(--text-spacing-xxlarge);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.in-our-words .stories .cards > li {
	display: flex;
}

.in-our-words .stories .cards .card {
	width: 100%;
}

.in-our-words .stories .btn {
	display: flex;
	margin: var(--module-spacing-medium) auto 0;
	width: fit-content;
}

/*** Press releases ***/

.in-our-words .releases .section-body {
	display: grid;
	gap: var(--text-spacing-xxlarge);
	grid-template-columns: 849fr 291fr;
}

.in-our-words .rows {
	display: flex;
	flex-direction: column;
}

.in-our-words .mentions .rows .card + .card {
	border-top: 1px solid var(--charcoal-15);
	margin-top: var(--text-spacing-medium);
	padding-top: var(--text-spacing-medium);
}

.in-our-words .releases .rows {
	border-right: 1px solid var(--charcoal-25);
	gap: var(--text-spacing-xxlarge);
	padding-right: var(--module-spacing-small);
}

/*** Events ***/

.in-our-words .events {
	background: var(--charcoal);
	color: var(--white);
	isolation: isolate;
	margin-top: var(--module-spacing-large);
	padding: 100px 0 var(--module-spacing-large);
	position: relative;
	--focus-ring: var(--white); /* Dark band: charcoal on charcoal is 1:1 */
	--heading-color: currentColor;
}

.in-our-words .mentions + .events {
	margin-top: 0;
}

.in-our-words .events > .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
	z-index: -1;
}

.in-our-words .events > .media::after {
	background: rgb(0 0 0 / 80%);
	content: '';
	inset: 0;
	position: absolute;
}

.in-our-words .event-columns {
	align-items: start;
	display: grid;
	gap: var(--text-spacing-xlarge);
	grid-template-columns: 524fr 623fr;
}

.in-our-words .event-columns .main {
	border-right: 1px solid var(--white-25);
	padding-right: var(--text-spacing-xlarge);
}

.in-our-words .event-columns > .secondary {
	display: grid;
	gap: calc(var(--text-spacing-xlarge) * 2 + 1px);
	grid-template-columns: repeat(2, 1fr);
	position: relative;
}

.in-our-words .event-columns > .secondary::before {
	background: var(--white-25);
	bottom: 0;
	content: '';
	left: 50%;
	position: absolute;
	top: 0;
	width: 1px;
}

.in-our-words .events .card {
	--card-hover-color: var(--white);
}

.in-our-words .events .card.event.compact {
	background: none;
	border-radius: 0;
	color: inherit;
	gap: var(--text-spacing-small);
	overflow: visible;
}

.in-our-words .events .card.event.compact .media {
	aspect-ratio: 475 / 316;
	border-radius: 10px;
}

.in-our-words .events .card.event.compact:hover .media img {
	transform: none;
}

.in-our-words .events .card.event.compact .content {
	gap: var(--text-spacing-small);
	padding: 0;
}

.in-our-words .events .card.event.compact .btn {
	align-self: start;
	white-space: nowrap;
}

.in-our-words .events .card.event.compact .details {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	list-style: none;
	margin: 0;
	padding: 0;
}

.in-our-words .events .card.event.compact .details li {
	align-items: center;
	display: flex;
	gap: 12px;
}

.in-our-words .events .card.event.compact .details .values {
	align-items: center;
	display: flex;
}

.in-our-words .events .card.event.compact .details .values > * + *::before {
	background: var(--white-25);
	content: '';
	display: inline-block;
	height: 16px;
	margin-right: var(--text-spacing-xxsmall);
	vertical-align: -3px;
	width: 2px;
}

.in-our-words .events .main .card.event.compact .details {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--text-spacing-small);
}

.in-our-words .events .main .card.event.compact {
	gap: var(--text-spacing-large);
}

.in-our-words .events .main .card.event.compact .content {
	gap: var(--text-spacing-medium);
}

.in-our-words .events .main .card.event.compact .details + .text {
	margin-top: calc(var(--text-spacing-medium) * -1 + var(--text-spacing-xsmall));
}

.in-our-words .events .secondary .card.event.compact .media {
	aspect-ratio: 222 / 148;
}

.in-our-words .events .secondary .card.event.compact .text + .details {
	margin-top: calc(var(--text-spacing-medium) * -1 + var(--text-spacing-xsmall));
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

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

	.in-our-words .featured {
		padding-left: var(--container-outer-padding);
	}

}

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

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

	/* Stacked, the intro is the headline's second line rather than the column beside it. */
	.in-our-words .page-title {
		gap: var(--text-spacing-xsmall);
		grid-template-columns: minmax(0, 1fr);
	}

	/* On the button's own baseline: both sit on the card's bottom inset. */
	.in-our-words .jazzy-arrows {
		bottom: var(--module-spacing-small);
	}

	/* No hover once the story is most of the screen: a finger that lands on it to scroll the page
	   lights the button before anything has been chosen. Keyboard focus still answers. */
	.in-our-words .featured:hover:not(:focus-within) .btn.primary,
	.in-our-words .featured .btn.primary:hover:not(:focus-visible) {
		background: var(--sun);
		gap: var(--text-spacing-xxsmall);
	}

	.in-our-words .page-title .intro {
		padding: 0;
	}

	.in-our-words .stories .cards {
		gap: var(--text-spacing-medium);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.in-our-words .releases .section-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.in-our-words .releases .rows {
		border-right: none;
		padding-right: 0;
	}

	.in-our-words .events {
		padding: var(--module-spacing-medium) 0 var(--module-spacing-large);
	}

	.in-our-words .event-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.in-our-words .event-columns .main {
		border-right: 0;
		padding: 0 0 var(--text-spacing-xlarge);
	}

	/* The rules divided three columns. Stacked they divide a row from a pair, which the space
	   between them already says. */
	.in-our-words .event-columns > .secondary {
		gap: var(--text-spacing-xlarge);
	}

	.in-our-words .event-columns > .secondary::before {
		content: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-950 - Tablet Sizes Only */
/***************************************************************************************************************************************************************************************/

/* The contact takes the listing's whole width once the releases stop sitting beside it, and a
   single column of details down its left leaves the rest empty — the same trade the press release
   archive makes at the rung where its rail drops. The person and the resources sit side by side,
   the label across both, and the phone stacks them again. */
@media only screen and (min-width: calc(651rem/16)) and (max-width: calc(950rem/16)) {

	.in-our-words .media-contact {
		column-gap: var(--text-spacing-large);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.in-our-words .media-contact > .eyebrow {
		grid-column: 1 / -1;
	}

	.in-our-words .media-contact > .person {
		display: contents;
	}

	.in-our-words .media-contact > .person > :not(.info) {
		grid-column: 1 / -1;
	}

	.in-our-words .media-contact > * + .person > :first-child {
		margin-top: var(--text-spacing-xsmall);
	}

	.in-our-words .media-contact > .person > .info {
		grid-column: 1;
	}

	.in-our-words .media-contact > .info {
		grid-column: 2;
		margin-top: 0;
	}

}

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

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

	.in-our-words .page-title {
		gap: var(--text-spacing-xxsmall);
	}

	/* Under the photograph rather than on it: the crop runs to both screen edges here and a pager
	   inside it sits over the story's own copy. Out in the flow it starts on the container's line,
	   and the charcoal cut is the one that reads on the page's own ground. */
	.in-our-words .jazzy-arrows {
		bottom: auto;
		justify-content: flex-start;
		margin-bottom: var(--module-spacing-large);
		margin-top: var(--text-spacing-xsmall);
		position: static;
		right: auto;
		top: auto;
	}

	/* The step under the crop is the pager's own now — the band's was measured for a pager sitting
	   inside the photograph. */
	.in-our-words .jazzy-carousel-wrapper,
	.in-our-words .featured-carousel:is(.jazzy-fade, .jazzy-static) {
		margin-bottom: 0;
	}

	.in-our-words .jazzy-arrows button {
		border-color: var(--charcoal);
		color: var(--charcoal);
	}

	.in-our-words .jazzy-arrows button:is(:hover, :focus-visible) {
		background: var(--charcoal);
		color: var(--white);
	}

	.in-our-words .stories .btn {
		margin-top: var(--text-spacing-large);
	}

	/* Two releases, not three: the run is a taste of the feed and the link under it is the rest. */
	.in-our-words .releases .rows > *:nth-child(n + 3) {
		display: none;
	}

	/* Short enough to share a line: "Events" and the link out of it hold the row they take above. */
	.in-our-words .events .section-head {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.in-our-words .section-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.in-our-words .stories .cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.in-our-words .event-columns > .secondary {
		gap: var(--text-spacing-xlarge);
		grid-template-columns: minmax(0, 1fr);
	}

	.in-our-words .event-columns > .secondary::before {
		display: none;
	}

	.in-our-words .featured .meta-row {
		flex-wrap: wrap;
	}

}