/*
Theme Name: JCATL GeneratePress Child
Theme URI: https://joshcarter.com
Description: Custom child theme for the JCATL personal brand site, built on GeneratePress.
Author: Josh Carter
Template: generatepress
Version: 0.3.0
Text Domain: jcatl-gp-child
*/

/* Design tokens
--------------------------------------------- */

:root {
	/* Canonical brand palette from the Josh Carter style guide. */
	--jcatl-color-brand-blue: #00374f;
	--jcatl-color-brand-black: #000000;
	--jcatl-color-brand-green: #65b335;
	--jcatl-color-brand-orange: #e9540d;
	--jcatl-color-white: #ffffff;
	--jcatl-color-blue-tint-96: #f5f7f8;
	--jcatl-color-blue-tint-90: #e6ebed;
	--jcatl-color-blue-tint-80: #ccd7dc;

	/* Semantic colors */
	--jcatl-color-background: var(--jcatl-color-white);
	--jcatl-color-surface: var(--jcatl-color-blue-tint-96);
	--jcatl-color-surface-strong: var(--jcatl-color-blue-tint-90);
	--jcatl-color-text: var(--jcatl-color-brand-black);
	--jcatl-color-text-muted: var(--jcatl-color-brand-blue);
	--jcatl-color-heading: var(--jcatl-color-brand-blue);
	--jcatl-color-border: var(--jcatl-color-blue-tint-80);
	--jcatl-color-link: var(--jcatl-color-brand-blue);
	--jcatl-color-link-hover: var(--jcatl-color-brand-black);
	--jcatl-color-accent: var(--jcatl-color-brand-orange);
	--jcatl-color-success: var(--jcatl-color-brand-green);
	--jcatl-color-focus: var(--jcatl-color-brand-orange);

	/* Typography */
	--jcatl-font-family-brand: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--jcatl-font-family-base: var(--jcatl-font-family-brand);
	--jcatl-font-family-heading: var(--jcatl-font-family-base);
	--jcatl-font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--jcatl-font-size-xs: 0.75rem;
	--jcatl-font-size-sm: 0.875rem;
	--jcatl-font-size-md: 1rem;
	--jcatl-font-size-lg: 1.125rem;
	--jcatl-font-size-xl: 1.25rem;
	--jcatl-font-size-2xl: 1.5rem;
	--jcatl-font-size-3xl: 2rem;
	--jcatl-font-size-4xl: 2.5rem;
	--jcatl-font-size-5xl: 3.5rem;
	--jcatl-font-size-6xl: 5rem;
	--jcatl-line-height-tight: 1.15;
	--jcatl-line-height-heading: 1.2;
	--jcatl-line-height-base: 1.6;
	--jcatl-letter-spacing-base: 0;
	--jcatl-font-weight-light: 300;
	--jcatl-font-weight-regular: 400;
	--jcatl-font-weight-medium: 500;
	--jcatl-font-weight-semibold: 600;
	--jcatl-font-weight-bold: 700;
	--jcatl-font-weight-black: 900;

	/* Type roles */
	--jcatl-type-hero-headline-size: var(--jcatl-font-size-4xl);
	--jcatl-type-page-title-size: var(--jcatl-font-size-3xl);
	--jcatl-type-section-heading-size: var(--jcatl-font-size-2xl);
	--jcatl-type-body-size: var(--jcatl-font-size-md);
	--jcatl-type-pull-quote-size: var(--jcatl-font-size-xl);
	--jcatl-type-caption-size: var(--jcatl-font-size-xs);
	--jcatl-type-nav-label-size: var(--jcatl-font-size-sm);
	--jcatl-type-button-size: var(--jcatl-font-size-sm);

	/* Spacing */
	--jcatl-space-0: 0;
	--jcatl-space-1: 0.25rem;
	--jcatl-space-2: 0.5rem;
	--jcatl-space-3: 0.75rem;
	--jcatl-space-4: 1rem;
	--jcatl-space-5: 1.5rem;
	--jcatl-space-6: 2rem;
	--jcatl-space-7: 3rem;
	--jcatl-space-8: 4rem;
	--jcatl-space-9: 6rem;
	--jcatl-space-10: 8rem;

	/* Layout */
	--jcatl-width-text: 44rem;
	--jcatl-width-content: 44rem;
	--jcatl-width-default: 72rem;
	--jcatl-width-wide: 82rem;
	--jcatl-width-site: 90rem;

	/* Borders and elevation */
	--jcatl-radius-sm: 0.25rem;
	--jcatl-radius-md: 0.5rem;
	--jcatl-radius-pill: 999px;
	--jcatl-border-width: 1px;
	--jcatl-shadow-soft: 0 1px 2px rgba(0, 55, 79, 0.08), 0 12px 32px rgba(0, 55, 79, 0.08);

	/* Buttons */
	--jcatl-button-background: var(--jcatl-color-brand-blue);
	--jcatl-button-background-hover: var(--jcatl-color-brand-black);
	--jcatl-button-border-color: var(--jcatl-color-brand-blue);
	--jcatl-button-border-color-hover: var(--jcatl-color-brand-black);
	--jcatl-button-color: var(--jcatl-color-white);
	--jcatl-button-font-family: var(--jcatl-font-family-brand);
	--jcatl-button-font-size: var(--jcatl-type-button-size);
	--jcatl-button-font-weight: var(--jcatl-font-weight-semibold);
	--jcatl-button-line-height: 1.2;
	--jcatl-button-padding-block: 0.875rem;
	--jcatl-button-padding-inline: 1.25rem;
	--jcatl-button-radius: var(--jcatl-radius-pill);

	/* Reviewed breakpoints: mobile <= 767px, tablet 768px-1024px, desktop >= 1025px. */
	--jcatl-breakpoint-mobile-max: 767px;
	--jcatl-breakpoint-tablet-min: 768px;
	--jcatl-breakpoint-tablet-max: 1024px;
	--jcatl-breakpoint-desktop-min: 1025px;

	/* Motion */
	--jcatl-transition-fast: 150ms ease;
	--jcatl-transition-base: 220ms ease;
}

