/**
 * LEGACY VIEWS — styling for content the design system didn't author.
 *
 * Loaded on page.php, single.php, archive.php, index.php and 404.php only (see
 * iss_enqueue_legacy_assets() in functions.php). Consumes the tokens from
 * css/iss-global.css and declares `iss-global` as a dependency, so cascade order
 * is guaranteed.
 *
 * WHY THIS FILE EXISTS SEPARATELY FROM iss-global.css
 * Everything in the global sheet styles markup we wrote. Everything here styles
 * markup we did NOT write — a decade of editor output and WPBakery rows — and
 * that is a genuinely different job with different rules. Keeping it apart also
 * means none of these defensive selectors can leak onto a designed template.
 *
 * THE TWO CONTENT MODES (set by iss_legacy_body_class())
 *   .iss-prose ............ classic editor content. Gets the full typographic
 *                           treatment: measure, scale, list markers, links.
 *                           Section 17 of iss-global.css establishes the base;
 *                           this file extends it for what real legacy content
 *                           actually contains — images with alignment classes,
 *                           tables, blockquotes, iframes, buttons, captions.
 *   .iss-legacy-builder ... WPBakery output. Its rows already carry their own
 *                           layout and inline styling, so it gets the OPPOSITE
 *                           treatment: `.iss-page`'s defensive resets are undone
 *                           inside it (lists get their markers back, headings get
 *                           their margins back) and the type is normalised onto
 *                           our tokens WITHOUT touching the row geometry. Trying
 *                           to redesign hand-built builder layouts from CSS is
 *                           how you break 86 pages at once; this is deliberately
 *                           conservative.
 * Both modes then share the SHARED NORMALISATION block at the end, which is the
 * part that actually retires the old look: The7's fonts, its link colour, its
 * button styling and its `text-align: justify` blocks.
 */

/* ============================================================
   0. ONE COLUMN WIDTH PER ARTICLE
   ------------------------------------------------------------
   The7's sidebar is switched off on these templates, but two inherited
   max-widths were still holding the body inside the left part of the column it
   had been given, so the freed space read as a hidden side rail rather than as
   margin. Measured on a 1600px viewport before this rule:

     .iss-page      1200px   (The7's own wrapper — outside our control)
     .iss-wrap      1120px   breadcrumb, tags, prev/next, related grid
     .iss-article-hero 800px  `max-width: 800px`, below
     .iss-prose      746px   `max-width: 74ch`, from iss-global.css §17

   374px of dead space to the right of the body — and worse, the tags row and
   the related grid underneath it DID fill 1120px, so the article stepped in and
   out three times down the page. That alternation is what made it look broken
   rather than merely narrow.

   Both caps are released here so every element in a legacy article shares one
   left and one right edge, filling the content area it is given.

   THE TRADE-OFF, STATED: 1120px of 16.5px text is roughly 130 characters per
   line, which is past comfortable reading measure (~75). The type below is
   sized up to claw some of that back, and legacy bodies are full of floated
   images that shorten lines in practice. If the long lines ever matter more
   than the full-bleed column, the fix is to restore a max-width HERE and centre
   it with `margin-inline: auto` — which keeps the whitespace symmetric, so it
   still never reads as a hidden sidebar.

   Scoped to the two article templates by their own wrapper class, so the
   measure that `.iss-prose` gets on the designed templates (the long-form
   section of single-resource.php) is untouched.
   ============================================================ */
.iss-page.iss-legacy-single .iss-article-hero,
.iss-page.iss-legacy-single .iss-prose,
.iss-page.iss-legacy-single .iss-lead,
.iss-page.iss-legacy-page .iss-prose,
.iss-page.iss-legacy-page .iss-lead {
	max-width: none;
}

/*
 * Sized up for the wider measure: 17.5px/1.78 instead of 16.5px/1.7. Applies to
 * the paragraphs and list items the prose treatment owns, not to builder rows —
 * those carry their own type scale and are left alone on purpose.
 */
