/* OEM/Partners directory. Required explicitly from TabPageController::init() for page 1271,
   alongside TabPage.css which this does not replace — the shared page furniture (breadcrumb,
   header band) still comes from there. */

.rd-pt {
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
	color: var(--gm-ink, #16232b);
	background: var(--gm-bg, #fbfbfa);
}

/* ---------------------------------------------------------------- head */

.rd-pt-head { padding: 22px 24px 0; }
.rd-pt-headmax { max-width: 880px; margin: 0 auto; }

.rd-pt-kicker {
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--gm-muted, #5f6b72);
	margin-bottom: 10px;
}
.rd-pt-title {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: clamp(28px, 4vw, 42px); line-height: 1.12; font-weight: 700;
	margin: 0 0 18px;
}
.rd-pt-intro { font-size: 16.5px; line-height: 1.65; color: var(--gm-body, #3d4a52); }
.rd-pt-intro p { margin: 0 0 12px; }
.rd-pt-intro > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- jump list */

.rd-pt-jump { max-width: 880px; margin: 26px auto 0; padding: 0 24px; }
.rd-pt-jump-list {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0; padding: 0;
}
.rd-pt-jump-item {
	display: inline-block;
	font-size: 14px; font-weight: 600;
	padding: 7px 14px;
	border: 1px solid var(--gm-border, #e6eaec);
	border-radius: 999px;
	background: #fff;
	color: var(--gm-navy, #003e69);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.rd-pt-jump-item:hover { background: var(--gm-navy, #003e69); border-color: var(--gm-navy, #003e69); color: #fff; }

/* ---------------------------------------------------------------- the cards */

.rd-pt-list { max-width: 880px; margin: 0 auto; padding: 30px 24px 20px; }

.rd-pt-card {
	background: #fff;
	border: 1px solid var(--gm-border, #e6eaec);
	border-radius: 16px;
	padding: 26px 28px;
	margin-bottom: 20px;
	/* Anchored jumps land under the sticky header otherwise. */
	scroll-margin-top: 96px;
}
.rd-pt-card:last-child { margin-bottom: 0; }

.rd-pt-card-title {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: 22px; font-weight: 700; line-height: 1.2;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gm-border-soft, #eef1f2);
}

.rd-pt-card-body { font-size: 16px; line-height: 1.65; color: var(--gm-body, #3d4a52); }
.rd-pt-card-body p { margin: 0 0 12px; }
.rd-pt-card-body > *:last-child { margin-bottom: 0; }
.rd-pt-card-body a { color: var(--gm-navy, #003e69); font-weight: 600; }
.rd-pt-card-body ul, .rd-pt-card-body ol { padding-left: 20px; margin: 12px 0; }
.rd-pt-card-body li { margin-bottom: 5px; }

/* ---------------------------------------------------------------- the embedded logos

   Seven entries, three different ways of embedding an image, and no two agreed on size or
   side. The copy is not rewritten (see the template note), so these rules have to cope with
   whatever is in it: <img> with a _resampled src, an [image ...] shortcode rendered to <img>,
   floats left and right, and inline width/height attributes up to 350px.

   `height: auto` is the important one — the markup carries hard width AND height attributes,
   so constraining width alone distorts the logo rather than scaling it. */
.rd-pt-card-body img {
	max-width: min(240px, 100%);
	height: auto;
	border-radius: 8px;
}
.rd-pt-card-body img.left,
.rd-pt-card-body img.leftAlone { float: left; margin: 2px 22px 12px 0; }
.rd-pt-card-body img.right { float: right; margin: 2px 0 12px 22px; }

/* The float has to be contained or the next partner's card border rides up over the logo. */
.rd-pt-card-body::after { content: ""; display: block; clear: both; }

/* Two entries carry an [image ...] shortcode whose File RECORD exists but whose file does not:
   44941 greenlight.jpg and 45099 HORIBA-UK.png are both absent from the 47GB asset store. The
   shortcode resolves the record, finds no file, and emits an <img> with no src attribute at
   all. Chrome collapses that to 0x0, but other engines draw broken-image chrome and some read
   the alt text out as body copy, so it is hidden explicitly rather than left to the browser.

   This hides a SYMPTOM. The fix is the two missing files — see the report; the rule stays
   useful afterwards because a missing asset should never render as debris. */
.rd-pt-card-body img:not([src]),
.rd-pt-card-body img[src=""] { display: none; }

/* ---------------------------------------------------------------- back */

.rd-pt-back { max-width: 880px; margin: 0 auto; padding: 18px 24px 70px; font-size: 15px; }
.rd-pt-back a {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--gm-navy, #003e69); font-weight: 600; text-decoration: none;
}
.rd-pt-back a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 620px) {
	.rd-pt-head, .rd-pt-jump { padding-left: 16px; padding-right: 16px; }
	.rd-pt-list { padding: 24px 16px 16px; }
	.rd-pt-back { padding: 16px 16px 56px; }
	.rd-pt-card { padding: 18px 16px; }

	/* Stop floating below 620px. A 240px logo floated beside text in a ~290px column leaves a
	   50px ribbon for the words. Full width above the copy instead. */
	.rd-pt-card-body img,
	.rd-pt-card-body img.left,
	.rd-pt-card-body img.leftAlone,
	.rd-pt-card-body img.right {
		float: none;
		display: block;
		margin: 0 0 14px;
		max-width: min(200px, 100%);
	}
}