/**
 * AIA Programs — styling for the program landing template and the single
 * program-item template. Uses the theme's brand tokens with safe fallbacks.
 */

.aia-program {
	--pi-ink: var(--aia-ink, #1a1a1a);
	--pi-red: var(--aia-red, #fa4132);
	--pi-paper: var(--aia-paper, #fff);
	--pi-muted: var(--color-text-muted, rgba(110, 108, 102, 0.72));
	--pi-line: var(--color-border, #e5e3dd);
	--pi-alt: var(--color-background-alt, #f6f5f1);
	color: var(--pi-ink);
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 0 24px 96px;
}

/* ---- hero ---- */
.aia-program__hero {
	padding: 72px 0 40px;
	border-bottom: 2px solid var(--pi-ink);
	margin-bottom: 48px;
}
.aia-program__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 700;
	color: var(--pi-red);
	margin: 0 0 12px;
}
.aia-program__title {
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.04;
	margin: 0 0 16px;
	font-weight: 800;
}
.aia-program__intro {
	font-size: 1.15rem;
	max-width: 720px;
	color: var(--pi-muted);
	margin: 0;
}

/* ---- year / section headings ---- */
.aia-program__section {
	margin: 56px 0 0;
}
.aia-program__section-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-bottom: 1px solid var(--pi-line);
	padding-bottom: 10px;
	margin-bottom: 28px;
}
.aia-program__section-head h2 {
	font-size: 1.6rem;
	margin: 0;
	font-weight: 700;
}
.aia-program__section-head .count {
	color: var(--pi-muted);
	font-size: 0.9rem;
}

/* ==========================================================
 * Phased competition edition
 * ======================================================== */
.aia-comp { margin: 0 0 12px; }
.aia-comp__pillrow { margin: 0 0 14px; }
.aia-comp-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pi-alt);
	border: 1px solid var(--pi-line);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.aia-comp-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pi-muted); }
.aia-comp-pill--red { background: var(--pi-red); border-color: var(--pi-red); color: #fff; }
.aia-comp-pill--red .dot { background: #fff; }

/* dates spine + CTA bar */
.aia-comp__bar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
	border-top: 1px solid var(--pi-line);
	border-bottom: 1px solid var(--pi-line);
	padding: 22px 0;
	margin-bottom: 40px;
}
.aia-comp__dates { list-style: none; margin: 0; padding: 0; }
.aia-comp__dates li { display: flex; gap: 10px; padding: 3px 0; font-size: 0.95rem; }
.aia-comp__dates li::before { content: "\25B8"; color: var(--pi-muted); }
.aia-comp__dates li.is-done::before { content: "\2713"; color: var(--pi-red); }
.aia-comp__dates .k { width: 90px; color: var(--pi-muted); }
.aia-comp__dates .v { font-weight: 600; }

.aia-comp__cta { text-align: right; }
.aia-comp-btn {
	display: inline-block;
	background: var(--pi-red);
	color: #fff;
	font-weight: 700;
	padding: 15px 32px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 1.05rem;
}
.aia-comp-btn:hover { filter: brightness(0.94); }
.aia-comp-btn.is-disabled {
	background: var(--pi-alt);
	color: var(--pi-muted);
	cursor: not-allowed;
	pointer-events: none;
	border: 1px solid var(--pi-line);
}
.aia-comp__sub { margin: 10px 0 0; color: var(--pi-muted); font-size: 0.9rem; }
.aia-comp__sub a { color: var(--pi-red); }

/* winners showcase */
.aia-comp-winners { margin: 0 0 8px; }
.aia-comp-tag {
	display: inline-block;
	background: var(--pi-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 4px;
	margin-bottom: 14px;
}

/* best-in-show slider */
.aia-bis { position: relative; border: 1px solid var(--pi-line); border-radius: 8px; overflow: hidden; background: var(--pi-alt); }
.aia-bis__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.aia-bis__track::-webkit-scrollbar { display: none; }
.aia-bis__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; aspect-ratio: 16 / 9; }
.aia-bis__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aia-bis__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: 0;
	background: rgba(255, 255, 255, 0.92); color: var(--pi-ink);
	font-size: 22px; line-height: 1; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.aia-bis__prev { left: 14px; }
.aia-bis__next { right: 14px; }
.aia-bis__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; }
.aia-bis__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0; }
.aia-bis__dots button.is-active { background: #fff; }
.aia-bis__meta { padding: 22px 2px 0; max-width: 760px; }
.aia-bis__meta h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 4px; }
.aia-bis__credit { color: var(--pi-red); font-weight: 600; font-size: 0.95rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.aia-bis__desc { color: var(--pi-ink); line-height: 1.6; }
.aia-comp-pdf { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--pi-red); text-decoration: none; }
.aia-comp-pdf:hover { text-decoration: underline; }

