/**
 * RESOURCE CENTER — template-resources.php + single-resource.php
 *
 * Loaded only on those two views (see iss_enqueue_resources_assets() in
 * functions.php); everything reusable lives in css/iss-global.css instead. What
 * is here is genuinely specific to a library page:
 *
 *   .iss-rc-jump      hero jump links — a count-per-type row that doubles as
 *                     the page's "what's in here" summary
 *   .iss-rcard        the resource card. Not `.iss-tile`: a tile is text-only,
 *                     and a resource card leads with a 16:9 thumbnail and
 *                     carries a type icon and a facts line
 *   .iss-rc-featured  the "start here" row — one wide card plus two standard
 *   .iss-rc-grid      the library grid
 *   .iss-embed        16:9 player box, so an oEmbed iframe can't reflow the page
 *   .iss-rs-panel     the single page's one payload panel (download / event)
 *
 * The filter chips are NOT here — the Resource Center reuses the Customers
 * directory's `.iss-cust-filter` / `.iss-cust-chip` components verbatim from the
 * global sheet, because it is the same control doing the same job. Only the two
 * rules under "filter row" below adjust it, and both are layout, not restyling.
 */

/* ============================================================
   HERO — jump links
   ============================================================ */
.iss-page .iss-rc-hero { max-width: 64ch; }
.iss-page .iss-rc-hero h1 { margin: 18px 0 14px; }

/*
 * A four-column GRID, not a flex row. Sized by content the labels are uneven
 * enough ("VIDEOS" against "EVENTS & WEBINARS") that the fourth item wrapped to a
 * line of its own at 1120px and read as an afterthought rather than as a peer of
 * the other three. Equal columns keep all four types on one line, and keep the
 * row reading as a summary of what is in the library.
 */
.iss-page .iss-rc-jump {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 28px;
}
/* Compact enough that all four types fit one row at 1120px — a wrapped fourth
   item read as an afterthought rather than as a peer of the other three. */
.iss-page .iss-rc-jumplink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px 10px 11px;
	border-radius: 13px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease;
}
.iss-page .iss-rc-jumplink:hover {
	transform: translateY(-2px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .3);
}
.iss-page .iss-rc-jumplink:focus-visible { outline: 3px solid rgba(12, 115, 201, .35); outline-offset: 3px; }
.iss-page .iss-rc-jumpico {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, rgba(12, 115, 201, .12), rgba(12, 115, 201, .05));
	color: var(--iss-blue);
}
.iss-page .iss-rc-jumpico svg { width: 18px; height: 18px; }
.iss-page .iss-rc-jumptext { display: flex; flex-direction: column; gap: 1px; }
.iss-page .iss-rc-jumpnum {
	font-family: var(--iss-mono);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--iss-navy);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.iss-page .iss-rc-jumplabel {
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}

/* ============================================================
   FILTER ROW
   ------------------------------------------------------------
   Reuses `.iss-cust-filter` from the global sheet. The library grid sits
   directly beneath it, and the chips are the page's main control, so it gets a
   little more breathing room than the customer grid's version.
   ============================================================ */
.iss-page .iss-rc-filter { margin-bottom: 30px; }

/*
 * `scroll-margin-top` on the library section itself: the hero jump links are
 * real `#library` anchors, and without this the sticky header (66px condensed)
 * covers the filter row the visitor was just sent to.
 */
.iss-page .iss-resources #library { scroll-margin-top: 96px; }

/* ============================================================
   RESOURCE CARD
   ============================================================ */
.iss-page .iss-rc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* `display:none` rather than opacity: a filtered-out card must not hold space. */
.iss-page .iss-rcard.iss-filtered-out { display: none; }

.iss-page .iss-rcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	box-shadow: var(--iss-e1);
	overflow: hidden;
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
/*
 * Every resource card links somewhere — unlike `.iss-tile`, which needs the
 * opt-in `.iss-tile-linked` because some tiles are inert. The stretched-link
 * ::after makes the whole card clickable, not just the link text.
 */
.iss-page .iss-rcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .25);
}
.iss-page .iss-rcard:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--iss-e2);
	border-color: rgba(12, 115, 201, .28);
}
.iss-page .iss-rcard .iss-inlink::after { content: ""; position: absolute; inset: 0; }
.iss-page .iss-rcard:hover h3 { color: var(--iss-blue); }
.iss-page .iss-rcard h3 { transition: color .2s ease; }

