/**
 * Featured carousel — center-mode slider (active slide large, neighbours
 * peeking dimmed on the sides), inspired by the hologuide.fr slider.
 */

/* Rendered via astra_content_before, outside Astra's own .ast-container,
   so it needs its own max-width/centering to match the rest of the site. */
.swtor-carousel{
	position: relative;
	width: 100%;
	max-width: 1960px;
	margin: 0 auto;
	padding: 0 20px 6px;
	box-sizing: border-box;
	/* This section is itself a flex item (Astra wraps header/content/footer
	   in one flex column). With `margin: 0 auto` for centering, a flex item
	   sizes to its own content instead of stretching to fill the container —
	   and the carousel's slide track (many fixed-width, non-wrapping tiles)
	   is intrinsically far wider than any real screen, so without an
	   explicit width the whole page was forced wider than the viewport on
	   any screen narrower than max-width. `width: 100%` (clamped by
	   max-width) makes it size off the container instead of its content.
	   Only surfaced once max-width was raised past ~1290px — the site's
	   width used to be capped at 1200px, always under that threshold. */
	min-width: 0;
}

.swtor-car-viewport{ overflow: hidden; cursor: grab; touch-action: pan-y; }
.swtor-car-viewport.is-dragging{ cursor: grabbing; }

.swtor-car-track{
	list-style: none;
	margin: 0;
	/* Vertical padding, not decoration: the active tile is scaled 1.5x by
	   transform, which grows it past the track's own height without the
	   track knowing — and the viewport clips overflow. This reserves the
	   ~25% of tile height it gains above and below, plus room for its glow,
	   so the featured tile is never cut off at the top and bottom. Sized
	   for the current max tile height (400px wide × 9/16 base, scaled 1.5x). */
	padding: 80px 0;
	display: flex;
	align-items: center;
	will-change: transform;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
	user-select: none;
}
.swtor-car-slide a{ -webkit-user-drag: none; user-select: none; }

/* Base tile size: 5 tiles are still the visible "slots" (2 neighbours + the
   active one + 2 neighbours), but at this size 5 full tiles plus the
   active one's extra 1.5x growth don't all fit side by side on most real
   screens any more — by design: the active tile is allowed to overlap (and
   the two outer slots to be partly clipped by .swtor-car-viewport's
   overflow:hidden) rather than shrinking everything down to fit, so the
   featured tile stays large regardless of viewport width. The active tile
   is scaled 1.5x via transform, which doesn't change its layout footprint
   (the track reserves vertical room for that growth, see .swtor-car-track
   above) so it overlaps its neighbours — a deliberate "it's the featured
   one" effect rather than a layout bug. */
/* The <li> keeps the slide's size, spacing, scaling and dimming (all the
   carousel.js geometry reads); its look lives in two inner boxes, same
   construction as the "Ajouté récemment" tiles (style.css):
   .swtor-car-frame — chamfered via clip-path, its steel gradient showing
   through a 1px padding as the outline (the old 1px border);
   .swtor-car-inner — chamfered too, carries the background, tag and title
   (the old 12px 14px padding).
   clip-path would also clip a box-shadow, so the active slide's glow is a
   drop-shadow filter on the unclipped <li> instead. */
.swtor-car-slide{
	--swtor-card-cut: 14px;
	position: relative;
	flex: none;
	width: clamp(220px, 26vw, 400px);
	aspect-ratio: 16 / 9;
	margin: 0 10px;
	display: flex;
	filter: brightness(.7) saturate(.85);
	transform: scale(1);
	transition: filter .5s ease, transform .5s ease;
	cursor: pointer;
	z-index: 1;
}
/* Chamfers follow each slide's place relative to the active one (only the
   is-active class carousel.js already toggles is needed): slides left of it
   are cut top-right + bottom-left, slides right of it (its later siblings in
   the track) top-left + bottom-right, and the active slide on all 4 corners. */
