/**
 * File: assets/css/pages/news/single.css
 * Description: Single News article layout for Magida Creative Co.
 *
 * MAGIDA SINGLE NEWS PASS 17.1:
 * - Standardizes single blog/news posts to the same inner-page hero, breadcrumb, atmosphere, and News graphic language.
 * - Keeps article typography, sidebar, tags, navigation, comments, and related posts in one scoped file.
 */

.magida-template--single-news {
	position: relative;
	overflow: hidden;
}

/* MAGIDA SINGLE NEWS PASS 17.1: Article metadata uses a pill treatment that matches the unified breadcrumb style. */
.magida-news-single-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1.4rem;
	color: var(--magida-text-muted);
	font-family: var(--magida-font-heading);
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magida-news-single-hero__meta span,
.magida-news-single-hero__meta time {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 0.95rem;
	border: 1px solid rgba(185, 189, 229, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.045);
}

.magida-news-single-visual .magida-news-visual__shell {
	min-height: clamp(420px, 38vw, 590px);
}

.magida-news-single-visual .magida-news-visual__headline {
	font-size: clamp(2.25rem, 4.4vw, 4.4rem);
}

.magida-news-single-body {
	position: relative;
	z-index: 1;
	padding: clamp(4.5rem, 7vw, 7.5rem) 0;
}

/* MAGIDA SINGLE NEWS PASS 17.1: Main article and brief sidebar mirror the premium inner-page grid rhythm. */
.magida-news-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
	gap: clamp(1.5rem, 3vw, 2.4rem);
	align-items: start;
}

.magida-news-single-article {
	min-width: 0;
}

.magida-news-single-article__featured {
	position: relative;
	margin: 0 0 clamp(1.4rem, 3vw, 2.1rem);
	padding: 0;
	border-color: rgba(5, 223, 254, 0.16);
	box-shadow: 0 30px 110px rgba(0, 0, 0, 0.32);
	overflow: hidden;
}

.magida-news-single-article__featured img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}

.magida-news-single-article__featured::after {
	content: "";
	position: absolute;
	inset: auto 1.4rem 1.4rem 1.4rem;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--magida-cyan),
		var(--magida-purple),
		transparent
	);
	opacity: 0.68;
}

.magida-news-single-article__content {
	padding: clamp(1.45rem, 3.5vw, 3.35rem);
	border-color: rgba(185, 189, 229, 0.13);
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(124, 106, 251, 0.11),
			transparent 22rem
		),
		radial-gradient(
			circle at 0% 22%,
			rgba(5, 223, 254, 0.08),
			transparent 20rem
		),
		rgba(8, 13, 25, 0.74);
	box-shadow: 0 24px 90px rgba(0, 0, 0, 0.26);
}

.magida-news-single-article__content > *:first-child {
	margin-top: 0;
}

.magida-news-single-article__content > *:last-child {
	margin-bottom: 0;
}

/* MAGIDA SINGLE NEWS PASS 17.1: Strong readable article typography without touching global content styles. */
.magida-news-single-article__content p,
.magida-news-single-article__content li {
	color: var(--magida-text-soft);
	font-size: clamp(1rem, 1.15vw, 1.12rem);
	line-height: 1.86;
}

.magida-news-single-article__content p,
.magida-news-single-article__content ul,
.magida-news-single-article__content ol,
.magida-news-single-article__content blockquote,
.magida-news-single-article__content figure,
.magida-news-single-article__content table,
.magida-news-single-article__content pre {
	margin: 1.35em 0 0;
}

.magida-news-single-article__content h2,
.magida-news-single-article__content h3,
.magida-news-single-article__content h4 {
	margin: 1.55em 0 0;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	letter-spacing: -0.04em;
	line-height: 1.06;
}

.magida-news-single-article__content h2 {
	font-size: clamp(2rem, 3.6vw, 3.45rem);
}

.magida-news-single-article__content h3 {
	font-size: clamp(1.55rem, 2.5vw, 2.3rem);
}

.magida-news-single-article__content h4 {
	font-size: clamp(1.25rem, 1.9vw, 1.65rem);
}

