/* Yarn Resources — archive landing page
   Retouched to match the premium compare/ design language. */

.yarn-res-archive {
	background: #fff;
	color: #0f172a;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-feature-settings: "ss01", "cv11";
}
.yarn-res-archive[dir="rtl"] {
	font-family: 'Noto Sans Arabic', 'Cairo', sans-serif;
}

.yarn-res-archive-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ═══ Hero ═══ */
.yarn-res-archive-hero {
	background:
		radial-gradient(circle at 12% 0%, rgba(37,99,235,0.30) 0%, transparent 48%),
		radial-gradient(circle at 88% 100%, rgba(236,72,153,0.22) 0%, transparent 50%),
		linear-gradient(135deg, #0b1220 0%, #111827 60%, #1e293b 100%);
	color: #fff;
	padding: 84px 0 88px;
	position: relative;
	overflow: hidden;
}
.yarn-res-archive-hero::after {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.35;
	pointer-events: none;
}
.yarn-res-archive-hero > * { position: relative; z-index: 1; }

.yarn-res-archive-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #93c5fd;
	margin-bottom: 18px;
	padding: 6px 12px;
	background: rgba(59,130,246,0.12);
	border: 1px solid rgba(59,130,246,0.22);
	border-radius: 999px;
}
.yarn-res-archive-eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	background: #60a5fa;
	border-radius: 50%;
	display: inline-block;
}

.yarn-res-archive-title {
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.022em;
	margin: 0 0 22px 0;
	color: #fff;
	max-width: 860px;
}

.yarn-res-archive-intro {
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.6;
	color: #e6edf5;
	max-width: 720px;
	margin: 0 0 26px 0;
}

