/**
 * David Loy — media block styles (D17 "Paper & Ink")
 *
 * Tokens are read from the child theme's custom properties where they exist,
 * with the D17 values as fallbacks. They are declared in dl-tokens.css.
 *
 * Earlier revisions carried a lighter palette inline in each section, which is
 * how three different golds ended up in one file. Those are gone: every value
 * now comes from dl-tokens.css, which must be enqueued before this file. See
 * the dependency array in the functions.php snippet there.
 */

/* ---------------------------------------------------------------- card */

.dl-media--card {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--dl-rule);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.dl-media__play,
.dl-media__cue {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--dl-ui);
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dl-forest);
	background: none;
	border: 0;
	padding: 0;
	line-height: 1.2;
}

.dl-media__play { cursor: pointer; }
.dl-media__play:hover,
.dl-media__play:focus-visible { color: var(--dl-ink); }
.dl-media__play:focus-visible { outline: 1px solid var(--dl-moss); outline-offset: 4px; }

.dl-media__cue {
	color: var(--dl-moss);
	text-decoration: none;
	cursor: pointer;
}
.dl-media__cue:hover,
.dl-media__cue:focus-visible { color: var(--dl-ink); }
.dl-media__cue:focus-visible { outline: 1px solid var(--dl-moss); outline-offset: 4px; }

.dl-media__play svg,
.dl-media__cue svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
	flex: none;
}

.dl-media__dur {
	font-family: var(--dl-ui);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	color: var(--dl-sage);
}

.dl-media__player {
	flex: 0 0 100%;
	padding-top: 12px;
}
.dl-media__player[hidden] { display: none; }
.dl-media__player audio { width: 100%; height: 34px; display: block; }

/* Rotate the triangle to a pause-ish cue when open. */
.dl-media__play[aria-expanded="true"] svg { transform: rotate(90deg); }
.dl-media__play svg { transition: transform 0.2s ease; }

/* ------------------------------------------------------------- single */

.dl-media--single { margin: 0 0 30px; }

.dl-media__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--dl-ink);
	overflow: hidden;
}
.dl-media__frame iframe,
.dl-media__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* --- facade */

.dl-media__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--dl-ink);
	cursor: pointer;
	display: block;
}
.dl-media__facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.72);
	display: block;
	transition: transform 0.5s ease, filter 0.5s ease;
}
.dl-media__facade:hover img { transform: scale(1.03); filter: saturate(0.9); }

.dl-media__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--dl-ink-rgb), 0.1), rgba(var(--dl-ink-rgb), 0.55));
}

.dl-media__btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(var(--dl-ink-rgb), 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, background 0.25s ease;
}
.dl-media__facade:hover .dl-media__btn,
.dl-media__facade:focus-visible .dl-media__btn {
	transform: translate(-50%, -50%) scale(1.09);
	background: var(--dl-forest);
}
.dl-media__facade:focus-visible { outline: 2px solid var(--dl-gold); outline-offset: -2px; }
.dl-media__btn svg { width: 22px; height: 22px; fill: var(--dl-cream); margin-left: 4px; }

.dl-media__cap {
	position: absolute;
	bottom: 14px;
	left: 16px;
	font-family: var(--dl-ui);
	font-size: 0.56rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(var(--dl-cream-rgb), 0.8);
}

/* --- inline audio on the single page */

.dl-media--inline.is-audio { background: var(--dl-parchment); padding: 0 0 18px; }
.dl-media__art {
	width: 100%;
	aspect-ratio: 21 / 9;
	background-size: cover;
	background-position: center;
	filter: saturate(0.7);
	margin-bottom: 18px;
}
.dl-media--inline.is-audio audio { width: calc(100% - 36px); margin: 0 18px; display: block; }

/* --- soundcloud */

.dl-media--soundcloud iframe { width: 100%; height: 166px; border: 0; display: block; }

/* --- external */

