/**
 * Single Post layout — full-width header + 16:9 hero, then a content +
 * sticky sidebar grid (Share this story / Related articles).
 *
 * Independent of the .aia-entity / .aia-sidebox system (Committee/Program/
 * Award/Event singles) — see inc/post-single.php. Everything here is
 * scoped under .aia-post: .entry-content and .entry-footer are shared
 * class names with Pages (template-parts/content-page.php), and must not
 * bleed there.
 */
.aia-post {
	--post-ink: var(--aia-ink, #1a1a1a);
	--post-red: var(--aia-red, #fa4132);
	--post-paper: var(--aia-paper, #fff);
	--post-mist: var(--aia-mist, #f4f4f2);
	--post-line: var(--aia-line, #e3e2df);
	--post-slate: var(--aia-slate, #6e6c66);
	--post-side-w: 420px;
	--post-side-gap: 56px;
	color: var(--post-ink);
}

/* ---- header + hero: run the full container width ---- */
.aia-post__page {
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 56px 40px 0;
}
.aia-post .entry-header {
	max-width: calc(100% - var(--post-side-w) - var(--post-side-gap));
}
.aia-post__eyebrow {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--post-red);
	margin: 0 0 10px;
}
.aia-post .entry-title {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}
.aia-post .entry-meta {
	font-family: ui-monospace, monospace;
	font-size: 12px;
	color: var(--post-slate);
	margin: 0 0 26px;
}
.aia-post .entry-meta b { color: var(--post-ink); font-weight: 400; }

.aia-post__hero {
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--post-mist);
}
.aia-post__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- content + sticky sidebar grid ---- */
.aia-post__wrap {
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 48px 40px 72px;
	display: grid;
	grid-template-columns: 1fr var(--post-side-w);
	gap: var(--post-side-gap);
	align-items: start;
}
.aia-post__aside { align-self: stretch; }

/* ---- entry content typography ---- */
.aia-post .entry-content p {
	font-size: 1.0625rem;
	line-height: 1.75;
	margin: 0 0 22px;
}
/* The sitewide top-level-block gutter (style.css, .entry-content > :is(...))
   insets paragraphs on both sides — shared with Pages, so it's overridden
   here rather than changed at the source. Left/start only: the entry
   header above has no such inset, so the paragraph's left edge otherwise
   lands ~48px right of the title, misaligned with it.
   body.single-post prefix matches that base rule's specificity (its two
   :not() pseudo-classes count as two more classes) — without it this
   loses the cascade despite loading after style.css. */
body.single-post .aia-post .entry-content > .wp-block-paragraph,
body.single-post .aia-post .entry-content > .wp-block-image {
	padding-inline-start: 0;
}
.aia-post .entry-content h2 {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	margin: 44px 0 16px;
}
.aia-post .entry-content a {
	color: var(--post-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--post-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.aia-post .entry-content a:hover {
	color: var(--post-red);
	text-decoration-color: var(--post-red);
}
.aia-post .entry-content strong { font-weight: 600; }

/* ---- entry footer — reskins matisse_entry_footer()'s cat/tag links as
   bordered pills; the function itself is untouched/shared with the rest
   of the site, this only restyles its output inside .aia-post. ---- */
.aia-post .entry-footer {
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid var(--post-line);
	font-family: ui-monospace, monospace;
	font-size: 12px;
	color: var(--post-slate);
}
.aia-post .entry-footer .cat-links a,
.aia-post .entry-footer .tags-links a {
	display: inline-block;
	border: 1px solid var(--post-line);
	padding: 4px 10px;
	margin: 0 6px 6px 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--post-slate);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}
.aia-post .entry-footer .cat-links a:hover,
.aia-post .entry-footer .tags-links a:hover {
	border-color: var(--post-red);
	color: var(--post-red);
}

/* ---- sidebar box — own component, not .aia-sidebox ---- */
.aia-post__box {
	background: var(--post-mist);
	border: 1px solid var(--post-line);
	border-top: 3px solid var(--post-red);
	border-radius: 0;
	padding: 22px;
	position: sticky;
	top: 24px;
}
.aia-post__box-label {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 12px;
	color: var(--post-red);
	margin: 0 0 16px;
}
.aia-post__hr {
	border: 0;
	border-top: 1px solid var(--post-line);
	margin: 18px 0;
}

.aia-post__share { display: flex; gap: 10px; }
.aia-post__share a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--post-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--post-ink);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.aia-post__share svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.aia-post__share a:hover {
	transform: translate(-3px, -3px);
	box-shadow: 3px 3px 0 0 var(--post-ink);
}

.aia-post__rel { list-style: none; margin: 0; padding: 0; }
.aia-post__rel li { margin: 0 0 16px; }
.aia-post__rel li:last-child { margin-bottom: 0; }
.aia-post__rel a {
	display: block;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--post-ink);
	text-decoration: underline;
	text-decoration-color: var(--post-line);
	text-underline-offset: 3px;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.aia-post__rel a:hover { color: var(--post-red); text-decoration-color: var(--post-red); }
.aia-post__rel time {
	display: block;
	margin-top: 5px;
	font-family: ui-monospace, monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #a3a29c;
}

/* ---- responsive: sidebar drops below content, sticky release ---- */
@media (max-width: 1100px) {
	.aia-post__wrap { grid-template-columns: 1fr; padding: 44px 24px 56px; }
	.aia-post__page { padding: 44px 24px 0; }
	.aia-post .entry-header { max-width: none; }
	.aia-post__box { position: static; }
	.aia-post .entry-title { font-size: 2rem; }
}

/* ---- previous/next post navigation — two .aia-dir-card--person cards
   (aia-directory.css) inside the standard 1600px container, minus the
   excerpt. The card shell/photo/texture/monogram all come from that
   shared stylesheet; only the pieces it doesn't already provide — the
   role label, title underline, and "Read more" link — are declared here,
   scoped to .aia-post-nav rather than reusing .aia-entity's versions of
   the same overrides (this page has no .aia-entity ancestor). ---- */
.aia-post-nav {
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 40px 40px 72px;
	border-top: 1px solid var(--aia-line, #e3e2df);
}
.aia-post-nav__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
@media (max-width: 700px) {
	.aia-post-nav { padding: 32px 24px 56px; }
	.aia-post-nav__grid { grid-template-columns: 1fr; }
}
.aia-post-nav a.aia-dir-card {
	text-decoration: none;
}
.aia-post-nav__role {
	display: inline-block;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aia-red, #fa4132);
	margin: 0 0 4px;
}
.aia-post-nav .aia-dir-card--person .aia-dir-card__name {
	text-decoration: underline;
	text-decoration-color: var(--aia-line, #e3e2df);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.aia-post-nav .aia-dir-card--person:hover .aia-dir-card__name {
	color: var(--aia-red, #fa4132);
	text-decoration-color: var(--aia-red, #fa4132);
}
.aia-post-nav .aia-dir-card__more {
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--aia-red, #fa4132);
}