/**
 * Inline shortcodes (tiles) — the blocks editors drop into post content.
 *
 * Six types share a `.shortcode` root and a type modifier: figure, link
 * (.post / .event / .pdf), quote, embed.
 *
 * **A shortcode carries its space above it and none below.** They sit between blocks that bring
 * their own top margin, and adjacent margins collapse — so one that also pushed down would leave
 * the larger of the two on both sides and read as double-spaced. The space under a shortcode is
 * the next block's to set.
 *
 * NOTE: the grays here are carried over verbatim from the wireframe build these
 * tiles were first styled in — they have never had a design pass. Sizes and
 * layout are right; the palette is placeholder and must be replaced before launch.
 */

/*** Figure — image, video, or carousel ***/

.shortcode.figure.align-left {
	text-align: left;
}

.shortcode.figure.align-center {
	text-align: center;
}

.shortcode.figure.align-right {
	text-align: right;
}

.shortcode.figure.align-center .caption {
	justify-content: center;
}

.shortcode.figure.align-right .caption {
	justify-content: flex-end;
}

.shortcode.figure .frame {
	display: inline-block;
	overflow: hidden;
	position: relative;
	vertical-align: top;
	width: 100%;
}

.shortcode.figure .frame.large {
	width: 80%;
}

.shortcode.figure .frame.medium {
	width: 60%;
}

.shortcode.figure .frame.thumbnail {
	width: 40%;
}

.shortcode.figure .frame img {
	display: block;
	height: auto;
	width: 100%;
}

.shortcode.figure .placeholder {
	align-items: center;
	background: #e0e0e0;
	color: #999;
	display: flex;
	font-size: calc(14rem / 16);
	height: 300px;
	justify-content: center;
}

/** Video — the frame doubles as the lightbox trigger **/

.shortcode.figure .frame.video {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.shortcode.figure .play {
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: calc(24rem / 16);
	height: 64px;
	justify-content: center;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: background var(--motion-fast) var(--ease-out);
	width: 64px;
}

.shortcode.figure .frame.video:hover .play {
	background: rgba(0, 0, 0, 0.8);
}

.shortcode.figure .lightbox {
	max-width: 90vw;
}

.shortcode.figure .lightbox iframe,
.shortcode.figure .lightbox video {
	display: block;
	height: auto;
	max-height: 80vh;
	width: 100%;
}

/** Carousel — Jazzy drives it; these rules only place the arrows below the frame **/

.shortcode.figure .image-carousel {
	margin-block: var(--text-spacing-medium) 0;
	margin-inline: 0;
	overflow: hidden;
	padding: 0 0 64px;
	position: relative;
}

.shortcode.figure .image-carousel .jazzy-carousel {
	gap: 0;
}

.shortcode.figure .image-carousel .jazzy-arrows > button {
	background: none;
	border: 1px solid #ccc;
	border-radius: 50%;
	bottom: 0;
	color: #333;
	cursor: pointer;
	font-size: calc(14rem / 16);
	height: 40px;
	left: 0;
	position: absolute;
	top: auto;
	transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
	width: 40px;
}

.shortcode.figure .image-carousel .jazzy-arrows > button:hover {
	border-color: #333;
	color: #000;
}

.shortcode.figure .image-carousel .jazzy-arrows > button.jazzy-next {
	left: 52px;
}

.shortcode.figure .image-carousel .jazzy-arrows > button[disabled] {
	color: #ccc;
	cursor: default;
	opacity: 0.5;
}

.shortcode.figure .image-carousel .slide {
	transition: opacity var(--motion) var(--ease-out);
}

.shortcode.figure .image-carousel .slide:not(.is-active) {
	opacity: 0;
}

.shortcode.figure .image-carousel .image-container img {
	display: block;
	height: auto;
	max-width: 100%;
}

/*** Link — the three cards that link out (post, event, pdf) ***/

.shortcode.link {
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 8px;
	color: #333;
	display: flex;
	margin-block: var(--text-spacing-medium) 0;
	margin-inline: 0;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--motion-fast) var(--ease-out);
}