.dl-media--external { display: block; text-decoration: none; color: inherit; }
.dl-media__shot {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--dl-ink);
}
.dl-media__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.72);
	display: block;
	transition: transform 0.5s ease, filter 0.5s ease;
}
.dl-media--external:hover .dl-media__shot img { transform: scale(1.03); filter: saturate(0.9); }
.dl-media__shot .dl-media__dur {
	position: absolute;
	bottom: 12px;
	right: 13px;
	background: rgba(var(--dl-ink-rgb), 0.85);
	color: var(--dl-cream);
	font-size: 0.58rem;
	padding: 4px 9px;
}

.dl-media__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border: 1px solid var(--dl-rule);
	border-top: 0;
	padding: 16px 20px;
	background: var(--dl-surface);
}
.dl-media__kicker {
	display: block;
	font-family: var(--dl-ui);
	font-size: 0.56rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dl-sage);
	margin-bottom: 5px;
}
.dl-media__host {
	display: block;
	font-family: var(--dl-display);
	font-size: 1.02rem;
	color: var(--dl-ink);
}
.dl-media__go {
	flex: none;
	font-family: var(--dl-ui);
	font-size: 0.6rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dl-cream);
	background: var(--dl-forest);
	padding: 13px 25px;
	transition: background 0.2s ease;
}
.dl-media--external:hover .dl-media__go { background: var(--dl-ink); }

/* --- note line */

.dl-media__note {
	font-family: var(--dl-ui);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	color: var(--dl-sage);
	margin: 10px 0 0;
}

/* ---------------------------------------------------- card thumbnail
 * Full-bleed across the top of the card. Fixed height rather than auto,
 * so one off-ratio image cannot break row alignment across the grid.
 * Put .dl-card__thumb on the Image widget; the card container needs
 * padding 0, with padding moved to a nested body container.
 */

.dl-card__thumb { position: relative; overflow: hidden; }

.dl-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;   /* images are 640x360, so nothing is cropped */
	height: auto;
	object-fit: cover;      /* guard: crops only if an image is not 16:9 */
	object-position: center top;  /* if it must crop, lose the bottom, not the top */
	display: block;
	filter: saturate(0.72);
	transition: transform 0.5s ease, filter 0.5s ease;
}

.dl-card:hover .dl-card__thumb img { transform: scale(1.04); filter: saturate(0.9); }

/* Elementor wraps images in a figure that can carry its own spacing. */
.dl-card__thumb figure,
.dl-card__thumb .elementor-widget-container { margin: 0; line-height: 0; }

/* The media type is carried by the action-row icon (see dl-media-render.php),
 * so no corner badge is drawn. Kept as a hook in case one is wanted later. */

/* ---------------------------------------------------------- responsive */

@media (max-width: 768px) {
	.dl-media__btn { width: 54px; height: 54px; }
	.dl-media__btn svg { width: 18px; height: 18px; }
	.dl-media__bar { flex-direction: column; align-items: flex-start; gap: 14px; }
	.dl-media__go { width: 100%; text-align: center; }
	.dl-media__cap { font-size: 0.52rem; bottom: 10px; left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.dl-media__facade img,
	.dl-media__btn,
	.dl-media__shot img,
	.dl-media__play svg { transition: none; }
	.dl-media__facade:hover img,
	.dl-media--external:hover .dl-media__shot img { transform: none; }
}

/* ==========================================================================
 * Talk card typography
 *
 * Add under Advanced -> CSS Classes:
 *   dl-card__topics    Post Terms, dl_topic
 *   dl-card__title     Post Title
 *   dl-card__source    Post Terms, dl_source
 *   dl-card__excerpt   Post Excerpt
 *   dl-card__body      the inner container
 *
 * Note: an Elementor CSS class lands on the widget WRAPPER. The text sits in
 * .elementor-heading-title (or .elementor-widget-container) inside it, so the
 * inner element must be targeted too — otherwise link text gets styled and
 * bare text nodes like the term separator keep the heading font.
 *
 * Weights and sizes here are deliberately heavier than the original D17 spec:
 * 300-weight Josefin at 0.6rem is elegant and hard to read.
 * ========================================================================== */

/* --- gold eyebrow: topics ------------------------------------------------ */

.dl-card__topics,
.dl-card__topics .elementor-heading-title,
.dl-card__topics .elementor-widget-container,
.dl-card__topics a {
	font-family: var(--dl-ui) !important;
	font-size: 0.72rem !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--dl-gold) !important;
	text-decoration: none;
}
.dl-card__topics { margin: 0 0 14px !important; }
.dl-card__topics a:hover { color: var(--dl-ink) !important; }

