/**
 * Page layout and editor content (the_content()).
 *
 * Figma: desktop/insights/article detail 1598:48297, the article column
 * ("left side" 1613:49748, 765 wide). Generic pages reuse it; Article Detail
 * will add its hero, meta row and sidebar on top of the same rules.
 *
 * NOT from Figma — provisional:
 *   - every mobile value: no mobile article frame has been pulled (1399:32594)
 *   - h3/h4 and blockquote: the frame only has one heading level inside the text
 *
 * Mobile first. Desktop from 64rem.
 */

/* ==================================================================
 * Layout
 * ================================================================ */

.container {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--gutter-mobile));
	padding-inline: var(--gutter-mobile);
	margin-inline: auto;
}

.page-content {
	padding-block: 2rem 4rem; /* provisional on mobile */
}

/* The article column: 765 of 1220 (1613:49748). */
.page-content__column {
	max-width: 47.8125rem;
}

.entry-header {
	margin-bottom: 1.5rem; /* column gap 24 */
}

/* header/XL on desktop. Mobile size is provisional (header/L) until the
 * mobile article frame is measured. */
.entry-title {
	font: var(--type-header-l);
	color: var(--color-text-dark);
}

@media (min-width: 64rem) {
	/* 32px below the nav bar (top area gap), 164px before the next section or footer. */
	.page-content {
		padding-block: 2rem 10.25rem;
	}

	.entry-title {
		font: var(--type-header-xl);
	}
}

/* ==================================================================
 * Editor content
 * Sections are "text" stacks: header/M heading, body/S paragraphs, 16px
 * between items (1598:49204). Sections and images sit 24px apart (1613:49748).
 * ================================================================ */

.entry-content {
	font: var(--type-body-s);
	color: var(--color-text-dark);
}

.entry-content > * + * {
	margin-top: 1rem;
}

.entry-content > h2:not(:first-child),
.entry-content > figure,
.entry-content > figure + *,
.entry-content > .wp-block-image,
.entry-content > .wp-block-image + *,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-embed + * {
	margin-top: 1.5rem;
}

.entry-content h2 {
	font: var(--type-header-m);
}

/* Provisional: the next two heading tokens down. */
.entry-content h3 {
	font: var(--type-header-s);
}

.entry-content h4 {
	font: var(--type-header-xs);
}

.entry-content h5,
.entry-content h6 {
	font: var(--type-header-2xs);
}

.entry-content :is(h2, h3, h4, h5, h6) + * {
	margin-top: 1rem;
}

/* Lists: disc markers, 24px inset (Table of Contents 1598:49151). */
.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li,
.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.5rem;
}

.entry-content a:not(.wp-block-button__link) {
	color: var(--color-primary);
}

/* Button block: the theme's button/M (buttons.css) in place of core's grey pill.
 * Fill = primary, Outline style = outlined. */
.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.125rem 1.25rem;
	font: var(--type-subtitle-xl);
	color: var(--color-text-white);
	text-decoration: none;
	background-color: var(--color-primary);
	border: 0;
	border-radius: var(--radius-16);
}

.entry-content .wp-block-button__link:hover {
	background-color: var(--color-dark-purple);
}

.entry-content .is-style-outline > .wp-block-button__link {
	padding: calc(1.125rem - 1px) calc(1.25rem - 1px);
	color: var(--color-text-dark);
	background-color: var(--color-background-white);
	border: 1px solid var(--color-border-light);
}

.entry-content .is-style-outline > .wp-block-button__link:hover {
	border-color: var(--color-border-dark);
}

/* Provisional: SemiBold for emphasis inside body text, as the footer does
 * with "London" in the address (1560:40540). */
.entry-content strong,
.entry-content b {
	font-weight: var(--font-weight-semibold);
}

/* Images: full column width, 20px corners (1598:49306). */
.entry-content img {
	border-radius: var(--radius-20);
}

.entry-content figure {
	margin-inline: 0;
}

/* Floated images (block alignleft/alignright, classic [caption] and
 * <img class="alignleft">) squeeze the text into a sliver on narrow screens.
 * Below 600px they stack at full width instead. */
@media (max-width: 37.4375rem) {
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}

	.entry-content .wp-caption.alignleft,
	.entry-content .wp-caption.alignright {
		width: auto !important; /* core prints an inline width on [caption] */
	}
}

.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .wp-element-caption {
	margin-top: 0.5rem;
	font: var(--type-body-xs);
	color: var(--color-text-grey);
}

.entry-content iframe,
.entry-content video {
	width: 100%;
	max-width: 100%;
	border-radius: var(--radius-20);
}

/* Provisional: primary rule like the footer columns. Not applied inside a
 * pullquote, which core lays out as a centred figure. */
.entry-content blockquote:not(.wp-block-pullquote blockquote) {
	padding-left: 1rem;
	margin-inline: 0;
	border-left: 1px solid var(--color-primary);
}

.entry-content blockquote > * + * {
	margin-top: 0.5rem;
}

.entry-content hr {
	height: 1px;
	margin-block: 1.5rem;
	background-color: var(--color-border-light);
	border: 0;
}

.entry-content table {
	width: 100%;
	font: var(--type-body-xs);
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--color-border-light);
}

.entry-content th {
	font-weight: var(--font-weight-semibold);
}

.page-links {
	margin-top: 1.5rem;
	font: var(--type-subtitle-m);
}