/* --- Media — featured card only ----------------------------------------- */
/*
 * `object-fit: CONTAIN`, not cover, and padding around it.
 *
 * Every image in this library is a plate with type on it: a PDF cover render, a
 * generic "ISS GROUP" video poster, or a customer's logo. `cover` cropped all
 * three — "MIMEDX" lost a letter off each end, and the logos filled the frame
 * edge to edge with no margin. Contained on a tint, each one sits inside the
 * frame at its own proportions, which is the same reasoning as the customer
 * directory's `.iss-logo-plate` (section 21 of iss-global.css).
 *
 * Only `.iss-rcard-lg` renders media at all — see iss_render_resource_card().
 */
.iss-page .iss-rcard-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--iss-bg-tint);
	border-bottom: 1px solid var(--iss-line);
	overflow: hidden;
	display: grid;
	place-items: center;
	padding: 18px;
}
.iss-page .iss-rcard-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	/* A grid item defaults to min-height:auto and refuses to shrink below the
	   image's intrinsic size, which would ignore max-height and overflow. */
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	display: block;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.iss-page .iss-rcard:hover .iss-rcard-media img { transform: scale(1.02); }

/* The type badge, bottom-left of the media, on a blurred plate so it stays
   legible over any thumbnail. */
.iss-page .iss-rcard-ico {
	position: absolute;
	left: 14px;
	bottom: 14px;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	color: var(--iss-blue);
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 4px 14px rgba(19, 40, 58, .18);
}
.iss-page .iss-rcard-ico svg { width: 19px; height: 19px; }

/* No thumbnail: the icon moves inline beside the label instead, so a card
   without an image still announces its type. */
.iss-page .iss-rcard-ico-inline {
	position: static;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(135deg, rgba(12, 115, 201, .12), rgba(12, 115, 201, .05));
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
.iss-page .iss-rcard-ico-inline svg { width: 16px; height: 16px; }

/* --- Body -------------------------------------------------------------- */
.iss-page .iss-rcard-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1 1 auto;
}
.iss-page .iss-rcard-top { display: flex; align-items: center; gap: 10px; }
.iss-page .iss-rcard-top .iss-tile-label { margin-bottom: 0; }
.iss-page .iss-rcard h3 { font-size: 18px; margin: 0; }
/*
 * Summaries come from ISS's own copy and run from one line to a full paragraph.
 * Clamping to three keeps the grid's rows even without truncating anything in the
 * database — the full text is on the resource's own page. Same treatment, and the
 * same reason, as `.iss-logo-blurb` on the customer directory.
 */
.iss-page .iss-rcard p {
	font-size: 14px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.iss-page .iss-rcard-lg p { -webkit-line-clamp: 4; }

/*
 * Facts line — "PDF · 2.4 MB", "6 min", "Life Sciences", "iApprove™". A mono
 * row of middot-separated specs, the same utility voice as `.iss-fact`, but
 * inline because a card has no room for a spec bar.
 */
.iss-page .iss-rcard-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-page .iss-rcard-facts li { display: inline-flex; align-items: center; }
.iss-page .iss-rcard-facts li + li::before {
	content: "·";
	margin-right: 8px;
	opacity: .55;
}
.iss-page .iss-rcard .iss-inlink { margin-top: auto; padding-top: 4px; font-size: 13.5px; }

/* ============================================================
   START HERE — three equal cards, the first carrying the image
   ------------------------------------------------------------
   The featured card used to span two of three columns, which cannot tile: two
   units plus two single cards is four units in a three-column grid, so the third
   card wrapped onto a row of its own and the row looked broken rather than
   deliberate.

   Three equal columns instead, and the hierarchy comes from the thumbnail — only
   the first card has one (see iss_render_resource_card()), so it leads the row
   without needing to be wider than its neighbours.
   ============================================================ */
.iss-page .iss-rc-featured {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.iss-page .iss-rcard-lg h3 { font-size: 19px; }

/* ============================================================
   PLAYER — 16:9 box, so the iframe can't reflow the page as it loads
   ============================================================ */
.iss-page .iss-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--iss-r-lg);
	overflow: hidden;
	background: var(--iss-navy-2);
	box-shadow: var(--iss-e3);
}
.iss-page .iss-embed iframe,
.iss-page .iss-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ============================================================
   SINGLE RESOURCE — hero + payload panel
   ============================================================ */