.shortcode.link:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shortcode.link .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	min-width: 0;
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
}

.shortcode.link:not(.pdf) .title {
	font-size: calc(16rem / 16);
	font-weight: 600;
}

.shortcode.link .arrow {
	align-items: center;
	border: 2px solid #333;
	border-radius: 6px;
	display: flex;
	flex-shrink: 0;
	font-size: calc(18rem / 16);
	height: 36px;
	justify-content: center;
	margin-right: var(--text-spacing-small);
	width: 36px;
}

/** Featured blog post **/

.shortcode.link.post .image {
	flex-shrink: 0;
	height: 120px;
	overflow: hidden;
	position: relative;
	width: 180px;
}

.shortcode.link.post .image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.shortcode.link.post .placeholder {
	align-items: center;
	background: #e0e0e0;
	color: #999;
	display: flex;
	font-size: calc(13rem / 16);
	height: 100%;
	justify-content: center;
	width: 100%;
}

.shortcode.link .tag {
	background: #333;
	border-radius: 3px;
	color: #fff;
	font-size: calc(10rem / 16);
	left: 8px;
	padding: 2px 8px;
	position: absolute;
	top: 8px;
}

/** Featured event **/

.shortcode.link .date {
	align-items: center;
	border-right: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: center;
	padding: var(--text-spacing-xsmall);
	width: 90px;
}

.shortcode.link .month {
	color: #999;
	font-size: calc(11rem / 16);
	font-weight: 700;
}

.shortcode.link .day {
	font-size: calc(32rem / 16);
	font-weight: 700;
	line-height: 1.1;
}

.shortcode.link .year {
	color: #999;
	font-size: calc(12rem / 16);
}

.shortcode.link .location {
	background: #f0f0f0;
	border-radius: 3px;
	display: inline-block;
	font-size: calc(10rem / 16);
	padding: 2px 8px;
	width: fit-content;
}

/** PDF download **/

.shortcode.link.pdf {
	--pdf-disc: #a9cfca;
	background: var(--teal-pale);
	border: 0;
	border-radius: 10px;
	color: var(--charcoal);
	gap: var(--text-spacing-small);
	padding: var(--text-spacing-small);
	transition: background-color var(--motion) var(--ease-out);
}

/* The card answers by lightening its own fill rather than casting a shadow, and the download
   takes the hover every other filled button in the theme takes — both mixed off tokens a
   programme re-points, so the pair follows whichever palette the page is on. */
.shortcode.link.pdf:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--white) 40%, var(--teal-pale));
	box-shadow: none;
}

.shortcode.link.pdf:is(:hover, :focus-visible) > .download {
	background: var(--sun-light);
}