/* Short gold rule above the eyebrow. */
.dl-card__topics .elementor-heading-title::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	background: var(--dl-gold);
	margin-bottom: 12px;
}

/* --- title --------------------------------------------------------------- */

.dl-card__title,
.dl-card__title .elementor-heading-title,
.dl-card__title a {
	font-family: var(--dl-display) !important;
	font-size: 1.32rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	color: var(--dl-ink) !important;
	text-decoration: none;
}
.dl-card__title { margin: 0 0 12px !important; }
.dl-card__title a:hover { color: var(--dl-forest) !important; }

/* --- source / meta ------------------------------------------------------- */

.dl-card__source,
.dl-card__source .elementor-heading-title,
.dl-card__source .elementor-widget-container,
.dl-card__source a {
	font-family: var(--dl-ui) !important;
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	color: var(--dl-moss) !important;   /* darker than sage */
	text-decoration: none;
}
.dl-card__source { margin: 0 0 14px !important; }
.dl-card__source a:hover { color: var(--dl-ink) !important; }

/* --- date ---------------------------------------------------------------
 * Rendered by [dl_date] (inc/dl-date.php), not Elementor's Post Date tag —
 * most of these dates are a year standing in for a date, and the tag would
 * print "January 1" on 212 of 289 cards.
 *
 * Matched to .dl-card__source so the venue and the date read as one register.
 * Sits on the same line as the venue when both are in one widget; the middle
 * dot is supplied by the shortcode's sep attribute, not by CSS, so it is absent
 * when the date is.
 */

.dl-card__date,
.dl-card__date .elementor-widget-container,
.dl-card__date p,
.dl-card__date time,
.dl-card__source .dl-date {
	font-family: var(--dl-ui) !important;
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	color: var(--dl-moss) !important;
	font-style: normal;
}
.dl-card__date { margin: 0 0 14px !important; }

/* When the date follows the venue in the same widget, the venue already
   carries the bottom margin — a second one would double the gap. */
.dl-card__source .dl-date { margin: 0 !important; }

/* --- excerpt ------------------------------------------------------------- */

.dl-card__excerpt,
.dl-card__excerpt .elementor-widget-container,
.dl-card__excerpt p {
	font-family: var(--dl-body) !important;
	font-style: italic;
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: rgba(var(--dl-ink-rgb), 0.75) !important;   /* was .55 — too faint */
}
.dl-card__excerpt { margin: 0 0 6px !important; }

/* Clamp on both wrapper and paragraph: the dynamic tag sometimes emits a
 * bare text node with no <p>. */
.dl-card__excerpt .elementor-widget-container,
.dl-card__excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* --- action row ---------------------------------------------------------- */

.dl-media__play,
.dl-media__cue {
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
}
.dl-media__dur { font-size: 0.68rem !important; font-weight: 500 !important; }
.dl-media__play svg,
.dl-media__cue svg { width: 13px; height: 13px; }

/* --- card shell ---------------------------------------------------------- */

.dl-card { display: flex; flex-direction: column; height: 100%; }
.dl-card__body { display: flex; flex-direction: column; flex: 1; }

