/* =========================================================================
   MGAA Procurement — front-end styles
   The tables are the branded custom component, so they carry the exact
   Figma tokens. Everything else on the detail page (H1/H2, body copy,
   general hyperlinks) intentionally inherits the active theme.
   Set --aza-red to the exact AZA brand red if it ever changes.
   ========================================================================= */

:root {
	--aza-red: #A12A1D;          /* table header + button background (AZA red) */
	--aza-red-hover: #861f15;
	--aza-black: #25150C;         /* AZA black — table body copy */
	--aza-white: #ffffff;
	--aza-light-grey: #e6e6e6;    /* AZA Light Grey — grey panels (Key dates, gate) + row hover */
	--mgaa-row-border: #e2e2e2;
	--mgaa-empty-bg: var(--aza-light-grey);
	--mgaa-focus: #1a5fb4;
	--mgaa-radius: 8px;
	--mgaa-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----- Screen-reader-only utility ----- */
.mgaa-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----- Table shell ----- */
.mgaa-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mgaa-table {
	width: 100%;
	border-collapse: separate;   /* allows the rounded header bar */
	border-spacing: 0;
	font-family: var(--mgaa-font);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--aza-black);
}

/* Header: brown bar, white text, Inter 16/24 semibold, rounded ends */
.mgaa-table thead th {
	background: var(--aza-red);
	color: var(--aza-white);
	font-family: var(--mgaa-font);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-align: left;
	padding: 0.85rem 1.25rem;
	white-space: nowrap;
	border-bottom: 0;
}

.mgaa-table thead th:first-child {
	border-top-left-radius: var(--mgaa-radius);
	border-bottom-left-radius: var(--mgaa-radius);
}

.mgaa-table thead th:last-child {
	border-top-right-radius: var(--mgaa-radius);
	border-bottom-right-radius: var(--mgaa-radius);
}

/* Body cells: AZA black, regular weight */
.mgaa-table tbody td {
	padding: 1.15rem 1.25rem;
	border-bottom: 1px solid var(--mgaa-row-border);
	vertical-align: top;
	color: var(--aza-black);
}

.mgaa-table tbody tr:first-child td {
	padding-top: 1.4rem;
}

.mgaa-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ----- Stacked date / time cells (same AZA black, per tokens) ----- */
.mgaa-date,
.mgaa-time {
	display: block;
}