.shortcode.link.pdf > .icon {
	align-items: center;
	background: var(--pdf-disc);
	border-radius: 100%;
	color: var(--charcoal);
	display: flex;
	flex: none;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.shortcode.link.pdf > .icon > svg {
	height: 24px;
	width: 24px;
}

.shortcode.link.pdf .body {
	gap: var(--text-spacing-xxsmall);
	padding: 0;
}

.shortcode.link.pdf .title,
.shortcode.link.pdf .detail {
	display: block;
}

.shortcode.link.pdf .detail {
	color: var(--charcoal);
}

.shortcode.link.pdf .download {
	align-items: center;
	background: var(--sun);
	border-radius: 40px;
	color: var(--charcoal);
	transition: background-color var(--motion) var(--ease-out);
	display: flex;
	flex: none;
	height: 48px;
	justify-content: center;
	margin: 0;
	width: 64px;
}

.shortcode.link.pdf > .download > svg {
	display: block;
	height: 24px;
	width: 24px;
}

/*** Quote ***/

.shortcode.quote {
	--quote-panel: var(--aqua);
	--quote-badge: var(--dark-teal);
	--mark-size: 48px;
	--mark-overhang: calc(var(--mark-size) / 2);

	background: var(--quote-panel);
	border-radius: 10px;
	/* The mark hangs half out of the panel, so the shortcode's 32 is measured to the top of the
	   disc rather than to the fill under it — the overhang is added back on. */
	margin-block: calc(var(--text-spacing-medium) + var(--mark-overhang)) 0;
	margin-inline: 0;
	/* The top clears the mark: the disc overhangs by half its 48, so 40 leaves 16 between its
	   foot and the first line. */
	padding: var(--text-spacing-large) var(--text-spacing-large) var(--text-spacing-small);
	position: relative;
}

.shortcode.quote.green {
	--quote-panel: var(--tea-green);
	--quote-badge: var(--fern);
}

.shortcode.quote.pink {
	--quote-panel: var(--petal);
	--quote-badge: var(--blush);
}

/* The programme's cut of the mark: a pale disc with the glyph set on it, the way the
   testimonial panel draws it. */
.shortcode.quote.apricot {
	--quote-panel: var(--apricot-pale);
	--quote-badge: var(--quote-disc);
	--quote-glyph: var(--quote-mark);
}

.shortcode.quote .watermark {
	border-bottom-right-radius: 10px;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	width: 182px;
}

/* The body colour at a whisper rather than the panel's own — it is a texture under the words,
   not a second mark, so it reads the same against every fill the quote offers. */
.shortcode.quote .watermark svg {
	color: var(--charcoal);
	display: block;
	height: auto;
	max-width: none;
	opacity: .05;
	width: 300px;
}

.shortcode.quote .mark {
	align-items: center;
	background: var(--quote-badge);
	border-radius: 100%;
	color: var(--quote-glyph, var(--white));
	display: flex;
	height: var(--mark-size);
	justify-content: center;
	left: var(--text-spacing-small);
	position: absolute;
	top: calc(var(--mark-overhang) * -1);
	width: var(--mark-size);
}

.shortcode.quote .mark svg {
	display: block;
	height: 14px;
	width: 18px;
}

/* Positioned, so the words land above the watermark: it is absolute and they are not, which
   paints it over them however early it sits in the source. */
.shortcode.quote :is(.text, footer) {
	position: relative;
}

.shortcode.quote .text {
	color: var(--charcoal);
	font-size: calc(18rem / 16);
	font-weight: 600;
	letter-spacing: -.1px;
	line-height: calc(30 / 18);
	margin: 0;
}

.shortcode.quote footer {
	align-items: flex-end;
	display: flex;
	gap: var(--text-spacing-medium);
	justify-content: space-between;
	margin-top: var(--text-spacing-xxsmall);
}

.shortcode.quote .cite {
	color: var(--charcoal);
	display: flex;
	flex-direction: column;
}

.shortcode.quote .name {
	font-size: calc(15rem / 16);
	font-weight: 600;
	letter-spacing: -.1px;
	line-height: calc(26 / 15);
}

.shortcode.quote .attribution {
	font-size: calc(13rem / 16);
	font-weight: 600;
	line-height: calc(22 / 13);
}

.shortcode.quote .photo {
	background: var(--sun);
	border-radius: 50%;
	flex-shrink: 0;
	height: 80px;
	position: relative;
	width: 80px;
}

.shortcode.quote .photo img {
	border-radius: 50%;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*** Author ***/

.shortcode.author {
	background: var(--linen-50);
	border-radius: 10px;
	display: flex;
	gap: var(--text-spacing-medium);
	margin-block: var(--text-spacing-xlarge) 0;
	padding: var(--text-spacing-medium);
}

.shortcode.author .photo {
	border-radius: 50%;
	flex-shrink: 0;
	height: 96px;
	overflow: hidden;
	width: 96px;
}

.shortcode.author .photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.shortcode.author .text > * {
	margin: 0;
}

.shortcode.author .eyebrow {
	color: var(--text-gray);
	margin-bottom: var(--text-spacing-xxsmall);
}

.shortcode.author .role {
	color: var(--text-gray);
}

.shortcode.author .bio {
	margin-top: 4px;
}

.shortcode.author .bio p {
	margin: 0;
}

.shortcode.author .bio p + p {
	margin-top: var(--text-spacing-xsmall);
}

/*** Social embed ***/

.shortcode.embed {
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	margin-block: var(--text-spacing-medium) 0;
	margin-inline: 0;
	overflow: hidden;
}

.shortcode.embed .label {
	background: #f8f8f8;
	border-bottom: 1px solid #e5e5e5;
	color: #888;
	display: block;
	font-size: calc(11rem / 16);
	font-weight: 600;
	letter-spacing: 1px;
	padding: 8px var(--text-spacing-small);
	text-transform: uppercase;
}

.shortcode.embed .frame {
	padding: var(--text-spacing-small);
}

.shortcode.embed .frame iframe {
	max-width: 100%;
}

.shortcode.embed .fallback a {
	color: #555;
	font-weight: 500;
}

/*** Notice — two styles ***/

.shortcode.notice {
	background: var(--tea-green);
	color: var(--charcoal);
	display: flex;
	gap: var(--text-spacing-xxsmall);
	margin-block: var(--text-spacing-medium) 0;
	margin-inline: 0;
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
}

.shortcode.notice p {
	margin-block: 0;
}

/** Style: callout **/

.shortcode.notice.callout {
	align-items: flex-start;
	border-radius: 10px;
	flex-direction: column;
	text-align: left;
}

/** Style: banner **/

.shortcode.notice.banner {
	align-items: center;
	border-radius: 100px;
	justify-content: center;
	padding-block: 15px;
	text-align: center;
}

.shortcode.notice.banner::before {
	background: currentColor;
	content: '';
	flex-shrink: 0;
	height: 24px;
	-webkit-mask: url('../svgs/circle-info.svg') no-repeat center / contain;
	mask: url('../svgs/circle-info.svg') no-repeat center / contain;
	width: 18px;
}

/** Style: panel **/

/* A white card with the same info mark the banner uses, standing beside the copy rather than
   over it. The lead line is the comp's 15/26 semibold and the rest its 13/22, which is what
   the .xsmall-text wrapper already gives — white, 10px, icon at 24/25. */
.shortcode.notice.panel {
	align-items: flex-start;
	background: var(--white);
	border-radius: 10px;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-small);
}

.shortcode.notice.panel::before {
	background: currentColor;
	content: '';
	flex-shrink: 0;
	height: 24px;
	-webkit-mask: url('../svgs/circle-info.svg') no-repeat center / contain;
	mask: url('../svgs/circle-info.svg') no-repeat center / contain;
	width: 18px;
}

.shortcode.notice.panel .copy > p:first-child {
	font-size: calc(15rem / 16);
	font-weight: 600;
	letter-spacing: -0.1px;
	line-height: calc(26 / 15);
}

.shortcode.notice.panel .copy > p + p {
	margin-top: 2px;
}

/*** Contact Card — one team's name, phone and email in a panel ***/

.shortcode.contact-card {
	background: var(--teal-pale);
	border-radius: 10px;
	margin-block: var(--text-spacing-medium) 0;
	padding: var(--text-spacing-small) var(--text-spacing-medium);
}

.shortcode.contact-card > * {
	margin: 0;
}

.shortcode.contact-card .eyebrow {
	color: var(--text-gray);
	margin-bottom: var(--text-spacing-xxsmall);
}

.shortcode.contact-card .name,
.shortcode.contact-card .reach {
	display: block;
}

.shortcode.contact-card .reach {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
}

/* An address is one word, and as a flex item it is allowed to be as wide as that word — 35
   characters of it ran 50px past a 320px screen. `max-content` as the basis so the row wraps
   it whole onto its own line first, and it only breaks inside once that line cannot hold it. */
.shortcode.contact-card .reach > a {
	flex-basis: max-content;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The card states its own weight: these are unclassed anchors inside .content-styles, which
   sets links bold, and the panel's copy is semibold. */
.shortcode.contact-card a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*** Meta Details — a two-up of fact panels, each disc overhanging its own corner ***/

.shortcode.meta-details {
	display: grid;
	/* The column gap carries the second column's disc as well as the space beside it — the disc
	   hangs 24 into the gap, so the drawn 24 between the panels needs twice that. */
	gap: var(--text-spacing-large) var(--text-spacing-xlarge);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin-block: var(--text-spacing-medium) 0;
	/* Inset by the disc's overhang on both sides the disc reaches: the panels move in so the
	   discs land on the column's own edges rather than past them. */
	padding: var(--text-spacing-small) 0 0 var(--text-spacing-small);
}

.shortcode.meta-details > li {
	background: var(--teal-pale);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	padding: var(--text-spacing-small) var(--text-spacing-medium);
	position: relative;
}

/* The disc a glyph sits on is the programme's band colour where there is one, which is what the
   value-props icons already take — storm is the GRID teal and belongs to the pages with no
   palette of their own. */
.shortcode.meta-details > li > .icon {
	align-items: center;
	background: var(--program-band, var(--storm));
	border-radius: 50%;
	color: var(--white);
	display: flex;
	height: 48px;
	justify-content: center;
	left: calc(var(--text-spacing-small) * -1);
	position: absolute;
	top: calc(var(--text-spacing-small) * -1);
	width: 48px;
}

.shortcode.meta-details > li > .icon > :is(img, svg) {
	height: 24px;
	object-fit: contain;
	width: 24px;
}

.shortcode.meta-details .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.shortcode.meta-details .eyebrow {
	color: var(--text-gray);
}

/*** FAQ — the accordions module's small style, inline ***/

.shortcode.faq {
	margin-block: var(--text-spacing-medium) 0;
}

.shortcode.faq > :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: var(--text-spacing-xsmall);
}

/* Closer to its rules than the module's rows are: the inline set is one block inside an
   article rather than a band of its own. */
.shortcode.faq .accordion {
	padding-block: var(--text-spacing-small);
}

/* Closed, the space under the question is the gap to an answer that is not there. The open row
   keeps it, and the panel's own 8px on top of it — so the two are 16 apart, as drawn. */
.shortcode.faq .accordion > :is(h1, h2, h3, h4, h5, h6) {
	transition: margin-bottom var(--motion-slower) var(--ease-out);
}

.shortcode.faq .accordion:not(.active) > :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0;
}

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

	.module.content.align-center .content-styles > .shortcode.notice.banner {
		margin-inline: calc(-2 * (var(--one-column-width) + var(--gap)));
	}

}