/* --- action row breathing room ------------------------------------------
 * The card body carries Elementor padding of 20px 22px 0 — note the zero at
 * the bottom. The action row is the body's last child, so on a card whose
 * title and topic list run long the "Watch on…" line finishes 1px above the
 * card edge. Measured on /talks/: 1px, 2px, 19px, 30px across one screen.
 *
 * Padding on the row rather than padding-bottom on the body, because the body's
 * padding is set in the Elementor UI and a CSS override there would silently
 * fight whatever is set in the editor. This adds space no one else is
 * declaring. 22px matches the body's own side padding, so the text now clears
 * the edge by the same distance it clears the sides.
 *
 * Not attempted here: pinning the row to the bottom with margin-top:auto. The
 * row sits two display:block Elementor wrappers below the flex body, so it is
 * not a flex child and the auto margin has nothing to resolve against.
 */
.dl-card .dl-media--card {
	padding-top: 14px;
	padding-bottom: 22px;
}

/* ==========================================================================
 * Corner badges — restored
 * Drawn from the post_class filter in dl-post-meta.php.
 * ========================================================================== */

.dl-media--audio_file  .dl-card__thumb::after,
.dl-media--audio_embed .dl-card__thumb::after,
.dl-media--video_embed .dl-card__thumb::after,
.dl-media--video_file  .dl-card__thumb::after,
.dl-media--pdf         .dl-card__thumb::after,
.dl-media--external    .dl-card__thumb::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(var(--dl-ink-rgb), 0.88);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	pointer-events: none;
}

.dl-media--audio_file  .dl-card__thumb::after,
.dl-media--audio_embed .dl-card__thumb::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5F0E8'%3E%3Cpath d='M3 10h2v4H3zm4-4h2v12H7zm4-3h2v18h-2zm4 5h2v8h-2zm4 2h2v4h-2z'/%3E%3C/svg%3E");
}
.dl-media--video_embed .dl-card__thumb::after,
.dl-media--video_file  .dl-card__thumb::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5F0E8'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.dl-media--pdf .dl-card__thumb::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5F0E8'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2 4 4h-4V4zM8 13h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E");
}
.dl-media--external .dl-card__thumb::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5F0E8'%3E%3Cpath d='M14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3h-7zM5 5h5V3H3v18h18v-7h-2v5H5V5z'/%3E%3C/svg%3E");
}

.dl-status--reference   .dl-card__thumb::after,
.dl-status--unavailable .dl-card__thumb::after { content: none; }

/* ==========================================================================
 * Book card — portrait
 *
 * Covers are a consistent 2:3 (trade paperback). Eight of the twelve source
 * images are only 140px wide, so they are scaled up: keep the displayed width
 * modest until higher-resolution covers are sourced.
 *
 * Elementor classes:
 *   dl-book          outer container
 *   dl-book__cover   Image widget (Featured Image)
 *   dl-book__title   Heading (Post Title)
 *   dl-book__meta    Heading (publisher · year)
 *   dl-book__excerpt Text Editor (Post Excerpt)
 * ========================================================================== */

.dl-book {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
	border: 0;
}

.dl-book__cover { position: relative; overflow: visible; margin-bottom: 18px; }

.dl-book__cover img {
	width: 100%;
	aspect-ratio: 2 / 3;
	height: auto;
	object-fit: cover;
	display: block;
	/* covers carry their own edges; a soft shadow reads as a physical object */
	box-shadow: 0 6px 18px rgba(var(--dl-ink-rgb), 0.18);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
	image-rendering: auto;
}

/* Slight lift and tilt on hover — the D17 treatment. */
.dl-book:hover .dl-book__cover img {
	transform: translateY(-8px) rotate(-1deg);
	box-shadow: 0 16px 34px rgba(var(--dl-ink-rgb), 0.26);
}

.dl-book__cover .elementor-widget-container,
.dl-book__cover figure { margin: 0; line-height: 0; }