/* category winner cards */
.aia-comp-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 40px 0 8px;
}
.aia-comp-cat {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pi-line);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aia-comp-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09); }
.aia-comp-cat__media { display: block; aspect-ratio: 4 / 3; background: var(--pi-alt); overflow: hidden; }
.aia-comp-cat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aia-comp-cat__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.aia-comp-cat__level { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pi-red); }
.aia-comp-cat__title { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.aia-comp-cat__credit { color: var(--pi-muted); font-size: 0.9rem; }
.aia-comp-cat__pdf { margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: var(--pi-red); }

@media (max-width: 680px) {
	.aia-comp__bar { grid-template-columns: 1fr; }
	.aia-comp__cta { text-align: left; }
}

/* ---- year ("edition") cards ---- */
.aia-pi-yearcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
}
.aia-pi-yearcard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 30px 28px 26px;
	min-height: 220px;
	background: var(--pi-paper);
	border: 1px solid var(--pi-line);
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.aia-pi-yearcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
	border-color: var(--pi-ink);
}
.aia-pi-yearcard__label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
	font-weight: 700;
	color: var(--pi-muted);
}
.aia-pi-yearcard__year {
	font-size: clamp(2.8rem, 4vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	margin-top: auto;
}
.aia-pi-yearcard__summary {
	font-size: 0.92rem;
	color: var(--pi-muted);
}
.aia-pi-yearcard__cta {
	margin-top: 10px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--pi-red);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
a.aia-pi-yearcard:hover .aia-pi-yearcard__cta {
	opacity: 1;
	transform: translateY(0);
}

/* ---- merged year narrative (gala program + news folded inline) ---- */
.aia-program__merged {
	display: grid;
	gap: 40px;
}
.aia-program__merged-item {
	max-width: 760px;
}
.aia-program__merged-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pi-line);
}
.aia-program__merged-body {
	font-size: 1.06rem;
	line-height: 1.7;
}
.aia-program__merged-body p {
	margin: 0 0 1em;
}
.aia-program__merged-body a {
	color: var(--pi-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.aia-embed {
	margin: 24px 0;
	max-width: 760px;
}
.aia-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 6px;
	display: block;
}

/* ---- sponsors strip ---- */
.aia-pi-sponsor-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px 40px;
}
.aia-pi-sponsor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
}
.aia-pi-sponsor img {
	max-height: 64px;
	max-width: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
a.aia-pi-sponsor:hover img {
	filter: grayscale(0);
	opacity: 1;
}
.aia-pi-sponsor-name {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--pi-ink);
}

/* ---- card grid ---- */
.aia-pi-grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.aia-pi-card {
	display: flex;
	flex-direction: column;
	background: var(--pi-paper);
	border: 1px solid var(--pi-line);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aia-pi-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.aia-pi-card a {
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.aia-pi-card__media {
	aspect-ratio: 4 / 3;
	background: var(--pi-alt);
	overflow: hidden;
}
.aia-pi-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aia-pi-card--portrait .aia-pi-card__media {
	aspect-ratio: 1 / 1;
}
.aia-pi-card__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.aia-pi-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}
.aia-pi-card__credit {
	color: var(--pi-muted);
	font-size: 0.95rem;
}
.aia-pi-card__role {
	font-size: 0.9rem;
	color: var(--pi-ink);
}

/* ---- award badges ---- */
.aia-pi-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.aia-pi-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--pi-ink);
}
.aia-pi-badge--honor {
	background: var(--pi-ink);
	color: var(--pi-paper);
}
.aia-pi-badge--merit {
	background: var(--pi-alt);
}
.aia-pi-badge--citation {
	background: transparent;
}
.aia-pi-badge--cote {
	border-color: #2e7d32;
	color: #2e7d32;
}

/* ---- single ---- */
.aia-program--single .aia-program__hero {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 24px;
}
.aia-pi-single__media {
	margin: 0 0 32px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--pi-alt);
}
.aia-pi-single__media img {
	width: 100%;
	display: block;
}
.aia-pi-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--pi-line);
	border-bottom: 1px solid var(--pi-line);
	margin-bottom: 32px;
}
.aia-pi-single__meta div span {
	display: block;
}
.aia-pi-single__meta .k {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pi-muted);
	font-weight: 700;
	margin-bottom: 2px;
}
.aia-pi-single__body {
	font-size: 1.08rem;
	line-height: 1.7;
	max-width: 760px;
}
.aia-pi-single__body p {
	margin: 0 0 1.1em;
}
.aia-pi-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 28px 0 0;
}
.aia-pi-btn {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 0;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--pi-ink);
	color: var(--pi-ink);
}
.aia-pi-btn--primary {
	background: var(--pi-red);
	border-color: var(--pi-red);
	color: #fff;
}
.aia-program__back {
	display: inline-block;
	margin: 32px 0 0;
	color: var(--pi-muted);
	text-decoration: none;
	font-size: 0.95rem;
}
.aia-program__back:hover {
	color: var(--pi-red);
}

/* ---------------------------------------------------------------------------
 * Entity singles (Committee / Program / Competition) — roster pulled from UM.
 * ------------------------------------------------------------------------- */
.aia-program--entity .aia-program__cta { margin-top: 22px; }
.aia-program--entity .aia-ent-roster.aia-dir-grid { margin-top: 4px; }
.aia-ent-roster__role {
	display: inline-block;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--aia-red, #b1122c);
	margin: 0 0 4px;
}

