/* Article detail template: page-specific composition for Figma 21839:2533. */
.article-page {
  padding: 102px 0px 100px;
  background: var(--color-surface);
}

.article-detail {
  width: 1040px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.article-detail-hero {
  position: relative;
  width: 1040px;
  height: 488px;
  overflow: hidden;
}

.article-detail-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.article-detail-title {
	min-height: 55px;
	color: var(--color-brand-hover);
	overflow-wrap: anywhere;
}

.article-detail-body {
  width: 882px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 140%;
	letter-spacing: -0.18px;
	overflow-wrap: anywhere;
}

/* Plain WordPress editor content is styled by this one semantic wrapper. */
.article-detail-body > * {
	max-width: 100%;
	margin: 0px;
}

.article-detail-body h2,
.article-detail-body h3,
.article-detail-body h4,
.article-detail-body h5,
.article-detail-body h6 {
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 115%;
	overflow-wrap: anywhere;
}

.article-detail-body h2:not(.article-editor-heading) { font-size: 32px; letter-spacing: -0.32px; }
.article-detail-body h3 { font-size: 28px; letter-spacing: -0.28px; }
.article-detail-body h4 { font-size: 24px; letter-spacing: -0.24px; }
.article-detail-body h5 { font-size: 21px; letter-spacing: -0.21px; }
.article-detail-body h6 { font-size: 18px; letter-spacing: -0.18px; text-transform: uppercase; }

/* Editor output is grouped by inferred heading boundaries, never by authored classes. */
.article-editor-layout {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: inherit;
}

.article-editor-section > * { max-width: 100%; margin: 0px; }
.article-editor-heading { color: var(--color-text); }

/* Keep in-flow article headings visually separated from the preceding content. */
.article-editor-section + .article-editor-section {
	margin-top: 24px;
}

.article-detail-body :where(p, ul, ol, figure, blockquote, table, pre, hr) + :is(h2, h3) {
	margin-top: 24px;
}

.article-detail-body p,
.article-detail-body li,
.article-detail-body dd,
.article-detail-body dt {
	max-width: 100%;
}

.article-detail-body ul,
.article-detail-body ol {
	padding-left: 28px;
}

.article-detail-body li + li { margin-top: 8px; }
.article-detail-body li > ul,
.article-detail-body li > ol { margin-top: 8px; }

.article-detail-body > .wp-block-list,
.article-detail-body .article-list {
	width: 493px;
	padding-left: 27px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.article-detail-body > .wp-block-list > li + li,
.article-detail-body .article-list > li + li { margin-top: 0px; }

.article-detail-body a:not(.wp-block-button__link) {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 200ms ease, opacity 200ms ease;
}

.article-detail-body a:not(.wp-block-button__link):hover { opacity: 0.72; }
.article-detail-body a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.article-detail-body blockquote {
	padding: 24px 28px;
	border-left: 4px solid var(--color-accent);
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 130%;
}

.article-detail-body blockquote > * { margin: 0px; }
.article-detail-body blockquote > * + * { margin-top: 12px; }
.article-detail-body blockquote cite { display: block; color: var(--color-text-secondary); font-family: var(--font-body); font-size: 15px; line-height: 140%; }

.article-detail-body figure { display: flex; flex-direction: column; gap: 8px; }
.article-detail-body img { display: block; max-width: 100%; height: auto; }
.article-detail-body figcaption { color: var(--color-text-secondary); font-size: 15px; line-height: 140%; text-align: center; }

.article-detail-body .wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0px;
	list-style: none;
}

.article-detail-body .wp-block-gallery > * { flex: 1 1 280px; margin: 0px; }
.article-detail-body .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }

.article-detail-body .wp-block-button { display: flex; }
.article-detail-body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--color-accent);
	border-radius: 0px;
	background: var(--color-accent);
	color: var(--color-surface);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 140%;
	text-decoration: none;
	transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.article-detail-body .wp-block-button__link:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); transform: translateY(-2px); }
.article-detail-body .wp-block-button__link:active { transform: translateY(0px); }

.article-detail-body .wp-block-table { width: 100%; overflow-x: auto; }
.article-detail-body table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.article-detail-body th,
.article-detail-body td { padding: 14px 16px; border: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.article-detail-body th { background: var(--color-tag-surface); color: var(--color-text); font-weight: 600; }

.article-detail-body pre {
	max-width: 100%;
	padding: 20px;
	overflow-x: auto;
	background: var(--color-brand-hover);
	color: var(--color-surface);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 15px;
	line-height: 150%;
	white-space: pre;
}

.article-detail-body :not(pre) > code {
	padding: 2px 6px;
	background: var(--color-tag-surface);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 15px;
}

.article-detail-body hr,
.article-detail-body .wp-block-separator { width: 100%; height: 1px; border: 0px; background: var(--color-border); }

.article-detail-body .wp-block-embed iframe,
.article-detail-body iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0px; }
.article-detail-body .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.article-detail-body .wp-block-column { flex: 1 1 280px; }
.article-detail-body .alignwide,
.article-detail-body .alignfull { width: 1040px; max-width: 1040px; }

