/**
 * css/pages/single-news.css
 * ============================================================
 * A LEGEND 2：NEWS Single
 * ============================================================
 *
 * 役割：
 * - NEWS詳細ページ専用レイアウトを装飾します。
 * - template-parts/single/news-layout.php / news-decor.php / news-hero.php / news-content.php / news-actions.php
 *   の見た目を担当します。
 * - 色、背景、枠線、角丸、影、フォントは固定値ではなく、design設定由来の
 *   --aleg2-* CSS変数へ接続します。
 *
 * 方針：
 * - .aleg2-news-single 配下に閉じ込め、BLOG / GALLERY / APPLICATION / 固定ページへ
 *   スタイルを漏らしません。
 * - 背景装飾も primary / secondary / accent / glow / surface などのデザイントークンから作ります。
 * - 装飾要素は template-parts/single/news-decor.php 側で出力し、CSS側で位置・量・レスポンシブを管理します。
 * - レイアウト上必要な寸法だけ clamp() / rem を使い、見た目の色や角丸を直書きしません。
 */

/* ------------------------------------------------------------
 * Page wrapper
 * ------------------------------------------------------------ */
.aleg2-news-single {
	position: relative;
	isolation: isolate;
	padding-block: 0 var(--aleg2-section-padding-y, clamp(72px, 10vw, 140px));
	overflow: hidden;
	color: var(--aleg2-color-text);
	font-family: var(--aleg2-font-body);
	background: var(--aleg2-color-bg);
	background:
		radial-gradient(circle, color-mix(in srgb, var(--aleg2-color-border) 72%, transparent) 1px, transparent 1.4px),
		radial-gradient(circle at 10% 8%, var(--aleg2-glow-primary), transparent 34%),
		radial-gradient(circle at 90% 18%, var(--aleg2-glow-secondary), transparent 32%),
		linear-gradient(180deg, var(--aleg2-color-bg), var(--aleg2-color-surface));
	background-size:
		14px 14px,
		auto,
		auto,
		auto;
}

/**
 * 背景グローOFF時。
 * design.background.glow がOFFのプリセットでも、NEWS詳細だけ装飾が浮かないようにします。
 */
body:not(.aleg2-bg-glow) .aleg2-news-single {
	background: var(--aleg2-color-bg);
	background:
		radial-gradient(circle, color-mix(in srgb, var(--aleg2-color-border) 62%, transparent) 1px, transparent 1.4px),
		var(--aleg2-color-bg);
	background-size:
		14px 14px,
		auto;
}

/**
 * NEWS専用の背景装飾。
 *
 * template-parts/single/news-decor.php が出力するspanをここで配置します。
 * 色はすべて design設定由来のCSS変数へ接続し、参考サイトのような装飾密度を
 * 固定色に頼らず再現します。
 */
.aleg2-news-single__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.aleg2-news-single__decor::before,
.aleg2-news-single__decor::after {
	position: absolute;
	content: "";
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-pill, 999px);
	background: var(--aleg2-color-primary);
	background: color-mix(in srgb, var(--aleg2-color-primary) 16%, transparent);
	opacity: 0.7;
}

.aleg2-news-single__decor::before {
	top: clamp(110px, 10vw, 180px);
	left: max(-20vw, -260px);
	width: clamp(300px, 34vw, 620px);
	height: clamp(42px, 5vw, 86px);
	transform: rotate(-18deg);
}

.aleg2-news-single__decor::after {
	right: max(-18vw, -240px);
	bottom: clamp(150px, 16vw, 300px);
	width: clamp(280px, 32vw, 560px);
	height: clamp(38px, 4vw, 76px);
	background: var(--aleg2-color-secondary);
	background: color-mix(in srgb, var(--aleg2-color-secondary) 16%, transparent);
	transform: rotate(16deg);
}

.aleg2-news-single__decor-item {
	position: absolute;
	display: block;
	width: clamp(72px, 9vw, 150px);
	height: clamp(12px, 1.5vw, 24px);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-pill, 999px);
	background: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-card, none);
	opacity: 0.58;
	transform: rotate(-62deg);
}