.iss-page.iss-legacy-single .iss-prose p,
.iss-page.iss-legacy-single .iss-prose li,
.iss-page.iss-legacy-page .iss-prose p,
.iss-page.iss-legacy-page .iss-prose li {
	font-size: 17.5px;
	line-height: 1.78;
}

/* ============================================================
   1. BREADCRUMB SEPARATOR — MOVED TO iss-global.css §6
   ------------------------------------------------------------
   `.iss-ctx-sep` used to be styled here, and that was a bug once the breadcrumb
   was centralised (2026-09-04): this file loads ONLY on the five legacy
   templates, so on every designed page — /solutions/<x>/, /customers/<x>/, the
   snapshots — the separator rendered with no spacing and no dimming, reading
   "SOLUTIONS/SUPPLIER LIFECYCLE MANAGEMENT". Those templates used to write a
   literal " / " into their own markup and so never needed the rule.
   ============================================================ */

/* ============================================================
   2. HERO ADDITIONS — article meta, featured image
   ============================================================ */
.iss-page .iss-article-hero { display: grid; gap: 16px; justify-items: start; max-width: 800px; }

.iss-page .iss-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-family: var(--iss-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-article-meta > * + *::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
	margin-right: 18px;
	vertical-align: middle;
}

/*
 * The featured image sits between the hero and the body rather than inside
 * either, so a post with no thumbnail simply closes the gap instead of leaving a
 * hole. `max-height` is a guard, not a crop preference: several 2014-era featured
 * images are 2000px tall diagrams that would otherwise push the article a full
 * screen down.
 */
.iss-page .iss-legacy-figure {
	margin: 0 0 clamp(28px, 4vw, 44px);
	border-radius: var(--iss-r-lg);
	overflow: hidden;
	border: 1px solid var(--iss-line);
	background: var(--iss-card);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-legacy-figure img {
	display: block;
	width: 100%;
	max-height: 460px;
	object-fit: cover;
}

/* ============================================================
   3. PROSE — extends section 17 of iss-global.css for real editor content
   ============================================================ */
.iss-page .iss-prose { color: var(--iss-muted); }
.iss-page .iss-prose h2,
.iss-page .iss-prose h3,
.iss-page .iss-prose h4,
.iss-page .iss-prose h5,
.iss-page .iss-prose h6 { color: var(--iss-ink); }
.iss-page .iss-prose h4 { margin-top: 24px; font-size: 17px; }
.iss-page .iss-prose h5,
.iss-page .iss-prose h6 {
	margin: 22px 0 0;
	font-family: var(--iss-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-blue);
}
.iss-page .iss-prose a:hover { color: var(--iss-blue-dark); }

/* Images. Legacy content is full of align* classes from the classic editor. */
.iss-page .iss-prose img {
	height: auto;
	border-radius: var(--iss-r-sm);
}
.iss-page .iss-prose figure { margin: 0; }
.iss-page .iss-prose .alignleft,
.iss-page .iss-prose img.alignleft { float: left; margin: 6px 26px 20px 0; }
.iss-page .iss-prose .alignright,
.iss-page .iss-prose img.alignright { float: right; margin: 6px 0 20px 26px; }
.iss-page .iss-prose .aligncenter,
.iss-page .iss-prose img.aligncenter { display: block; margin-inline: auto; }
.iss-page .iss-prose .wp-caption { max-width: 100%; }
.iss-page .iss-prose .wp-caption-text,
.iss-page .iss-prose figcaption {
	font-size: 13px;
	color: var(--iss-muted-2);
	margin-top: 8px;
	line-height: 1.5;
}
/* Floats must not escape the article into the next section. */
.iss-page .iss-prose::after { content: ""; display: table; clear: both; }

/* Blockquote: the design system's pull-quote look, applied to editor markup. */
.iss-page .iss-prose blockquote {
	margin: 30px 0;
	padding: 22px 26px;
	border: 1px solid var(--iss-line);
	border-left: 3px solid var(--iss-blue);
	border-radius: var(--iss-r-sm);
	background: var(--iss-card);
	color: var(--iss-ink);
	font-size: 18px;
	line-height: 1.55;
}
.iss-page .iss-prose blockquote p { color: inherit; font-size: inherit; }
.iss-page .iss-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	font-style: normal;
	color: var(--iss-muted-2);
}