.article-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.article-section h2 {
  color: var(--color-text);
}

.article-copy-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-lines span {
  display: block;
}

.article-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.article-list {
  width: 493px;
  padding-left: 27px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.article-section--835 .article-copy-stack { gap: 6px; }
.article-section--729 > .article-copy-stack { gap: 16px; }
.article-section--620a .article-lines,
.article-section--620b .article-lines { gap: 7px; }

.article-section--685 { width: 685px; height: 267px; }
.article-section--882 { width: 882px; height: 149px; }
.article-section--665 { width: 665px; height: 168px; }
.article-section--835 { width: 835px; height: 100px; }
.article-section--218 { width: 218px; height: 118px; }
.article-section--729 { width: 729px; height: 293px; }
.article-section--620a { width: 620px; height: 101px; }
.article-section--687 { width: 687px; height: 69px; }
.article-section--669 { width: 669px; height: 69px; }
.article-section--559 { width: 559px; height: 69px; }
.article-section--595 { width: 595px; height: 69px; }
.article-section--606 { width: 606px; height: 69px; }
.article-section--463 { width: 463px; height: 69px; }
.article-section--620b { width: 620px; height: 101px; }
.article-section--631 { width: 631px; height: 69px; }
.article-section--796 { width: 796px; height: 69px; }
.article-section--730 { width: 730px; height: 69px; }
.article-section--672 { width: 672px; height: 69px; }
.article-section--678 { width: 678px; height: 69px; }
.article-section--closing { width: 729px; height: 303px; gap: 24px; }

@media (max-width: 1199px) {
  .article-page { padding: 80px 0px; }
  .article-detail { width: auto; margin: 0px 48px; }
  .article-detail-hero { width: 100%; height: 420px; }
  .article-detail-hero img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center 60.5%; }
  .article-detail-title { height: auto; }
	.article-detail-body { width: 100%; }
	.article-detail-body .alignwide,
	.article-detail-body .alignfull { width: 100%; max-width: 100%; }
	.article-detail-body > .wp-block-list,
	.article-detail-body .article-list { width: auto; }
  .article-section { width: 100%; height: auto; }
  .article-list { width: auto; }
}

@media (max-width: 900px) {
  .article-page { padding: 72px 0px; }
  .article-detail { margin: 0px 32px; gap: 28px; }
  .article-detail-hero { height: 360px; }
  .article-detail-title { font-size: 44px; }
}

@media (max-width: 767px) {
  .article-page { padding: 56px 0px; }
  .article-detail { margin: 0px 24px; gap: 24px; }
  .article-detail-hero { height: 300px; }
  .article-detail-title { font-size: 40px; }
  .article-detail-body { gap: 22px; font-size: 16px; line-height: 140%; letter-spacing: -0.16px; }
  .article-section { gap: 10px; }
  .article-copy-stack { gap: 10px; }
	.article-section h2 { font-size: 26px; }
	.article-detail-body h2:not(.article-editor-heading) { font-size: 28px; }
	.article-detail-body h3 { font-size: 25px; }
	.article-detail-body h4 { font-size: 22px; }
	.article-detail-body h5 { font-size: 19px; }
	.article-detail-body blockquote { padding: 20px; font-size: 21px; }
	.article-detail-body th,
	.article-detail-body td { padding: 12px; }
}

@media (max-width: 479px) {
  .article-page { padding: 40px 0px; }
  .article-detail { margin: 0px 20px; gap: 22px; }
  .article-detail-hero { height: 230px; }
  .article-detail-title { font-size: 36px; }
  .article-detail-body { gap: 20px; }
	.article-section h2 { font-size: 24px; }
	.article-detail-body h2:not(.article-editor-heading) { font-size: 26px; }
	.article-detail-body h3 { font-size: 23px; }
	.article-detail-body h4 { font-size: 21px; }
	.article-detail-body .wp-block-gallery,
	.article-detail-body .wp-block-columns { gap: 12px; }
}

@media (max-width: 375px) {
  .article-page { padding: 32px 0px; }
  .article-detail { margin: 0px 16px; gap: 20px; }
  .article-detail-hero { height: 200px; }
  .article-detail-title { font-size: 34px; }
	.article-detail-body { font-size: 15px; line-height: 140%; letter-spacing: -0.15px; }
	.article-section h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.article-detail-body a,
	.article-detail-body .wp-block-button__link { transition: none; }
	.article-detail-body .wp-block-button__link:hover { transform: none; }
}