.iss-page .iss-rs-hero { max-width: 68ch; }
.iss-page .iss-rs-hero h1 { margin: 18px 0 14px; }

/* The eyebrow's leading icon replaces the red pulse dot on this template: the
   type is the useful signal on a resource, not a "new" indicator. */
.iss-page .iss-rs-eyeico { display: grid; place-items: center; color: currentColor; }
.iss-page .iss-rs-eyeico svg { width: 14px; height: 14px; }

.iss-page .iss-rs-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	padding: 28px 30px;
	border-radius: var(--iss-r-lg);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(12, 115, 201, .10), transparent 55%),
		linear-gradient(150deg, #f6faff, #e9f3fc);
	border: 1px solid #d3e6f7;
}
.iss-page .iss-rs-panel-ico {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	color: var(--iss-blue);
}
.iss-page .iss-rs-panel-ico svg { width: 24px; height: 24px; }
.iss-page .iss-rs-panel-body { flex: 1 1 260px; }
.iss-page .iss-rs-panel h2 { font-size: 22px; margin-bottom: 6px; }
.iss-page .iss-rs-panel p { font-size: 14.5px; line-height: 1.55; }
.iss-page .iss-rs-panel .iss-btn { flex: none; }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
	.iss-page .iss-rc-grid,
	.iss-page .iss-rc-featured { grid-template-columns: repeat(2, 1fr); }
	.iss-page .iss-rc-jump { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.iss-page .iss-rc-grid,
	.iss-page .iss-rc-featured { grid-template-columns: 1fr; }
	.iss-page .iss-rs-panel { padding: 22px; }
	.iss-page .iss-rs-panel .iss-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.iss-page .iss-rcard-media img { transition: none; }
	.iss-page .iss-rcard:hover .iss-rcard-media img { transform: none; }
}

/* ============================================================
   EVENTS MANAGER — restyling the plugin's own markup
   ------------------------------------------------------------
   Events Manager owns 81 events, their booking forms, their venues and their
   recurrence. Reimplementing its list and its booking form to get them on-brand
   would be trading a maintained plugin for our own code, so instead this block
   restyles what it emits — the same approach section 23 of iss-global.css takes
   with The7's search form.

   Two scopes, and they are NOT under `.iss-page`, because EM prints into
   The7's page wrapper on the list page and into our prose column on an event:

     body.iss-events-page   the list page (Page 1738, per EM's dbem_events_page).
                            Added by iss_overview_body_class(); loading this
                            sheet elsewhere can't leak because of the class.
     .iss-em-content        the prose column on single-event.php.

   EM's list format is an editable option (dbem_event_list_item_format), which
   ships here as a <table>. These rules style a table AND a <ul>, so ISS
   changing that setting in Events → Settings doesn't leave the page unstyled.
   ============================================================ */

body.iss-events-page .events-table,
.iss-em-content .events-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 26px;
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	border-radius: var(--iss-r);
	box-shadow: var(--iss-e1);
	overflow: hidden;
	font-family: var(--iss-sans);
}
body.iss-events-page .events-table thead th,
.iss-em-content .events-table thead th {
	padding: 14px 20px;
	text-align: left;
	background: var(--iss-bg-tint);
	border-bottom: 1px solid var(--iss-line);
	font-family: var(--iss-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
body.iss-events-page .events-table td,
.iss-em-content .events-table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--iss-line);
	vertical-align: top;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--iss-muted);
}
body.iss-events-page .events-table tr:last-child td,
.iss-em-content .events-table tr:last-child td { border-bottom: 0; }
body.iss-events-page .events-table tr:hover td { background: rgba(12, 115, 201, .03); }
body.iss-events-page .events-table a,
.iss-em-content .events-table a {
	color: var(--iss-blue);
	font-weight: 650;
	letter-spacing: -.01em;
}
body.iss-events-page .events-table a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* The monthly group headings EM inserts between rows
   (dbem_event_list_groupby_header_format = <h2>#s</h2>). */
body.iss-events-page .em-events-list > h2,
body.iss-events-page #main h2 {
	font-family: var(--iss-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--iss-blue);
	margin: 34px 0 14px;
}