/* ===========================================================================
 * Entity single — redesigned layout (2026)
 * Hero → About + sidebar → Events → News → People → Competition → Years
 * ========================================================================= */
.aia-entity {
	--ent-ink: var(--aia-ink, #1a1a1a);
	--ent-red: var(--aia-red, #fa4132);
	--ent-paper: var(--aia-paper, #fff);
	--ent-muted: var(--color-text-muted, rgba(110, 108, 102, 0.72));
	--ent-line: var(--color-border, #e5e3dd);
	--ent-alt: var(--color-background-alt, #f6f5f1);
	/* How far this container's own edge sits from the true viewport edge —
	   half the container's outside margin (0 once the viewport is narrower
	   than 1600px) plus its own 24px gutter. Used by the scroll-row card
	   rows below to bleed ONLY their right edge out to the viewport. */
	--ent-bleed-out: calc(max(0px, (100vw - var(--container-xl, 1600px)) / 2) + 24px);
	color: var(--ent-ink);
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 0 24px 96px;
}

/* ---- hero ---- */
.aia-entity__hero {
	position: relative;
	min-height: 200px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	margin-bottom: 100px;
	border-bottom: 2px solid var(--ent-ink);
}
.aia-entity__hero.has-image {
	min-height: 320px;
	border-bottom: none;
}
.aia-entity__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aia-entity__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}
.aia-entity__hero-content {
	position: relative;
	padding: 48px 0px 36px;
	width: 100%;
}
.aia-entity__hero.has-image .aia-entity__hero-content { color: #fff; }
.aia-entity__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 700;
	color: var(--ent-red);
	margin: 0 0 10px;
}
.aia-entity__hero.has-image .aia-entity__eyebrow { color: rgba(255, 255, 255, 0.75); }
.aia-entity__title {
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	line-height: 1.06;
	margin: 0 0 12px;
	font-weight: 800;
}
.aia-entity__excerpt {
	font-size: 1.1rem;
	max-width: 680px;
	color: var(--ent-muted);
	margin: 0;
}
.aia-entity__hero.has-image .aia-entity__excerpt { color: rgba(255, 255, 255, 0.7); }
.aia-entity__cta { margin: 18px 0 0; }
.aia-entity__btn {
	display: inline-block;
	background: var(--ent-red);
	color: #fff;
	font-weight: 700;
	padding: 13px 28px;
	border-radius: 0;
	text-decoration: none;
	font-size: 1rem;
}
.aia-entity__btn:hover { filter: brightness(0.94); }

/* ---- about: description + sticky sidebar ---- */
.aia-entity__about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 56px;
	margin-bottom: 48px;
	align-items: start;
}
.aia-entity__desc {
	max-width: 760px;
	/* Without this, a grid item's automatic min-width defaults to using its
	   own max-width as a floor once the column has nothing else to size
	   against — the 860px breakpoint below collapses .aia-entity__about to
	   a bare `1fr` track (unlike the desktop `minmax(0, 1fr)`), so at that
	   point this 760px cap was winning over the real ~413px available
	   width, and .aia-entity__sidebar (sharing that same track) inherited
	   the overflow too. */
	min-width: 0;
}
/* Prose rules use child combinators on purpose: they style loose top-level
   content only. Anything inside a block wrapper (matisse-section, hero,
   cards…) is the block's own CSS's job — descendant selectors here would
   override it, since this file loads after the block styles. */
.aia-entity__desc > p,
.aia-entity__desc > ul,
.aia-entity__desc > ol,
.aia-entity__desc > blockquote {
	font-size: 1.06rem;
	line-height: 1.72;
}
.aia-entity__desc > p { margin: 0 0 1.1em; }
.aia-entity__desc > h2, .aia-entity__desc > h3 {
	margin: 1.8em 0 0.6em;
	font-weight: 700;
}
.aia-entity__desc > h2:first-child, .aia-entity__desc > h3:first-child { margin-top: 0; }
.aia-entity__desc > p a,
.aia-entity__desc > ul a,
.aia-entity__desc > ol a { color: var(--ent-red); text-decoration: underline; text-underline-offset: 2px; }

/* Program and committee singles open the desc column with the eyebrow/title
   (the hero is image-only, like events) — sized to the cta-section block's
   type scale rather than the hero display size. */
.aia-entity--prog .aia-entity__desc > .aia-entity__eyebrow,
.aia-entity--committee .aia-entity__desc > .aia-entity__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0 0 8px;
}
.aia-entity--prog .aia-entity__desc > .aia-entity__title,
.aia-entity--committee .aia-entity__desc > .aia-entity__title {
	font-size: var(--text-3xl, 2rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 24px;
}
.aia-entity--prog .aia-entity__desc > .aia-entity__excerpt,
.aia-entity--committee .aia-entity__desc > .aia-entity__excerpt { margin: 0 0 1.1em; }
.aia-entity--prog .aia-entity__desc > .aia-entity__cta,
.aia-entity--committee .aia-entity__desc > .aia-entity__cta { margin: 0 0 1.6em; }
/* When the imageless hero is skipped the about section leads the page and
   takes over the hero's top spacing. */
.aia-entity__about:first-child { padding-top: 64px; }

.aia-entity__sidebar {
	position: sticky;
	top: 32px;
}

/* ---------------------------------------------------------------------------
 * Sidebox — mist fill, 3px red top rule, square corners.
 * Markup comes from aia_ent_render_sidebox(): preset rows + authored slot.
 * ------------------------------------------------------------------------- */
.aia-sidebox {
	background: var(--ent-alt, #f4f4f2);
	border: 1px solid var(--ent-line, #e3e2df);
	border-top: 3px solid var(--ent-red, #fa4132);
	border-radius: 0;
	padding: 24px 26px;
}
.aia-sidebox__head {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
	color: var(--ent-ink, #1a1a1a);
	margin: 0 0 20px;
}
.aia-sidebox__hr {
	border: 0;
	border-top: 1px solid var(--ent-line, #e3e2df);
	margin: 18px 0;
}
.aia-sidebox__row { margin-bottom: 16px; }
.aia-sidebox__row:last-child { margin-bottom: 0; }
.aia-sidebox__k {
	display: block;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ent-muted, #6e6c66);
	margin: 0 0 3px;
}
.aia-sidebox__v {
	display: block;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--ent-ink, #1a1a1a);
	line-height: 1.5;
}
.aia-sidebox__v a {
	color: var(--ent-red, #fa4132);
	text-decoration: underline;
	text-decoration-color: var(--ent-red, #fa4132);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.18s ease;
}
.aia-sidebox__v a:hover { opacity: 0.75; }

/* authored block / HTML slot */
.aia-sidebox__slot > *:first-child { margin-top: 0; }
.aia-sidebox__slot > *:last-child { margin-bottom: 0; }
.aia-sidebox__slot p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ent-muted, #6e6c66);
	margin: 0 0 12px;
}
.aia-sidebox__slot img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 0 12px;
}
/* authored lists — house dash marker (style.css), tightened for the box */
.aia-sidebox__slot ul {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.aia-sidebox__slot ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 8px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ent-muted, #6e6c66);
}
.aia-sidebox__slot ul li:last-child { margin-bottom: 0; }
.aia-sidebox__slot ul li::before {
	content: "\2013";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	color: var(--ent-red, #fa4132);
}
.aia-sidebox__slot ol {
	list-style: decimal;
	margin: 0 0 12px;
	padding-left: 18px;
}
.aia-sidebox__slot ol li {
	margin-bottom: 8px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ent-muted, #6e6c66);
}
.aia-sidebox__slot ol li:last-child { margin-bottom: 0; }
.aia-sidebox__slot ol li::marker { color: var(--ent-red, #fa4132); }
.aia-sidebox__slot a:not(.aia-sidebox__btn) {
	color: var(--ent-red, #fa4132);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* helper classes offered to editors in the meta box */
.aia-sidebox__btn {
	display: block;
	text-align: center;
	background: var(--ent-red, #fa4132);
	color: #fff;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 13px 20px;
	text-decoration: none;
	transition: filter 0.18s ease;
}
.aia-sidebox__btn:hover { filter: brightness(0.92); color: #fff; }
.aia-sidebox__link {
	display: inline-block;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--ent-red, #fa4132);
	text-decoration: none;
}
.aia-sidebox__link:hover { text-decoration: underline; }

/* static (non-authored) sidebox content — intro copy, a second sub-heading,
   and a fine-print footnote. Used by the Upcoming Events "Have an event?"
   box (inc/events-list.php); the entity sidebox never needs these since its
   content is either a preset row or the authored __slot. */
.aia-sidebox__intro {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ent-muted, #6e6c66);
	margin: 0 0 20px;
}
.aia-sidebox__subhead {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: var(--ent-ink, #1a1a1a);
	margin: 0 0 16px;
}
.aia-sidebox__fine {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ent-line, #e3e2df);
	font-size: 0.8rem;
	line-height: 1.5;
	color: #a3a29c;
}

/* ---- section headings (shared by events, news, people, years) ---- */
.aia-entity__section {
	margin: 0 0 48px;
}
.aia-entity__section-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-bottom: 1px solid var(--ent-line);
	padding-bottom: 10px;
	margin-bottom: 24px;
}
.aia-entity__section-head h2 {
	font-size: 1.5rem;
	margin: 0;
	font-weight: 700;
}
.aia-entity__section-head .count {
	color: var(--ent-muted);
	font-size: 0.9rem;
}

/* ---- Related Events bar (single-event template) — replaces the old
   plain-text prev/next event nav. Deliberately its own header pattern,
   not .aia-entity__section-head: title + count sit together as one block
   on the left, and the "All upcoming events" link is float:right rather
   than a flex space-between, per how this one was speced. overflow:hidden
   on the head is the clearfix for that float. Card row below reuses
   .aia-entity__events as-is — same scroll/bleed/notebook treatment as
   every other event row on the site. ---- */
.aia-entity__relevents-head {
	overflow: hidden;
	border-bottom: 1px solid var(--ent-line);
	padding-bottom: 10px;
	margin-bottom: 24px;
}
.aia-entity__relevents-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
}
.aia-entity__relevents-title .count {
	color: var(--ent-muted);
	font-size: 0.9rem;
	font-weight: 400;
}
/* .aia-entity twice: TEC's own tribe-events-full.css ships
   `.tribe-events-single a { color: var(--tec-color-link-accent) }` (their
   blue) — the body carries `tribe-events-single` on every single-event
   page, so that selector's extra element (`a`) makes it more specific
   than a lone class and silently wins over both this link's color and
   .aia-ue-card's own `color: inherit`. Doubling the class here is the
   minimal bump needed to beat it, on this page only. */
.aia-entity.aia-entity .aia-entity__relevents-all {
	float: right;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--ent-red);
	text-decoration: none;
}
.aia-entity.aia-entity .aia-ue-card,
.aia-entity.aia-entity .aia-ue-card__title {
	color: var(--ent-ink, #1a1a1a);
}
.aia-entity__relevents-all:hover { text-decoration: underline; }

/* ---- upcoming events strip — reuses .aia-ue-card (inc/events-list.php's
   matisse_render_event_card()), the exact same card the /events/ archive
   uses. Left at its own default "Cornell notes" layout (image left, 1:1) —
   no override needed for that; the component only needs help switching
   the OTHER way, to "Notebook" (see aia-dir-grid--notebook below). ---- */
/* Display/scroll mechanics now live in the shared scroll-row block below
   (.aia-entity__events is listed alongside .aia-dir-grid--scroll there),
   since every related-content row on an entity single shares one
   treatment — see that block's comment for the full rationale. */

/* ---- news strip — reuses .aia-dir-card--person (aia-directory.css) as a
   whole-card link; these three rules are the pieces that card doesn't
   already have (a date, a "Read more" CTA, and an underlined title — the
   Member/Firm Directory intentionally leaves the title bare, so the
   underline is scoped to .aia-entity, not the shared class). ---- */
.aia-entity a.aia-dir-card {
	text-decoration: none;
}
.aia-entity .aia-dir-card__date {
	display: block;
	margin: 10px 0 0;
	font-family: ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #a3a29c;
}
.aia-entity .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(--ent-red, #fa4132);
}
.aia-entity .aia-dir-card--person .aia-dir-card__name {
	text-decoration: underline;
	text-decoration-color: var(--ent-line, #e3e2df);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.aia-entity .aia-dir-card--person:hover .aia-dir-card__name {
	color: var(--ent-red, #fa4132);
	text-decoration-color: var(--ent-red, #fa4132);
}

/* ---- horizontal drag/scroll row — shared by every related-content row on
   an entity single: Upcoming events (.aia-entity__events), Related news
   (.aia-dir-grid--notebook), Related pages and Past years (both bare
   .aia-dir-grid--scroll). One card width, one bleed treatment, everywhere.
   Bound by js/drag-scroll.js (mouse drag); touch gets native momentum
   scroll from overflow-x + -webkit-overflow-scrolling. Doubled-up
   .aia-dir-grid.aia-dir-grid--scroll selector so it always wins over
   .aia-dir-grid's own display:grid regardless of stylesheet load order —
   .aia-entity__events doesn't need that trick, nothing else styles its
   display.
   Left edge is left alone entirely — cards just scroll in from under
   whatever's above, same as the page's normal left margin. Only the right
   edge bleeds past .aia-entity's own padding out to the true viewport
   edge, via --ent-bleed-out (see .aia-entity above); a small 16px right
   padding keeps the last card from touching the browser edge outright. */
.aia-entity__events,
.aia-dir-grid.aia-dir-grid--scroll {
	display: flex;
	flex-wrap: nowrap;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	padding-bottom: 6px;
	margin-right: calc(-1 * var(--ent-bleed-out, 0px));
	padding-right: 16px;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.aia-entity__events::-webkit-scrollbar,
.aia-dir-grid.aia-dir-grid--scroll::-webkit-scrollbar { height: 6px; }
.aia-entity__events::-webkit-scrollbar-track,
.aia-dir-grid.aia-dir-grid--scroll::-webkit-scrollbar-track { background: transparent; }
.aia-entity__events::-webkit-scrollbar-thumb,
.aia-dir-grid.aia-dir-grid--scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 3px;
}
.aia-entity__events.is-dragging,
.aia-dir-grid.aia-dir-grid--scroll.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}
.aia-entity__events .aia-ue-card,
.aia-dir-grid--scroll .aia-dir-card--person {
	flex: 0 0 auto;
	width: clamp(320px, 80vw, 502px);
	scroll-snap-align: start;
}

/* ---- "Notebook" orientation for .aia-dir-card--person — image on top
   (16:9) instead of its own default "Cornell notes" (image left, 1:1).
   .aia-dir-card--person already collapses to a similar (3:2) shape on its
   own at 560px viewport width; this applies the 16:9 version
   unconditionally, regardless of viewport, to whichever grid opts in. ---- */
.aia-dir-grid--notebook .aia-dir-card--person {
	grid-template-columns: 1fr;
	grid-template-areas: "photo" "title" "body";
}
.aia-dir-grid--notebook .aia-dir-card--person .aia-dir-card__photo {
	aspect-ratio: 16 / 9;
	border-right: 0;
	border-bottom: 1px solid var(--ent-line, #e3e2df);
}

/* ---- @624px: every related-content row on an entity single switches to
   Notebook orientation (image on top, 16:9) regardless of its desktop
   orientation — Upcoming events, Related pages/Past years, and Members/
   Jury (already a scroll row itself below 991px, see above) are Cornell
   above this breakpoint; Related news is already Notebook (just at 16:9
   from the rule above already). A row down to exactly one card stretches
   that card to the row's full width instead of clamping to the usual
   card width — :only-child, so it only fires when there's truly one item,
   not just when scrolled to the last one. ---- */
@media (max-width: 624px) {
	.aia-entity__events .aia-ue-card {
		flex-direction: column;
	}
	.aia-entity__events .aia-ue-card__media {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-right: 0;
		border-bottom: 1px solid var(--ent-line, #e3e2df);
		align-self: auto;
	}
	.aia-dir-grid--scroll .aia-dir-card--person,
	.aia-ent-roster .aia-dir-card--person {
		grid-template-columns: 1fr;
		grid-template-areas: "photo" "title" "body";
	}
	.aia-dir-grid--scroll .aia-dir-card--person .aia-dir-card__photo,
	.aia-ent-roster .aia-dir-card--person .aia-dir-card__photo {
		aspect-ratio: 16 / 9;
		border-right: 0;
		border-bottom: 1px solid var(--ent-line, #e3e2df);
	}
	.aia-entity__events .aia-ue-card:only-child,
	.aia-dir-grid--scroll .aia-dir-card--person:only-child,
	.aia-ent-roster .aia-dir-card--person:only-child {
		width: 100%;
	}
}

/* ---- roster inside entity ---- */
.aia-entity__section .aia-ent-roster.aia-dir-grid { margin-top: 0; }
.aia-entity__section .aia-dir-card { border-radius: 0; }
.aia-entity__section .aia-dir-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: 4px 4px 0 0 var(--ent-ink);
}

/* ---- @1300px: Members/Jury drops from its default .aia-dir-grid column
   count (3, from aia-directory.css) to exactly two even columns — a
   higher-specificity, roster-only breakpoint than aia-directory.css's own
   generic 1200px one, so it wins for the roster without touching Member/
   Firm Directory pages. grid-template-columns has no effect once the
   991px rule below switches the roster to display:flex, so there's no
   conflict between the two blocks despite the overlapping ranges. ---- */
@media (max-width: 1300px) {
	.aia-ent-roster.aia-dir-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- @991px: Members/Jury switches to the same overflow-scroll dynamic
   as the other related-content rows (uniform card width, right-edge-only
   bleed). Above 991px it stays the normal multi-row .aia-dir-grid — a
   roster can run to a dozen+ people, which reads fine as a wrapping grid
   at full desktop width but not once the grid narrows toward tablet. Its
   own dedicated block (not merged into the always-on scroll-row rules
   above) since this one only applies below 991px, not at every width. */
@media (max-width: 991px) {
	.aia-ent-roster.aia-dir-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 22px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		cursor: grab;
		padding-bottom: 6px;
		margin-right: calc(-1 * var(--ent-bleed-out, 0px));
		padding-right: 16px;
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
	}
	.aia-ent-roster.aia-dir-grid::-webkit-scrollbar { height: 6px; }
	.aia-ent-roster.aia-dir-grid::-webkit-scrollbar-track { background: transparent; }
	.aia-ent-roster.aia-dir-grid::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.25);
		border-radius: 3px;
	}
	.aia-ent-roster.aia-dir-grid.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		user-select: none;
	}
	.aia-ent-roster .aia-dir-card--person {
		flex: 0 0 auto;
		width: clamp(320px, 80vw, 502px);
		scroll-snap-align: start;
	}
}

/* ---- back link ---- */
.aia-entity__back {
	display: inline-block;
	margin: 0 0 0;
	color: var(--ent-muted);
	text-decoration: none;
	font-size: 0.95rem;
}
.aia-entity__back:hover { color: var(--ent-red); }

/* ===========================================================================
 * Entity archive — committees index (directory-card grid)
 * ========================================================================= */
.aia-entity-archive {
	--ent-ink: var(--aia-ink, #1a1a1a);
	--ent-red: var(--aia-red, #fa4132);
	--ent-muted: var(--color-text-muted, rgba(110, 108, 102, 0.72));
	--ent-line: var(--color-border, #e5e3dd);
	color: var(--ent-ink);
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 40px 24px 96px;
}
.aia-entity-archive__head {
	border-bottom: 2px solid var(--ent-ink);
	padding-bottom: 14px;
	margin-bottom: 22px;
}
.aia-entity-archive__eyebrow {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ent-red);
	margin: 0 0 8px;
}
.aia-entity-archive__title {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 800;
	font-size: clamp(2rem, 3.6vw, 2.4rem);
	letter-spacing: -0.02em;
	margin: 0;
}
.aia-entity-archive__lede {
	font-size: 1.06rem;
	line-height: 1.7;
	color: var(--ent-muted);
	max-width: 70ch;
	margin: 0 0 40px;
}
.aia-entity-archive__lede p { margin: 0 0 1em; }
.aia-entity-archive__lede a {
	color: var(--ent-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.aia-entity-archive__empty { color: var(--ent-muted); }

/* fact pills carrying the sidebox headline data onto the card */
.aia-committee-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}
.aia-committee-card__fact {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ent-muted);
	border: 1px solid var(--ent-line);
	padding: 4px 9px;
}

@media (max-width: 600px) {
	.aia-entity-archive { padding: 24px 16px 64px; }
}

/* ---- responsive ---- */
@media (max-width: 860px) {
	.aia-entity__about {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.aia-entity__desc { order: 0; }
	.aia-entity__sidebar {
		position: static;
		order: -1; /* sidebox stacks ON TOP of the entry when collapsed */
	}
	.aia-entity__hero.has-image { min-height: 240px; }
	.aia-entity__hero-content { padding: 32px 24px 28px; }
}
@media (max-width: 600px) {
	.aia-entity { padding: 0 16px 64px; }
	.aia-entity__about:first-child { padding-top: 40px; }
	.aia-entity__hero { border-radius: 0; margin-left: -16px; margin-right: -16px; }
	.aia-entity__hero-content { padding: 24px 20px; }
	.aia-entity__event-card { flex: 0 0 85%; }
}

/* =============================================================================
 * Upcoming Events archive — tribe/events/v2/list.php + inc/events-list.php.
 * Single-column card list + the "Have an event?" .aia-sidebox, paginated by
 * its own aia-events-list.js. Fully self-contained under the `.aia-ue`/
 * `.aia-ue-card` namespace — deliberately NOT the `.aia-dir`/`.aia-dir-card`
 * classes from assets/css/aia-directory.css, which belong to the Member/Firm
 * directories: reusing them here leaked that page's own padding into this
 * layout and fought with its own hover transform on `.aia-dir-card`.
 * ========================================================================== */
.aia-ue {
	width: 100%;
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 56px 24px 0;
}
.aia-ue__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.aia-ue__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(--aia-red, #fa4132);
}
.aia-ue__title {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 2.4rem;
	letter-spacing: -0.02em;
	margin: 0;
}
.aia-ue__intro {
	margin: 18px 0 0;
	padding-bottom: 30px;
	border-bottom: 2px solid var(--aia-ink, #1a1a1a);
}
.aia-ue__intro p {
	max-width: 74ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--aia-slate, #6e6c66);
	margin: 0 0 20px;
}
/* "already open" pill-contract CTA — same modifier convention as .aia-ftr__btn */
.aia-ue__cta.matisse-btn {
	--pill: var(--aia-red);
	--text: var(--aia-paper);
	--circle: var(--aia-paper);
	--arrow: var(--aia-ink);
	--pill-rest: -0.5em;
	--pill-hover: -0.5em;
	--shrink: 1;
	font-size: 1rem !important;
}

/* Same max-width + horizontal padding as .aia-ue above, so the card/sidebox
   edges line up with the rule under the intro/CTA. .aia-ue__pager-root is a
   bare JS hook (see below) — it must NOT add any padding/margin of its own,
   or the list column drifts right of that edge again. */
.aia-ue__wrap {
	max-width: var(--container-xl, 1600px);
	margin: 0 auto;
	padding: 34px 0px 96px 0px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 56px;
	align-items: start;
}
.aia-ue__aside { align-self: stretch; }
.aia-ue__aside .aia-sidebox { position: sticky; top: 32px; }

/* Pagination root (aia-events-list.js) — deliberately unstyled, see comment above. */
.aia-ue__pager-root { display: block; }

/* Query container for the card layout switch below. Deliberately set here,
   not on .aia-ue-card itself: a container can't reliably restyle its own
   layout-affecting properties (flex-direction) from its own @container rule
   — verified empirically, aspect-ratio on a child applied but flex-direction
   on the querying element itself silently did not. Every card stretches to
   this list's full width (default flex cross-axis stretch), so the list's
   inline-size is equivalent to each card's for this purpose. */
.aia-ue__list {
	container-type: inline-size;
	container-name: aia-ue-list;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.aia-ue__empty { color: var(--aia-slate, #6e6c66); padding: 40px 0; }

/* ---- pagination controls — same visual spec as .aia-dir__pager, own namespace ---- */
.aia-ue__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin: 40px 0 0;
}
.aia-ue__page {
	appearance: none;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--aia-line, #e3e2df);
	background: var(--aia-paper, #fff);
	color: var(--aia-ink, #1a1a1a);
	font: inherit;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aia-ue__page:hover:not(:disabled):not(.is-active) { border-color: var(--aia-ink, #1a1a1a); }
.aia-ue__page.is-active { background: var(--aia-ink, #1a1a1a); color: #fff; border-color: var(--aia-ink, #1a1a1a); cursor: default; }
.aia-ue__page:disabled { opacity: 0.4; cursor: default; }
.aia-ue__gap { color: var(--aia-slate, #6e6c66); padding: 0 4px; }

/* ---- event card ----
 * Full writeup — both layouts, why this is a container query, the card-width
 * math, and the three overflow mechanisms below — is in ./aia-ue-card.md.
 * Also documented in the public style guide, Molecules → Upcoming Events Card.
 *
 * Border/radius/hover match the sitewide "brutalist" card language (Event/
 * Announcement Card §3.2 in the style guide; real spec lives in
 * blocks/src/latest-updates/style.scss): sharp corners, #d1d5db border, and a
 * hard offset shadow — not the WPBDP directory's rounded/soft-lift language.
 *
 * Two named layouts, switched by the CARD'S OWN rendered width (a container
 * query against .aia-ue__list, not a viewport media query — at desktop
 * widths the card's width comes from the 2-column grid math in
 * .aia-ue__wrap, not the viewport, so a media query can't reliably tell when
 * the card itself has gotten narrow):
 *   - "Cornell notes" (default, card ≥ 640px) — image left (1:1), content right.
 *   - "Notebook" (card < 640px) — image on top (3:2), content below.
 */
.aia-ue-card {
	display: flex;
	align-items: stretch;
	min-height: 200px;
	max-width: 720px;
	border: 1px solid #d1d5db;
	border-radius: 0;
	background: var(--aia-paper, #fff);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.aia-ue-card:hover,
.aia-ue-card:focus-within {
	z-index: 2;
	box-shadow: 4px 4px 0 0 #000;
}
.aia-ue-card:hover .aia-ue-card__title,
.aia-ue-card:focus-within .aia-ue-card__title { color: var(--aia-red, #fa4132); }
@media (prefers-reduced-motion: no-preference) {
	.aia-ue-card {
		transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.aia-ue-card:hover,
	.aia-ue-card:focus-within {
		transform: translate(-4px, -4px);
	}
}
.aia-ue-card__media {
	position: relative;
	flex: 0 0 auto;
	width: 200px;
	min-width: 200px;
	aspect-ratio: 1 / 1;
	align-self: flex-start;
	overflow: hidden;
	background: var(--aia-mist, #f4f4f2);
	border-right: 1px solid var(--aia-line, #e3e2df);
}
/* no-image placeholder — same dotted-mist pattern as .aia-dir-texture, kept
   as its own rule so this component has no dependency on aia-directory.css. */
.aia-ue-card__media--empty {
	background-color: var(--aia-mist, #f4f4f2);
	background-image: radial-gradient(#c9c7c1 1.4px, transparent 1.4px);
	background-size: 16px 16px;
	background-position: 0 0;
}
.aia-ue-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aia-ue-card__datebox {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	padding: 7px 8px 6px;
	background: var(--aia-paper, #fff);
	border-left: 1px solid var(--aia-line, #e3e2df);
	border-bottom: 1px solid var(--aia-line, #e3e2df);
	border-top: 3px solid var(--aia-red, #fa4132);
}
.aia-ue-card__datebox-mo {
	font-family: ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--aia-red, #fa4132);
}
.aia-ue-card__datebox-num {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	margin: 1px 0;
}
.aia-ue-card__datebox-wd {
	font-family: ui-monospace, monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--aia-slate, #6e6c66);
}
.aia-ue-card__body {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
.aia-ue-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
	min-height: 24px;
}
.aia-ue-card__cats { display: flex; gap: 6px; flex-wrap: wrap; }
.aia-ue-card__cat {
	font-family: ui-monospace, monospace;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aia-red, #fa4132);
	border: 1px solid var(--aia-red, #fa4132);
	padding: 2px 7px;
}
.aia-ue-card__cost {
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 14px;
	background: var(--aia-mist, #f4f4f2);
	padding: 3px 10px;
	white-space: nowrap;
}
.aia-ue-card__title {
	display: block;
	margin: 0 0 12px;
	font-family: var(--font-heading, "Archivo", sans-serif);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.25;
	transition: color 0.2s ease;
	text-decoration: underline;
	text-decoration-color: var(--aia-line, #e3e2df);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.aia-ue-card__meta {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.aia-ue-card__line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--aia-slate, #6e6c66);
}
.aia-ue-card__line svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--aia-slate, #6e6c66);
	stroke-width: 1.7;
}

/* ---- responsive: sidebox follows the list when the grid collapses ---- */
@media (max-width: 991px) {
	.aia-ue__wrap { grid-template-columns: 1fr; gap: 24px; }
	.aia-ue__pager-root { order: 0; }
	.aia-ue__aside { order: 1; }
	.aia-ue__aside .aia-sidebox { position: static; }
}
/* "Notebook" layout — card narrower than 640px (see .aia-ue-card comment above). */
@container aia-ue-list (max-width: 640px) {
	.aia-ue-card { flex-direction: column; }
	.aia-ue-card__media {
		width: 100%;
		aspect-ratio: 3 / 2;
		border-right: 0;
		border-bottom: 1px solid var(--aia-line, #e3e2df);
		align-self: auto;
	}
}
@media (max-width: 600px) {
	.aia-ue { padding-left: 16px; padding-right: 16px; }
	.aia-ue__wrap { padding-right: 0px; }
}