@media (min-width: 768px) {
	:root {
		--jcatl-type-hero-headline-size: var(--jcatl-font-size-5xl);
		--jcatl-type-page-title-size: var(--jcatl-font-size-4xl);
		--jcatl-type-section-heading-size: var(--jcatl-font-size-3xl);
		--jcatl-type-pull-quote-size: var(--jcatl-font-size-2xl);
	}
}

@media (min-width: 1025px) {
	:root {
		--jcatl-type-hero-headline-size: var(--jcatl-font-size-6xl);
		--jcatl-type-page-title-size: var(--jcatl-font-size-5xl);
	}
}

/* Base token mapping
--------------------------------------------- */

body {
	background-color: var(--jcatl-color-background);
	color: var(--jcatl-color-text);
	font-family: var(--jcatl-font-family-base);
	font-size: var(--jcatl-font-size-md);
	letter-spacing: var(--jcatl-letter-spacing-base);
	line-height: var(--jcatl-line-height-base);
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--jcatl-color-heading);
	font-family: var(--jcatl-font-family-heading);
	font-weight: var(--jcatl-font-weight-black);
	letter-spacing: var(--jcatl-letter-spacing-base);
	line-height: var(--jcatl-line-height-heading);
}

h1 {
	font-size: var(--jcatl-type-page-title-size);
}

h2 {
	font-size: var(--jcatl-type-section-heading-size);
}

p,
li {
	font-size: var(--jcatl-type-body-size);
}

a {
	color: var(--jcatl-color-link);
	text-underline-offset: 0.18em;
	transition: color var(--jcatl-transition-fast);
}

a:hover,
a:focus {
	color: var(--jcatl-color-link-hover);
}

:focus-visible {
	outline: 2px solid var(--jcatl-color-focus);
	outline-offset: 3px;
}

::selection {
	background-color: var(--jcatl-color-brand-orange);
	color: var(--jcatl-color-brand-black);
}

blockquote,
.wp-block-quote,
.wp-block-pullquote {
	border-color: var(--jcatl-color-brand-green);
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-type-pull-quote-size);
	font-style: italic;
	font-weight: var(--jcatl-font-weight-medium);
	line-height: var(--jcatl-line-height-heading);
}

