/* WT26 Publications — frontend styles
 * Used by single + archive templates, the Gutenberg block, the Divi 5 module,
 * and the Breakdance element. Keep theme-agnostic — no Divi/Breakdance/etc.
 * specific selectors here.
 *
 * ---------- Sizing text: never a bare rem ----------
 * Every text size here is `max( <em>, <rem> )`, and new ones must be too.
 *
 * A bare rem measures against <html>, which is NOT where a theme puts its body
 * size. Eight of the ported WT themes set `html { font-size: 62.5% }` so they
 * can write 22px as 2.2rem — on those, a 1.1rem title rendered a flat 11px
 * next to 22px body copy, which is the bug this pattern fixes. A bare em is
 * not the answer either: Divi's body is 14px and Enfold's is 13px, so em alone
 * would SHRINK the two networks that were never broken.
 *
 * max() takes whichever is bigger, so the em half tracks whatever the host
 * theme (or its sidebar, which several themes size separately) is using, and
 * the rem half is the size we shipped before. It can only ever raise a size,
 * and only where we were already rendering below the surrounding text.
 *
 * ---------- Sizing BOXES: plain px ----------
 * Same root, different fix. A grid track, an audio player's cap and the
 * min-width that stops the resources column collapsing are design constants,
 * not text, and a bare rem shrank each to 62.5% on those themes: grid layout
 * packed 150px tracks instead of 240px, and the 1.0.18 fix for audio-only
 * lists collapsing was only ever 180px of the 288px it needed.
 *
 * These are px now. On a 16px-root theme px and rem are the same number, so
 * nothing moves on Divi, Enfold, or any 16px theme; on a 10px-root theme they
 * finally render at the size they were drawn at. Text still scales for a
 * reader who enlarges their browser font, because text uses the max() pair.
 *
 * Padding, margin and gap stay in rem. They compress on a 62.5% theme but
 * nothing breaks, and converting them is where regressions live.
 */

/* ---------- Detail (single page + block "show details") ---------- */

.wt26-pub-detail {
	margin: 0 0 1.5rem;
}

.wt26-pub-detail__title {
	margin: 0 0 0.5rem;
}

.wt26-pub-detail__date {
	margin: 0 0 0.5rem;
	font-weight: 600;
	opacity: 0.8;
}

.wt26-pub-detail__authors {
	margin: 0 0 0.5rem;
	font-style: italic;
}

.wt26-pub-detail__summary {
	margin: 0 0 1rem;
}

/* ---------- Archive card / list row ---------- */

/* The list wrapper is a <ul> and every card an <li> (see render.php). In
 * list layout the <ul> owns three content-sized columns and each row
 * subgrids into them, so the date / title / resources columns align across
 * every row. Browsers without subgrid keep the per-row fixed columns set
 * on .wt26-pub-card below — rows still read fine, they just don't share
 * column widths. */

.wt26-pub-list {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 2rem;
	/* !important: Divi styles content lists with `#left-area ul,
	   .entry-content ul, .et-l--body ul { padding: 0 0 23px 1em;
	   list-style-type: disc }` — the ID variant (1-0-1) can't be beaten
	   by any class selector, and this ul must never render as a bulleted
	   list. Same reset on .wt26-pub-resources below. */
	padding: 0 !important;
	list-style: none !important;
}

.wt26-pub-list--list {
	/* Date | title | resources. The resources track sizes to its links but
	   stops at 40% of the list. As a plain `auto` track it grew to the full
	   width of a long link label before the 1fr title track got anything, so
	   a label like "<title> (PDF)" (what AI Import writes) took the whole row
	   and squeezed the title to zero width, one letter per line. Capped, the
	   label wraps instead. Links shorter than the cap size the track exactly
	   as before, and an audio player keeps its 288px floor below, because
	   fit-content() never goes under the track's minimum content width. */
	grid-template-columns: auto minmax(0, 1fr) fit-content(40%);
	gap: 0;
}

