/*
 * Surge TCG — homepage Collections section.
 *
 * A standalone stylesheet for [surge_rd_collections]. Nothing here restates a
 * selector from surge-design.css or surge-components.css: every class is
 * prefixed `sc-` or scoped under `.surge-collections`, so this file cannot
 * collide with the design layer or with the trust-panel CSS that production
 * already carries.
 *
 * Brand: ground #05080D, electric cyan #00F5FF, magenta #FF2D78 for
 * interaction only, Outfit for text, IBM Plex Mono for labels and data.
 */

.surge-collections {
	--sc-ground: #05080D;
	--sc-tile-top: #0B1119;
	--sc-tile-bottom: #080C13;
	--sc-tile-glow: #0F1A24;
	--sc-line: #1C2430;
	--sc-line-hover: #0E4C57;
	--sc-cyan: #00F5FF;
	--sc-magenta: #FF2D78;
	--sc-text: #F4F7FA;
	--sc-body: #AFB6C2;
	--sc-muted: #8E97A6;
	/* 4.5:1 against the tile ground; #66707F measured 3.95:1 and failed. */
	--sc-faint: #7A8492;

	background: var(--sc-ground);
	padding: 96px 64px 88px;
	box-sizing: border-box;
}

.surge-collections * {
	box-sizing: border-box;
}

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

.sc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	max-width: 1312px;
	margin: 0 auto 56px;
}

.sc-head-main {
	max-width: 720px;
	min-width: 0;
}

.sc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sc-cyan);
}

.sc-eyebrow-rule {
	width: 28px;
	height: 1px;
	background: var(--sc-cyan);
	flex: none;
}

.sc-title {
	margin: 0 0 18px;
	font: 800 clamp(29px, 4.4vw, 64px) / 1.03 Outfit, system-ui, sans-serif;
	letter-spacing: -0.025em;
	color: var(--sc-text);
}

.sc-intro {
	margin: 0;
	max-width: 56ch;
	font: 400 19px/1.6 Outfit, system-ui, sans-serif;
	color: var(--sc-body);
}

.sc-total {
	margin: 0;
	text-align: right;
}

.sc-total-num {
	display: block;
	font: 800 52px/1 Outfit, system-ui, sans-serif;
	letter-spacing: -0.02em;
	color: var(--sc-text);
}

.sc-total-label {
	display: block;
	margin-top: 8px;
	font: 400 12px/1 "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sc-muted);
}

/* ---------- grid ---------- */

.sc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	max-width: 1312px;
	margin: 0 auto;
}

/* ---------- tile ---------- */

.sc-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: 18px;
	background:
		radial-gradient(120% 80% at 50% 0%, var(--sc-tile-glow) 0%, transparent 62%),
		linear-gradient(180deg, var(--sc-tile-top) 0%, var(--sc-tile-bottom) 100%);
	text-decoration: none;
	transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.sc-tile::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 18px;
	pointer-events: none;
	opacity: 0;
	box-shadow: inset 0 1px 0 rgba(0, 245, 255, 0.18), 0 18px 46px -22px rgba(0, 245, 255, 0.3);
	transition: opacity 220ms ease;
}

.sc-tile:hover,
.sc-tile:focus-visible {
	border-color: var(--sc-line-hover);
	transform: translateY(-4px);
	outline: none;
}

.sc-tile:hover::after,
.sc-tile:focus-visible::after {
	opacity: 1;
}

.sc-tile:focus-visible {
	border-color: var(--sc-cyan);
	box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.35);
}

/* ---------- art ---------- */

.sc-art {
	position: relative;
	height: 230px;
}

.sc-card {
	position: absolute;
	top: 18px;
	left: 50%;
	width: 132px;
	height: auto;
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.65));
	transition: transform 260ms ease;
}

/* Two cards fan apart; a single card centres instead. */
.sc-art[data-card-count="2"] .sc-card--0 {
	margin-left: -124px;
	transform: rotate(-6deg);
}

.sc-art[data-card-count="2"] .sc-card--1 {
	margin-left: -8px;
	transform: rotate(5deg);
}

.sc-art[data-card-count="1"] .sc-card--0 {
	margin-left: -66px;
	transform: rotate(-3deg);
}

.sc-tile:hover .sc-art[data-card-count="2"] .sc-card--0,
.sc-tile:focus-visible .sc-art[data-card-count="2"] .sc-card--0 {
	transform: translateY(-6px) rotate(-9deg);
}

