/*
 * Associations Now Content UI — Deep Dives (front end).
 *
 * Overview page (hero + anchor nav + topic sections + sponsor), the index cards,
 * and the component-article context (banner + "more in this Deep Dive"). Cards
 * within sections reuse featured.css. Accent follows the theme's primary accent.
 */

.asae-acu-dd {
	--dd-accent: var(--nv-primary-accent, #bd491e);
	--dd-ink: var(--nv-text-color, #2b2b2b);
	--dd-muted: var(--asae-text-muted, #595959);
	--dd-line: var(--asae-border-subtle, #dddddd);
}

/* ── Overview hero (cover: image or gradient, text overlaid) ──────────────── */
.asae-acu-dd__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	margin: 0.5em 0 1.75em;
	padding: 2.25em 2.25em 2em;
	border-radius: var(--asae-radius, 3px);
	overflow: hidden;
	color: #fff;
	/* Fallback when the Deep Dive has no feature image. */
	background: linear-gradient(135deg, #6f2a12 0%, var(--dd-accent) 55%, #d1693e 100%);
}
.asae-acu-dd__hero--image {
	background: #232323;
}
.asae-acu-dd__hero-media {
	position: absolute;
	inset: 0;
	margin: 0;
}
.asae-acu-dd__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Legibility scrim so overlaid text reads on any image. */
.asae-acu-dd__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 11, 9, 0.85) 0%, rgba(14, 11, 9, 0.45) 42%, rgba(14, 11, 9, 0.08) 100%);
}
.asae-acu-dd__hero-body {
	position: relative;
	z-index: 1;
	max-width: 46rem;
}
/* Kicker type comes from the shared .asae-kicker class (Customizer → Additional
   CSS); only placement and the on-image colour live here. */
.asae-acu-dd__kicker {
	margin: 0 0 0.4em;
}
.asae-acu-dd__hero .asae-acu-dd__kicker {
	color: #fff;
	opacity: 0.92;
}
.asae-acu-dd__title {
	margin: 0 0 0.3em;
	line-height: 1.08;
}
.asae-acu-dd__hero .asae-acu-dd__title {
	color: #fff;
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
.asae-acu-dd__subtitle {
	margin: 0 0 0.5em;
	font-size: 1.35rem;
	line-height: 1.3;
	color: var(--dd-muted);
}
.asae-acu-dd__hero .asae-acu-dd__subtitle {
	color: rgba(255, 255, 255, 0.92);
}
.asae-acu-dd__date {
	display: block;
	margin: 0.4em 0 0;
	font-size: 0.85rem;
	color: var(--dd-muted);
}
.asae-acu-dd__hero .asae-acu-dd__date {
	color: rgba(255, 255, 255, 0.85);
}

/* ── Intro (description + sponsor, below the hero, on white) ──────────────── */
.asae-acu-dd__intro {
	margin: 0 0 2em;
}
.asae-acu-dd__description {
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--dd-ink);
}
.asae-acu-dd__description > :first-child {
	margin-top: 0;
}
.asae-acu-dd__description > :last-child {
	margin-bottom: 0;
}

@media (max-width: 680px) {
	.asae-acu-dd__hero {
		min-height: 300px;
		padding: 1.5em 1.35em 1.35em;
		border-radius: var(--asae-radius, 3px);
	}
}

/* ── Sponsor unit (overview + article banner) ────────────────────────────── */
.asae-acu-dd__sponsor {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
	margin: 1em 0 0;
}
.asae-acu-dd__sponsor-label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dd-muted);
}
.asae-acu-dd__sponsor-logo {
	display: block;
	max-height: 46px;
	width: auto;
}
.asae-acu-dd__sponsor-link {
	display: inline-flex;
	align-items: center;
}

/* ── Anchor nav ("tabs", non-sticky) ─────────────────────────────────────── */
.asae-acu-dd__nav {
	margin: 0 0 1.5em;
	border-bottom: 2px solid var(--dd-line);
}
.asae-acu-dd__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.asae-acu-dd__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.6em 0.15em;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	font-weight: 700;
	text-decoration: none;
	color: var(--dd-ink);
}
.asae-acu-dd__nav-link:hover,
.asae-acu-dd__nav-link:focus-visible {
	border-bottom-color: var(--dd-accent);
	color: var(--dd-accent);
}