figcaption,
.wp-caption-text,
.entry-meta,
.posted-on,
.cat-links,
.tags-links {
	color: var(--jcatl-color-text-muted);
	font-size: var(--jcatl-type-caption-size);
	font-weight: var(--jcatl-font-weight-medium);
	line-height: var(--jcatl-line-height-base);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.wp-block-navigation-item__content {
	font-family: var(--jcatl-font-family-brand);
	font-size: var(--jcatl-type-nav-label-size);
	font-weight: var(--jcatl-font-weight-semibold);
	letter-spacing: var(--jcatl-letter-spacing-base);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.gb-button {
	align-items: center;
	background-color: var(--jcatl-button-background);
	border: 2px solid var(--jcatl-button-border-color);
	border-radius: var(--jcatl-button-radius);
	color: var(--jcatl-button-color);
	display: inline-flex;
	font-family: var(--jcatl-button-font-family);
	font-size: var(--jcatl-button-font-size);
	font-weight: var(--jcatl-button-font-weight);
	justify-content: center;
	letter-spacing: var(--jcatl-letter-spacing-base);
	line-height: var(--jcatl-button-line-height);
	padding: var(--jcatl-button-padding-block) var(--jcatl-button-padding-inline);
	text-decoration: none;
	transition: background-color var(--jcatl-transition-fast), border-color var(--jcatl-transition-fast), color var(--jcatl-transition-fast);
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.gb-button:hover,
.gb-button:focus {
	background-color: var(--jcatl-button-background-hover);
	border-color: var(--jcatl-button-border-color-hover);
	color: var(--jcatl-button-color);
}

/* Design system reference template
--------------------------------------------- */

.jcatl-design-system-reference {
	background: linear-gradient(180deg, var(--jcatl-color-blue-tint-96) 0, var(--jcatl-color-white) 18rem);
	color: var(--jcatl-color-text);
}

.jcatl-reference-shell {
	margin-inline: auto;
	max-width: var(--jcatl-width-wide);
	padding: var(--jcatl-space-7) var(--jcatl-space-5);
}

.jcatl-reference-hero,
.jcatl-reference-section,
.jcatl-reference-nav {
	margin-inline: auto;
	max-width: var(--jcatl-width-default);
}

.jcatl-reference-hero {
	padding: var(--jcatl-space-6) 0 var(--jcatl-space-5);
}

.jcatl-reference-eyebrow,
.jcatl-reference-kicker,
.jcatl-reference-card-meta {
	color: var(--jcatl-color-brand-orange);
	font-size: var(--jcatl-font-size-xs);
	font-weight: var(--jcatl-font-weight-bold);
	letter-spacing: 0;
	line-height: var(--jcatl-line-height-tight);
	margin: 0 0 var(--jcatl-space-2);
	text-transform: uppercase;
}

.jcatl-reference-title {
	font-size: var(--jcatl-type-hero-headline-size);
	line-height: var(--jcatl-line-height-tight);
	margin-bottom: var(--jcatl-space-4);
	max-width: 11ch;
}

.jcatl-reference-intro {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-lg);
	line-height: var(--jcatl-line-height-base);
	margin-bottom: var(--jcatl-space-5);
	max-width: var(--jcatl-width-text);
}

.jcatl-reference-meta {
	display: grid;
	gap: var(--jcatl-space-3);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	margin: 0;
	max-width: var(--jcatl-width-default);
}

.jcatl-reference-meta div {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	padding: var(--jcatl-space-4);
}

.jcatl-reference-meta dt {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-xs);
	font-weight: var(--jcatl-font-weight-bold);
	margin-bottom: var(--jcatl-space-1);
	text-transform: uppercase;
}

.jcatl-reference-meta dd {
	margin: 0;
}

.jcatl-reference-nav {
	align-items: center;
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	display: flex;
	flex-wrap: wrap;
	gap: var(--jcatl-space-2);
	margin-bottom: var(--jcatl-space-7);
	padding: var(--jcatl-space-3);
	position: sticky;
	top: var(--jcatl-space-3);
	z-index: 2;
}

.jcatl-reference-nav a {
	border-radius: var(--jcatl-radius-pill);
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-sm);
	font-weight: var(--jcatl-font-weight-semibold);
	padding: var(--jcatl-space-2) var(--jcatl-space-3);
	text-decoration: none;
}

.jcatl-reference-nav a:hover,
.jcatl-reference-nav a:focus {
	background-color: var(--jcatl-color-blue-tint-96);
	color: var(--jcatl-color-brand-black);
}

.jcatl-reference-section {
	background-color: var(--jcatl-color-white);
	border-top: 4px solid var(--jcatl-color-brand-blue);
	margin-bottom: var(--jcatl-space-7);
	padding: var(--jcatl-space-6) 0 0;
}

