/**
 * Pelop Network Widget Pro - front-end styles.
 *
 * Pure CSS Grid, no framework, no JavaScript. Uses aspect-ratio and explicit
 * image dimensions to reserve layout space and avoid Cumulative Layout Shift.
 */

.pelop-nw {
	--pelop-nw-gap: 16px;
	--pelop-nw-radius: 10px;
	--pelop-nw-bg: #ffffff;
	--pelop-nw-card-bg: #f6f7f9;
	--pelop-nw-text: #14161a;
	--pelop-nw-muted: #6b7280;
	--pelop-nw-accent: #0b57d0;

	box-sizing: border-box;
	width: 100%;
	margin: 2rem 0;
	padding: 0;
	color: var(--pelop-nw-text);
	font-family: inherit;
}

.pelop-nw *,
.pelop-nw *::before,
.pelop-nw *::after {
	box-sizing: border-box;
}

.pelop-nw__header {
	margin: 0 0 1rem;
}

.pelop-nw__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
}

.pelop-nw__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--pelop-nw-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pelop-nw__card {
	margin: 0;
	padding: 0;
	background: var(--pelop-nw-card-bg);
	border-radius: var(--pelop-nw-radius);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pelop-nw__card:hover,
.pelop-nw__card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.pelop-nw__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.pelop-nw__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #e5e7eb;
}

.pelop-nw__image--placeholder {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

.pelop-nw__card-title {
	margin: 0;
	padding: 12px 14px 6px;
	font-size: 0.98rem;
	line-height: 1.35;
	font-weight: 600;
}

.pelop-nw__source {
	display: block;
	padding: 0 14px 14px;
	margin-top: auto;
	font-size: 0.78rem;
	color: var(--pelop-nw-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pelop-nw__link:hover .pelop-nw__card-title,
.pelop-nw__link:focus .pelop-nw__card-title {
	color: var(--pelop-nw-accent);
}

/* Device targeting handled purely with CSS to keep full-page caches valid. */
@media (max-width: 781px) {
	.pelop-nw--desktop-only {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.pelop-nw--mobile-only {
		display: none !important;
	}
}

@media (prefers-color-scheme: dark) {
	.pelop-nw {
		--pelop-nw-card-bg: #1b1e24;
		--pelop-nw-text: #e7e9ee;
		--pelop-nw-muted: #9aa1ad;
		--pelop-nw-accent: #6ea8fe;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pelop-nw__card {
		transition: none;
	}
}