.wt26-pub-list--list .wt26-pub-card {
	/* Full-width rows in both worlds: with subgrid this stretches the row
	   across the shared tracks; without it the card keeps its own columns. */
	grid-column: 1 / -1;
}

@supports (grid-template-columns: subgrid) {
	.wt26-pub-list--list .wt26-pub-card {
		grid-template-columns: subgrid;
	}
}

/* Pin cells to their columns so a row missing its date (or resources)
   keeps the shared alignment instead of letting later cells slide left —
   under subgrid one slid cell would distort the shared track for every
   row. Reset to auto in the mobile stack below. */
.wt26-pub-list--list .wt26-pub-card__date      { grid-column: 1; }
.wt26-pub-list--list .wt26-pub-card__body      { grid-column: 2; }
.wt26-pub-list--list .wt26-pub-card__resources { grid-column: 3; }

.wt26-pub-list--grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}

.wt26-pub-list--grid .wt26-pub-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
}

.wt26-pub-list--grid .wt26-pub-card__date,
.wt26-pub-list--grid .wt26-pub-card__body,
.wt26-pub-list--grid .wt26-pub-card__resources {
	width: 100%;
}

.wt26-pub-empty {
	padding: 1.5rem;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	text-align: center;
	opacity: 0.7;
}

.wt26-pub-card {
	display: grid;
	grid-template-columns: minmax(112px, 144px) 1fr minmax(128px, 224px);
	gap: 1rem;
	align-items: center;
	margin: 0;
	padding: 5px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.wt26-pub-card__date {
	font-weight: 600;
	opacity: 0.8;
}

.wt26-pub-card__body {
	min-width: 0;
}

.wt26-pub-card__title {
	/* The title is a <p>; zero both margin AND padding — Divi's stylesheet
	   spaces paragraphs with padding-bottom, not margin. */
	margin: 0;
	padding: 0;
	/* max(em, rem): see the "Sizing text" note at the top of this file. The
	   em half tracks the host theme (and its sidebar, which several themes
	   size separately); the rem half is the old value, so nothing shrinks on
	   a 16px-root theme. */
	font-size: max(1em, 1.1rem);
	line-height: 1.3;
}

.wt26-pub-card__authors {
	margin: 0 0 0.25rem;
	font-style: italic;
	font-size: 0.95em;
}

.wt26-pub-card__summary {
	margin: 0;
	opacity: 0.85;
}

.wt26-pub-card__resources {
	min-width: 0;
}

@media (max-width: 600px) {
	.wt26-pub-list--list {
		grid-template-columns: 1fr;
	}

	.wt26-pub-list--list .wt26-pub-card,
	.wt26-pub-card {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.wt26-pub-list--list .wt26-pub-card__date,
	.wt26-pub-list--list .wt26-pub-card__body,
	.wt26-pub-list--list .wt26-pub-card__resources {
		grid-column: auto;
	}

	.wt26-pub-card__date {
		order: 2;
		font-size: 0.9em;
	}

	.wt26-pub-card__body {
		order: 1;
	}

	.wt26-pub-card__resources {
		order: 3;
	}
}

/* ---------- Resource list (PDF / video / audio links) ---------- */

.wt26-pub-resources {
	margin: 0;
	/* !important: defeats Divi's content-ul rules (see .wt26-pub-list). */
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.wt26-pub-resources__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt26-pub-resources__item a {
	display: inline-block;
	text-decoration: underline;
	/* A label with no spaces (a pasted address) would otherwise hold the
	   resources track at its full length, past the 40% cap on the list. */
	overflow-wrap: anywhere;
}

.wt26-pub-resources__item--audio audio {
	width: 100%;
	max-width: 352px;
}

/* In the list layout's shared grid the resources track is content-sized
   (`fit-content(40%)`), and a percentage width can't resolve while that track is being
   measured — so an <audio> (a replaced element, `width: 100%` above)
   contributes zero, and a list whose only resources are audio collapses
   the whole third column to nothing. Give the audio item a real inline
   size for the track to measure. Subgrid world only: the non-subgrid
   per-row template already floors the track at 128px, and 288px there would
   overflow its 224px cap. Lists that also carry PDF/video links never
   collapsed — the link text gives the track a width. */
@supports (grid-template-columns: subgrid) {
	.wt26-pub-list--list .wt26-pub-resources__item--audio {
		min-width: 288px;
	}

	@media (max-width: 600px) {
		.wt26-pub-list--list .wt26-pub-resources__item--audio {
			/* The mobile stack is a definite single column; keep the player
			   fluid there instead of forcing 288px into narrow phones. */
			min-width: 0;
		}
	}
}

.wt26-pub-resources__label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	font-size: 0.95em;
}

/* ---------- Extra Information block (single-page only) ---------- */

.wt26-pub-extra-info {
	margin: 2rem 0 1.5rem;
	padding: 1.5rem 1.75rem;
	border-left: 4px solid #7c3aed;
	background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 70%);
	border-radius: 6px;
}

.wt26-pub-extra-info__heading {
	margin: 0 0 0.75rem;
	font-size: max(1.1em, 1.1rem);
	font-weight: 700;
	color: #5b21b6;
	letter-spacing: 0.01em;
}

.wt26-pub-extra-info__body {
	font-size: max(1em, 1rem);
	line-height: 1.6;
}

.wt26-pub-extra-info__body p:first-child { margin-top: 0; }
.wt26-pub-extra-info__body p:last-child  { margin-bottom: 0; }

.wt26-pub-extra-info__body a {
	color: #6d28d9;
	text-decoration: underline;
}

/* ---------- Live Stream display ----------
 *
 * The outer card carries no background, border, shadow, or padding by
 * default. That chrome is whatever the surrounding wrapper provides —
 * a Divi 5 module wrapper, a Breakdance element, a Gutenberg cover/group,
 * or a theme container. If we paint the outer container here, page-builder
 * design controls (Background Color, Border, etc.) on the wrapping element
 * have nothing visible to control because our inner div sits on top.
 *
 * Sub-elements (badges, the live-stream button, etc.) keep their colored
 * accents — those are intentional contrasting bits, not container chrome,
 * and themes can override them with simple CSS targeting the BEM classes.
 */

.wt26-pub-livestream {
	margin: 1.5rem 0;
}

.wt26-pub-livestream__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.wt26-pub-livestream__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: max(0.7em, 11px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: #be123c;
	color: #fff;
}

.wt26-pub-livestream--live .wt26-pub-livestream__badge::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: wt26-pub-livestream-pulse 1.4s ease-out infinite;
}