.magida-news-single-article__content a {
	color: var(--magida-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.magida-news-single-article__content blockquote {
	padding: clamp(1.2rem, 2.4vw, 1.8rem);
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-left: 4px solid var(--magida-cyan);
	border-radius: var(--magida-radius-md);
	background: rgba(5, 223, 254, 0.045);
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: clamp(1.18rem, 2vw, 1.65rem);
	font-weight: 800;
	line-height: 1.45;
}

.magida-news-single-article__content img {
	border-radius: var(--magida-radius-md);
}

.magida-news-single-article__content pre,
.magida-news-single-article__content code {
	border: 1px solid rgba(185, 189, 229, 0.14);
	background: rgba(2, 6, 14, 0.7);
	color: var(--magida-white);
}

.magida-news-single-article__content code {
	padding: 0.12em 0.35em;
	border-radius: 0.45rem;
}

.magida-news-single-article__content pre {
	overflow-x: auto;
	padding: 1rem;
	border-radius: var(--magida-radius-md);
}

.magida-news-single-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: clamp(1.35rem, 2.8vw, 2rem);
}

.magida-news-single-tags span,
.magida-news-single-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 2.45rem;
	padding: 0 0.9rem;
	border-radius: 999px;
	font-family: var(--magida-font-heading);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.magida-news-single-tags span {
	color: var(--magida-text-muted);
}

.magida-news-single-tags a {
	border: 1px solid rgba(185, 189, 229, 0.14);
	background: rgba(255, 255, 255, 0.045);
	color: var(--magida-white);
	text-decoration: none;
}

.magida-news-single-tags a:hover,
.magida-news-single-tags a:focus-visible {
	border-color: rgba(5, 223, 254, 0.48);
	color: var(--magida-cyan);
}

.magida-news-single-navigation {
	margin-top: clamp(1.8rem, 3.6vw, 2.8rem);
}

.magida-news-single-sidebar {
	position: sticky;
	top: 108px;
	display: grid;
	gap: 1rem;
}

.magida-news-single-sidebar__card {
	padding: clamp(1.2rem, 2.4vw, 1.65rem);
	border-color: rgba(185, 189, 229, 0.13);
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(5, 223, 254, 0.08),
			transparent 13rem
		),
		rgba(8, 13, 25, 0.76);
}

.magida-news-single-brief {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0 0;
}

.magida-news-single-brief div {
	padding: 0.9rem;
	border: 1px solid rgba(185, 189, 229, 0.11);
	border-radius: var(--magida-radius-md);
	background: rgba(255, 255, 255, 0.035);
}