.sc-tile:hover .sc-art[data-card-count="2"] .sc-card--1,
.sc-tile:focus-visible .sc-art[data-card-count="2"] .sc-card--1 {
	transform: translateY(-6px) rotate(8deg);
}

.sc-tile:hover .sc-art[data-card-count="1"] .sc-card--0,
.sc-tile:focus-visible .sc-art[data-card-count="1"] .sc-card--0 {
	transform: translateY(-6px) rotate(-5deg);
}

/* The plate: shown when a set has no prepared cut-out yet, so the tile keeps
   its height and an opaque-white eBay image is never used as art. */
.sc-art--plate {
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(90% 70% at 50% 42%, #141A24 0%, transparent 70%);
}

.sc-plate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 132px;
	height: 182px;
	border: 1px solid #2A3440;
	border-radius: 10px;
	background: #0A0F16;
}

.sc-plate-rule {
	width: 38px;
	height: 1px;
}

.sc-plate-rule--top {
	background: var(--sc-cyan);
	opacity: 0.75;
}

.sc-plate-rule--bottom {
	background: var(--sc-magenta);
	opacity: 0.6;
}

.sc-plate-count {
	font: 500 30px/1 "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: -0.02em;
	color: var(--sc-text);
}

.sc-plate-label {
	font: 400 9px/1 "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sc-muted);
}

/* ---------- tile body ---------- */

.sc-body {
	display: block;
	padding: 0 26px 26px;
}

.sc-index {
	display: block;
	margin-bottom: 10px;
	font: 400 11px/1 "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sc-faint);
}

.sc-name {
	display: block;
	margin-bottom: 12px;
	font: 600 28px/1.15 Outfit, system-ui, sans-serif;
	letter-spacing: -0.015em;
	color: var(--sc-text);
}

.sc-count {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin-bottom: 22px;
}

.sc-count-num {
	font: 500 20px/1 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--sc-cyan);
}

.sc-count-label {
	font: 400 14px/1 Outfit, system-ui, sans-serif;
	color: var(--sc-muted);
}

.sc-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 500 15px/1 Outfit, system-ui, sans-serif;
	color: #D7DEE8;
	transition: color 200ms ease;
}

.sc-tile:hover .sc-cta,
.sc-tile:focus-visible .sc-cta {
	color: var(--sc-cyan);
}

.sc-arrow {
	transition: transform 200ms ease, color 200ms ease;
}

.sc-tile:hover .sc-arrow,
.sc-tile:focus-visible .sc-arrow {
	transform: translateX(5px);
	color: var(--sc-magenta);
}

/* ---------- catalogue cell ---------- */

.sc-tile--catalogue {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 30px;
	border-style: dashed;
	background: #070B11;
}

.sc-tile--catalogue:hover {
	transform: none;
	border-color: var(--sc-line);
}

.sc-tile--catalogue .sc-index {
	margin-bottom: 14px;
}

.sc-cat-copy {
	margin: 0 0 24px;
	font: 400 17px/1.55 Outfit, system-ui, sans-serif;
	color: var(--sc-body);
}

.sc-button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--sc-cyan);
	color: #05080D;
	font: 500 16px/1 Outfit, system-ui, sans-serif;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.sc-button:hover,
.sc-button:focus-visible {
	background: #7DFBFF;
	color: #05080D;
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -16px rgba(0, 245, 255, 0.55);
}

.sc-button:focus-visible {
	outline: 3px solid var(--sc-magenta);
	outline-offset: 3px;
}

/* ---------- provenance ---------- */

.sc-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	max-width: 1312px;
	margin: 44px auto 0;
	padding-top: 24px;
	border-top: 1px solid #141C26;
	font: 400 12px/1.6 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--sc-muted);
}

.sc-foot-sep {
	color: #2A3440;
}

/* ---------- tablet ---------- */

@media (max-width: 1023px) {
	.surge-collections {
		padding: 64px 32px 56px;
	}

	.sc-head {
		margin-bottom: 36px;
	}

	.sc-intro {
		font-size: 17px;
	}

	.sc-total-num {
		font-size: 40px;
	}

	.sc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.sc-art {
		height: 176px;
	}

	.sc-card {
		width: 104px;
	}

	.sc-art[data-card-count="2"] .sc-card--0 {
		margin-left: -98px;
	}

	.sc-art[data-card-count="2"] .sc-card--1 {
		margin-left: -6px;
	}

	.sc-art[data-card-count="1"] .sc-card--0 {
		margin-left: -52px;
	}

	.sc-plate {
		width: 104px;
		height: 140px;
	}

	.sc-body {
		padding: 0 20px 20px;
	}

	.sc-name {
		font-size: 22px;
	}

	.sc-cat-copy {
		font-size: 15px;
	}
}

