/* ============================================================================
 * GPULoom — SEO link blocks & chrome components (task-12, "方案 A")
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * These blocks were inserted into page content with class names but no CSS was
 * ever written for them, so browsers rendered them with defaults: blue underlined
 * links, round bullets, default <h2> sizes. The user reported them as "很丑、
 * 和网站风格格格不入" (four screenshots). This is the same class of defect as the
 * unstyled home header: markup shipped, styling never did. Measured before this
 * file: `.gp-links*`, `.gp-hub__*`, `.gnx-static*`, `.gp-postlinks` all had
 * ZERO rules in the CSS the pages actually load (see coverage-check.py).
 *
 * SCOPE: CSS only. No page content was touched, and no existing `gd-*` rule is
 * overridden — every selector here is namespaced to the `gp-`/`gnx-` components
 * (plus one product-description list fix and one video sizing rule).
 *
 * DESIGN TOKENS (kept identical to the `gd-` component family)
 *   heading        #202124 / #273842      body text   #425563
 *   muted          #8a99a3                accent      #0672ce
 *   border         #dce1e4                hairline    #eceff1
 *   surface        #fff                   subtle      #f5f6f7
 *   radius 4px (chips 999px)              font Arial,"Helvetica Neue",sans-serif
 *   container      min(1320px, calc(100% - 48px))
 *
 * Verified by: coverage-check.py (every class in the rendered HTML must have at
 * least one rule in the CSS the page loads) — this file closes all 20 gaps it
 * reported, and the assertion is re-run after every deploy.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. HOME — .gp-links : three-column link block + brand chips
 *    "Popular models / Guides, policies and case studies / What we supply /
 *     Shop by brand"
 * ------------------------------------------------------------------------- */

.gp-links {
	box-sizing: border-box;
	width: 100%;
	padding: 48px 0;
	border-top: 1px solid #dce1e4;
	background: #fff;
	color: #425563;
	font-family: Arial, "Helvetica Neue", sans-serif;
}

.gp-links *,
.gp-links *::before,
.gp-links *::after {
	box-sizing: border-box;
}

.gp-links__wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	width: min(1320px, calc(100% - 48px));
	margin-inline: auto;
	align-items: start;
}

.gp-links__col {
	min-width: 0;
}

/* The single ugliest element in the screenshots: a default 30px <h2>.
   Made into the small uppercase section label the rest of the site uses. */
.gp-links__col h2,
.gp-links__wrap > h2 {
	margin: 0 0 14px;
	color: #273842;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.gp-links .gp-links__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-links .gp-links__list li {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #eceff1;
	font-size: 14px;
	line-height: 1.5;
}

.gp-links .gp-links__list li:last-child {
	border-bottom: 0;
}

.gp-links .gp-links__list a,
.gp-links .gp-links__more a {
	color: #425563;
	text-decoration: none;
	transition: color .15s ease;
}

.gp-links .gp-links__list a:hover,
.gp-links .gp-links__list a:focus,
.gp-links .gp-links__more a:hover,
.gp-links .gp-links__more a:focus {
	color: #0672ce;
	text-decoration: underline;
}