/* List format, for when dbem_event_list_item_format is a <ul> instead. */
body.iss-events-page ul.em-events-list,
.iss-em-content ul.em-events-list {
	display: grid;
	gap: 12px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}
body.iss-events-page ul.em-events-list > li,
.iss-em-content ul.em-events-list > li {
	padding: 16px 20px;
	border-radius: var(--iss-r-sm);
	background: var(--iss-card);
	border: 1px solid var(--iss-line);
	box-shadow: var(--iss-e1);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--iss-muted);
}

/* EM's search / filter form above the list. */
body.iss-events-page .em-search-form,
body.iss-events-page .em-search {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin: 0 0 26px;
	padding: 20px;
	border-radius: var(--iss-r);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(12, 115, 201, .10), transparent 55%),
		linear-gradient(150deg, #f6faff, #e9f3fc);
	border: 1px solid #d3e6f7;
}
body.iss-events-page .em-search-form label {
	display: block;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
	margin-bottom: 6px;
}
/* 16px minimum on the inputs, or iOS Safari zooms the viewport on focus. */
body.iss-events-page .em-search-form input[type="text"],
body.iss-events-page .em-search-form input[type="search"],
body.iss-events-page .em-search-form select {
	padding: 11px 14px;
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r-sm);
	background: #fff;
	color: var(--iss-ink);
	font-family: var(--iss-sans);
	font-size: 16px;
	font-weight: 500;
	-webkit-appearance: none;
	appearance: none;
}
body.iss-events-page .em-search-form input[type="submit"],
body.iss-events-page .em-search-form button {
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #1a86d6, var(--iss-blue-dark));
	color: #fff;
	font-family: var(--iss-sans);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 8px 22px -6px rgba(12, 115, 201, .6);
}

/* EM's pagination links. */
body.iss-events-page .em-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
body.iss-events-page .em-pagination a,
body.iss-events-page .em-pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 9px 13px;
	border-radius: 999px;
	border: 1px solid var(--iss-line-strong);
	background: #fff;
	color: var(--iss-muted);
	font-family: var(--iss-mono);
	font-size: 13px;
	font-weight: 600;
}
body.iss-events-page .em-pagination strong {
	background: var(--iss-blue);
	border-color: var(--iss-blue);
	color: #fff;
}

/*
 * EM's single-event block — the Date/Time paragraph, the map (or its "Map
 * Unavailable" placeholder) and the iCal link, all emitted from the editable
 * `dbem_single_event_format` option ahead of the event's own copy.
 *
 * It repeats the date and time our hero already shows. That is left in place
 * rather than hidden, because the same block carries the iCal link and, for an
 * event with a venue, a real map — hiding the container would take those with it,
 * and the format is ISS's to edit in Events → Settings. What it gets instead is a
 * container of its own, so it reads as a details panel rather than as stray text
 * floating above the article. PROJECT_TRACKER.md records the recommended trim to
 * that setting, which is a click for ISS and would remove the duplication.
 */
/*
 * SCOPED TO THE META BLOCK ONLY — and that scoping is the whole difficulty.
 * `.em-event-single` is EM's wrapper for the ENTIRE event, meta block AND article
 * body. Styling the container turned the whole article into a tinted panel and,
 * worse, matched every `<strong>` in the copy: the body's emphasised phrases
 * ("QAD users", "reduce maverick spend…") each rendered as a 9.5px uppercase mono
 * label on its own line.
 *
 * What EM emits from `dbem_single_event_format` ahead of the content is exactly
 * two nodes — a floated div holding the map (or its "Map Unavailable"
 * placeholder) and one paragraph of date/time/iCal — so the selectors below reach
 * those two and nothing after them.
 */
.iss-em-content .em-event-single > p:first-of-type {
	padding: 18px 20px;
	margin: 0 0 26px;
	border-radius: var(--iss-r-sm);
	background: var(--iss-bg-tint);
	border: 1px solid var(--iss-line);
	font-size: 14.5px;
	line-height: 1.6;
}
.iss-em-content .em-event-single > p:first-of-type > strong {
	display: block;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
	margin-bottom: 6px;
}
.iss-em-content .em-event-single > p:first-of-type a { color: var(--iss-blue); font-weight: 650; }
/* In that paragraph the italic IS the time, so it reads as a value, not an aside. */
.iss-em-content .em-event-single > p:first-of-type i {
	font-style: normal;
	font-weight: 600;
	color: var(--iss-ink);
}

