/**
 * Article detail (single.php).
 *
 * Figma: desktop/insights/article detail 1598:48297 — the 1220 container
 * holds a 765 column of article body beside a 391 rail, 64px apart. The hero
 * is 1220x568 with the tags in its bottom left corner; under it the title,
 * then the meta row between two 1px dividers.
 * Mobile 1399:32594: one column, 350 wide. The rail does not exist there —
 * the contents list is dropped entirely and Highlights moves under the body
 * as its own card (1399:32664); the rail banner is dropped too (the frame has
 * a sticky banner instead, which is not built).
 *
 * Body copy, headings and blocks come from content.css.
 */

/* ------------------------------------------------------------------
 * Head: hero, tags, title, meta row
 * ---------------------------------------------------------------- */

.article__hero {
	position: relative;
	margin-bottom: 1rem;
}

.article__hero-tags {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.article__meta {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-top: 1rem;
	border-bottom: 1px solid var(--color-border-light);
}

.article-author {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.article-author__photo {
	flex-shrink: 0;
	width: 2.6875rem; /* 43 */
	height: 2.6875rem;
	object-fit: cover;
	background-color: var(--color-background-purple);
	border-radius: 50%;
}

.article-author__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.article-author__name {
	font: var(--type-subtitle-l);
	color: var(--color-text-dark);
}

.article-author__title {
	font: var(--type-subtitle-m);
	color: var(--color-text-grey);
}

.article__meta-row {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border-light);
}

.article__dates {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font: var(--type-subtitle-m);
	color: var(--color-text-dark);
}

.article__dot {
	flex-shrink: 0;
	width: 0.375rem; /* 6 */
	height: 0.375rem;
	background-color: var(--color-border-light);
	border-radius: 50%;
}

.article__read {
	color: var(--color-text-grey);
}

/* Share: three 28px icons, 16px apart. */
.article__share {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.article__share-button {
	display: inline-flex;
	width: 1.75rem; /* 28 */
	height: 1.75rem;
	padding: 0;
	color: var(--color-primary);
	background: none;
	border: 0;
}

/* .article__share-button sets a display, which would otherwise beat the
 * browser's own [hidden] rule. */
.article__share-button[hidden] {
	display: none;
}

.article__share-button:hover {
	color: var(--color-primary-hover);
}

.article__share-button svg {
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------------------
 * Body and rail
 * ---------------------------------------------------------------- */

.article__body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.article__main {
	min-width: 0;
}

.article__rail {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Mobile drops the contents list and the rail banner (1399:32594). */
.article__rail .article__toc,
.article__rail .banner {
	display: none;
}

.article__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	background-color: var(--color-background-purple);
	border-radius: var(--radius-16);
}

.article__card-head {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.article__card-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-primary);
}

.article__card-icon svg {
	width: 100%;
	height: 100%;
}

.article__card-title {
	font: var(--type-header-2xs);
	color: var(--color-text-dark);
}

.article__card-list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* 10 */
	padding: 0;
	margin: 0 0 0 1.3125rem; /* 21 */
	font: var(--type-subtitle-m);
	color: var(--color-text-dark);
	list-style: disc;
}

@media (min-width: 64rem) {
	.article__hero {
		margin-bottom: 2.75rem; /* 44 */
	}

	.article__hero-tags {
		bottom: 1.25rem;
		left: 1.25rem;
	}

	/* The hero tags are 31 tall on desktop: subtitle/L in the same 4/10/6 box. */
	.article__hero-tags .tag-pill {
		font: var(--type-subtitle-l);
	}

	.article__meta {
		flex-direction: row;
		gap: 2rem;
		align-items: center;
		justify-content: space-between;
		padding-block: 1rem;
		margin-top: 1.5rem;
		border-top: 1px solid var(--color-border-light);
	}

	.article__meta-row {
		flex: 0 0 auto;
		gap: 2rem; /* 32 */
		padding-top: 0;
		border-top: 0;
	}

	.article__body {
		flex-direction: row;
		gap: 4rem; /* 64 */
		align-items: flex-start;
	}

	.article__main {
		flex: 0 1 47.8125rem; /* 765 */
	}

	.article__rail {
		position: sticky;
		top: 2rem;
		flex: 0 0 24.4375rem; /* 391 */
	}

	.article__rail .article__toc,
	.article__rail .banner {
		display: flex;
	}

	/* The rail cards grow: 24px padding, 20px corners, header/S, and the items
	 * as body/S 16px apart. Highlights keeps the purple, the contents list
	 * takes background-grey. */
	.article__card {
		gap: 1rem;
		padding: 1.5rem;
		border-radius: var(--radius-20);
	}

	.article__toc {
		background-color: var(--color-background-grey);
	}

	.article__card-title {
		font: var(--type-header-s);
	}

	.article__card-list {
		gap: 1rem;
		margin-left: 1.5rem; /* 24 */
		font: var(--type-body-s);
	}

	.article__card-list a {
		color: inherit;
		text-decoration: none;
	}

	.article__card-list a:hover {
		text-decoration: underline;
	}
}