.jcatl-reference-section-header {
	margin-bottom: var(--jcatl-space-5);
	max-width: var(--jcatl-width-text);
}

.jcatl-reference-section-header h2,
.jcatl-reference-section-header p {
	margin-bottom: var(--jcatl-space-3);
}

.jcatl-reference-type-stack {
	max-width: var(--jcatl-width-text);
}

.jcatl-reference-type-stack > * {
	margin-bottom: var(--jcatl-space-4);
}

.jcatl-reference-type-stack h1 {
	font-size: var(--jcatl-type-page-title-size);
}

.jcatl-reference-type-stack h3 {
	font-size: var(--jcatl-font-size-2xl);
}

.jcatl-reference-type-stack h4 {
	font-size: var(--jcatl-font-size-xl);
}

.jcatl-reference-type-stack h5 {
	font-size: var(--jcatl-font-size-lg);
}

.jcatl-reference-type-stack h6 {
	font-size: var(--jcatl-font-size-md);
}

.jcatl-reference-lede {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-lg);
}

.jcatl-reference-caption {
	color: var(--jcatl-color-text-muted);
	font-size: var(--jcatl-type-caption-size);
	font-weight: var(--jcatl-font-weight-medium);
}

.jcatl-reference-action-grid,
.jcatl-reference-card-grid,
.jcatl-reference-media-grid,
.jcatl-reference-embed-grid,
.jcatl-reference-split {
	display: grid;
	gap: var(--jcatl-space-5);
}

.jcatl-reference-action-grid {
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
}

.jcatl-reference-button {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--jcatl-radius-pill);
	display: inline-flex;
	font-family: var(--jcatl-button-font-family);
	font-size: var(--jcatl-button-font-size);
	font-weight: var(--jcatl-button-font-weight);
	justify-content: center;
	line-height: var(--jcatl-button-line-height);
	padding: var(--jcatl-button-padding-block) var(--jcatl-button-padding-inline);
	text-decoration: none;
	transition: background-color var(--jcatl-transition-fast), border-color var(--jcatl-transition-fast), color var(--jcatl-transition-fast);
}

.jcatl-reference-button--primary {
	background-color: var(--jcatl-color-brand-blue);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-white);
}

.jcatl-reference-button--primary:hover,
.jcatl-reference-button--primary:focus {
	background-color: var(--jcatl-color-brand-black);
	border-color: var(--jcatl-color-brand-black);
	color: var(--jcatl-color-white);
}