/* ── Topic sections ──────────────────────────────────────────────────────── */
.asae-acu-dd__section {
	margin: 0 0 2.5em;
	scroll-margin-top: 1.5em;
}
.asae-acu-dd__section-title {
	/* !important on margin-top to beat the theme's `h2 { margin-top: 2em !important }`;
	   section separation comes from the section's own bottom margin. */
	margin: 0 0 0.9em !important;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--dd-line);
}

/* ── Component-article banner ────────────────────────────────────────────── */
.asae-acu-dd-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 0.75em;
	margin: 0 0 1.25em;
	padding: 0.7em 1em;
	border-left: 4px solid var(--dd-accent);
	background: var(--asae-surface, #f7f7f7);
	border-radius: 0 var(--asae-radius, 3px) var(--asae-radius, 3px) 0;
}
.asae-acu-dd-banner__title {
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	color: var(--dd-ink);
}
.asae-acu-dd-banner__title:hover,
.asae-acu-dd-banner__title:focus-visible {
	text-decoration: underline;
	color: var(--dd-accent);
}
.asae-acu-dd-banner .asae-acu-dd__sponsor {
	margin: 0 0 0 auto;
}

/* ── Sidebar "More in this Deep Dive" ────────────────────────────────────── */
.asae-acu-dd-more__list {
	margin: 0 0 0.75em;
	padding: 0;
	list-style: none;
}
.asae-acu-dd-more__list li {
	padding: 0.5em 0;
	border-bottom: 1px solid var(--dd-line);
	line-height: 1.35;
}
.asae-acu-dd-more__list a {
	text-decoration: none;
	font-weight: 600;
}
.asae-acu-dd-more__all {
	font-weight: 700;
	text-decoration: none;
	color: var(--dd-accent);
}

/* ── Index (archive) ─────────────────────────────────────────────────────── */
.asae-acu-dd-archive__intro {
	max-width: 46em;
	color: var(--dd-muted);
	font-size: 1.05rem;
}
.asae-acu-dd-archive__list {
	margin: 1.75em 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.75em;
}
.asae-acu-dd-card {
	display: grid;
	grid-template-columns: minmax(0, 45%) 1fr;
	align-items: stretch;
	background: var(--nv-site-bg, #fff);
	border: 1px solid var(--dd-line);
	border-radius: var(--asae-radius, 3px);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.asae-acu-dd-card:hover,
.asae-acu-dd-card:focus-within {
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.13);
	transform: translateY(-3px);
}
.asae-acu-dd-card__media {
	position: relative;
	display: block;
	min-height: 240px;
	overflow: hidden;
	background: var(--asae-surface, #f7f7f7);
}
.asae-acu-dd-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.asae-acu-dd-card:hover .asae-acu-dd-card__img {
	transform: scale(1.045);
}
.asae-acu-dd-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.82);
	background: linear-gradient(135deg, var(--dd-accent) 0%, #6f2a12 100%);
}
.asae-acu-dd-card__body {
	align-self: center;
	padding: 1.75em 1.9em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
/* The theme injects `h2 { margin-top: 2em !important }`, which in this flex
   column stacks a large gap under the "Deep Dive" kicker. Spacing is handled by
   the flex `gap`, so zero the children's own margins (needs !important to beat
   the theme rule). */
.asae-acu-dd-card__body > * {
	margin: 0 !important;
}
.asae-acu-dd-card__kicker {
	margin: 0;
}
.asae-acu-dd-card__title {
	margin: 0;
	font-size: 1.65rem;
	line-height: 1.14;
}
.asae-acu-dd-card__title a {
	text-decoration: none;
	color: var(--dd-ink);
}
.asae-acu-dd-card__title a:hover,
.asae-acu-dd-card__title a:focus-visible {
	color: var(--dd-accent);
}
.asae-acu-dd-card__subtitle {
	margin: 0;
	color: var(--dd-muted);
	font-size: 1.05rem;
	line-height: 1.45;
}
.asae-acu-dd-card__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0.25em 0 0;
}
.asae-acu-dd-card__topic {
	/* inline-flex, not inline-block: the icon and the label need to sit on one
	   centred row inside the pill, and the pair must never break across lines. */
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.7em;
	border: 1px solid var(--dd-line);
	border-radius: 999px;
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--dd-ink);
}
.asae-acu-dd-card__topic:hover,
.asae-acu-dd-card__topic:focus-visible {
	border-color: var(--dd-accent);
	color: var(--dd-accent);
}
/* ── Interior-topic icons ────────────────────────────────────────────────────
   One icon per interior topic, chosen per Deep Dive, drawn in three places at
   three sizes. Always the site accent — per-topic colour was considered and
   rejected, because twelve editor-chosen colours on one archive page is not a
   design, it is a colour wheel.

   Sized in `em` throughout so each one scales with the text it sits beside: the
   pill stays legible at the card's 0.85rem, and the section heading's icon
   follows the theme's h2 size rather than being pinned to a pixel value that is
   right on one breakpoint only. */
