/* ---------------------------------------------------------------------
   Candy AI Shorts showcase.

   Mirrors the source product: a dark panel, filter chips, and a poster
   wall of portrait cards with a New Eps badge. Sits inside the light
   editorial page as its own dark block, so the catalogue reads like the
   thing being reviewed while the surrounding copy stays in house style.
   --------------------------------------------------------------------- */

.cshorts{
	background:#0A0A0A;
	border-radius:22px;
	padding:clamp(18px,3vw,30px);
	margin:0 0 24px;
	color:#fff;
}
.cshorts__top{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	margin:0 0 4px;
}
.cshorts__title{
	font-size:clamp(19px,2.4vw,24px);
	font-weight:800;
	letter-spacing:-.02em;
	margin:0;
	color:#fff;
}
.cshorts__count{
	font-size:13px;
	color:rgba(255,255,255,.62);
	font-weight:600;
}
.cshorts__note{
	margin:0 0 16px !important;
	font-size:14px;
	line-height:1.55;
	color:rgba(255,255,255,.68) !important;
}

/* Filter chips */
.cshorts__chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 20px;
	padding:0;
	list-style:none;
}
.cshorts__chip{
	appearance:none;
	border:1px solid rgba(255,255,255,.16);
	background:rgba(255,255,255,.05);
	color:rgba(255,255,255,.86);
	font:inherit;
	font-size:13px;
	font-weight:700;
	padding:8px 15px;
	border-radius:999px;
	cursor:pointer;
	line-height:1;
	transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cshorts__chip:hover{background:rgba(255,255,255,.12)}
.cshorts__chip[aria-pressed="true"]{
	background:var(--pink,#F92FBB);
	border-color:var(--pink,#F92FBB);
	color:#0A0A0A;
}
.cshorts__chip:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Poster wall */
.cshorts__grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(min(148px,100%),1fr));
	gap:clamp(12px,1.6vw,18px);
	margin:0;
}
.cshorts__card{
	margin:0;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:9px;
}
.cshorts__card[hidden]{display:none}
.cshorts__shot{
	position:relative;
	border-radius:13px;
	overflow:hidden;
	background:#17151a;
	line-height:0;
	transition:transform .18s ease,box-shadow .18s ease;
}
.cshorts__card:hover .cshorts__shot{
	transform:translateY(-4px);
	box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.cshorts__shot img{
	width:100%;
	height:auto;
	aspect-ratio:2/3;
	object-fit:cover;
	display:block;
}
.cshorts__badge{
	position:absolute;
	top:8px;
	left:8px;
	z-index:2;
	background:var(--pink,#F92FBB);
	color:#0A0A0A;
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:4px 8px;
	border-radius:999px;
	line-height:1;
}
.cshorts__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.cshorts__name{
	font-size:13.5px;
	font-weight:700;
	line-height:1.32;
	color:#fff;
	overflow-wrap:anywhere;
}
.cshorts__by{font-size:12px;color:rgba(255,255,255,.55)}
.cshorts__empty{
	color:rgba(255,255,255,.7);
	font-size:14px;
	padding:18px 0 4px;
	margin:0;
}

/* Homepage band */
.cshorts-band{
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	gap:clamp(20px,4vw,44px);
	align-items:center;
}
.cshorts-band__posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cshorts-band__posters img{
	width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
	border-radius:12px;display:block;
}
@media(max-width:820px){.cshorts-band{grid-template-columns:minmax(0,1fr)}}

/* The article stylesheet colours h2/h3 inside the panel, which turned the
   showcase heading dark on a dark background. Re-assert it here. */
.cshorts .cshorts__title,
.nsrart-panel .cshorts .cshorts__title,
.cshorts h3.cshorts__title{color:#fff !important}
.cshorts .cshorts__name{color:#fff !important}
.cshorts .cshorts__by,
.cshorts .cshorts__count{color:rgba(255,255,255,.62) !important}
.cshorts .cshorts__note{color:rgba(255,255,255,.68) !important}