.dl-book__title,
.dl-book__title .elementor-heading-title,
.dl-book__title a {
	font-family: var(--dl-display) !important;
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--dl-ink) !important;
	text-decoration: none;
}
.dl-book__title { margin: 0 0 6px !important; }
.dl-book__title a:hover { color: var(--dl-forest) !important; }

.dl-book__meta,
.dl-book__meta .elementor-heading-title,
.dl-book__meta .elementor-widget-container {
	font-family: var(--dl-ui) !important;
	font-size: 0.66rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
	color: var(--dl-moss) !important;
}
.dl-book__meta { margin: 0 0 10px !important; }

.dl-book__excerpt,
.dl-book__excerpt .elementor-widget-container,
.dl-book__excerpt p {
	font-family: var(--dl-body) !important;
	font-style: italic;
	font-size: 0.86rem !important;
	line-height: 1.65 !important;
	color: rgba(var(--dl-ink-rgb), 0.72) !important;
	margin: 0;
}
.dl-book__excerpt .elementor-widget-container,
.dl-book__excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Covers are small originals; do not let a 140px image stretch past ~220px
 * on wide screens, or the softness becomes obvious. */
@media (min-width: 1200px) {
	.dl-book__cover { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
	.dl-book__cover img { transition: none; }
	.dl-book:hover .dl-book__cover img { transform: none; }
}

/* ---------------------------------------------------- book single page */

.dl-book__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

.dl-book__btn {
	font-family: var(--dl-ui);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 13px 26px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dl-book__btn--main {
	background: var(--dl-forest);
	color: var(--dl-cream);
}
.dl-book__btn--main:hover { background: var(--dl-ink); }

.dl-book__btn--ghost {
	background: transparent;
	color: var(--dl-forest);
	border-color: var(--dl-rule);
}
.dl-book__btn--ghost:hover {
	border-color: var(--dl-ink);
	color: var(--dl-ink);
}

/* PDF links get a small document glyph so a download is not a surprise. */
.dl-book__btn.is-pdf::before {
	content: "";
	display: inline-block;
	width: 12px; height: 12px;
	margin-right: 8px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2 4 4h-4V4zM8 13h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2 4 4h-4V4zM8 13h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dl-book__related { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--dl-rule); }
.dl-book__related-label {
	display: block;
	font-family: var(--dl-ui);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dl-gold);
	margin-bottom: 12px;
}
.dl-book__related ul { list-style: none; margin: 0; padding: 0; }
.dl-book__related li { margin-bottom: 8px; }
.dl-book__related a {
	font-family: var(--dl-body);
	font-size: 0.92rem;
	color: var(--dl-moss);
	text-decoration: none;
	border-bottom: 1px solid var(--dl-rule);
}
.dl-book__related a:hover { color: var(--dl-ink); }

/* single-page cover: larger, same 2:3 */
.dl-book__cover--single img {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	box-shadow: 0 10px 30px rgba(var(--dl-ink-rgb), 0.22);
}

/* ==========================================================================
 * Whole-card click
 *
 * The click itself lives in dl-media.js, which branches on what the card can
 * do: self-hosted audio opens its player in place, everything else goes to the
 * post. This block only keeps the interactive parts reachable and the hover
 * treatment coherent.
 *
 * The old approach — stretching the title anchor across the card with an
 * ::after — is gone. It could only navigate, so an audio card would leave the
 * grid rather than play; and when the title Heading had no Link set it matched
 * nothing at all, leaving a card that looked clickable and was not.
 * ========================================================================== */

.dl-card,
.dl-book { position: relative; }

/* Only advertise a pointer on cards that can actually act. :has() keeps this
 * honest without JavaScript having to tag anything — which matters, because
 * Elementor replaces loop items on pagination and filtering. */
.dl-card:has(.dl-media__play),
.dl-card:has(.dl-card__title a[href]),
.dl-card:has(.dl-card__thumb a[href]),
.dl-card[data-href] { cursor: pointer; }

.dl-card .dl-media__player,
.dl-card .dl-media__player * { cursor: auto; }

/* Genuinely interactive things sit above the card surface. */
.dl-card .dl-media,
.dl-card .dl-media__play,
.dl-card .dl-media__player,
.dl-card .dl-media__cue,
.dl-book .dl-book__actions {
	position: relative;
	z-index: 2;
}

/* The excerpt stays selectable; the JS ignores a click that leaves a
 * selection behind, so dragging to copy no longer fires the card. */
.dl-card__excerpt { user-select: text; }

/* Hover anywhere on the card drives the same treatment as hovering the image. */
.dl-card:hover .dl-card__thumb img { transform: scale(1.04); filter: saturate(0.9); }
.dl-card:hover .dl-card__title a { color: var(--dl-forest) !important; }

/* --- single-page audio artwork: clickable, with a play glyph ------------ */

.dl-media__art {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	padding: 0;
	border: 0;
	background-size: cover;
	background-position: center;
	filter: saturate(0.7);
	margin-bottom: 18px;
	cursor: pointer;
	transition: filter 0.4s ease;
}
.dl-media__art:hover { filter: saturate(0.95); }
.dl-media__art:focus-visible { outline: 2px solid var(--dl-gold); outline-offset: -2px; }

.dl-media__art::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--dl-ink-rgb), 0.08), rgba(var(--dl-ink-rgb), 0.42));
	transition: background 0.3s ease;
}
.dl-media__art:hover::before { background: linear-gradient(180deg, rgba(var(--dl-ink-rgb), 0.04), rgba(var(--dl-ink-rgb), 0.3)); }