.wt26-pub-livestream__badge--upcoming {
	background: #475569;
}

.wt26-pub-livestream__title {
	margin: 0;
	font-size: max(1.25em, 1.25rem);
	line-height: 1.3;
}

.wt26-pub-livestream__when {
	margin: 0.25rem 0 0.5rem;
	font-size: max(1em, 1rem);
	opacity: 0.85;
}

.wt26-pub-livestream__sep {
	margin: 0 0.4rem;
	opacity: 0.5;
}

.wt26-pub-livestream__tz {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 1px 7px;
	border-radius: 4px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.04em;
	background: rgba(190, 18, 60, 0.12);
	color: #be123c;
	vertical-align: middle;
}

.wt26-pub-livestream__countdown {
	margin: 0 0 0.75rem;
	font-size: max(1.1em, 1.1rem);
	font-weight: 600;
	color: #be123c;
}

/* JS-driven live ticker. Hidden by default; the countdown JS unhides it on
 * upgrade so JS-disabled visitors still see the humanized text fallback.
 *
 * Coloring is intentionally left to the host theme — we only ship structural
 * layout + a digit-change bounce. Page builders (Divi, Breakdance) can target
 * `.wt26-pub-livestream__pill`, `__pill-num`, `__pill-lbl`, `__pill-sep`, and
 * `__ticker-label` via design controls or custom CSS. */