/* Tables. Several data-sheet pages hold real tables; they must scroll on mobile. */
.iss-page .iss-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 26px 0;
	font-size: 15px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r-sm);
	overflow: hidden;
}
.iss-page .iss-prose th,
.iss-page .iss-prose td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--iss-line); }
.iss-page .iss-prose th { background: var(--iss-bg-tint); color: var(--iss-ink); font-weight: 600; }
.iss-page .iss-prose tr:last-child td { border-bottom: 0; }

.iss-page .iss-prose hr { border: 0; border-top: 1px solid var(--iss-line); margin: 34px 0; }
.iss-page .iss-prose pre {
	background: var(--iss-navy);
	color: #dbeafe;
	padding: 18px 20px;
	border-radius: var(--iss-r-sm);
	overflow-x: auto;
	font-family: var(--iss-mono);
	font-size: 13.5px;
	line-height: 1.6;
}
.iss-page .iss-prose code {
	font-family: var(--iss-mono);
	font-size: .92em;
	background: var(--iss-bg-tint);
	padding: 2px 6px;
	border-radius: 5px;
	color: var(--iss-ink);
}
.iss-page .iss-prose pre code { background: none; padding: 0; color: inherit; }

/* Embeds — 2015-era posts embed YouTube with fixed-width iframes. */
.iss-page .iss-prose iframe,
.iss-page .iss-prose embed,
.iss-page .iss-prose object,
.iss-page .iss-prose video {
	max-width: 100%;
	border: 0;
	border-radius: var(--iss-r-sm);
}
.iss-page .iss-prose .wp-video,
.iss-page .iss-prose .wp-embed-aspect-16-9 > * { max-width: 100%; }

/* ============================================================
   4. BUILDER PASSTHROUGH — undo `.iss-page`'s resets inside WPBakery rows
   ------------------------------------------------------------
   `.iss-page` deliberately strips list markers, heading margins and link colour
   so our own components start from zero. Builder content assumes browser
   defaults, so inside `.iss-legacy-builder` those three resets are put back —
   and nothing else is. Row widths, columns, background images and inline styles
   are left exactly as the builder emitted them.
   ============================================================ */
.iss-page .iss-legacy-builder ul,
.iss-page .iss-legacy-builder ol { margin: 0 0 1em; padding-left: 22px; }
.iss-page .iss-legacy-builder ul { list-style: disc; }
.iss-page .iss-legacy-builder ol { list-style: decimal; }
.iss-page .iss-legacy-builder li { margin-bottom: 6px; line-height: 1.6; }
/* WPBakery's own list widgets manage their own markers — don't double up. */
.iss-page .iss-legacy-builder .wpb_wrapper > ul.wpb_thumbnails-fluid,
.iss-page .iss-legacy-builder ul[class*="vc_"],
.iss-page .iss-legacy-builder ul[class*="wpb_"],
.iss-page .iss-legacy-builder ul[class*="the7"],
.iss-page .iss-legacy-builder ul[class*="dt-"] { list-style: none; padding-left: 0; }

.iss-page .iss-legacy-builder p { margin: 0 0 1em; }
.iss-page .iss-legacy-builder h1,
.iss-page .iss-legacy-builder h2,
.iss-page .iss-legacy-builder h3,
.iss-page .iss-legacy-builder h4,
.iss-page .iss-legacy-builder h5,
.iss-page .iss-legacy-builder h6 { margin: 0 0 .6em; line-height: 1.2; }
/*
 * Builder headings keep the design system's family and colour but NOT its
 * clamped display sizes — a `h2` inside a three-column row is a card title, not
 * a section headline, and the 38px global size would break the row.
 */