.aleg2-news-single__decor-item--primary {
	background: var(--aleg2-color-primary);
	background: color-mix(in srgb, var(--aleg2-color-primary) 82%, transparent);
}

.aleg2-news-single__decor-item--secondary {
	background: var(--aleg2-color-secondary);
	background: color-mix(in srgb, var(--aleg2-color-secondary) 82%, transparent);
}

.aleg2-news-single__decor-item--accent {
	background: var(--aleg2-color-accent, var(--aleg2-color-primary));
	background: color-mix(in srgb, var(--aleg2-color-accent, var(--aleg2-color-primary)) 78%, transparent);
}

.aleg2-news-single__decor-item--neutral {
	background: var(--aleg2-color-border-strong, var(--aleg2-color-border));
	background: color-mix(in srgb, var(--aleg2-color-heading) 72%, transparent);
}

.aleg2-news-single__decor-item--01 {
	top: clamp(120px, 10vw, 170px);
	left: max(-32px, 3vw);
}

.aleg2-news-single__decor-item--02 {
	top: clamp(190px, 15vw, 270px);
	right: max(-30px, 4vw);
	transform: rotate(-64deg);
}

.aleg2-news-single__decor-item--03 {
	top: clamp(360px, 31vw, 520px);
	left: max(-34px, 9vw);
	width: clamp(48px, 6vw, 96px);
	transform: rotate(62deg);
}

.aleg2-news-single__decor-item--04 {
	top: clamp(470px, 36vw, 620px);
	right: max(-30px, 11vw);
	width: clamp(56px, 7vw, 110px);
	transform: rotate(58deg);
}

.aleg2-news-single__decor-item--05 {
	top: clamp(650px, 54vw, 880px);
	left: max(-40px, 1.5vw);
	width: clamp(92px, 11vw, 170px);
}

.aleg2-news-single__decor-item--06 {
	top: clamp(760px, 62vw, 980px);
	right: max(-44px, 2vw);
	width: clamp(90px, 10vw, 160px);
	transform: rotate(-62deg);
}

.aleg2-news-single__decor-item--07 {
	top: clamp(980px, 78vw, 1220px);
	left: max(-42px, 7vw);
	width: clamp(54px, 7vw, 118px);
	transform: rotate(58deg);
}

.aleg2-news-single__decor-item--08 {
	top: clamp(1120px, 90vw, 1400px);
	right: max(-40px, 8vw);
	width: clamp(64px, 8vw, 126px);
}

.aleg2-news-single__decor-item--09 {
	bottom: clamp(420px, 34vw, 620px);
	left: max(-38px, 1vw);
	width: clamp(86px, 10vw, 150px);
	transform: rotate(-62deg);
}

.aleg2-news-single__decor-item--10 {
	bottom: clamp(300px, 24vw, 480px);
	right: max(-40px, 1vw);
	width: clamp(88px, 11vw, 170px);
	transform: rotate(58deg);
}

.aleg2-news-single__decor-item--11 {
	bottom: clamp(130px, 12vw, 240px);
	left: max(-34px, 10vw);
	width: clamp(60px, 8vw, 120px);
}

.aleg2-news-single__decor-item--12 {
	bottom: clamp(90px, 8vw, 190px);
	right: max(-34px, 10vw);
	width: clamp(66px, 8vw, 128px);
	transform: rotate(-62deg);
}

/* ------------------------------------------------------------
 * Top area / breadcrumb / hero
 * ------------------------------------------------------------ */
.aleg2-news-single__top {
	position: relative;
	z-index: 1;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--aleg2-header-height, 80px) + clamp(24px, 4vw, 56px));
	margin-inline: auto;
}

.aleg2-news-single__top .aleg2-breadcrumb {
	margin-bottom: var(--aleg2-space-8);
}

.aleg2-news-single__hero {
	display: grid;
	justify-items: center;
	gap: var(--aleg2-space-4);
	padding-block: clamp(34px, 6vw, 86px) clamp(28px, 5vw, 64px);
	text-align: center;
}