.yarn-res-archive-meta-row {
	display: flex; gap: 10px; flex-wrap: wrap;
	margin-top: 4px;
}
.yarn-res-archive-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #e6edf5;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.18);
	padding: 7px 13px;
	border-radius: 999px;
}
.yarn-res-archive-meta-pill svg { width: 14px; height: 14px; opacity: 0.95; color: #cbd5e1; }

/* ═══ Filter bar ═══ */
.yarn-res-archive-filters {
	background: rgba(248,250,252,0.96);
	border-bottom: 1px solid #e2e8f0;
	padding: 22px 0;
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: blur(8px);
}
.yarn-res-filter-row {
	display: flex; flex-direction: column; gap: 14px;
	align-items: stretch;
}
@media (min-width: 768px) {
	.yarn-res-filter-row { flex-direction: row; align-items: center; }
}
.yarn-res-filter-search {
	flex: 1; position: relative;
	display: flex; align-items: center;
}
.yarn-res-filter-search .yarn-res-icon {
	position: absolute; left: 14px;
	width: 18px; height: 18px;
	color: #64748b; pointer-events: none;
}
.yarn-res-archive[dir="rtl"] .yarn-res-filter-search .yarn-res-icon { left: auto; right: 14px; }
.yarn-res-filter-search input {
	width: 100%; box-sizing: border-box;
	padding: 12px 16px 12px 44px;
	border: 1px solid #e2e8f0;
	background: #fff;
	border-radius: 10px;
	font-size: 15px; color: #0f172a;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.yarn-res-archive[dir="rtl"] .yarn-res-filter-search input {
	padding: 12px 44px 12px 16px;
}
.yarn-res-filter-search input:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.yarn-res-filter-search input::placeholder { color: #94a3b8; }

.yarn-res-filter-lang {
	display: inline-flex; background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 3px;
	gap: 2px;
}
.yarn-res-lang-btn {
	display: inline-block;
	padding: 8px 18px;
	font-size: 13px; font-weight: 600;
	color: #475569;
	border-radius: 7px;
	transition: all 0.15s ease;
	font-family: inherit;
	text-decoration: none;
	line-height: 1.4;
}
.yarn-res-lang-btn:hover { color: #0f172a; text-decoration: none; }
.yarn-res-lang-btn.active {
	background: #0b1220; color: #fff !important;
	pointer-events: none;
}

/* ═══ Category pills ═══ */
.yarn-res-filter-categories {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e2e8f0;
}
.yarn-res-cat-btn {
	appearance: none;
	background: #fff; color: #334155;
	border: 1px solid #e2e8f0;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px; font-weight: 500;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	transition: all 0.15s ease;
	font-family: inherit;
}
.yarn-res-cat-btn:hover { border-color: #cbd5e1; background: #f1f5f9; }
.yarn-res-cat-btn.active {
	background: #0b1220; color: #fff;
	border-color: #0b1220;
}
.yarn-res-cat-count {
	font-size: 11px; font-weight: 600;
	padding: 1px 7px;
	border-radius: 999px;
	background: #f1f5f9; color: #64748b;
	min-width: 16px; text-align: center;
}
.yarn-res-cat-btn.active .yarn-res-cat-count {
	background: rgba(255,255,255,0.2); color: #fff;
}

/* ═══ Why we publish these ═══ */
.yarn-res-archive-why {
	background: #fff;
	padding: 64px 0;
	border-bottom: 1px solid #f1f5f9;
}
.yarn-res-archive-why-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}
.yarn-res-archive-why-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2563eb;
	margin-bottom: 12px;
}
.yarn-res-archive-why h2 {
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 auto 14px;
	color: #0f172a;
	max-width: none;
}
.yarn-res-archive-why p.yarn-res-archive-why-sub {
	font-size: 16px;
	line-height: 1.6;
	color: #475569;
	max-width: 620px;
	margin: 0 auto;
}
.yarn-res-archive-why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 720px) { .yarn-res-archive-why-grid { grid-template-columns: repeat(3, 1fr); } }
.yarn-res-archive-factor {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 22px 24px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.yarn-res-archive-factor-icon {
	width: 40px; height: 40px; flex-shrink: 0;
	background: #eff6ff;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	color: #2563eb;
}
.yarn-res-archive-factor-icon svg { width: 22px; height: 22px; }
.yarn-res-archive-factor h3 {
	margin: 0 0 6px 0;
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
}
.yarn-res-archive-factor p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #475569;
}

/* ═══ Results meta + grid ═══ */
.yarn-res-archive-grid-wrap { padding: 48px 0 72px; background: #fff; }

.yarn-res-archive-results-meta {
	display: flex; align-items: baseline; gap: 6px;
	margin-bottom: 24px;
	font-size: 14px;
}
.yarn-res-result-count { font-weight: 700; color: #0f172a; font-size: 16px; }
.yarn-res-result-count-label { color: #64748b; }

.yarn-res-archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 640px) {
	.yarn-res-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.yarn-res-archive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══ Card ═══ */
.yarn-res-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
}
.yarn-res-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px -8px rgba(15,23,42,0.14);
	border-color: #cbd5e1;
}
.yarn-res-card:hover .yarn-res-card-title a { color: #2563eb; }
.yarn-res-card:hover .yarn-res-card-cta { background: #1d4ed8; transform: translateX(2px); }
.yarn-res-card[dir="rtl"]:hover .yarn-res-card-cta { transform: translateX(-2px); }

.yarn-res-card-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.yarn-res-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.yarn-res-card[hidden] { display: none !important; }
.yarn-res-card[dir="rtl"] { font-family: 'Noto Sans Arabic', inherit; }

.yarn-res-card-thumb {
	aspect-ratio: 16 / 9;
	background-size: cover; background-position: center;
	background-color: #f1f5f9;
}
.yarn-res-card-thumb-placeholder {
	background: linear-gradient(135deg, #0b1220 0%, #1e293b 50%, #1e3a8a 120%);
	position: relative;
}
.yarn-res-card-thumb-placeholder::before {
	content: "";
	position: absolute; inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1.25'%3E%3Cpath d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E") no-repeat center;
	background-size: 30%;
}

.yarn-res-card-body {
	padding: 24px 26px 24px;
	flex: 1;
	display: flex; flex-direction: column;
}
.yarn-res-card-top {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 12px; gap: 10px;
}
.yarn-res-card-category {
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.08em;
	color: #1d4ed8; background: #dbeafe;
	padding: 4px 10px; border-radius: 999px;
}
.yarn-res-card-lang {
	font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
	color: #64748b; background: #f1f5f9;
	padding: 3px 8px; border-radius: 4px;
}
.yarn-res-card-title {
	font-size: 18px; font-weight: 700;
	color: #0f172a;
	margin: 0 0 10px 0; line-height: 1.3;
	letter-spacing: -0.005em;
}
.yarn-res-card-excerpt {
	font-size: 14px; line-height: 1.55;
	color: #475569; margin: 0 0 20px 0;
	flex: 1;
}
.yarn-res-card-footer {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 14px; border-top: 1px solid #f1f5f9;
	gap: 12px;
}
.yarn-res-card-meta {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: #64748b;
}
.yarn-res-card-cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px;
	background: #2563eb; color: #fff;
	border-radius: 8px;
	font-size: 13px; font-weight: 600;
	transition: background 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}
.yarn-res-card-cta .yarn-res-icon { width: 14px; height: 14px; }

/* ═══ Empty states ═══ */
.yarn-res-empty,
.yarn-res-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 24px;
	color: #64748b;
}
.yarn-res-empty-state[hidden] { display: none; }
.yarn-res-empty-state p {
	margin: 16px 0 20px 0;
	font-size: 16px; color: #334155;
}
.yarn-res-clear-filters {
	appearance: none; border: none; cursor: pointer;
	background: #0b1220; color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 14px; font-weight: 600;
	font-family: inherit;
}
.yarn-res-clear-filters:hover { background: #1e293b; }

/* ═══ Bottom CTA band ═══ */
.yarn-res-archive-cta-band {
	background: linear-gradient(135deg, #0b1220 0%, #1e3a8a 120%);
	color: #fff;
	padding: 64px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.yarn-res-archive-cta-band::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 100%, rgba(236,72,153,0.15) 0%, transparent 55%);
	pointer-events: none;
}
.yarn-res-archive-cta-band > * { position: relative; }
.yarn-res-archive-cta-band h2 {
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 700;
	color: #fff;
	margin: 0 auto 14px;
	max-width: 640px;
}
.yarn-res-archive-cta-band p {
	color: #cbd5e1;
	margin: 0 auto 24px;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.6;
}
.yarn-res-archive-cta-band .yarn-res-cta-primary {
	background: #2563eb;
	color: #fff !important;
	padding: 14px 26px;
	border-radius: 10px;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 6px 18px rgba(37,99,235,0.35);
	transition: background 0.15s ease, transform 0.15s ease;
}
.yarn-res-archive-cta-band .yarn-res-cta-primary:hover { background: #1d4ed8; transform: translateY(-1px); }