.jcatl-reference-button--secondary {
	background-color: var(--jcatl-color-white);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-button--secondary:hover,
.jcatl-reference-button--secondary:focus {
	background-color: var(--jcatl-color-blue-tint-96);
	color: var(--jcatl-color-brand-black);
}

.jcatl-reference-button--light {
	background-color: var(--jcatl-color-white);
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-button--light:hover,
.jcatl-reference-button--light:focus {
	background-color: var(--jcatl-color-blue-tint-90);
	border-color: var(--jcatl-color-blue-tint-90);
	color: var(--jcatl-color-brand-black);
}

.jcatl-reference-button--ghost {
	background-color: transparent;
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-white);
}

.jcatl-reference-button--ghost:hover,
.jcatl-reference-button--ghost:focus {
	background-color: var(--jcatl-color-white);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-card-grid,
.jcatl-reference-media-grid,
.jcatl-reference-embed-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.jcatl-reference-card {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	padding: var(--jcatl-space-5);
}

.jcatl-reference-card h3 {
	font-size: var(--jcatl-font-size-xl);
	margin-bottom: var(--jcatl-space-3);
}

.jcatl-reference-card p {
	margin-bottom: var(--jcatl-space-4);
}

.jcatl-reference-card a {
	font-weight: var(--jcatl-font-weight-semibold);
}

.jcatl-reference-card--accent {
	border-color: var(--jcatl-color-brand-green);
}

.jcatl-reference-card--dark {
	background-color: var(--jcatl-color-brand-blue);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-white);
}

.jcatl-reference-card--dark h3,
.jcatl-reference-card--dark a,
.jcatl-reference-card--dark .jcatl-reference-card-meta {
	color: var(--jcatl-color-white);
}

.jcatl-reference-split {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.jcatl-reference-split blockquote {
	background-color: var(--jcatl-color-blue-tint-96);
	border-left: 4px solid var(--jcatl-color-brand-green);
	border-radius: var(--jcatl-radius-md);
	margin: 0;
	padding: var(--jcatl-space-5);
}

.jcatl-reference-split cite {
	color: var(--jcatl-color-brand-black);
	display: block;
	font-size: var(--jcatl-font-size-sm);
	font-style: normal;
	font-weight: var(--jcatl-font-weight-semibold);
	margin-top: var(--jcatl-space-3);
}

.jcatl-reference-figure {
	margin: 0;
}

.jcatl-reference-image-frame {
	align-items: center;
	aspect-ratio: 4 / 3;
	background-color: var(--jcatl-color-blue-tint-96);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	display: flex;
	justify-content: center;
	margin-bottom: var(--jcatl-space-3);
	padding: var(--jcatl-space-5);
}

.jcatl-reference-image-frame img {
	height: auto;
	max-height: 12rem;
	max-width: min(100%, 18rem);
}

.jcatl-reference-figure--dark .jcatl-reference-image-frame {
	background-color: var(--jcatl-color-brand-blue);
	border-color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-figure--mark .jcatl-reference-image-frame img {
	max-width: 8rem;
}

.jcatl-reference-cta {
	align-items: center;
	background-color: var(--jcatl-color-brand-blue);
	border-radius: var(--jcatl-radius-md);
	color: var(--jcatl-color-white);
	display: grid;
	gap: var(--jcatl-space-5);
	grid-template-columns: minmax(0, 1fr) auto;
	padding: var(--jcatl-space-6);
}

.jcatl-reference-cta h3,
.jcatl-reference-cta p {
	color: var(--jcatl-color-white);
	margin-bottom: var(--jcatl-space-3);
}

.jcatl-reference-cta .jcatl-reference-kicker {
	color: var(--jcatl-color-brand-green);
}

.jcatl-reference-cta-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jcatl-space-3);
	justify-content: flex-start;
}

.jcatl-reference-form {
	background-color: var(--jcatl-color-blue-tint-96);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	display: grid;
	gap: var(--jcatl-space-4);
	max-width: var(--jcatl-width-text);
	padding: var(--jcatl-space-5);
}

.jcatl-reference-form label,
.jcatl-reference-form fieldset {
	display: grid;
	gap: var(--jcatl-space-2);
	margin: 0;
}

.jcatl-reference-form label span,
.jcatl-reference-form legend {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-sm);
	font-weight: var(--jcatl-font-weight-semibold);
}

.jcatl-reference-form input[type="text"],
.jcatl-reference-form input[type="email"],
.jcatl-reference-form select,
.jcatl-reference-form textarea {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-sm);
	color: var(--jcatl-color-text);
	font: inherit;
	padding: var(--jcatl-space-3);
	width: 100%;
}

.jcatl-reference-form input:focus,
.jcatl-reference-form select:focus,
.jcatl-reference-form textarea:focus {
	border-color: var(--jcatl-color-focus);
	outline: 2px solid var(--jcatl-color-focus);
	outline-offset: 2px;
}

.jcatl-reference-form fieldset {
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-sm);
	padding: var(--jcatl-space-4);
}

.jcatl-reference-form fieldset label,
.jcatl-reference-checkbox {
	align-items: center;
	display: flex;
	gap: var(--jcatl-space-2);
}

.jcatl-reference-form-grid {
	display: grid;
	gap: var(--jcatl-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.jcatl-reference-embed {
	margin: 0;
}

.jcatl-reference-embed iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	display: block;
	margin-bottom: var(--jcatl-space-3);
	width: 100%;
}

.jcatl-reference-embed--audio iframe {
	aspect-ratio: 4 / 1;
}

.jcatl-reference-editor-content {
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	padding: var(--jcatl-space-5);
}

@media (max-width: 767px) {
	.jcatl-reference-shell {
		padding: var(--jcatl-space-5) var(--jcatl-space-4);
	}

	.jcatl-reference-nav {
		position: static;
	}

	.jcatl-reference-section {
		margin-bottom: var(--jcatl-space-6);
		padding-top: var(--jcatl-space-5);
	}

	.jcatl-reference-action-grid {
		grid-template-columns: 1fr;
	}

	.jcatl-reference-action-grid > *,
	.jcatl-reference-button {
		width: 100%;
	}

	.jcatl-reference-cta {
		grid-template-columns: 1fr;
		padding: var(--jcatl-space-5);
	}

	.jcatl-reference-embed--audio iframe {
		aspect-ratio: 16 / 9;
	}
}