/* ----- Links: heavier weight + underline ----- */
.mgaa-title-link,
.mgaa-doc-link,
.mgaa-back__link {
	color: var(--aza-black);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mgaa-title-link:hover,
.mgaa-title-link:focus,
.mgaa-doc-link:hover,
.mgaa-doc-link:focus,
.mgaa-back__link:hover,
.mgaa-back__link:focus {
	color: var(--aza-red);
}

/* The back link renders inside the AZA-red header band (.mgaa-solicitation-header),
   where its default dark text (~2.4:1) and red hover (invisible) fail contrast.
   White on that red is ~7.3:1 (AA); the underline solidifies on hover so the cue
   doesn't rely on color, and the keyboard focus ring goes white for visibility. */
.mgaa-solicitation-header .mgaa-back__link,
.mgaa-solicitation-header .mgaa-back__link:visited {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

.mgaa-solicitation-header .mgaa-back__link:hover,
.mgaa-solicitation-header .mgaa-back__link:focus {
	color: #fff;
	text-decoration-color: #fff;
}

.mgaa-solicitation-header .mgaa-back__link:focus-visible {
	outline-color: #fff;
}

.mgaa-doc-fmt {
	font-weight: 400;
}

/* ----- Document download affordances ----- */
.mgaa-doc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.mgaa-dl-icon {
	flex: 0 0 auto;
	color: var(--aza-red);
}

.mgaa-docs-intro {
	margin: 0 0 1.25rem;
}

.mgaa-docs-all {
	margin: 1.25rem 0 1.75rem;
}

.mgaa-btn--download-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mgaa-btn--download-all .mgaa-dl-icon {
	color: currentColor;
}

/* ----- Buttons (match the site/Figma button: 4px radius, taller padding) ----- */
.mgaa-btn {
	display: inline-block;
	background: var(--aza-red);
	color: var(--aza-white);
	font-family: var(--mgaa-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	text-decoration: none;
	padding: 16px 22px;
	border-radius: 4px;
	white-space: nowrap;
}

.mgaa-btn:hover,
.mgaa-btn:focus {
	background: var(--aza-red-hover);
	color: var(--aza-white);
}

.mgaa-cell-action {
	text-align: right;
	white-space: nowrap;
}

/* ----- Visible focus for keyboard users (WCAG 2.4.7) -----
   Covers the table links/buttons AND every other link/control the plugin emits:
   the detail page (contact, mailto, language note, document links), and the
   standalone interstitial / manage / response pages (Back, Unsubscribe, Return,
   plus the gate form's inputs and submit). Without this, those elements would
   fall back to the theme's focus style — none on a theme that resets outlines. */
.mgaa-table a:focus-visible,
.mgaa-btn:focus-visible,
.mgaa-back__link:focus-visible,
.mgaa-solicitation a:focus-visible,
.mgaa-solicitation-page a:focus-visible,
.mgaa-solicitation-page button:focus-visible,
.mgaa-solicitation-page input:focus-visible,
.mgaa-solicitation-page select:focus-visible,
.mgaa-solicitation-page textarea:focus-visible {
	outline: 3px solid var(--mgaa-focus);
	outline-offset: 2px;
}

/* ----- Full-row click target (Current + Upcoming only) -----
   The Title remains the one real, focusable, screen-reader-announced link.
   A stretched overlay makes the whole row clickable for mouse users without
   adding a second link or breaking keyboard/AT. Not applied to Surplus,
   whose rows already contain a View Auction button. */
.mgaa-table--current tbody tr,
.mgaa-table--upcoming tbody tr,
.mgaa-table--past tbody tr {
	position: relative;
}

.mgaa-table--current tbody tr:hover,
.mgaa-table--upcoming tbody tr:hover,
.mgaa-table--past tbody tr:hover {
	background: var(--aza-light-grey);
}

.mgaa-table--current tbody td,
.mgaa-table--upcoming tbody td,
.mgaa-table--past tbody td {
	cursor: pointer;
}

/* Keep the Number cell selectable/copyable despite the row overlay: raise it
   above the stretched ::after (which sits at z-index auto in the row's context). */
.mgaa-table--current tbody td:nth-child(2),
.mgaa-table--upcoming tbody td:nth-child(2),
.mgaa-table--past tbody td:nth-child(2) {
	position: relative;
	z-index: 1;
	cursor: auto;
}

.mgaa-table--current .mgaa-title-link::after,
.mgaa-table--upcoming .mgaa-title-link::after,
.mgaa-table--past .mgaa-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ----- Empty state (inherits theme type; just a contained notice) ----- */
.mgaa-empty {
	background: var(--mgaa-empty-bg);
	border: 1px solid var(--mgaa-row-border);
	border-radius: var(--mgaa-radius);
	padding: 1.25rem 1.5rem;
	margin: 0;
}

/* ----- Solicitation detail page -----
   Only structural spacing here. The number (H1), title (H2), body copy and
   hyperlinks deliberately inherit the active theme's type styles. */
.mgaa-solicitation__number {
	margin: 0 0 0.4rem;
}

.mgaa-solicitation__title {
	margin: 0 0 0.65rem;
}

.mgaa-solicitation__head {
	margin: 0 0 2.25rem;
}

/* Give the status/countdown pill room to breathe below the solicitation number. */
.mgaa-status-wrap {
	margin: 0.65rem 0 0;
}

.mgaa-status {
	display: inline-block;
	font-family: var(--mgaa-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border-radius: var(--mgaa-radius);
	border: 1px solid var(--mgaa-row-border);
	background: #efe7e3;
	color: var(--aza-black);
}

.mgaa-status--upcoming {
	background: #f3eed9;
}

.mgaa-status--open {
	background: #e6f4ea;
	border-color: #b6dcc0;
	color: #14622e;
}

.mgaa-closes-in {
	margin-left: 0.6rem;
	font-weight: 600;
	color: #14622e;
	white-space: nowrap;
}

/* Contact card: keep a long email from overflowing / breaking awkwardly. */
.mgaa-contact-card .mgaa-field__value {
	overflow-wrap: anywhere;
	font-size: 0.95rem;
}

/* Each field is a tight label+value pair, with clear space BETWEEN pairs.
   Scoped under .mgaa-solicitation and with an explicit top margin so the theme's
   heavier `h3` content margins don't make the label float midway between its own
   value and the next field (which read as one big undifferentiated column). */
.mgaa-solicitation .mgaa-field {
	margin: 0 0 2.75rem;
}

/* Drop the trailing margin under the last content block so the gap to the footer
   is just the footer's own top padding — matching the top gap for uniform spacing. */
.mgaa-solicitation > :last-child {
	margin-bottom: 0;
}

/* Uniform label -> value gap across every field (matching the Documents
   spacing, which tracks the Figma layout); the larger field -> field gap above
   keeps each label+value grouped. */
.mgaa-solicitation .mgaa-field__label {
	margin: 0 0 0.85rem;
	line-height: 1.25;
}

.mgaa-solicitation .mgaa-field__value {
	margin: 0;
}

/* Normalize nested prose (e.g. the Overview's wp_kses_post <p>) so its label ->
   value gap matches the plain single-line fields rather than adding a stray
   paragraph margin. */
.mgaa-solicitation .mgaa-field__value > :first-child {
	margin-top: 0;
}

.mgaa-solicitation .mgaa-field__value > :last-child {
	margin-bottom: 0;
}

/* Date+time field values: date on the first line, time (with Arizona Time) on
   the second — same styling on both lines. */
.mgaa-dt__date,
.mgaa-dt__time {
	display: block;
}

/* Key dates: a compact light-grey card grid so the four dates don't run down
   the page as four tall blocks. */
.mgaa-dates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.5rem;
	background: var(--mgaa-empty-bg);
	border: 1px solid var(--mgaa-row-border);
	border-radius: var(--mgaa-radius);
	padding: 1.5rem 1.75rem;
}

.mgaa-date-item__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

/* Back-to-listing link (sits above the title) + post-registration notice. */
.mgaa-back {
	margin: 0 0 0.85rem;
}

.mgaa-back__arrow {
	margin-right: 0.25rem;
}

.mgaa-notice--success {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	background: #eef6ee;
	border: 1px solid #cfe6cf;
	border-left: 4px solid #1a7f37;
	border-radius: var(--mgaa-radius);
}

.mgaa-notice--success p {
	margin: 0;
}

.mgaa-notice--success .mgaa-notice__action {
	margin-top: 0.5rem;
	font-size: 0.95rem;
}

/* Plugin single-solicitation / gate / manage templates: comfortable page
   padding so content sits clearly between the site header and footer. */
.mgaa-solicitation-page {
	/* Whitespace around the content: 65px under the red header, a touch more (75px)
	   above the footer. (The paired .mgaa-solicitation > :last-child rule zeroes the
	   trailing block margin so this bottom pad isn't doubled.) */
	padding: 65px 0 75px;
}

/* More room between the site header and the title; the title band's own bottom
   is tight so the page padding above sets the title -> number gap. */
.news-post__header.mgaa-solicitation-header {
	padding-top: clamp(3.5rem, 5vw, 4.75rem);
}

/* Overview spans full width above; Key dates + Contact sit side by side in one
   row below, so a long pasted overview never leaves an awkward gap beside a short
   contact block. Both are plain columns aligned under their own heading (no boxes)
   for uniform styling; Key dates gets more room than the compact Contact. */
.mgaa-solicitation__info {
	margin: 0 0 2.75rem;
}

/* Spacing between the two columns comes from the grid gap, so drop the per-field
   bottom margin inside the row. */
.mgaa-solicitation .mgaa-solicitation__info .mgaa-field {
	margin-bottom: 0;
}

.mgaa-solicitation__info.has-both {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 2rem 3rem;
	align-items: start;
}

@media (max-width: 760px) {
	.mgaa-solicitation__info.has-both {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.mgaa-solicitation-page .mgaa-solicitation {
	max-width: 70rem;
}

/* Gate registration + vendor manage/result pages: a centered card on a light
   AZA-grey field so it reads as a distinct, focused step, with white inputs. */
.mgaa-gate-page,
.mgaa-manage-page {
	max-width: 46rem;
	margin: 0 auto;
	text-align: left;
	background: var(--mgaa-empty-bg);
	border: 1px solid var(--mgaa-row-border);
	border-radius: var(--mgaa-radius);
	padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 2.5rem;
}

.mgaa-gate-page__title,
.mgaa-manage-page__title {
	margin: 0 0 0.75rem;
	text-align: left;
}

.mgaa-gate-page__intro,
.mgaa-manage-page__intro {
	margin: 0 0 1.5rem;
}

/* Breathing room before the form; left-aligned labels + a left submit row. */
.mgaa-gate-page .gform_wrapper,
.mgaa-manage-page .gform_wrapper {
	margin-top: 1.25rem;
	text-align: left;
}

.mgaa-gate-page .gform_wrapper .gfield_label,
.mgaa-manage-page .gform_wrapper .gfield_label {
	text-align: left;
}

.mgaa-gate-page .gfield input,
.mgaa-gate-page .gfield textarea,
.mgaa-gate-page .gfield select,
.mgaa-manage-page .gfield input,
.mgaa-manage-page .gfield textarea,
.mgaa-manage-page .gfield select {
	background-color: var(--aza-white);
}

.mgaa-gate-page .gform_footer,
.mgaa-manage-page .gform_footer {
	text-align: left;
	padding-left: 0;
}

.mgaa-gate-page__back,
.mgaa-manage-page__unsub {
	margin-top: 1.5rem;
	text-align: left;
}

/* =========================================================================
   Surplus property: photo thumbnail + the pop-up it opens.
   The thumbnail is a real link to the full-size JPG, so it works with the
   script blocked; the overlay below is only ever shown by mgaa-lightbox.js.
   ========================================================================= */
.mgaa-surplus-item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.mgaa-surplus-thumb {
	flex: 0 0 auto;
	display: block;
	line-height: 0;              /* no descender gap under the image */
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--mgaa-row-border);
	background: var(--aza-light-grey);
}

.mgaa-surplus-thumb img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.mgaa-surplus-thumb:hover,
.mgaa-surplus-thumb:focus {
	border-color: var(--aza-red);
}

/* ----- The pop-up -----
   Layout note: the close button is a flex item in its own bar, not an
   absolutely-positioned child. Themes routinely style every <button> with a
   compound selector like `button:not(.a, .b)` — specificity 0-1-1, which beats
   a single class — and a `position: relative` from such a rule would shove an
   absolutely-positioned close button off the overlay. The selectors below are
   deliberately two classes deep for the same reason: they have to outrank that
   button skin (padding, background, radius, transforms) on this theme. */
.mgaa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;             /* above sticky headers and cookie bars */
	display: flex;
	flex-direction: column;
	padding: 0.75rem;
	background: rgba(0, 0, 0, 0.85);
}

/* The plugin's stylesheet may load before the theme's reset, and some themes
   still style [hidden] elements as blocks. */
.mgaa-lightbox[hidden] {
	display: none;
}

html.mgaa-lightbox-open {
	overflow: hidden;            /* stop the page scrolling behind the photo */
}

.mgaa-lightbox__bar {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
}

.mgaa-lightbox .mgaa-lightbox__figure {
	flex: 1 1 auto;
	min-height: 0;               /* let the image shrink instead of overflowing */
	margin: 0;
	padding: 0 0.5rem 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.mgaa-lightbox .mgaa-lightbox__image {
	display: block;
	max-width: min(1100px, 92vw);
	max-height: 78vh;
	width: auto;
	height: auto;
	background: var(--aza-white);
	border-radius: var(--mgaa-radius);
}

.mgaa-lightbox .mgaa-lightbox__caption {
	font-family: var(--mgaa-font);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--aza-white);
	text-align: center;
	max-width: 60ch;
}

.mgaa-lightbox .mgaa-lightbox__caption[hidden] {
	display: none;
}

.mgaa-lightbox button.mgaa-lightbox__close {
	position: static;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;                 /* 44px target (WCAG 2.5.8) */
	height: 44px;
	min-width: 0;                /* theme button skins set a min-width */
	margin: 0;
	padding: 0;
	font-family: var(--mgaa-font);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--aza-white);
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}

.mgaa-lightbox button.mgaa-lightbox__close:hover {
	color: var(--aza-white);
	background: var(--aza-red);
	border-color: var(--aza-red);
	transform: none;
}

/* White ring: the standard blue would be lost against the dark backdrop. */
.mgaa-lightbox button.mgaa-lightbox__close:focus-visible {
	outline: 3px solid var(--aza-white);
	outline-offset: 2px;
}

@media (max-width: 860px) {
	/* In the stacked card view the cell is already a flex row with its
	   data-label at 42%, so the photo + title sit in the second column. */
	.mgaa-surplus-item {
		gap: 0.75rem;
		flex: 1 1 auto;
		min-width: 0;
	}

	.mgaa-surplus-item__title {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.mgaa-surplus-thumb img {
		width: 56px;
		height: 56px;
	}

	/* The generic stacked-card label is 42% wide, which leaves a photo and a
	   long item name fighting over the rest. Give this one cell more room. */
	.mgaa-table--surplus tbody td.mgaa-cell-title::before {
		flex-basis: 26%;
	}

	.mgaa-lightbox .mgaa-lightbox__image {
		max-height: 70vh;        /* leave room for the caption on short screens */
	}
}

@media (max-width: 480px) {
	.mgaa-surplus-thumb img {
		width: 48px;
		height: 48px;
	}

	.mgaa-surplus-item {
		gap: 0.6rem;
	}
}

/* =========================================================================
   Responsive: stack rows into cards below 860px. (860, not 760: the six-column
   Current Solicitations table is ~805px at its natural width, so tablet portrait
   would otherwise need an awkward sideways scroll inside the wrapper.)
   Once the table is display:block the browser drops the real table semantics, so
   the column header <-> cell association can't be preserved anyway; we hide the
   header row and label each stacked cell via its data-label (::before) instead.
   The sr-only <caption> still names the table for assistive tech.
   ========================================================================= */
@media (max-width: 860px) {
	.mgaa-table thead {
		display: none;
	}

	.mgaa-table,
	.mgaa-table tbody,
	.mgaa-table tr,
	.mgaa-table td {
		display: block;
		width: 100%;
	}

	/* An empty optional cell (blank description, no auction link) would otherwise
	   show a dangling label with no value — hide those. */
	.mgaa-table tbody td.mgaa-cell-empty {
		display: none;
	}

	.mgaa-table tr {
		border: 1px solid var(--mgaa-row-border);
		border-radius: var(--mgaa-radius);
		margin-bottom: 1rem;
		padding: 0.25rem 0;
	}

	.mgaa-table tbody tr:first-child td,
	.mgaa-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		border-bottom: 0;
		padding: 0.55rem 1rem;
	}

	.mgaa-table tbody td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--aza-black);
		flex: 0 0 42%;
	}

	.mgaa-cell-action {
		text-align: left;
		justify-content: flex-start;
	}

	.mgaa-btn {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* ----------------------------------------------------------------------------
 * Vendor sign-up: accessible "choose up to 5" helper + tokenized-link pages.
 * -------------------------------------------------------------------------- */
.mgaa-sub-status {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--aza-black, #1a1a1a);
}

.gchoice.mgaa-choice-disabled,
label.mgaa-choice-disabled {
	opacity: 0.5;
}

.mgaa-interstitial .mgaa-container {
	max-width: 40rem;
	margin: 3rem auto;
	padding: 0 1.25rem;
}

.mgaa-interstitial #mgaa-response-main:focus,
.mgaa-interstitial #mgaa-manage-main:focus {
	outline: none;
}

/* =========================================================================
   Print: procurement staff and vendors print solicitations. Make the table
   readable on paper (the red header bar and white-on-red text disappear when
   browsers drop backgrounds), and hide screen-only controls.
   ========================================================================= */
@media print {
	.mgaa-table thead th {
		background: none;
		color: #000;
		border-bottom: 2px solid #000;
	}

	.mgaa-table,
	.mgaa-table th,
	.mgaa-table td {
		color: #000;
	}

	.mgaa-doc-link {
		color: #000;
		text-decoration: none;
	}

	/* Screen-only controls that mean nothing on paper. */
	.mgaa-docs-all,
	.mgaa-back,
	.mgaa-cell-action .mgaa-btn,
	.mgaa-download-icon,
	.mgaa-lightbox {
		display: none !important;
	}
}

/* =========================================================================
   Phones (≤ 600px): one-column cards. The label | value rows above leave a
   long title and a stacked date fighting over half the width, so here each
   field is a small caps label over its value, the title leads the card, Type
   and Number share a line, and the action button closes the card.
   ========================================================================= */
@media (max-width: 600px) {
	.mgaa-table tr {
		display: flex;
		flex-wrap: wrap;
		padding: 0.35rem 0 0.5rem;
	}

	.mgaa-table tbody tr:first-child td,
	.mgaa-table tbody td {
		flex: 1 1 100%;
		min-width: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
		padding: 0.55rem 1rem;
	}

	.mgaa-table tbody td::before {
		flex: none;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--aza-dark-grey, #4F545C);
	}

	/* Type, Number and ID Number stack like every other field — one column
	   reads best on a phone (owner preference, 2026-09-10). */

	/* The title leads the card and needs no label — it reads as the heading. */
	.mgaa-table tbody td.mgaa-cell-title {
		order: -1;
		padding-top: 0.75rem;
	}

	.mgaa-table tbody td.mgaa-cell-title::before {
		display: none;
	}

	.mgaa-title-link,
	.mgaa-surplus-item__title {
		font-size: 1.0625rem;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	/* Surplus: the photo runs full width above the title; a 72px thumbnail
	   left the title squeezed into a strip beside it. */
	.mgaa-table--surplus .mgaa-surplus-item {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.mgaa-table--surplus .mgaa-surplus-thumb {
		width: 100%;
	}

	.mgaa-table--surplus .mgaa-surplus-thumb img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	/* Date and time on one line keeps each card short. */
	.mgaa-table .mgaa-date,
	.mgaa-table .mgaa-time {
		display: inline;
	}

	.mgaa-table .mgaa-time {
		margin-left: 0.4rem;
	}

	.mgaa-cell-action {
		padding-top: 0.75rem;
	}
}