.swtor-car-frame,
.swtor-car-inner{
	clip-path: polygon(
		0 0, calc(100% - var(--swtor-card-cut)) 0,
		100% var(--swtor-card-cut), 100% 100%,
		var(--swtor-card-cut) 100%, 0 calc(100% - var(--swtor-card-cut))
	);
}
.swtor-car-slide.is-active ~ .swtor-car-slide .swtor-car-frame,
.swtor-car-slide.is-active ~ .swtor-car-slide .swtor-car-inner{
	clip-path: polygon(
		var(--swtor-card-cut) 0, 100% 0,
		100% calc(100% - var(--swtor-card-cut)), calc(100% - var(--swtor-card-cut)) 100%,
		0 100%, 0 var(--swtor-card-cut)
	);
}
.swtor-car-slide.is-active .swtor-car-frame,
.swtor-car-slide.is-active .swtor-car-inner{
	clip-path: polygon(
		var(--swtor-card-cut) 0, calc(100% - var(--swtor-card-cut)) 0,
		100% var(--swtor-card-cut), 100% calc(100% - var(--swtor-card-cut)),
		calc(100% - var(--swtor-card-cut)) 100%, var(--swtor-card-cut) 100%,
		0 calc(100% - var(--swtor-card-cut)), 0 var(--swtor-card-cut)
	);
}
.swtor-car-frame{
	flex: 1;
	display: flex;
	min-width: 0;
	padding: 1px;
	background: linear-gradient(160deg, #737b87, #25282e 35%, #25282e 70%, #4b515b);
}
/* Red outline on the active slide, and on any slide under the mouse. */
.swtor-car-slide.is-active .swtor-car-frame,
.swtor-car-slide:hover .swtor-car-frame{
	background: linear-gradient(160deg, #ff5a6c, var(--sith-red-dark) 40%, var(--sith-red-dark) 70%, var(--sith-red));
}

/* Color of the item's first category (swtor-car-cat-<slug>), matching the
   tiles' palette: tints the slide's holo grid. */
.swtor-car-slide{
	--swtor-card-accent: #b9c0ca;
	--swtor-card-tint: rgba(185, 192, 202, .12);
	--swtor-card-grid: rgba(185, 192, 202, .05);
}
.swtor-car-cat-succes,
.swtor-car-cat-succes-caches{
	--swtor-card-accent: #50c662;
	--swtor-card-tint: rgba(80, 198, 98, .14);
	--swtor-card-grid: rgba(80, 198, 98, .05);
}
.swtor-car-cat-article_guide,
.swtor-car-cat-evenements{
	--swtor-card-accent: var(--sith-gold);
	--swtor-card-tint: rgba(231, 198, 43, .14);
	--swtor-card-grid: rgba(231, 198, 43, .05);
}
.swtor-car-cat-operation,
.swtor-car-cat-empire{
	--swtor-card-accent: #ff6b7b;
	--swtor-card-tint: rgba(224, 38, 60, .16);
	--swtor-card-grid: rgba(224, 38, 60, .06);
}
.swtor-car-cat-republique{
	--swtor-card-accent: #5ab4ff;
	--swtor-card-tint: rgba(90, 180, 255, .14);
	--swtor-card-grid: rgba(90, 180, 255, .06);
}
.swtor-car-cat-zl{
	--swtor-card-accent: #bf78cd;
	--swtor-card-tint: rgba(191, 120, 205, .14);
	--swtor-card-grid: rgba(191, 120, 205, .06);
}

/* Bottom scrim (for the title) over the tiles' holo grid. */
.swtor-car-inner{
	flex: 1;
	min-width: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 12px 14px;
	gap: 6px;
	background-color: #0c1015;
	background-image:
		linear-gradient(0deg, rgba(11,12,14,.92) 0%, rgba(11,12,14,.35) 55%, rgba(11,12,14,.55) 100%),
		radial-gradient(ellipse at 50% 60%, var(--swtor-card-tint), transparent 65%),
		repeating-linear-gradient(0deg, transparent 0 11px, var(--swtor-card-grid) 11px 12px),
		repeating-linear-gradient(90deg, transparent 0 11px, var(--swtor-card-grid) 11px 12px);
}

/* Real featured image, when the post/page has one — the scrim gradient
   stays on top of it for text legibility, and the grid shows in the
   letterbox around it. --slide-image is set on the <li> and inherited.
   Longhand properties (not the `background` shorthand) on purpose: if the
   --slide-image URL were ever invalid, only background-image would drop out
   — the background-color above still shows instead of a see-through tile.
   "contain" (not "cover") on purpose too: some featured images are game-UI
   screenshots with text baked into the picture itself (e.g. an achievement
   notification) — cropping to fill the tile can cut that text off, so the
   whole image is always shown in full instead, letterboxed on whichever
   side its aspect ratio doesn't match the tile's. */
.swtor-car-slide.has-image .swtor-car-inner{
	background-image:
		linear-gradient(0deg, rgba(11,12,14,.7) 0%, rgba(11,12,14,.15) 55%, rgba(11,12,14,.4) 100%),
		var(--slide-image),
		radial-gradient(ellipse at 50% 60%, var(--swtor-card-tint), transparent 65%),
		repeating-linear-gradient(0deg, transparent 0 11px, var(--swtor-card-grid) 11px 12px),
		repeating-linear-gradient(90deg, transparent 0 11px, var(--swtor-card-grid) 11px 12px);
	background-size: auto, contain, auto, auto, auto;
	background-position: 0 0, center, 0 0, 0 0, 0 0;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}
.swtor-car-slide.has-image .swtor-car-inner::before{ content: none; }
/* Don't dim real images while inactive: brightness() is multiplicative, so
   it crushes an already-dark source image (e.g. a mostly-black icon) to
   near-invisible, even though the exact same file looks fine at full
   brightness once active. The size/border/glow difference already marks
   the active tile without needing to darken real images at all. */
.swtor-car-slide.has-image{ filter: saturate(.9); }
.swtor-car-slide.has-image.is-active{
	filter: saturate(1) drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 20px var(--sith-red-glow));
}

.swtor-car-inner::before{
	content: attr(data-watermark);
	position: absolute;
	inset: auto auto -0.05em -0.02em;
	font-family: var(--site-font-stack);
	font-weight: 900;
	/* Capped low enough that even a long single word (worst case, ~12
	   letters) stays inside the tile at its smallest (220px) width. */
	font-size: min(7vw, 60px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(233,231,228,.16);
	letter-spacing: -.02em;
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
}

.swtor-car-slide.is-active{
	filter: brightness(1) saturate(1) drop-shadow(0 12px 24px rgba(0,0,0,.55)) drop-shadow(0 0 20px var(--sith-red-glow));
	transform: scale(1.5);
	z-index: 2;
}

.swtor-car-slide h2{ position: relative; z-index: 1; }

.swtor-car-slide h2{
	font-size: clamp(12px, 1.4vw, 16px);
	margin: 0;
	font-family: var(--site-font-stack);
	line-height: 1.25;
	/* Clamp to 2 lines with an ellipsis so a long title can never overflow
	   the tile, whatever its length. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-word;
}
.swtor-car-slide h2 a{ color: var(--sith-text); }
.swtor-car-slide.is-active h2 a:hover{ color: var(--sith-red); }
.swtor-car-slide:not(.is-active):not(.has-image):hover{ filter: brightness(.85) saturate(.95); }
.swtor-car-slide.has-image:not(.is-active):hover{ filter: saturate(1); }
.swtor-car-slide:not(.is-active) h2 a{ pointer-events: none; }

@media (prefers-reduced-motion: reduce){
	.swtor-car-track{ transition: none !important; }
}

@media (max-width: 640px){
	.swtor-car-slide{ width: 30vw; }
	.swtor-car-slide:not(.is-active) h2{ display: none; }
}