.iss-page .iss-legacy-builder h1 { font-size: clamp(28px, 3.4vw, 40px); }
.iss-page .iss-legacy-builder h2 { font-size: clamp(23px, 2.4vw, 30px); }
.iss-page .iss-legacy-builder h3 { font-size: 21px; }
.iss-page .iss-legacy-builder h4 { font-size: 18px; }
.iss-page .iss-legacy-builder h5 { font-size: 16px; }
.iss-page .iss-legacy-builder h6 { font-size: 14px; letter-spacing: 0; text-transform: none; }

.iss-page .iss-legacy-builder a { color: var(--iss-blue); text-decoration: none; }
.iss-page .iss-legacy-builder a:hover { color: var(--iss-blue-dark); }
/* …except where the builder styles the link itself as a button or an icon. */
.iss-page .iss-legacy-builder a.vc_btn,
.iss-page .iss-legacy-builder a[class*="vc_general"],
.iss-page .iss-legacy-builder a[class*="wpb_button"],
.iss-page .iss-legacy-builder a[class*="dt-btn"],
.iss-page .iss-legacy-builder .vc_icon_element a,
.iss-page .iss-legacy-builder .wpb_single_image a { color: inherit; }

.iss-page .iss-legacy-builder img { height: auto; }
.iss-page .iss-legacy-builder table { border-collapse: collapse; }

/*
 * Builder rows use negative margins to bleed past their container. Inside
 * `.iss-wrap` that overflows to the right, and `.iss-page` has
 * `overflow-x: hidden`, so the row would be clipped rather than bled. Pinning
 * full-width rows back to the wrap is the honest fix: the row stays inside the
 * reading column instead of half-escaping it.
 */
.iss-page .iss-legacy-builder .vc_row[data-vc-full-width],
.iss-page .iss-legacy-builder .vc_row.vc_row-no-padding { margin-left: 0; margin-right: 0; width: auto; left: auto; }

/* ============================================================
   5. SHARED NORMALISATION — retire The7's look in BOTH modes
   ------------------------------------------------------------
   This is the block that does the visible work on the old pages. Each rule
   targets one specific legacy habit, and each is scoped to the legacy body so it
   cannot reach a designed template.
   ============================================================ */
.iss-page .iss-prose,
.iss-page .iss-legacy-builder { font-family: var(--iss-sans); }

/*
 * Inline font declarations. A decade of pasted-from-Word content carries
 * `font-family: Verdana`, `Arial`, `Times New Roman` and 11px sizes as inline
 * styles, and those are exactly what makes these pages read as old. `!important`
 * is load-bearing here — it is beating an inline style attribute, which no
 * ordinary selector can. Restricted to the font family: inline colour, weight
 * and alignment are left alone, because those are sometimes intentional.
 */
.iss-page .iss-prose [style*="font-family"],
.iss-page .iss-legacy-builder [style*="font-family"] { font-family: var(--iss-sans) !important; }

/*
 * `text-align: justify` is on dozens of the 2014-2016 posts — it was the house
 * style. Justified text with no hyphenation produces rivers of whitespace and is
 * the single clearest "this page is from 2015" signal. Overridden to the left,
 * again against an inline style.
 */
.iss-page .iss-prose [style*="text-align: justify"],
.iss-page .iss-prose [style*="text-align:justify"],
.iss-page .iss-legacy-builder [style*="text-align: justify"],
.iss-page .iss-legacy-builder [style*="text-align:justify"] { text-align: left !important; }

/* The7's own content classes, restyled onto the tokens rather than left as-is. */
.iss-page .iss-prose .wf-cell,
.iss-page .iss-legacy-builder .wf-cell { box-sizing: border-box; }
.iss-page .iss-prose .dt-btn,
.iss-page .iss-legacy-builder .dt-btn,
.iss-page .iss-prose .vc_btn3,
.iss-page .iss-legacy-builder .vc_btn3,
.iss-page .iss-prose input[type="submit"],
.iss-page .iss-legacy-builder input[type="submit"],
.iss-page .iss-prose button[type="submit"],
.iss-page .iss-legacy-builder button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: linear-gradient(135deg, #1a86d6, var(--iss-blue-dark));
	color: #fff;
	font-family: var(--iss-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 8px 22px -6px rgba(12, 115, 201, .55);
	cursor: pointer;
	transition: transform .22s, box-shadow .22s;
}
.iss-page .iss-prose .dt-btn:hover,
.iss-page .iss-legacy-builder .dt-btn:hover,
.iss-page .iss-prose .vc_btn3:hover,
.iss-page .iss-legacy-builder .vc_btn3:hover,
.iss-page .iss-prose input[type="submit"]:hover,
.iss-page .iss-legacy-builder input[type="submit"]:hover,
.iss-page .iss-prose button[type="submit"]:hover,
.iss-page .iss-legacy-builder button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -8px rgba(12, 115, 201, .65);
	color: #fff;
}