.asae-acu-dd-icon {
	color: var(--dd-accent);
	/* Never let the icon be squeezed by a long label in a flex row. */
	flex: none;
}

/* 1. Archive pill — small enough to live inside the pill without growing it. */
.asae-acu-dd-icon--pill {
	font-size: 0.9em;
}

/* 2. Section nav ("tabs") — matches the label's own size. */
.asae-acu-dd-icon--tab {
	font-size: 1em;
}

/* 3. Section heading — the largest of the three, and inline rather than flex so
      a heading that wraps to two lines keeps the icon on the first one. */
.asae-acu-dd-icon--head {
	font-size: 0.8em;
	margin-right: 0.45em;
	vertical-align: -0.06em;
}

/* The pill and the tab both turn accent-coloured on hover, so the icon is told
   to follow rather than staying orange against orange. */
.asae-acu-dd-card__topic:hover .asae-acu-dd-icon,
.asae-acu-dd-card__topic:focus-visible .asae-acu-dd-icon,
.asae-acu-dd__nav-link:hover .asae-acu-dd-icon,
.asae-acu-dd__nav-link:focus-visible .asae-acu-dd-icon {
	color: inherit;
}

.asae-acu-dd-card__cue {
	display: inline-block;
	margin-top: 0.4em;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dd-accent);
	text-decoration: none;
}
.asae-acu-dd-card__cue:hover,
.asae-acu-dd-card__cue:focus-visible {
	text-decoration: underline;
}
.asae-acu-dd-card__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}
.asae-acu-dd-card:hover .asae-acu-dd-card__arrow {
	transform: translateX(4px);
}

@media (max-width: 680px) {
	.asae-acu-dd-card {
		grid-template-columns: 1fr;
	}
	.asae-acu-dd-card__media {
		min-height: 200px;
	}
	.asae-acu-dd-card__body {
		padding: 1.4em 1.5em;
	}
}

/* On phones a long topic name is wider than the card, so a bordered pill wraps
   to two lines and looks awkward. Drop the pill chrome and render the topics as
   a clean bulleted list — a leading middot on each, one per line, with clear
   space between topics so a two-line topic is obviously set apart from the next. */
@media (max-width: 480px) {
	.asae-acu-dd-card__topics {
		display: block;
		font-size: 0.9rem;
	}
	.asae-acu-dd-card__topic {
		display: block;
		padding: 0 0 0 1em;
		text-indent: -1em; /* hanging indent: wrapped lines align under the text, not the dot */
		margin: 0 0 0.8em;
		line-height: 1.3;
		border: 0;
		border-radius: 0;
		white-space: normal;
		color: var(--dd-accent);
	}
	.asae-acu-dd-card__topic:last-child {
		margin-bottom: 0;
	}
	.asae-acu-dd-card__topic::before {
		content: "· ";
		color: var(--dd-muted);
	}
}