.magida-news-single-brief dt {
	color: var(--magida-text-muted);
	font-family: var(--magida-font-heading);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magida-news-single-brief dd {
	margin: 0.35rem 0 0;
	color: var(--magida-white);
	font-weight: 800;
}

.magida-news-single-brief a {
	color: inherit;
	text-decoration: none;
}

.magida-news-single-brief a:hover,
.magida-news-single-brief a:focus-visible {
	color: var(--magida-cyan);
}

.magida-news-single-sidebar__card--cta h2 {
	margin: 0;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: clamp(1.4rem, 2vw, 1.95rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

.magida-news-single-sidebar__card--cta p {
	margin: 0.9rem 0 1.1rem;
	color: var(--magida-text-soft);
	line-height: 1.7;
}

.magida-news-single-sidebar__card--cta .magida-button {
	width: 100%;
}

.magida-news-single-related {
	position: relative;
	z-index: 1;
	padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 8vw, 8rem);
	border-top: 1px solid rgba(5, 223, 254, 0.1);
}

.magida-news-single-related__header {
	max-width: 52rem;
	margin-bottom: clamp(1.7rem, 3.8vw, 3rem);
}

.magida-news-single-related__header h2 {
	margin: 0;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: clamp(2.25rem, 5vw, 4.75rem);
	font-weight: 1000;
	line-height: 0.95;
	letter-spacing: -0.08em;
}

.magida-news-single-related__grid .magida-news-card--featured {
	grid-column: auto;
	flex-direction: column;
	min-height: 100%;
}

.magida-news-single-related__grid
	.magida-news-card--featured
	.magida-news-card__media {
	flex-basis: auto;
}

.magida-template--single-news .magida-comments {
	margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}

@media (max-width: 1180px) {
	.magida-news-single-layout {
		grid-template-columns: 1fr;
	}

	.magida-news-single-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.magida-news-single-sidebar {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.magida-news-single-hero__meta {
		align-items: stretch;
		flex-direction: column;
	}

	.magida-news-single-hero__meta span,
	.magida-news-single-hero__meta time {
		justify-content: center;
		width: 100%;
	}

	.magida-news-single-body {
		padding: 3.8rem 0;
	}

	.magida-news-single-article__content {
		padding: 1.25rem;
	}

	.magida-news-single-article__content p,
	.magida-news-single-article__content li {
		font-size: 1rem;
		line-height: 1.78;
	}
}

/* MAGIDA NEWS SINGLE HERO CLEANUP PASS 22.12:
   Safe, scoped hero unification for standard post singles only.
   No global template files are changed in this pass. */
.magida-template--single-news.magida-template--single-news {
	--magida-inner-page-hero-top: clamp(56px, 5vw, 84px);
	--magida-inner-page-hero-bottom: clamp(64px, 5.5vw, 96px);
	--magida-inner-page-breadcrumb-space: clamp(34px, 3vw, 52px);
	--magida-inner-page-grid-gap: clamp(42px, 5vw, 86px);
	--magida-inner-page-title-size: clamp(3.4rem, 6.2vw, 6.25rem);
	--magida-inner-page-visual-height: clamp(430px, 32vw, 530px);
	--magida-inner-page-visual-max-width: 760px;
}

.magida-template--single-news .magida-news-single-hero.magida-inner-hero {
	/* MAGIDA PASS 22.12: Use the same unified hero rhythm as the approved archive/careers headers. */
	padding-top: var(--magida-inner-page-hero-top);
	padding-bottom: var(--magida-inner-page-hero-bottom);
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-inner-hero__breadcrumb {
	/* MAGIDA PASS 22.12: Keeps breadcrumb spacing aligned with the other locked page heroes. */
	margin-bottom: var(--magida-inner-page-breadcrumb-space);
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-inner-hero__title {
	/* MAGIDA PASS 22.12: Single article titles need a slightly safer max size than archive page titles. */
	font-size: var(--magida-inner-page-title-size);
	letter-spacing: -0.085em;
}

.magida-template--single-news .magida-news-single-hero__meta {
	/* MAGIDA PASS 22.12: Converts article details into the same compact pill language used by role/news heroes. */
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: clamp(1.2rem, 2vw, 1.6rem) 0 0;
}

.magida-template--single-news .magida-news-single-hero__meta > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.055);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-inner-hero__visual {
	/* MAGIDA PASS 22.12: Locks the coded article artwork into the approved right-card frame. */
	height: var(--magida-inner-page-visual-height);
	max-width: var(--magida-inner-page-visual-max-width);
	min-width: 0;
	width: 100%;
}

.magida-template--single-news .magida-news-single-hero .magida-news-visual {
	--magida-news-tilt-x: 0deg;
	--magida-news-tilt-y: 0deg;
	transform: perspective(900px) rotateX(var(--magida-news-tilt-x))
		rotateY(var(--magida-news-tilt-y));
	transform-style: preserve-3d;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__shell {
	height: 100%;
	min-height: inherit;
	border-radius: inherit;
	transform: none;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__panel--front {
	/* MAGIDA PASS 22.12: Gives the visual content enough internal room so text/chips do not clip. */
	inset: 14% 8% 6% 8%;
	justify-content: flex-start;
	gap: clamp(0.7rem, 1.25vw, 1rem);
	padding: clamp(1.35rem, 2.2vw, 2rem);
	overflow: hidden;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-single-visual__headline {
	font-size: clamp(2.25rem, 4.05vw, 4.05rem);
	line-height: 0.92;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__bars {
	gap: 0.55rem;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__bars
	span {
	height: clamp(0.48rem, 0.72vw, 0.68rem);
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__stream,
.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__chips {
	gap: 0.55rem;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__stream {
	margin-top: 0.2rem;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__stream
	span,
.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__chips
	span {
	min-height: 2.15rem;
	padding: 0 0.78rem;
	font-size: 0.66rem;
}

.magida-template--single-news
	.magida-news-single-hero
	.magida-news-visual__stream
	span {
	/* MAGIDA PASS 22.12: Dynamic category names stay readable without breaking the card. */
	max-width: min(100%, 13rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 1181px) {
	.magida-template--single-news .magida-news-single-hero.magida-inner-hero {
		/* MAGIDA PASS 22.12: Desktop matches the locked top/bottom hero rhythm and avoids the oversized gap seen before. */
		min-height: min(720px, calc(100vh - 92px));
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-inner-hero__inner {
		align-items: start;
		grid-template-columns: minmax(0, 0.92fr) minmax(470px, 0.9fr);
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-inner-hero__content,
	.magida-template--single-news
		.magida-news-single-hero
		.magida-inner-hero__visual {
		align-self: start;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-inner-hero__visual {
		margin-top: 0;
	}
}

@media (max-width: 1180px) {
	.magida-template--single-news.magida-template--single-news {
		/* MAGIDA PASS 22.12: Tablet/mobile keeps the same stacked hero rhythm as the approved News archive. */
		--magida-inner-page-hero-top: 52px;
		--magida-inner-page-hero-bottom: 66px;
		--magida-inner-page-breadcrumb-space: 34px;
		--magida-inner-page-title-size: clamp(3rem, 12vw, 5rem);
		--magida-inner-page-visual-height: clamp(430px, 76vw, 540px);
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__panel--front {
		inset: 13% 7% 7% 7%;
		padding: clamp(1.2rem, 3.2vw, 2rem);
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-single-visual__headline {
		font-size: clamp(2rem, 6.3vw, 3.55rem);
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__stream
		span,
	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__chips
		span {
		min-height: 2rem;
		padding: 0 0.7rem;
		font-size: 0.62rem;
	}
}

@media (max-width: 700px) {
	.magida-template--single-news.magida-template--single-news {
		/* MAGIDA PASS 22.12: Small screens get enough vertical room for the article visual without clipping the bottom chips. */
		--magida-inner-page-title-size: clamp(2.8rem, 15.5vw, 4rem);
		--magida-inner-page-visual-height: 29rem;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__panel--front {
		inset: 11% 6% 5% 6%;
		gap: 0.5rem;
		padding: 1.05rem;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-single-visual__headline {
		font-size: clamp(1.85rem, 9.7vw, 2.45rem);
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__bars {
		gap: 0.45rem;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__bars
		span {
		height: 0.48rem;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__stream {
		gap: 0.42rem;
		margin-top: 0.1rem;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__stream
		span {
		max-width: 9.5rem;
		min-height: 1.75rem;
		padding: 0 0.55rem;
		font-size: 0.54rem;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__chips {
		gap: 0.45rem;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-news-visual__chips
		span {
		min-height: 1.95rem;
		padding: 0 0.72rem;
		font-size: 0.62rem;
	}
}

@media (max-width: 700px) {
	.magida-template--single-news .magida-news-single-hero__meta {
		/* MAGIDA PASS 22.12: Override the old stacked mobile meta so the hero stays compact. */
		align-items: flex-start;
		flex-direction: row;
	}

	.magida-template--single-news .magida-news-single-hero__meta > * {
		width: auto;
		min-height: 2.35rem;
		padding: 0 0.85rem;
		font-size: 0.66rem;
	}
}

/*
 * MAGIDA PASS 24.1.24e — Legacy Hero CSS Override Neutralizer
 * Single News keeps its article/body styles, but older hero tokens must no longer
 * override the shared About-matched inner hero contract.
 */
.magida-template--single-news.magida-template--single-news {
	--magida-inner-page-hero-top: clamp(42px, 4vw, 62px);
	--magida-inner-page-hero-bottom: clamp(48px, 4.4vw, 72px);
	--magida-inner-page-breadcrumb-space: clamp(24px, 2.5vw, 38px);
	--magida-inner-page-grid-gap: clamp(34px, 4.5vw, 72px);
	--magida-inner-page-title-size: clamp(3.25rem, 5.35vw, 5.9rem);
	--magida-inner-page-description-size: clamp(1.08rem, 1.48vw, 1.34rem);
	--magida-inner-page-visual-height: clamp(350px, 25vw, 430px);
	--magida-inner-page-visual-max-width: 760px;
}

@media (min-width: 1181px) {
	.magida-template--single-news.magida-template--single-news {
		--magida-inner-page-hero-top: clamp(42px, 4vw, 62px);
		--magida-inner-page-hero-bottom: clamp(48px, 4.4vw, 72px);
		--magida-inner-page-breadcrumb-space: clamp(24px, 2.5vw, 38px);
		--magida-inner-page-grid-gap: clamp(34px, 4.5vw, 72px);
		--magida-inner-page-title-size: clamp(3.25rem, 5.35vw, 5.9rem);
		--magida-inner-page-visual-height: clamp(350px, 25vw, 430px);
	}

	.magida-template--single-news .magida-news-single-hero.magida-inner-hero {
		min-height: min(630px, calc(100vh - var(--magida-header-height, 82px)));
		padding-top: var(--magida-inner-page-hero-top);
		padding-bottom: var(--magida-inner-page-hero-bottom);
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-inner-hero__inner {
		grid-template-columns: minmax(0, 0.98fr) minmax(480px, 0.88fr);
		gap: var(--magida-inner-page-grid-gap);
		align-items: start;
	}

	.magida-template--single-news
		.magida-news-single-hero
		.magida-inner-hero__visual {
		height: auto;
		min-height: var(--magida-inner-page-visual-height);
		max-width: var(--magida-inner-page-visual-max-width);
	}
}

@media (max-width: 1180px) {
	.magida-template--single-news.magida-template--single-news {
		--magida-inner-page-hero-top: clamp(42px, 4vw, 62px);
		--magida-inner-page-hero-bottom: clamp(48px, 4.4vw, 72px);
		--magida-inner-page-breadcrumb-space: clamp(24px, 2.5vw, 38px);
		--magida-inner-page-title-size: clamp(3.1rem, 8vw, 5.35rem);
		--magida-inner-page-visual-height: clamp(330px, 48vw, 440px);
	}
}

@media (max-width: 760px) {
	.magida-template--single-news.magida-template--single-news {
		--magida-inner-page-hero-top: 46px;
		--magida-inner-page-hero-bottom: 56px;
		--magida-inner-page-breadcrumb-space: 28px;
		--magida-inner-page-title-size: clamp(2.45rem, 11vw, 3.95rem);
		--magida-inner-page-visual-height: clamp(320px, 90vw, 410px);
	}
}