/* Editor form fields (Gravity Forms has its own treatment in iss-global.css). */
.iss-page .iss-prose input[type="text"],
.iss-page .iss-prose input[type="email"],
.iss-page .iss-prose input[type="tel"],
.iss-page .iss-prose textarea,
.iss-page .iss-prose select,
.iss-page .iss-legacy-builder input[type="text"],
.iss-page .iss-legacy-builder input[type="email"],
.iss-page .iss-legacy-builder input[type="tel"],
.iss-page .iss-legacy-builder textarea,
.iss-page .iss-legacy-builder select {
	font-family: var(--iss-sans);
	font-size: 15px;
	padding: 11px 14px;
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r-sm);
	background: var(--iss-card);
	color: var(--iss-ink);
	max-width: 100%;
}
.iss-page .iss-prose input:focus-visible,
.iss-page .iss-prose textarea:focus-visible,
.iss-page .iss-legacy-builder input:focus-visible,
.iss-page .iss-legacy-builder textarea:focus-visible {
	outline: 3px solid rgba(12, 115, 201, .3);
	outline-offset: 1px;
	border-color: var(--iss-blue);
}

/*
 * The LinkedIn "Follow" widget that addJavascript() in functions.php appends to
 * every post's content. It renders as an unstyled iframe mid-paragraph; give it
 * air so it reads as a footer element rather than a layout bug.
 */
.iss-page .iss-prose .IN-widget,
.iss-page .iss-legacy-builder .IN-widget { display: block; margin-top: 26px; }

/* ============================================================
   6. ARTICLE FOOTER — tags, prev/next
   ============================================================ */
.iss-page .iss-article-tags {
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--iss-line);
	display: grid;
	gap: 14px;
	justify-items: start;
}
.iss-page .iss-tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.iss-page .iss-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-card);
	color: var(--iss-muted);
	font-size: 13px;
	font-weight: 500;
	transition: border-color .2s, color .2s, transform .2s;
}
.iss-page .iss-tag:hover { border-color: var(--iss-blue); color: var(--iss-blue); transform: translateY(-1px); }