.aleg2-news-single__eyebrow {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading));
	font-size: clamp(3.25rem, 12vw, 8.5rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: var(--aleg2-letter-spacing-tight, -0.04em);
	text-transform: uppercase;
	text-shadow: 0 1px 0 var(--aleg2-color-border);
}

.aleg2-news-single__subtitle {
	margin: 0;
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(var(--aleg2-font-size-md), 2vw, var(--aleg2-font-size-xl));
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
}

.aleg2-news-single__archive-button--top {
	margin-top: var(--aleg2-space-4);
}

/* ------------------------------------------------------------
 * Article card
 * ------------------------------------------------------------ */
.aleg2-news-single__article {
	position: relative;
	z-index: 1;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-md, 960px));
	margin-inline: auto;
	padding: clamp(20px, 4vw, 46px);
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong, var(--aleg2-color-surface)),
			var(--aleg2-glass-bg, var(--aleg2-color-surface))
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
	box-shadow: var(--aleg2-shadow-panel);
	backdrop-filter: var(--aleg2-backdrop-glass, none);
}

.aleg2-news-single__eyecatch {
	position: relative;
	margin: 0 0 clamp(22px, 4vw, 40px);
	overflow: hidden;
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	background: var(--aleg2-color-surface);
	box-shadow: inset 0 0 0 1px var(--aleg2-color-border-strong);
}

.aleg2-news-single__eyecatch-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.aleg2-news-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-3);
	align-items: center;
	padding-bottom: var(--aleg2-space-5);
	margin-bottom: clamp(20px, 3vw, 34px);
	color: var(--aleg2-color-text-muted);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-body));
	font-size: var(--aleg2-font-size-sm);
	font-weight: 700;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	border-bottom: 1px solid var(--aleg2-color-border);
}

.aleg2-news-single__category,
.aleg2-news-single__term {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0.45em 0.9em;
	color: var(--aleg2-color-on-primary);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-body));
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-primary),
			var(--aleg2-color-secondary)
		);
	border: 1px solid var(--aleg2-color-border-strong);
	border-radius: var(--aleg2-radius-pill, 999px);
}

.aleg2-news-single__category:hover,
.aleg2-news-single__term:hover {
	color: var(--aleg2-color-on-primary);
	text-decoration: none;
	filter: brightness(1.06);
}

.aleg2-news-single__date,
.aleg2-news-single__modified,
.aleg2-news-single__author {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--aleg2-color-text-muted);
}

.aleg2-news-single__meta .aleg2-edit-link {
	margin-inline-start: auto;
}

.aleg2-news-single__meta .aleg2-edit-link--in-news-meta {
	min-height: 32px;
	padding-inline: 0.85em;
	font-family: var(--aleg2-font-latin, var(--aleg2-font-body));
	font-size: var(--aleg2-font-size-xs);
	letter-spacing: var(--aleg2-letter-spacing-wide);
}

.aleg2-news-single__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(var(--aleg2-font-size-xl), 4vw, var(--aleg2-font-size-2xl));
	font-weight: 900;
	line-height: var(--aleg2-line-height-heading);
	letter-spacing: var(--aleg2-letter-spacing-tight, -0.02em);
}

.aleg2-news-single__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	margin-top: var(--aleg2-space-5);
}

.aleg2-news-single__body {
	margin-top: clamp(28px, 4vw, 48px);
	color: var(--aleg2-color-text);
	font-family: var(--aleg2-font-body);
	font-size: var(--aleg2-font-size-md);
	line-height: var(--aleg2-line-height-body);
}

.aleg2-news-single__body > :first-child {
	margin-top: 0;
}

.aleg2-news-single__body > :last-child {
	margin-bottom: 0;
}

.aleg2-news-single__body img,
.aleg2-news-single__body video,
.aleg2-news-single__body iframe {
	max-width: 100%;
	border-radius: var(--aleg2-radius-card);
}

.aleg2-news-single__body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-color: var(--aleg2-color-border);
}