/* ---------- phone: rows, not cards ---------- */

@media (max-width: 599px) {
	.surge-collections {
		padding: 40px 16px 32px;
	}

	.sc-head {
		display: block;
		margin-bottom: 26px;
	}

	.sc-eyebrow {
		margin-bottom: 14px;
		font-size: 10px;
	}

	.sc-intro {
		display: none;
	}

	.sc-total {
		display: flex;
		align-items: baseline;
		gap: 7px;
		margin-top: 12px;
		text-align: left;
	}

	.sc-total-num {
		font: 500 16px/1 "IBM Plex Mono", ui-monospace, monospace;
		color: var(--sc-cyan);
	}

	.sc-total-label {
		margin-top: 0;
		font-size: 11px;
		letter-spacing: 0.1em;
		text-transform: none;
	}

	.sc-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.sc-tile {
		display: flex;
		align-items: center;
		gap: 16px;
		min-height: 108px;
		padding: 14px 16px;
		border-radius: 16px;
	}

	.sc-tile:hover,
	.sc-tile:focus-visible {
		transform: none;
	}

	.sc-art {
		position: relative;
		width: 84px;
		height: 84px;
		flex: none;
	}

	.sc-card {
		top: 2px;
		left: 0;
		width: 52px;
	}

	.sc-art[data-card-count="2"] .sc-card--0 {
		margin-left: 4px;
		transform: rotate(-7deg);
	}

	.sc-art[data-card-count="2"] .sc-card--1 {
		margin-left: 30px;
		transform: rotate(6deg);
	}

	.sc-art[data-card-count="1"] .sc-card--0 {
		margin-left: 17px;
		transform: rotate(-3deg);
	}

	.sc-art--plate {
		background: none;
	}

	.sc-plate {
		width: 58px;
		height: 80px;
		gap: 5px;
		border-radius: 7px;
	}

	.sc-plate-count {
		font-size: 17px;
	}

	.sc-plate-label,
	.sc-plate-rule {
		display: none;
	}

	.sc-body {
		flex: 1;
		min-width: 0;
		padding: 0;
	}

	.sc-index {
		margin-bottom: 5px;
		font-size: 9px;
	}

	.sc-name {
		margin-bottom: 5px;
		font-size: 19px;
	}

	.sc-count {
		margin-bottom: 0;
	}

	.sc-count-num {
		font-size: 15px;
	}

	.sc-count-label {
		font-size: 12px;
	}

	/* On a row the whole tile is the target, so the inline CTA would be a
	   second affordance saying the same thing. A chevron replaces it, pinned
	   to the right edge rather than left in the text flow, where it wrapped
	   onto its own line under the count. */
	.sc-cta {
		position: absolute;
		top: 50%;
		right: 14px;
		transform: translateY(-50%);
		font-size: 0;
		gap: 0;
		color: #5B6675;
	}

	.sc-body {
		padding-right: 24px;
	}

	.sc-arrow {
		width: 18px;
		height: 18px;
	}

	.sc-tile--catalogue {
		display: block;
		padding: 20px 16px;
		min-height: 0;
	}

	.sc-cat-copy {
		margin-bottom: 16px;
		font-size: 15px;
	}

	.sc-button {
		display: flex;
		align-self: stretch;
	}

	.sc-foot {
		gap: 4px 16px;
		margin-top: 20px;
		padding-top: 16px;
		/* Was 10px, which measured as the smallest visible text on the page
		   at 320px. 12px is the comfortable floor for supporting copy. */
		font-size: 12px;
		line-height: 1.7;
	}

	.sc-foot-sep {
		display: none;
	}
}

/* 320px: the tightest supported width. */
@media (max-width: 359px) {
	.surge-collections {
		padding: 32px 16px 28px;
	}

	.sc-tile {
		gap: 12px;
		min-height: 96px;
		padding: 12px 13px;
	}

	.sc-art {
		width: 70px;
		height: 72px;
	}

	.sc-card {
		width: 44px;
		top: 3px;
	}

	.sc-art[data-card-count="2"] .sc-card--0 {
		margin-left: 2px;
	}

	.sc-art[data-card-count="2"] .sc-card--1 {
		margin-left: 24px;
	}

	.sc-art[data-card-count="1"] .sc-card--0 {
		margin-left: 13px;
	}

	.sc-plate {
		width: 50px;
		height: 68px;
	}

	.sc-index {
		display: none;
	}

	.sc-name {
		font-size: 17px;
	}

	.sc-count-num {
		font-size: 14px;
	}

	.sc-count-label {
		font-size: 11px;
	}
}