.module.media-content .content-styles > .shortcode.notice,
.module.media-content .content-styles > * + .shortcode.notice {
	margin-block: var(--text-spacing-medium) 0;
}

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

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

	/* The mark takes a line of its own above the sentence rather than the head of it: one line of
	   copy at this width is three or four, and an icon beside the first of them reads as a bullet
	   on a list of one. */
	.shortcode.notice.banner {
		border-radius: 10px;
		flex-direction: column;
	}


	.shortcode.meta-details {
		grid-template-columns: minmax(0, 1fr);
	}

	.shortcode.author {
		flex-direction: column;
		gap: var(--text-spacing-small);
		padding: var(--text-spacing-small);
	}

	.shortcode.link.post .image {
		height: 100px;
		width: 120px;
	}

	.shortcode.link .date {
		width: 70px;
	}

	.shortcode.link .day {
		font-size: calc(24rem / 16);
	}

	.shortcode.link .body {
		padding: var(--text-spacing-xxsmall) var(--text-spacing-xsmall);
	}

	.shortcode.link .arrow {
		height: 30px;
		margin-right: var(--text-spacing-xsmall);
		width: 30px;
	}

	.shortcode.figure .play {
		height: 48px;
		width: 48px;
	}

	.shortcode.figure .frame.large,
	.shortcode.figure .frame.medium {
		width: 100%;
	}

	.shortcode.figure .frame.thumbnail {
		width: 60%;
	}
}