.aleg2-news-single__body pre,
.aleg2-news-single__body code {
	border-radius: var(--aleg2-radius-card);
}

.aleg2-news-single__page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	margin-top: var(--aleg2-space-8);
}

.aleg2-news-single__article .aleg2-single-share {
	padding-top: var(--aleg2-space-8);
	margin-top: var(--aleg2-space-8);
	border-top: 1px solid var(--aleg2-color-border);
}

/* ------------------------------------------------------------
 * Bottom actions
 * ------------------------------------------------------------ */
.aleg2-news-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-4);
	justify-content: center;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-md, 960px));
	margin: clamp(28px, 5vw, 56px) auto 0;
}

/* ------------------------------------------------------------
 * Related / navigation sections
 * ------------------------------------------------------------ */
.aleg2-news-single .aleg2-related-posts {
	position: relative;
	z-index: 1;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	padding: clamp(28px, 5vw, 56px);
	margin: clamp(48px, 8vw, 96px) auto 0;
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong, var(--aleg2-color-surface)),
			var(--aleg2-glass-bg, var(--aleg2-color-surface))
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
	box-shadow: var(--aleg2-shadow-panel);
	backdrop-filter: var(--aleg2-backdrop-glass, none);
}

.aleg2-news-single .aleg2-related-posts::before {
	display: none;
}

.aleg2-news-single__navigation-section {
	position: relative;
	z-index: 1;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	padding: clamp(28px, 5vw, 56px);
	margin: clamp(32px, 6vw, 72px) auto 0;
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong, var(--aleg2-color-surface)),
			var(--aleg2-glass-bg, var(--aleg2-color-surface))
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-panel);
	box-shadow: var(--aleg2-shadow-panel);
	backdrop-filter: var(--aleg2-backdrop-glass, none);
}

.aleg2-news-single__section-heading {
	display: grid;
	justify-items: center;
	gap: var(--aleg2-space-2);
	margin-bottom: var(--aleg2-space-8);
	text-align: center;
}

.aleg2-news-single__section-kicker {
	margin: 0;
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading));
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	text-transform: uppercase;
}

.aleg2-news-single__section-title {
	display: flex;
	gap: var(--aleg2-space-4);
	align-items: center;
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(var(--aleg2-font-size-xl), 3vw, var(--aleg2-font-size-3xl));
	font-weight: 900;
	line-height: 1.2;
}

.aleg2-news-single__section-title::before,
.aleg2-news-single__section-title::after {
	width: clamp(34px, 8vw, 96px);
	height: 1px;
	content: "";
	background: var(--aleg2-color-border-strong);
}

.aleg2-news-single__navigation-section .aleg2-post-navigation {
	width: 100%;
	margin: 0;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */
@media (max-width: 720px) {
	.aleg2-news-single__article,
	.aleg2-news-single .aleg2-related-posts,
	.aleg2-news-single__navigation-section {
		padding: clamp(18px, 5vw, 28px);
	}

	.aleg2-news-single__meta {
		align-items: flex-start;
	}

	.aleg2-news-single__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.aleg2-news-single__actions .aleg2-button {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.aleg2-news-single__decor::before,
	.aleg2-news-single__decor::after,
	.aleg2-news-single__decor-item {
		opacity: 0.18;
	}

	.aleg2-news-single__decor-item--03,
	.aleg2-news-single__decor-item--04,
	.aleg2-news-single__decor-item--07,
	.aleg2-news-single__decor-item--08,
	.aleg2-news-single__decor-item--11,
	.aleg2-news-single__decor-item--12 {
		display: none;
	}

	.aleg2-news-single__meta .aleg2-edit-link {
		margin-inline-start: 0;
	}

	.aleg2-news-single__eyebrow {
		font-size: clamp(3rem, 20vw, 5.25rem);
	}

	.aleg2-news-single__section-title::before,
	.aleg2-news-single__section-title::after {
		width: 28px;
	}
}


/* ------------------------------------------------------------
 * Print
 * ------------------------------------------------------------ */
@media print {
	.aleg2-news-single__decor {
		display: none;
	}
}