/* =============================================================================
   Related / See Also — three variants (A rail · B cards · C slideshow)
   -----------------------------------------------------------------------------
   Studio-driven: every look is a static `.sa-rel--*` modifier on the section, so
   this file is fully cacheable (no per-save generated CSS) and the admin preview
   loads the SAME file → what you see is what ships.

   Self-contained: the card media geometry (blurred fill + contained image) is
   redeclared here scoped under `.sa-related`, so the element renders correctly on
   news pages where the vote-card stylesheet is not enqueued.

   Colours are palette tokens (--sa-*), so the element auto-follows whatever
   palette is active in Style. Motion respects prefers-reduced-motion.
   ========================================================================== */

.sa-related{
	--sa-rel-acc: var(--vc-acc, var(--sa-violet, #FF3DAE));
	/* Symmetric vertical rhythm — the element now sits INSIDE the article flow
	   (before the last paragraph by default), so it needs breathing room on both
	   sides, not just above. */
	margin: 2.4rem 0;
	clear: both;
	color: var(--sa-text, #F7ECF4);
	font-family: var(--sa-font-body, system-ui, sans-serif);
	container-type: inline-size;
}
/* single.css's reading-rhythm rule (`.single .entry-content > * { margin-top:0 }`,
   specificity 0-2-0) zeroes our top margin when the element is woven into the
   article body — re-assert it at 0-3-0 so the gap above matches the gap below. */
.single .entry-content > .sa-related{ margin-top: 2.4rem; }

/* The element is auto-injected INSIDE `.entry-content`, so Jannah's
   content-typography accents leak onto it: an `h2::before` accent bar and an
   `hr` gradient — both keyed off `--sa-gradient` / `--sa-border`, so on a bright
   palette (e.g. Aurora mint) they render as stray green bars/lines on our header.
   Neutralise them within our own scope so the element owns its look. */
.sa-related .sa-related__title::before,
.sa-related h2::before{ content: none !important; display: none !important; }
/* Our cards/slides are `<a>` inside `.entry-content`, where Jannah paints a
   decorative link-underline: `background: linear-gradient(--sa-violet-light,
   --sa-violet-light)` sized to a thin line. On our full-size cards that thin
   accent line surfaces across the top of the card — mint in Aurora, blue in
   Cobalt, i.e. EVERY palette (it tracks the accent, not one colour). Re-assert
   our own opaque card backgrounds so the underline can't show; `!important`
   beats the `.single .entry-content a` rule regardless of source order. */
.sa-related a.sa-relcard,
.sa-related a.sa-rel-slide{ background-size: auto !important; background-position: 0 0 !important; }
.sa-rel--v-a .sa-relcard{ background: linear-gradient(180deg, var(--sa-surface-1, #20111C), var(--sa-bg-2, #160f20)) !important; }
.sa-rel--v-b .sa-relcard{ background: var(--sa-surface-1, #20111C) !important; }
.sa-rel--v-c .sa-rel-slide{ background: transparent !important; }

/* ---- Header — compact "hairline inline": ♥ + heading + thin rule ----------
   OPTIONAL (off by default): the front end only renders it with head_show on;
   the `.sa-rel--nohead` rule below powers the studio preview's live toggle.
   Scoped under `.sa-related` so it beats Jannah's `.entry-content h2` margins /
   sizing (our element is injected inside the article content). */
.sa-related.sa-rel--nohead .sa-related__head{ display: none; }
.sa-related .sa-related__head{ display: flex; align-items: center; gap: .7rem; margin: 0 0 1.25rem; }
.sa-related .sa-related__hi{ flex: none; display: inline-flex; align-items: center; color: var(--sa-heart, #FF345F); }
.sa-related .sa-related__hi svg{ width: 15px; height: 15px; fill: var(--sa-heart, #FF345F); }
/* Extra specificity (`.sa-related__head` chained) so we beat Jannah's
   `.single .entry-content h2` sizing/margins — otherwise the heading renders at
   the article-h2 size (~32px) instead of our compact size. */
.sa-related .sa-related__head .sa-related__title{
	flex: none; margin: 0; padding: 0; border: 0;
	font-family: var(--sa-font-display, system-ui, sans-serif);
	font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
	font-size: clamp(.98rem, .9rem + .4cqi, 1.15rem);   /* compact — no giant heading */
	color: var(--sa-text, #F7ECF4);                       /* cool-white, not a gradient */
	background: none; -webkit-text-fill-color: currentColor;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72%;
}
.sa-related .sa-related__rule{
	flex: 1 1 auto; height: 1px; border: 0; margin: 0; min-width: 24px;
	background: linear-gradient(90deg, rgba(255,255,255,.16), transparent 90%);   /* neutral hairline, palette-agnostic */
}

/* ---- Shared card media (self-contained; mirrors the vote-card poster) ------ */
.sa-related .sa-votecard__media{
	position: relative; display: block; width: 100%; overflow: hidden;
	aspect-ratio: 16 / 10; background: var(--sa-surface-2, #2A1725);
	/* The media is a <figure>, and Jannah's `.single .entry-content figure` sets
	   `margin: 2rem 0` (32px) which pushes the image down inside the frame — so it
	   looks cropped to a bottom strip. `!important` beats that leaked rule. */
	margin: 0 !important;
}
.sa-related .sa-votecard__bg{
	position: absolute; inset: 0; background-size: cover; background-position: center;
	filter: blur(22px) saturate(1.2); transform: scale(1.2); opacity: .6;
}
.sa-related .sa-votecard__img{
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: contain; object-position: center;
}

/* ---- Card body bits shared by B + C --------------------------------------- */
.sa-relcard__cat{
	position: absolute; left: .6rem; bottom: .6rem; z-index: 2; pointer-events: none;
	max-width: calc(100% - 1.2rem);
	display: inline-block; padding: .16rem .55rem; border-radius: var(--sa-radius-pill, 999px);
	font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
	line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: #fff; background: color-mix(in srgb, var(--sa-bg, #120910) 46%, transparent);
	border: 1px solid color-mix(in srgb, var(--sa-rel-acc) 55%, rgba(255,255,255,.2));
	-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
	box-shadow: 0 6px 16px -8px rgba(0,0,0,.7);
}
.sa-relcard__meta{
	display: flex; align-items: center; gap: .3rem .5rem; flex-wrap: wrap;
	font-size: .72rem; color: var(--sa-text-muted, #C4A9BE);
}
.sa-relcard__meta .sa-relcard__heart{ color: var(--sa-heart, #FF345F); font-size: .9em; }
.sa-relcard__meta .sa-relcard__sep{ opacity: .5; }

/* A live-vote card wears a heart eyebrow instead of a date (awards angle). */
.sa-relcard__votetag{
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sa-vote, #FF7AC6);
}
.sa-relcard__votetag svg{ width: 13px; height: 13px; fill: var(--sa-heart, #FF345F); }

.sa-rel--nocat .sa-relcard__cat{ display: none; }
.sa-rel--nometa .sa-relcard__meta{ display: none; }
.sa-rel--noimg .sa-votecard__media,
.sa-rel--noimg .sa-relcard__cat{ display: none; }

/* =============================================================================
   VARIANT A — text rail
   ========================================================================== */
.sa-rel--v-a .sa-rel-track{ display: flex; flex-direction: column; gap: .7rem; }
.sa-rel--v-a .sa-relcard{
	position: relative; display: flex; align-items: center; gap: 1rem;
	padding: .85rem 1rem; text-decoration: none; color: inherit;
	background: linear-gradient(180deg, var(--sa-surface-1, #20111C), var(--sa-bg-2, #160f20));
	border: 1px solid var(--sa-border, rgba(255,61,174,.16));
	border-radius: var(--sa-radius, 16px); overflow: hidden;
	transition: transform .22s ease, border-color .22s ease;
}
.sa-rel--v-a .sa-relcard:hover{ transform: translateY(-2px); border-color: var(--sa-border-strong, rgba(255,61,174,.34)); }
.sa-rel--v-a .sa-rel-arw{
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
	color: var(--sa-violet-light, #FF7AC6);
	background: color-mix(in srgb, var(--sa-rel-acc) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--sa-rel-acc) 26%, transparent);
}
.sa-rel--v-a .sa-rel-arw svg{ width: 18px; height: 18px; }
.sa-rel--v-a .sa-relcard__thumb{
	flex: 0 0 auto; width: 66px; height: 50px; border-radius: 10px; overflow: hidden;
	position: relative; background: var(--sa-surface-2, #2A1725);
}
.sa-rel--v-a .sa-relcard__thumb .sa-votecard__media{ aspect-ratio: auto; height: 100%; }
.sa-rel--v-a .sa-relcard__body{ min-width: 0; }
.sa-rel--v-a .sa-relcard__eye{
	display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem;
	font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sa-violet-light, #FF7AC6);
}
.sa-rel--v-a .sa-relcard__eye .sa-related__dot{
	width: 6px; height: 6px; border-radius: 50%; background: var(--sa-heart, #FF345F);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-heart, #FF345F) 20%, transparent);
}
.sa-rel--v-a .sa-relcard__title{
	display: block; font-family: var(--sa-font-display, system-ui, sans-serif);
	font-weight: 700; line-height: 1.3; font-size: 1.02rem; color: var(--sa-text, #F7ECF4);
	text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sa-heart, #FF345F) 55%, transparent);
	text-underline-offset: 4px; text-decoration-thickness: 2px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sa-rel--v-a .sa-relcard:hover .sa-relcard__title{ text-decoration-color: var(--sa-heart, #FF345F); }
.sa-rel--v-a .sa-relcard__meta{ margin-top: .35rem; }
/* Rail hides the slideshow controls entirely. */
.sa-rel--v-a .sa-rel-controls, .sa-rel--v-a .sa-rel-dots{ display: none; }

/* =============================================================================
   VARIANT B — image cards grid
   ========================================================================== */
.sa-rel--v-b .sa-rel-track{
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.sa-rel--v-b .sa-relcard{
	position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: var(--sa-surface-1, #20111C);
	border: 1px solid var(--sa-border, rgba(255,61,174,.16));
	border-radius: var(--sa-radius, 16px); overflow: hidden;
	box-shadow: var(--sa-shadow-card, 0 8px 30px rgba(0,0,0,.45));
	transition: transform .24s ease, border-color .24s ease;
}
.sa-rel--v-b .sa-relcard:hover{ transform: translateY(-4px); border-color: var(--sa-border-strong, rgba(255,61,174,.34)); }
.sa-rel--v-b .sa-relcard__imgwrap{ position: relative; display: block; }
.sa-rel--v-b .sa-relcard__body{ padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1 1 auto; }
.sa-rel--v-b .sa-relcard__eye{ display: none; }
.sa-rel--v-b .sa-relcard__title{
	font-family: var(--sa-font-display, system-ui, sans-serif); font-weight: 700; line-height: 1.3;
	font-size: 1rem; color: var(--sa-text, #F7ECF4); transition: color .2s ease;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sa-rel--v-b .sa-relcard:hover .sa-relcard__title{ color: var(--sa-violet-light, #FF7AC6); }
.sa-rel--v-b .sa-relcard__meta{ margin-top: auto; }
/* Cards hide slideshow controls. */
.sa-rel--v-b .sa-rel-controls, .sa-rel--v-b .sa-rel-dots{ display: none; }
/* When images are off, the cards degrade to a tidy text list. */
.sa-rel--v-b.sa-rel--noimg .sa-relcard{ flex-direction: row; align-items: center; padding: .4rem; }
.sa-rel--v-b.sa-rel--noimg .sa-relcard__eye{ display: flex; align-items: center; gap: .4rem; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-violet-light, #FF7AC6); }

/* =============================================================================
   VARIANT C — slideshow (crossfade; container is as tall as the tallest slide,
   so switching slides never shifts layout)
   ========================================================================== */
.sa-rel--v-c .sa-rel-viewport{
	position: relative;
	border: 1px solid var(--sa-border, rgba(255,61,174,.16));
	border-radius: var(--sa-radius, 16px); overflow: hidden;
	background: var(--sa-surface-2, #2A1725);
}
.sa-rel--v-c .sa-rel-track{ display: grid; }
/* Crossfade + gentle rise/settle. Slides share one grid cell (container height =
   tallest slide) so switching never shifts layout. */
.sa-rel--v-c .sa-rel-slide{
	grid-area: 1 / 1; display: grid; grid-template-columns: 1.15fr 1fr; min-height: 230px;
	text-decoration: none; color: inherit;
	opacity: 0; transform: translateY(18px) scale(.985); transform-origin: center;
	transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
	pointer-events: none; will-change: opacity, transform;
}
.sa-rel--v-c .sa-rel-slide.is-active{ opacity: 1; transform: none; pointer-events: auto; }
.sa-rel--v-c .sa-rel-slide__img{ position: relative; overflow: hidden; }
/* Slow Ken-Burns zoom on the active slide's image — reads as motion, premium. */
.sa-rel--v-c .sa-rel-slide .sa-votecard__img,
.sa-rel--v-c .sa-rel-slide .sa-votecard__bg{ transition: transform 7s ease-out; }
.sa-rel--v-c .sa-rel-slide.is-active .sa-votecard__img{ transform: scale(1.05); }
.sa-rel--v-c .sa-rel-slide.is-active .sa-votecard__bg{ transform: scale(1.32); }
.sa-rel--v-c .sa-rel-slide__img::after{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent 52%, var(--sa-surface-2, #2A1725));
}
.sa-rel--v-c .sa-rel-slide__img .sa-votecard__media{ aspect-ratio: auto; height: 100%; }
.sa-rel--v-c .sa-rel-slide__body{
	position: relative; z-index: 2; padding: 1.6rem 1.7rem;
	display: flex; flex-direction: column; justify-content: center; gap: .7rem;
}
.sa-rel--v-c .sa-rel-slide__eye{
	display: flex; align-items: center; gap: .5rem;
	font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sa-violet-light, #FF7AC6);
}
.sa-rel--v-c .sa-rel-slide__eye .sa-related__dot{
	width: 7px; height: 7px; border-radius: 50%; background: var(--sa-heart, #FF345F);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sa-heart, #FF345F) 20%, transparent);
}
.sa-rel--v-c .sa-rel-slide__title{
	margin: 0; font-family: var(--sa-font-display, system-ui, sans-serif);
	font-weight: 900; letter-spacing: -.01em; line-height: 1.22;
	font-size: clamp(1.15rem, .9rem + 1.6cqi, 1.6rem); color: var(--sa-text, #F7ECF4);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sa-rel--v-c .sa-rel-slide__go{
	align-self: flex-start; margin-top: .2rem; display: inline-flex; align-items: center; gap: .5rem;
	padding: .55rem 1rem; border-radius: var(--sa-radius-pill, 999px);
	font-size: .78rem; font-weight: 800; color: var(--sa-on-accent, #fff);
	background: linear-gradient(135deg, var(--sa-rel-acc), var(--sa-heart, #FF345F));
	box-shadow: var(--sa-glow, 0 0 30px rgba(255,61,174,.3));
}
.sa-rel--v-c .sa-rel-slide__go svg{ width: 14px; height: 14px; }

/* Slideshow controls — arrows + dots. */
.sa-rel-controls{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 .6rem; pointer-events: none; z-index: 3; }
.sa-rel-btn{
	pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center; color: #fff;
	background: color-mix(in srgb, var(--sa-bg, #120910) 55%, transparent);
	border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background .2s ease, transform .2s ease;
}
.sa-rel-btn:hover{ background: color-mix(in srgb, var(--sa-rel-acc) 60%, transparent); transform: scale(1.06); }
.sa-rel-btn svg{ width: 18px; height: 18px; }
.sa-rel-dots{ position: absolute; bottom: .9rem; left: 1.7rem; display: flex; gap: .45rem; z-index: 3; }
.sa-rel-dot{
	width: 22px; height: 4px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
	background: rgba(255,255,255,.24); transition: background .3s ease;
}
.sa-rel-dot.is-active{ background: linear-gradient(90deg, var(--sa-rel-acc), var(--sa-heart, #FF345F)); }
.sa-rel--noarrows .sa-rel-controls{ display: none; }
.sa-rel--nodots .sa-rel-dots{ display: none; }
/* Non-slideshow variants never render the viewport controls. */
.sa-rel--v-a .sa-rel-viewport, .sa-rel--v-b .sa-rel-viewport{ all: unset; }

/* ---- Responsive ----------------------------------------------------------- */
@container (max-width: 640px){
	.sa-rel--v-c .sa-rel-slide{ grid-template-columns: 1fr; min-height: 0; }
	.sa-rel--v-c .sa-rel-slide__img{ aspect-ratio: 16 / 9; }
	.sa-rel--v-c .sa-rel-slide__img::after{ background: linear-gradient(180deg, transparent 42%, var(--sa-surface-2, #2A1725)); }
	.sa-rel--v-c .sa-rel-slide__body{ padding: 1.1rem 1.2rem 1.4rem; }
}
/* Fallback for browsers without container queries. */
@media (max-width: 640px){
	.sa-rel--v-c .sa-rel-slide{ grid-template-columns: 1fr; min-height: 0; }
	.sa-rel--v-c .sa-rel-slide__img{ aspect-ratio: 16 / 9; }
	.sa-rel--v-c .sa-rel-slide__img::after{ background: linear-gradient(180deg, transparent 42%, var(--sa-surface-2, #2A1725)); }
	.sa-rel--v-c .sa-rel-slide__body{ padding: 1.1rem 1.2rem 1.4rem; }
	.sa-rel-btn{ width: 34px; height: 34px; }
	.sa-rel-dots{ left: 1.2rem; }
	.sa-rel--v-a .sa-relcard__thumb{ display: none; }
}

/* ---- Reduced motion: freeze transitions; JS also stops autoplay. ---------- */
@media (prefers-reduced-motion: reduce){
	.sa-related *{ transition: none !important; }
	.sa-rel--v-c .sa-rel-slide{ transition: none; transform: none; }
	.sa-rel--v-c .sa-rel-slide.is-active .sa-votecard__img,
	.sa-rel--v-c .sa-rel-slide.is-active .sa-votecard__bg{ transform: none; }
}

/* Before JS upgrades the slideshow, show the first slide so JS-off still works. */
.sa-rel--v-c .sa-rel-track:not(.is-ready) .sa-rel-slide{ opacity: 1; transform: none; position: static; }
.sa-rel--v-c .sa-rel-track:not(.is-ready) .sa-rel-slide + .sa-rel-slide{ display: none; }