.wt26-pub-livestream__ticker {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.25rem 0 1.25rem;
}

/* The display above outranks the browser's own [hidden] rule, so without this
   the ticker showed frozen at 0 days 00:00:00 whenever the script had not
   unhidden it: no JavaScript, reduced motion, after Pause, and in a builder
   preview. */
.wt26-pub-livestream__ticker[hidden] {
	display: none;
}

.wt26-pub-livestream__ticker-label {
	font-size: max(0.72em, 0.72rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Pause/resume control for the per-second ticker (WCAG 2.2.2 Pause, Stop, Hide).
   Injected by livestream-countdown.js, since the ticker only exists when JS runs.
   Deliberately unstyled beyond a quiet text button: colour is the host theme's
   job (currentColor keeps it legible on light and dark cards alike). */
.wt26-pub-livestream__ticker-toggle {
	align-self: flex-start;
	margin: 0.1rem 0 0;
	padding: 0.2em 0;
	border: 0;
	background: none;
	color: currentColor;
	font: inherit;
	font-size: max(0.75em, 0.75rem);
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.85;
}

.wt26-pub-livestream__ticker-toggle:hover {
	opacity: 1;
}

.wt26-pub-livestream__ticker-pills {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.wt26-pub-livestream__pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	padding: 0.6rem 0.85rem;
	border: 1px solid currentColor;
	border-radius: 12px;
	line-height: 1;
}

.wt26-pub-livestream__pill-sep {
	display: inline-flex;
	align-items: center;
	font-size: 1.8rem;
	font-weight: 700;
	padding: 0 0.1rem;
	user-select: none;
	opacity: 0.5;
}

.wt26-pub-livestream__pill-num {
	display: inline-block;
	font-size: 2.4rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.wt26-pub-livestream__pill-num--changed {
	animation: wt26-pub-livestream-flip 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wt26-pub-livestream-flip {
	0%   { transform: translateY(-6px) scale(1.18); opacity: 0.4; }
	60%  { transform: translateY(0) scale(1.08); opacity: 1; }
	100% { transform: translateY(0) scale(1); opacity: 1; }
}

.wt26-pub-livestream__pill-lbl {
	margin-top: 0.35rem;
	font-size: max(0.7em, 0.7rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.wt26-pub-livestream__pill-num--changed {
		animation: none;
	}
}

.wt26-pub-livestream__cta {
	margin: 0.5rem 0 0;
}

.wt26-pub-livestream__btn {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	font-weight: 600;
	background: #be123c;
	color: #fff !important;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wt26-pub-livestream__btn:hover {
	background: #9f1239;
	transform: translateY(-1px);
}

.wt26-pub-livestream__player {
	margin-top: 0.5rem;
	border-radius: 8px;
	overflow: hidden;
}

.wt26-pub-livestream__player iframe,
.wt26-pub-livestream__oembed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto !important;
	border: 0;
}

.wt26-pub-livestream__fallback a {
	font-weight: 600;
}

@keyframes wt26-pub-livestream-pulse {
	0%   { opacity: 1; transform: scale(1); }
	50%  { opacity: 0.5; transform: scale(0.85); }
	100% { opacity: 1; transform: scale(1); }
}

/* ---------- Archive page shell ----------
 *
 * The PHP archive template prints its own <main>; classic themes whose
 * containers expect the theme's markup render it full-bleed. Cap and
 * center it, matching the wt26-staff archive fix. Themes that wrap the
 * template in their own constrained container just see a 100%-width main
 * inside it. */

.wt26-pub-archive {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 2.5rem 1.25rem 3.5rem;
}

.wt26-pub-archive__header {
	margin: 0 0 1.5rem;
}

/* ---------- Pagination (used by block + archive templates) ---------- */

/* The wrapper is a plain box on purpose: it exists so the pagination script can
   find and replace one list, and so a no-JS pagination link has something to
   jump back to. It must add no layout of its own, or it would shift every list
   that already ships. */
.wt26-pub-list-wrap {
	display: block;
}

/* Focus is moved here after a page swap so keyboard and screen reader users
   land on the new rows. That is programmatic focus on a non-interactive box, so
   suppress the ring only when the browser would not have shown one anyway. */
.wt26-pub-list-wrap:focus:not(:focus-visible) {
	outline: none;
}

/* Fetching the next page. Deliberately understated: the list is being replaced
   in place, and a heavy spinner would draw the eye away from where the new rows
   are about to appear. */
.wt26-pub-list-wrap--loading {
	opacity: 0.55;
	transition: opacity 120ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.wt26-pub-list-wrap--loading {
		transition: none;
	}
}

.wt26-pub-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 1.5rem 0;
}

.wt26-pub-pagination .page-numbers {
	display: inline-block;
	padding: 0.35em 0.7em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	text-decoration: none;
}

/* The current page must be a filled chip. `background: currentColor` cannot do
   that here: currentColor resolves to this element's own `color`, which the very
   next line sets to #fff — so the chip rendered white-on-white (1:1) and the
   current page number was invisible. Use an explicit dark chip; themes can
   override it. White on #23272b = 15.6:1. */
.wt26-pub-pagination .page-numbers.current {
	background: #23272b;
	border-color: #23272b;
	color: #fff;
}

/* "Go to page" box (wt26_pub_render_page_jump() in render.php). It only
   appears on lists long enough for the page links to skip pages behind "…",
   on its own centred line under them. The number box and the Go button are
   drawn like the page chips above.

   Themes style bare inputs, labels, buttons and forms, and some do it through
   an id that no class selector can outrank. Enfold, measured on a live site:
   `#top input[type="number"]` gets display:block, width:100% and a 20px bottom
   margin, `#top form` a 20px bottom margin, `#top label` bold at 0.92em. So the
   few properties that would break this row out of its line carry !important,
   the same way .wt26-pub-list pins Divi's list padding above, and so do the
   label's weight and size: "Go to page" and "of 10" are one phrase split
   around the box and have to read as one, and the box's own edge, text and
   background (see the input rule for why). The Go button's look is left to a
   theme that insists. */
.wt26-pub-page-jump {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0;
}

.wt26-pub-page-jump__label,
.wt26-pub-page-jump__total {
	margin: 0 !important;
	padding: 0;
	font-size: inherit !important;
	font-weight: inherit !important;
	white-space: nowrap;
}

.wt26-pub-pagination .wt26-pub-page-jump__input {
	box-sizing: border-box;
	flex: 0 0 auto;
	/* As many digits as the last page has (render.php sets the count), plus
	   room for padding and the spinner. ch and em are the box's own 16px+
	   size, so neither shrinks on a 62.5% root. */
	width: calc(var(--wt26-pub-jump-digits, 3) * 1ch + 2.75em) !important;
	max-width: 100%;
	height: auto;
	margin: 0 !important;
	padding: 0.35em 0.5em;
	/* The edge is all that marks an empty box as a box, so it needs 3:1
	   against the page (WCAG 1.4.11): 0.55 black is 4.7:1 on white. Where
	   color-mix() works, the edge follows the text colour instead, so a list in
	   a dark section with light text keeps a visible box.
	   Edge, text and background carry !important, like the page chips' look
	   they match: Enfold paints every `#top input` with a #e1e1e1 edge (1.31:1,
	   the empty box all but disappeared on a live Enfold site) and #777 text on
	   white. With all three ours, the box follows whatever section the list sits
	   in, light or dark, the same way the chips beside it do. */
	border: 1px solid rgba(0, 0, 0, 0.55) !important;
	border-color: color-mix(in srgb, currentColor 70%, transparent) !important;
	border-radius: 3px;
	background: transparent !important;
	color: inherit !important;
	font: inherit;
	/* Never under 16px: iOS zooms the whole page when a smaller input takes
	   focus. max() keeps it tracking a larger theme size. */
	font-size: max(1em, 16px) !important;
	line-height: normal;
}

.wt26-pub-pagination .wt26-pub-page-jump__go {
	flex: 0 0 auto;
	width: auto !important;
	/* Some themes give every button a fixed height (wt-corporate: 3em, so Go
	   stood 54px next to 44px page chips). Size it by padding and line height
	   like the chips instead. */
	height: auto;
	margin: 0 !important;
	padding: 0.35em 0.7em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* Builder and editor previews render the box disabled (render.php). */
.wt26-pub-pagination .wt26-pub-page-jump__go:disabled {
	cursor: default;
}

/* Keyboard focus has to show somewhere. Divi removes every outline
   (`:focus { outline: 0 }`), and the Genesis-family themes swap the input's
   outline for a darker border that the box's own border rule above overrides,
   so without this nothing on screen shows where focus is. !important reaches
   through Enfold's id-scoped `outline: none` on inputs. The page number links
   get the same ring: on Divi they had none either. :focus-visible keeps it
   off for mouse clicks on links and buttons. */
.wt26-pub-pagination a.page-numbers:focus-visible,
.wt26-pub-pagination .wt26-pub-page-jump__input:focus-visible,
.wt26-pub-pagination .wt26-pub-page-jump__go:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
}

/* ---------- Legacy class compatibility ----------
 *
 * Every element above also carries the class name the 2023 plugin put there
 * (wt_pub_container, wt_pub_item, wt_pub_date, wt_pub_title, wt_pub_desc,
 * wt_pub_link, wtPaging …) so a migrated site's own CSS keeps matching. The
 * mapping, and why, is in includes/legacy-css.php. Nothing in this file styles
 * those names: they exist for the customer's stylesheet, not for ours.
 *
 * ONE exception, below. The 2023 list row was three FLOATED columns sized in
 * percentages, and that CSS is still live on migrated sites: four of the ten
 * source sites sampled carry some form of
 *   .wt_pub_container .wt_pub_title { width: 56% !important }
 *   .wt_pub_container .wt_pub_link  { width: 44% !important }
 * This row is a grid. A percentage there resolves against one track instead of
 * the row, and `float` is ignored on a grid item altogether, so those rules
 * don't rebalance anything — they shrink the title inside its own track and
 * squeeze the resources track, which is content-sized and holds an <audio>
 * that is width:100% of whatever box it gets (a 288px player at 30% is a
 * sliver). They were inert before this shim; waking them up wrong would be a
 * worse outcome than leaving them asleep.
 *
 * The grid already does what those rules were written to achieve. Column 1 is
 * content-sized, so `.wt_pub_date { display: none }` — the rule 8 of those 10
 * sites actually care about — collapses the date track to nothing and the
 * title gets the room. So: legacy visibility, border, colour and type rules
 * apply; legacy width/float on the three row cells does not.
 *
 * Specificity is 4 classes + !important, which outranks every legacy rule
 * measured in the wild (worst case `.home .wt_pub_container .wt_pub_title`, 3
 * classes) whatever the source order — wp-custom-css prints at wp_head:101,
 * after this file, so a tie would go to the customer. An ID-scoped legacy
 * width rule (`#section .wt_pub_title { width: 60% !important }`) would still
 * win, because no class-only selector can outrank an id; that is the one case
 * left to fix in the site's CSS by hand. Matching on .wt_pub_item also means
 * the rule disappears with the shim if a site filters it off. */
.wt26-pub-list--list .wt26-pub-card.wt_pub_item > :is(.wt_pub_date, .wt_pub_title, .wt_pub_link) {
	width: auto !important;
	float: none !important;
}