/* SKU / part number next to a model name — quiet, tabular, never loud */
.gp-links__id {
	display: inline-block;
	margin-left: 6px;
	color: #8a99a3;
	font-size: 11px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* "…and 240 more" style footnote: quiet text, accent-coloured links, never a button */
.gp-links__more {
	margin: 14px 0 0;
	color: #8a99a3;
	font-size: 13px;
	line-height: 1.6;
}

.gp-links__more + .gp-links__more {
	margin-top: 6px;
}

.gp-links__more a {
	color: #0672ce;
	font-weight: 400;
}

/* Shop-by-brand chips.
 * D2 (PM ruling): .gp-links__wrap is a grid resolving to 3 columns x ~413px at
 * 1320px. The two .gp-links__col elements take columns 1 and 2, so the brand
 * paragraph was auto-placed into column 3 and its 8 chips wrapped inside 413px
 * (measured x=947 / w=413). It must span the whole row. Fixing it here, not by
 * moving the markup out of the grid - the grid is the component's layout. */
.gp-links .gp-links__brands {
	grid-column: 1 / -1;
	width: 100%;
}

/* Shop-by-brand chips */
.gp-links__brands {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.gp-links .gp-links__brands a {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border: 1px solid #dce1e4;
	border-radius: 999px;
	background: #fff;
	color: #425563;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.gp-links .gp-links__brands a:hover,
.gp-links .gp-links__brands a:focus {
	border-color: #0672ce;
	background: #f7fbfd;
	color: #0672ce;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 2. HUBS — .gp-hub : intro line, product list, brand chips, see-also, more
 * ------------------------------------------------------------------------- */

.gp-hub {
	box-sizing: border-box;
	width: min(1320px, calc(100% - 48px));
	margin: 0 auto;
	padding: 8px 0 4px;
	color: #425563;
	font-family: Arial, "Helvetica Neue", sans-serif;
}

.gp-hub *,
.gp-hub *::before,
.gp-hub *::after {
	box-sizing: border-box;
}

.gp-hub h2 {
	margin: 28px 0 14px;
	color: #273842;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.gp-hub__intro {
	margin: 0 0 4px;
	color: #425563;
	font-size: 15px;
	line-height: 1.7;
}

.gp-hub .gp-hub__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-hub .gp-hub__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #eceff1;
	font-size: 14px;
	line-height: 1.5;
}

.gp-hub .gp-hub__list li:last-child {
	border-bottom: 0;
}

.gp-hub .gp-hub__list a {
	color: #425563;
	text-decoration: none;
	transition: color .15s ease;
}

.gp-hub .gp-hub__list a:hover,
.gp-hub .gp-hub__list a:focus {
	color: #0672ce;
	text-decoration: underline;
}

/* part number / SKU: quiet monospaced-ish trailing value */
.gp-hub__sku {
	flex: 0 0 auto;
	color: #8a99a3;
	font-size: 11px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* brand chips (same chip language as .gp-links__brands) */
.gp-hub__brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
}

.gp-hub .gp-hub__brands a {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border: 1px solid #dce1e4;
	border-radius: 999px;
	background: #fff;
	color: #425563;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.gp-hub .gp-hub__brands a:hover,
.gp-hub .gp-hub__brands a:focus {
	border-color: #0672ce;
	background: #f7fbfd;
	color: #0672ce;
	text-decoration: none;
}

/* the SKU that follows a brand chip inline stays quiet and inline */
.gp-hub__brands .gp-hub__sku {
	padding: 5px 2px;
	border: 0;
	background: transparent;
}

/* "See also: Data Center GPUs · Professional Graphics Cards" — calm hint bar
   with a 3px accent rail on the left, not a shouty alert box */
.gp-hub__seealso {
	margin: 18px 0 0;
	padding: 10px 14px;
	border-left: 3px solid #0672ce;
	border-radius: 0 4px 4px 0;
	background: #f5f6f7;
	color: #425563;
	font-size: 13px;
	line-height: 1.6;
}

.gp-hub__seealso a {
	color: #0672ce;
	text-decoration: none;
}

.gp-hub__seealso a:hover,
.gp-hub__seealso a:focus {
	text-decoration: underline;
}

.gp-hub__more {
	margin: 14px 0 0;
	color: #8a99a3;
	font-size: 13px;
	line-height: 1.6;
}

.gp-hub__more + .gp-hub__more {
	margin-top: 6px;
}

.gp-hub__more a {
	color: #0672ce;
	text-decoration: none;
}

.gp-hub__more a:hover,
.gp-hub__more a:focus {
	color: #0672ce;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 2b. /catalog/ — .gp-hubdir : the hub directory (11 category hubs) plus the
 *     brand chips with product counts. Same component language as .gp-hub.
 * ------------------------------------------------------------------------- */

.gp-hubdir {
	box-sizing: border-box;
	width: min(1320px, calc(100% - 48px));
	margin: 34px auto 8px;
	padding: 26px 0 8px;
	border-top: 1px solid #dce1e4;
	color: #425563;
	font-family: Arial, "Helvetica Neue", sans-serif;
}

.gp-hubdir *,
.gp-hubdir *::before,
.gp-hubdir *::after {
	box-sizing: border-box;
}

.gp-hubdir h2 {
	margin: 0 0 16px;
	color: #273842;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.gp-hubdir .gp-hubdir__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-hubdir .gp-hubdir__list li {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #eceff1;
	font-size: 14px;
	line-height: 1.5;
}

.gp-hubdir .gp-hubdir__list a {
	color: #425563;
	text-decoration: none;
	transition: color .15s ease;
}

.gp-hubdir .gp-hubdir__list a:hover,
.gp-hubdir .gp-hubdir__list a:focus {
	color: #0672ce;
	text-decoration: underline;
}

.gp-hubdir__brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
}

.gp-hubdir .gp-hubdir__brands a {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border: 1px solid #dce1e4;
	border-radius: 999px;
	background: #fff;
	color: #425563;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.gp-hubdir .gp-hubdir__brands a:hover,
.gp-hubdir .gp-hubdir__brands a:focus {
	border-color: #0672ce;
	background: #f7fbfd;
	color: #0672ce;
	text-decoration: none;
}

/* product count following a brand chip — quiet, tabular */
.gp-hubdir__n {
	display: inline-block;
	margin: 0 8px 0 -2px;
	color: #8a99a3;
	font-size: 11px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.gp-hubdir__more {
	margin: 14px 0 0;
	color: #8a99a3;
	font-size: 13px;
	line-height: 1.6;
}

.gp-hubdir__more a {
	color: #0672ce;
	text-decoration: none;
}

.gp-hubdir__more a:hover,
.gp-hubdir__more a:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 3. /news/ — .gnx-main wrapper + .gnx-static "All N articles" index
 * ------------------------------------------------------------------------- */

.gnx-main {
	display: block;
	min-width: 0;
}

.gnx-static {
	box-sizing: border-box;
	width: min(1320px, calc(100% - 48px));
	margin: 34px auto 0;
	padding: 26px 0 8px;
	border-top: 1px solid #dce1e4;
	color: #425563;
	font-family: Arial, "Helvetica Neue", sans-serif;
}

.gnx-static *,
.gnx-static *::before,
.gnx-static *::after {
	box-sizing: border-box;
}

.gnx-static h2 {
	margin: 0 0 16px;
	color: #273842;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.gnx-static .gnx-static__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnx-static .gnx-static__list li {
	margin: 0;
}

.gnx-static .gnx-static__list a {
	display: block;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid #dce1e4;
	border-radius: 4px;
	background: #fff;
	color: #425563;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.gnx-static .gnx-static__list a:hover,
.gnx-static .gnx-static__list a:focus {
	border-color: #0672ce;
	color: #0672ce;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(14, 40, 65, .06);
	text-decoration: none;
}

.gnx-static__more {
	margin: 16px 0 0;
	color: #8a99a3;
	font-size: 13px;
	line-height: 1.6;
}

.gnx-static__more a {
	color: #0672ce;
	text-decoration: none;
}

.gnx-static__more a:hover,
.gnx-static__more a:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 4. ARTICLE CROSS-LINKS — .gp-postlinks : light callout, list + footnote links
 *    (.gp-postlinks renders a bare <ul>/<p>, so they are scoped here)
 * ------------------------------------------------------------------------- */

.gp-postlinks {
	box-sizing: border-box;
	width: min(1320px, calc(100% - 48px));
	margin: 34px auto 8px;
	padding: 24px 26px;
	border: 1px solid #dce1e4;
	border-radius: 4px;
	background: #f5f6f7;
	color: #425563;
	font-family: Arial, "Helvetica Neue", sans-serif;
}

.gp-postlinks *,
.gp-postlinks *::before,
.gp-postlinks *::after {
	box-sizing: border-box;
}

.gp-postlinks h2 {
	margin: 0 0 14px;
	color: #273842;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

section.gp-postlinks ul {
	margin: 0 !important;
	padding: 0 !important;      /* Astra uses combos like
	                               `.ast-separate-container .entry-content ul` (0,2,0) that still
	                               out-specify `section.gp-postlinks ul` (0,1,2), measured
	                               padding-left=22px/list-style=disc. This lock is the terminal
	                               state of that war, so !important is deliberate. */
	list-style: none !important;
}

section.gp-postlinks ul li {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #e6eaec;
	font-size: 14px;
	line-height: 1.6;
}

section.gp-postlinks ul li:last-child {
	border-bottom: 0;
}

.gp-postlinks a {
	color: #0672ce;
	text-decoration: none;
}

.gp-postlinks a:hover,
.gp-postlinks a:focus {
	text-decoration: underline;
}

.gp-postlinks p {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid #e6eaec;
	color: #8a99a3;
	font-size: 13px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * 5. PRODUCT DESCRIPTIONS — bare <ul> lists inside a product's text
 *    Scoped to single-product views so no other page's lists change.
 * ------------------------------------------------------------------------- */

body.single-product .entry-content ul:not([class]),
body.single-product .woocommerce-Tabs-panel ul:not([class]) {
	margin: 0 0 18px;
	padding-left: 20px;
	list-style: disc;
	color: #425563;
	font-size: 15px;
	line-height: 1.7;
}

body.single-product .entry-content ul:not([class]) li,
body.single-product .woocommerce-Tabs-panel ul:not([class]) li {
	margin: 0 0 8px;
}

body.single-product .entry-content ul:not([class]) li::marker,
body.single-product .woocommerce-Tabs-panel ul:not([class]) li::marker {
	color: #8a99a3;
}

body.single-product .entry-content ul:not([class]) strong,
body.single-product .woocommerce-Tabs-panel ul:not([class]) strong {
	color: #273842;
}

/* ---------------------------------------------------------------------------
 * 6. HOME — .gd-company-video : the <video> element had no sizing rule at all,
 *    so it rendered at intrinsic size (the "ugly block" the user also saw).
 * ------------------------------------------------------------------------- */

.gd-company-video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	background: #0b1522;
}

/* ---------------------------------------------------------------------------
 * 7. RESPONSIVE — two steps (≤900px, ≤700px). Only namespaced components are
 *    touched, so Astra's layout and the `gd-*` chrome are unaffected.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.gp-links {
		padding: 38px 0;
	}

	.gp-links__wrap {
		gap: 30px;
	}

	.gnx-static__list {
		grid-template-columns: 1fr;
	}

	.gp-hub,
	.gnx-static,
	.gp-hubdir,
	.gp-postlinks {
		width: calc(100% - 36px);
	}
}

@media (max-width: 700px) {
	.gp-links {
		padding: 30px 0;
	}

	.gp-links__wrap {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.gp-links__wrap,
	.gp-hub,
	.gnx-static,
	.gp-hubdir,
	.gp-postlinks {
		width: calc(100% - 28px);
	}

	.gp-links__list li {
		padding: 8px 0;
	}

	.gp-hub__list li {
		display: block;
	}

	.gp-hub__sku {
		display: block;
		margin-top: 2px;
	}

	.gp-postlinks {
		padding: 18px 16px;
	}
}

/* ---------------------------------------------------------------------------
 * 7b. SPECIFICITY LOCK (task-15 §③)
 * Astra's `.entry-content ul` / `.entry-content a` rules are (0,1,1) and beat a
 * bare `.gp-links__list` (0,1,0) / `.gp-links__list a` (0,1,1) when they come
 * later in the combined bundle. Measured before this block:
 *   .gp-links__list padding-left = 20px   (expected 0)
 *   .gp-links__list a text-decoration = underline (expected none until hover)
 * Prefixing every rule with its own block class raises ours to (0,2,x) / (0,3,x)
 * so the intended values actually win, whatever order LiteSpeed combines in.
 * NOTE: this is a "style lost the cascade" bug, which coverage-check.py cannot
 * see - verify-computed-style.js asserts the computed values instead.
 * ------------------------------------------------------------------------- */

.gp-links .gp-links__list,
.gp-hub .gp-hub__list,
.gnx-static .gnx-static__list,
.gp-hubdir .gp-hubdir__list,
section.gp-postlinks ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-links .gp-links__list a,
.gp-hub .gp-hub__list a,
.gnx-static .gnx-static__list a,
.gp-hubdir .gp-hubdir__list a,
.gp-postlinks .gp-postlinks ul a {
	text-decoration: none;
}

.gp-links .gp-links__list a:hover,
.gp-links .gp-links__list a:focus,
.gp-hub .gp-hub__list a:hover,
.gp-hub .gp-hub__list a:focus,
.gnx-static .gnx-static__list a:hover,
.gnx-static .gnx-static__list a:focus,
.gp-hubdir .gp-hubdir__list a:hover,
.gp-hubdir .gp-hubdir__list a:focus,
section.gp-postlinks ul a:hover,
section.gp-postlinks ul a:focus {
	text-decoration: underline;
}