/* ==========================================================================
   YugaTech Network Cards (F65)
   Cross-site PRODUCT + ARTICLE embeds rendered on www. Native to the www theme:
   uses the --ygt-* tokens (primary = orange) and the site font (inherited).
   All card elements are <span>s inside one <a> (so wpautop can't break them);
   this sheet promotes them to block/flex.
   ========================================================================== */

.ygt-ncard {
	--nc-radius: 14px;
	--nc-primary: var(--ygt-primary, #f97316);
	--nc-primary-dark: var(--ygt-primary-dark, #ea580c);
	--nc-text: var(--ygt-text, #1a1a1a);
	--nc-muted: var(--ygt-text-muted, #6b7280);
	--nc-border: var(--ygt-border, #e5e5e5);
	--nc-card: var(--ygt-bg, #fff);
	margin: 1.6rem 0;
	font-family: inherit;
}

.ygt-ncard a { text-decoration: none; }
.ygt-ncard img { display: block; }

/* ---- shared link reset / focus ----------------------------------------- */
.ygt-ncp-card,
.ygt-nca-card {
	display: block;
	color: var(--nc-text);
	background: var(--nc-card);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	transition: transform .22s cubic-bezier(.2, .7, .2, 1),
		box-shadow .22s ease, border-color .22s ease;
	will-change: transform;
}
.ygt-ncp-card:focus-visible,
.ygt-nca-card:focus-visible {
	outline: 2px solid var(--nc-primary);
	outline-offset: 3px;
}

/* ==========================================================================
   PRODUCT CARD  (faithful to the specs device card, in www orange)
   ========================================================================== */
.ygt-ncard-product { max-width: 560px; }

.ygt-ncp-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--nc-primary) 45%, var(--nc-border));
	box-shadow: 0 18px 38px rgba(15, 23, 42, .14);
}

.ygt-ncp-head {
	display: flex;
	align-items: center;
	gap: .95rem;
	padding: .95rem 1.05rem;
}
.ygt-ncp-thumb {
	flex: 0 0 92px;
	width: 92px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, #fcfcfd 0%, #eef1f5 100%);
	border: 1px solid var(--nc-border);
	border-radius: 11px;
	overflow: hidden;
}
.ygt-ncp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.ygt-ncp-noimg { font-size: 1.7rem; color: #cbd2dc; line-height: 1; }

.ygt-ncp-id {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .16rem;
}
.ygt-ncp-brand {
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nc-primary);
}
.ygt-ncp-title {
	font-size: 1.14rem;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.012em;
	color: var(--nc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ygt-ncp-price {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: .1rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--nc-text);
	white-space: nowrap;
}

.ygt-ncp-specs {
	display: flex;
	border-top: 1px solid var(--nc-border);
}
.ygt-ncp-spec {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .14rem;
	padding: .72rem .9rem;
	border-right: 1px solid var(--nc-border);
}
.ygt-ncp-spec:last-child { border-right: 0; }
.ygt-ncp-spec-l {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nc-muted);
}
.ygt-ncp-spec-v {
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nc-text);
}

.ygt-ncp-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .8rem 1rem;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: #fff;
	background: var(--nc-primary);
	transition: background .2s ease, gap .2s ease;
}
.ygt-ncp-card:hover .ygt-ncp-cta { background: var(--nc-primary-dark); gap: .7rem; }
.ygt-ncp-cta-arrow { transition: transform .2s ease; }
.ygt-ncp-card:hover .ygt-ncp-cta-arrow { transform: translateX(3px); }

@media (max-width: 480px) {
	.ygt-ncp-title { white-space: normal; }
}

/* ==========================================================================
   ARTICLE CARD  (compact horizontal, built for click-through)
   ========================================================================== */
.ygt-ncard-article { max-width: 620px; }

.ygt-nca-card {
	display: flex;
	align-items: stretch;
}
.ygt-nca-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--nc-primary) 45%, var(--nc-border));
	box-shadow: 0 20px 40px rgba(15, 23, 42, .15);
}

/* thumbnail */
.ygt-nca-thumb {
	position: relative;
	flex: 0 0 40%;
	max-width: 230px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eef1f5;
}
.ygt-nca-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ygt-nca-card:hover .ygt-nca-thumb img { transform: scale(1.07); }
.ygt-nca-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e9edf2 0%, #dfe4ea 100%);
}
/* subtle bottom scrim so the chip stays legible on any image */
.ygt-nca-thumb::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background: linear-gradient(to top, rgba(15, 23, 42, .42), rgba(15, 23, 42, 0));
	opacity: .9;
	pointer-events: none;
}
.ygt-nca-chip {
	position: absolute;
	left: .55rem;
	bottom: .5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: .18rem .5rem;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(17, 24, 39, .58);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	backdrop-filter: saturate(140%) blur(3px);
}

/* body */
.ygt-nca-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: .85rem 1rem .8rem;
}
.ygt-nca-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
}
.ygt-nca-eyebrow {
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nc-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ygt-nca-meta {
	flex: 0 0 auto;
	font-size: .66rem;
	font-weight: 600;
	color: var(--nc-muted);
	white-space: nowrap;
}
.ygt-nca-title {
	font-size: 1.06rem;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.012em;
	color: var(--nc-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .18s ease;
}
.ygt-nca-card:hover .ygt-nca-title { color: var(--nc-primary-dark); }
.ygt-nca-excerpt {
	font-size: .82rem;
	line-height: 1.45;
	color: var(--nc-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ygt-nca-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin-top: auto;
	padding-top: .25rem;
}
.ygt-nca-author {
	min-width: 0;
	font-size: .72rem;
	font-weight: 600;
	color: var(--nc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ygt-nca-byline { color: var(--nc-muted); font-weight: 500; }
.ygt-nca-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .32rem .7rem;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--nc-primary);
	background: color-mix(in srgb, var(--nc-primary) 12%, transparent);
	border-radius: 999px;
	transition: background .2s ease, color .2s ease, gap .2s ease;
}
.ygt-nca-card:hover .ygt-nca-cta {
	background: var(--nc-primary);
	color: #fff;
	gap: .5rem;
}
.ygt-nca-cta-arrow { transition: transform .2s ease; }
.ygt-nca-card:hover .ygt-nca-cta-arrow { transform: translateX(3px); }

/* stack on small screens — thumbnail on top */
@media (max-width: 600px) {
	.ygt-nca-card { flex-direction: column; }
	.ygt-nca-thumb {
		flex-basis: auto;
		max-width: none;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	.ygt-nca-title { font-size: 1.04rem; }
}

/* graceful fallback where color-mix is unsupported */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.ygt-nca-cta { background: #fdecdd; }
	.ygt-ncp-card:hover { border-color: var(--nc-primary); }
	.ygt-nca-card:hover { border-color: var(--nc-primary); }
}