.dl-media__art-btn {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 62px; height: 62px;
	border-radius: 50%;
	background: rgba(var(--dl-ink-rgb), 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.dl-media__art:hover .dl-media__art-btn {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--dl-forest);
}
.dl-media__art-btn svg { width: 20px; height: 20px; fill: var(--dl-cream); margin-left: 4px; }

/* Once playing, fade the glyph out — the transport controls take over. */
.dl-media.is-playing .dl-media__art-btn { opacity: 0; pointer-events: none; }
.dl-media.is-playing .dl-media__art::before { background: rgba(var(--dl-ink-rgb), 0.22); }

@media (prefers-reduced-motion: reduce) {
	.dl-media__art, .dl-media__art-btn, .dl-media__art::before { transition: none; }
	.dl-media__art:hover .dl-media__art-btn { transform: translate(-50%, -50%); }
}

/* ==========================================================================
 * Site credit — footer
 *
 * Built as an Elementor Footer template (Templates -> Theme Builder -> Footer),
 * which replaces Hello Elementor's own site-footer. Add `dl-credit` under
 * Advanced -> CSS Classes on the Text Editor widget, the same convention the
 * card typography above uses.
 *
 * Deliberately quiet: sentence case rather than the uppercase tracking used by
 * .dl-card__source, because a build credit that shouts competes with David's
 * name for attention. Moss going to ink on hover matches every other secondary
 * link on the site.
 * ========================================================================== */

.dl-credit,
.dl-credit p {
	font-family: var(--dl-ui) !important;
	font-size: 0.72rem !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: rgba(var(--dl-ink-rgb), 0.55) !important;
	margin: 0 !important;
}

.dl-credit a {
	color: var(--dl-moss) !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--dl-ink-rgb), 0.18);
	padding-bottom: 1px;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.dl-credit a:hover,
.dl-credit a:focus-visible {
	color: var(--dl-ink) !important;
	border-bottom-color: var(--dl-gold);
}

.dl-credit a:focus-visible {
	outline: 1px solid var(--dl-moss);
	outline-offset: 3px;
}

/* On a narrow screen the credit and the copyright stack; keep them apart. */
@media (max-width: 768px) {
	.dl-credit { margin-top: 8px !important; }
}