/*
 * The "Map Unavailable" placeholder. Kept — it is EM telling the truth about an
 * online event — but demoted to a mono micro-label so it stops competing with the
 * heading beside it. Matched through the inline `float` EM sets on that wrapper,
 * which is the only handle it gives us; an event WITH a venue renders a real map
 * in the same node and is unaffected, since this only restyles the placeholder
 * text inside it.
 */
.iss-em-content .em-event-single > div[style*="float"] > i {
	font-style: normal;
	font-family: var(--iss-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}

/*
 * The booking form EM injects into an event's content. Reuses the Gravity Forms
 * treatment's vocabulary (mono labels, 12px-radius inputs, pill submit) so the
 * two forms on the site don't read as coming from different decades.
 */
.iss-em-content .em-booking-form { margin-top: 26px; }
.iss-em-content .em-booking-form label,
.iss-em-content .em-booking-form .em-bookings-form-label {
	font-family: var(--iss-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--iss-muted-2);
}
.iss-em-content .em-booking-form input[type="text"],
.iss-em-content .em-booking-form input[type="email"],
.iss-em-content .em-booking-form input[type="tel"],
.iss-em-content .em-booking-form select,
.iss-em-content .em-booking-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--iss-line-strong);
	border-radius: var(--iss-r-sm);
	background: #fff;
	color: var(--iss-ink);
	font-family: var(--iss-sans);
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}
.iss-em-content .em-booking-form input[type="submit"] {
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #1a86d6, var(--iss-blue-dark));
	color: #fff;
	font-family: var(--iss-sans);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 10px 26px -8px rgba(12, 115, 201, .55);
}

/*
 * EM's own stylesheet is left enabled (dbem_disable_css is off) because it
 * carries the calendar and booking-state rules we are not replacing. Where it
 * fights these rules the fix is a more specific selector here, not
 * `!important` — same rule as the rest of this codebase.
 */
body.iss-events-page .css-events-list { margin: 0; }

@media (max-width: 620px) {
	/*
	 * A 4-column events table cannot shrink to 320px. Rather than hide columns —
	 * which loses the venue and the time — the table scrolls inside its own box,
	 * so the page body never scrolls sideways.
	 */
	body.iss-events-page .events-table { display: block; overflow-x: auto; }
	body.iss-events-page .em-search-form { flex-direction: column; align-items: stretch; }
	body.iss-events-page .em-search-form input[type="submit"] { width: 100%; }
}

/* ============================================================
   HERO ON DARK
   ------------------------------------------------------------
   The site-wide hero went dark with the V5 handoff (see §7/§7b in
   iss-global.css). The Resource Center's count jump-links 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-rs-eyeico` needs no rule — it is already currentColor.)
   ============================================================ */
.iss-page .iss-detail-hero .iss-rc-jumplink {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}
.iss-page .iss-detail-hero .iss-rc-jumplink:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(143, 226, 245, .4);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
.iss-page .iss-detail-hero .iss-rc-jumplink:focus-visible {
	outline-color: rgba(143, 226, 245, .6);
}
.iss-page .iss-detail-hero .iss-rc-jumpico {
	background: rgba(57, 195, 230, .16);
	color: var(--iss-sky);
}
.iss-page .iss-detail-hero .iss-rc-jumpnum { color: #fff; }
.iss-page .iss-detail-hero .iss-rc-jumplabel { color: #a9c5d5; }
.iss-page .iss-detail-hero .iss-rc-jumptext { color: #a9c5d5; }

/* -----------------------------------------------------------------------------
   The per-type pages (template-resource-type.php) — the "Also in the library"
   row.

   Same component as the hub's hero row, but never four items: it lists the OTHER
   types, so it is one short by definition, and fewer still when a type has
   nothing published or no page of its own. Against the hub's `repeat(4, 1fr)`
   that left a dead fourth column and pulled the row into the left two thirds of
   a full-width section.

   `auto-fit` rather than a hardcoded 3, because the count genuinely varies with
   what is published — and the 190px floor keeps "EVENTS & WEBINARS" on one line,
   which is the constraint that made the hub's row a grid in the first place.
   -------------------------------------------------------------------------- */
.iss-page.iss-resource-type .iss-rc-jump {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}