#wr26 {
	--wr-bg: #050B18;
	--wr-bg-secondary: #091A35;
	--wr-blue: #2563EB;
	--wr-blue-soft: rgba(37, 99, 235, .35);
	--wr-white: #FFFFFF;
	--wr-text-secondary: #BFC7D5;
	--wr-border: rgba(255, 255, 255, .08);
	--wr-radius: 16px;
	--wr-transition: .3s cubic-bezier(.4, 0, .2, 1);

	color: var(--wr-white);
	font-family: 'Poppins', Inter, Manrope, sans-serif;
	box-sizing: border-box;
	position: relative;
}
#wr26 * { box-sizing: border-box; }
#wr26 .wr26-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------------- FILTERS ---------------- */
#wr26 .wr26-filters {
	display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 22px;
	margin-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--wr-blue) transparent;
}
#wr26 .wr26-filters::-webkit-scrollbar { height: 5px; }
#wr26 .wr26-filters::-webkit-scrollbar-thumb { background: var(--wr-blue-soft); border-radius: 8px; }
#wr26 .wr26-filter-btn {
	flex: 0 0 auto; background: rgba(255, 255, 255, .04);
	border: 1px solid var(--wr-border); color: var(--wr-text-secondary);
	padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 600;
	letter-spacing: .3px; cursor: pointer; white-space: nowrap;
	transition: all var(--wr-transition);
}
#wr26 .wr26-filter-btn:hover { color: var(--wr-white); border-color: rgba(255, 255, 255, .2); }
#wr26 .wr26-filter-btn.is-active {
	background: var(--wr-blue); border-color: var(--wr-blue); color: #fff;
	box-shadow: 0 0 22px var(--wr-blue-soft);
}

/* ---------------- GRID ---------------- */
#wr26 .wr26-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
#wr26 .wr26-card {
	margin: 0; position: relative; border-radius: var(--wr-radius);
	overflow: hidden; aspect-ratio: 16/9; cursor: pointer;
	border: 1px solid var(--wr-border); background: var(--wr-bg-secondary);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
	transition: transform var(--wr-transition), box-shadow var(--wr-transition), border-color var(--wr-transition);
	opacity: 0; transform: translateY(14px) scale(.98);
	animation: wr26-fade .5s ease forwards;
}
@keyframes wr26-fade { to { opacity: 1; transform: translateY(0) scale(1); } }
#wr26 .wr26-card.wr26-hidden { display: none; }
#wr26 .wr26-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease, filter .45s ease; }
#wr26 .wr26-card::after {
	content: ""; position: absolute; inset: 0; border-radius: var(--wr-radius);
	background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .75) 100%);
	pointer-events: none; transition: box-shadow var(--wr-transition);
}
#wr26 .wr26-card:hover {
	transform: translateY(-6px); border-color: rgba(37, 99, 235, .6);
	box-shadow: 0 16px 36px -10px var(--wr-blue-soft), 0 0 0 1px rgba(37, 99, 235, .4);
}
#wr26 .wr26-card:hover .wr26-card-img { transform: scale(1.08); }
#wr26 .wr26-card-title {
	position: absolute; left: 12px; right: 60px; bottom: 34px; z-index: 1;
	font-size: 13px; font-weight: 600; color: var(--wr-white);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#wr26 .wr26-card-cat {
	position: absolute; left: 12px; bottom: 10px; z-index: 1;
	font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
	color: var(--wr-white); text-transform: uppercase;
	background: rgba(5, 11, 24, .55); border: 1px solid rgba(255, 255, 255, .12);
	padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px);
}

/* empty state */
#wr26 .wr26-empty {
	display: none; text-align: center; padding: 60px 20px;
	color: var(--wr-text-secondary); font-size: 14px;
	border: 1px dashed var(--wr-border); border-radius: var(--wr-radius);
}
#wr26 .wr26-empty.is-visible { display: block; }

/* ---------------- LIGHTBOX ---------------- */
#wr26 .wr26-lightbox {
	position: fixed; inset: 0; z-index: 9999; display: none;
	align-items: center; justify-content: center; padding: 5vh 4vw;
	background: rgba(3, 7, 15, .82);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#wr26 .wr26-lightbox.is-open { display: flex; }
#wr26 .wr26-lightbox-box {
	position: relative; max-width: 1000px; width: 100%;
	background: var(--wr-bg-secondary); border: 1px solid var(--wr-border);
	border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
	max-height: 90vh; overflow-y: auto;
}
#wr26 .wr26-lightbox-img { width: 100%; display: block; max-height: 60vh; object-fit: contain; background: #000; }
#wr26 .wr26-lightbox-text { padding: 18px 20px 4px; }
#wr26 .wr26-lightbox-title { margin: 0 0 8px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .3px; }
#wr26 .wr26-lightbox-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wr-text-secondary); }
#wr26 .wr26-lightbox-meta { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--wr-border); }
#wr26 .wr26-lightbox-cat {
	font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
	color: var(--wr-blue); background: rgba(37, 99, 235, .12);
	border: 1px solid rgba(37, 99, 235, .35); padding: 6px 14px; border-radius: 999px;
}
#wr26 .wr26-lightbox-count { font-size: 12.5px; color: var(--wr-text-secondary); }
#wr26 .wr26-lightbox-close {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(5, 11, 24, .7); border: 1px solid var(--wr-border);
	color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: all var(--wr-transition);
}
#wr26 .wr26-lightbox-close:hover { background: var(--wr-blue); border-color: var(--wr-blue); }
#wr26 .wr26-lightbox-nav {
	position: absolute; top: 30%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(5, 11, 24, .6); border: 1px solid var(--wr-border);
	color: #fff; font-size: 20px; cursor: pointer; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	transition: all var(--wr-transition);
}
#wr26 .wr26-lightbox-nav:hover { background: var(--wr-blue); border-color: var(--wr-blue); }
#wr26 .wr26-lightbox-prev { left: 14px; }
#wr26 .wr26-lightbox-next { right: 14px; }

#wr26 button:focus-visible, #wr26 a:focus-visible { outline: 2px solid var(--wr-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	#wr26 .wr26-card, #wr26 .wr26-card-img { transition: none; animation: none; opacity: 1; transform: none; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1024px) {
	#wr26 .wr26-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	#wr26 .wr26-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	#wr26 .wr26-lightbox-nav { width: 38px; height: 38px; font-size: 17px; }
}