.iss-page .iss-article-nav {
	margin-top: 34px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.iss-page .iss-article-nav-link {
	display: grid;
	gap: 9px;
	padding: 20px 22px;
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	background: var(--iss-card);
	box-shadow: var(--iss-e1);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.iss-page .iss-article-nav-link:hover {
	transform: translateY(-3px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .25);
}
.iss-page .iss-article-nav-link.is-next { text-align: right; justify-items: end; }
.iss-page .iss-article-nav-title {
	color: var(--iss-ink);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
}
/* A post at either end of the catalogue has one neighbour; it takes the full row. */
.iss-page .iss-article-nav > :only-child { grid-column: 1 / -1; }

.iss-page .iss-article-back { margin-top: 26px; }

/* ============================================================
   7. LISTING — post card, pagination, empty state
   ============================================================ */
.iss-page .iss-post-card { display: flex; flex-direction: column; }
.iss-page .iss-post-card h3 { margin-bottom: 8px; }
/*
 * The date pins to the bottom of the card so a row of cards with titles of
 * different lengths still has its dates on one line.
 */
.iss-page .iss-post-card .iss-inlink { margin-top: auto; padding-top: 14px; }
.iss-page .iss-post-card-date {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--iss-line);
	font-family: var(--iss-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-post-card-media {
	margin: -24px -24px 18px;
	border-radius: var(--iss-r) var(--iss-r) 0 0;
	overflow: hidden;
	background: var(--iss-bg-tint);
}
.iss-page .iss-post-card-media img {
	display: block;
	width: 100%;
	height: 168px;
	object-fit: cover;
}

.iss-page .iss-pager {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}
.iss-page .iss-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--iss-line-strong);
	background: var(--iss-card);
	color: var(--iss-muted);
	font-size: 14px;
	font-weight: 600;
	transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.iss-page .iss-pager a.page-numbers:hover {
	border-color: var(--iss-blue);
	color: var(--iss-blue);
	transform: translateY(-1px);
}
.iss-page .iss-pager .page-numbers.current {
	background: linear-gradient(135deg, #1a86d6, var(--iss-blue-dark));
	border-color: transparent;
	color: #fff;
}
.iss-page .iss-pager .page-numbers.dots { border-color: transparent; background: none; min-width: 24px; padding: 0; }
.iss-page .iss-pager-inline { justify-content: flex-start; margin-top: 30px; }

.iss-page .iss-empty {
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r-lg);
	box-shadow: var(--iss-e1);
	padding: clamp(30px, 5vw, 54px);
	text-align: center;
	display: grid;
	gap: 14px;
	justify-items: center;
}

/* ============================================================
   8. 404
   ============================================================ */
.iss-page .iss-404-search {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 560px;
	margin-top: 8px;
}
.iss-page .iss-404-field {
	flex: 1 1 260px;
	min-width: 0;
	font-family: var(--iss-sans);
	font-size: 15px;
	padding: 13px 18px;
	border: 1px solid var(--iss-line-strong);
	border-radius: 999px;
	background: var(--iss-card);
	color: var(--iss-ink);
	box-shadow: var(--iss-e1);
}
.iss-page .iss-404-field:focus-visible {
	outline: 3px solid rgba(12, 115, 201, .3);
	outline-offset: 1px;
	border-color: var(--iss-blue);
}
.iss-page .iss-legacy-404 .iss-detail-hero > .iss-wrap { display: grid; gap: 18px; justify-items: start; max-width: 820px; }

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
	.iss-page .iss-article-nav { grid-template-columns: 1fr; }
	.iss-page .iss-article-nav-link.is-next { text-align: left; justify-items: start; }
}

@media (max-width: 760px) {
	/*
	 * Floated legacy images: at 253px wide against a ~340px column the text
	 * beside them wraps two words at a time. Below this width they stop floating
	 * and become block images.
	 */
	.iss-page .iss-prose .alignleft,
	.iss-page .iss-prose img.alignleft,
	.iss-page .iss-prose .alignright,
	.iss-page .iss-prose img.alignright {
		float: none;
		display: block;
		margin: 0 auto 20px;
	}
	.iss-page .iss-legacy-figure img { max-height: 260px; }

	/* Legacy tables can't reflow; let them scroll rather than squash. */
	.iss-page .iss-prose table,
	.iss-page .iss-legacy-builder table { display: block; overflow-x: auto; }
}

/* ============================================================
   HERO ON DARK
   ------------------------------------------------------------
   The site-wide hero went dark with the V5 handoff (see §7/§7b in
   iss-global.css). This file owns the blog-article byline and the 404 search
   field, both of which sit inside that hero. Lives here rather than in
   iss-global.css because this file loads at priority 41 against that file's 40,
   so an override written there would lose the tie on load order.
   ============================================================ */
.iss-page .iss-detail-hero .iss-article-meta { color: #a9c5d5; }
.iss-page .iss-detail-hero .iss-article-meta strong,
.iss-page .iss-detail-hero .iss-article-meta a { color: #fff; }

/* The input stays white — see the same note in search.css. */
.iss-page .iss-detail-hero .iss-404-field {
	background: #fff;
	border-color: #fff;
	box-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}
.iss-page .iss-detail-hero .iss-404-field:focus-visible {
	outline-color: rgba(143, 226, 245, .6);
	border-color: #fff;
}