/* ---------- motion and contrast preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	.surge-collections *,
	.surge-collections *::after {
		transition: none !important;
	}

	.sc-tile:hover,
	.sc-tile:focus-visible,
	.sc-button:hover,
	.sc-button:focus-visible {
		transform: none;
	}

	.sc-tile:hover .sc-card,
	.sc-tile:focus-visible .sc-card,
	.sc-tile:hover .sc-arrow {
		transform: none;
	}
}

@media (forced-colors: active) {
	.sc-tile {
		border-color: CanvasText;
	}

	.sc-tile:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* ---------- embedded in a page that already has its own section head ---------- */

.surge-collections--nohead {
	padding: 0;
	background: none;
}

.surge-collections--nohead .sc-head {
	justify-content: flex-end;
	margin-bottom: 20px;
}

.surge-collections--nohead .sc-total {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-align: left;
}

.surge-collections--nohead .sc-total-num {
	font: 500 17px/1 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--sc-cyan);
}

.surge-collections--nohead .sc-total-label {
	margin-top: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
}

@media (max-width: 599px) {
	.surge-collections--nohead .sc-head {
		margin-bottom: 16px;
	}

	.surge-collections--nohead .sc-total {
		margin-top: 0;
	}
}

/* ==========================================================================
 * Compact stock-alert card — the home page band.
 *
 * [surge_rd_form_card type="subscribe_compact"] renders the theme's existing
 * card around WPForms form 95. These rules strip the card chrome so the form
 * sits directly in the band.
 *
 * Selector specificity matters here. surge-components.css styles .signup-card
 * and sets `order: -1` on it inside .alerts, and this stylesheet is not
 * guaranteed to load after it. Every rule below is therefore written as
 * `.alerts .signup-card.signup-card--compact` (0,3,0), which beats the
 * single-class rules whatever the load order. /stock-alerts/ has no .alerts
 * ancestor and no --compact class, so it is untouched.
 * ========================================================================== */

.alerts .signup-card.signup-card--compact {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	max-width: 560px;
	/* The design orders the card first inside .alerts; the band supplies its
	   own heading above the form, so it must follow the copy instead. */
	order: 0;
}

/* The theme's card template always prints an <h2>; the compact variant
   supplies no heading because the band already has one. */
.alerts .signup-card.signup-card--compact > h2:empty,
.alerts .signup-card.signup-card--compact > span.mono:empty {
	display: none;
}

.alerts .signup-card.signup-card--compact .wpforms-container {
	margin: 0;
	max-width: none;
}

.alerts .signup-card.signup-card--compact .wpforms-field {
	padding: 0;
	margin: 0 0 14px;
	max-width: none;
}

.alerts .signup-card.signup-card--compact input[type="email"] {
	width: 100%;
	max-width: none;
	min-height: 48px;
	box-sizing: border-box;
}

.alerts .signup-card.signup-card--compact .wpforms-submit {
	min-height: 48px;
}

/* Email field and submit share a row once there is room. */
@media (min-width: 600px) {
	.alerts .signup-card.signup-card--compact .wpforms-field-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* Keep the focus ring obvious against the near-black band. */
.alerts .signup-card.signup-card--compact input[type="email"]:focus-visible,
.alerts .signup-card.signup-card--compact input[type="checkbox"]:focus-visible,
.alerts .signup-card.signup-card--compact .wpforms-submit:focus-visible {
	outline: 3px solid #00F5FF;
	outline-offset: 2px;
}

.alerts .signup-card.signup-card--compact .muted {
	margin-top: 14px;
	font: 400 12px/1.7 "IBM Plex Mono", ui-monospace, monospace;
	color: #8E97A6;
}

.alerts .signup-card.signup-card--compact .muted a {
	color: #00F5FF;
}

@media (max-width: 599px) {
	.alerts .signup-card.signup-card--compact {
		max-width: none;
	}

	.alerts .signup-card.signup-card--compact .wpforms-submit {
		width: 100%;
	}
}