/**
 * css/pages/top-about.css
 * ============================================================
 * A LEGEND 2：TOP About
 * ============================================================
 *
 * 役割：
 * - template-parts/top/about.php の新しい shell / layout / media / copy 構造を装飾します。
 * - top.about.layout の7種類を、設定値どおりの完成形としてフロントへ反映します。
 *
 * 設計方針：
 * - CSSの後付け補正ではなく、ABOUTセクション専用のレイアウトシステムとして再構築します。
 * - 色、フォント、角丸、影、コンテナ幅、ボタンはA LEGEND 2のデザイントークンを参照します。
 * - メイン画像と本文は通常フロー内で高さを確保し、サブ画像だけをmedia内の装飾として重ねます。
 * - Overlayもabsoluteでセクション外へ逃がさず、CSS Gridの同一エリア重ねで表現します。
 * - Hero / NEWSなど上下セクションにかぶらないよう、section自身に安全な上下余白とz-index境界を持たせます。
 * - 既存互換のため、__inner / __visual / __content / __image-frame 系classにも対応します。
 */

/* ------------------------------------------------------------
 * Section root：デザイントークン接続と上下干渉防止
 * ------------------------------------------------------------ */
.aleg2-top-about {
	/*
	 * ABOUT専用トークン。
	 * 値の起点は既存のデザイン設定CSS変数に置き、ABOUTだけ固定デザインにしない方針です。
	 */
	--aleg2-about-container: var(--aleg2-container-xl, var(--aleg2-container-lg, 1180px));
	--aleg2-about-copy-width: min(100%, 680px);
	--aleg2-about-gap-before: clamp(72px, 8vw, 140px);
	--aleg2-about-gap-after: clamp(84px, 9vw, 156px);
	--aleg2-about-gap: clamp(36px, 5.4vw, 88px);
	--aleg2-about-split-media-height: clamp(320px, 31vw, 470px);
	--aleg2-about-stack-media-height: clamp(270px, 31vw, 440px);
	--aleg2-about-overlay-height: clamp(520px, 52vw, 690px);
	--aleg2-about-panel-padding: clamp(28px, 4.8vw, 64px);
	--aleg2-about-media-radius: var(--aleg2-radius-media, 22px);
	--aleg2-about-panel-radius: var(--aleg2-radius-panel, 28px);
	--aleg2-about-border: color-mix(in srgb, var(--aleg2-color-border, rgba(255,255,255,.2)) 82%, transparent);
	--aleg2-about-panel-bg: color-mix(in srgb, var(--aleg2-color-surface, #111) 84%, transparent);
	--aleg2-about-panel-bg-strong: color-mix(in srgb, var(--aleg2-color-bg, #050505) 88%, transparent);
	--aleg2-about-caption-bg: color-mix(in srgb, var(--aleg2-color-bg, #050505) 78%, transparent);
	--aleg2-about-sub-size: clamp(128px, 28%, 220px);
	--aleg2-about-sub-offset: clamp(14px, 2.4vw, 30px);
	--aleg2-about-overlap: clamp(36px, 5vw, 86px);
	--aleg2-about-parallax-y: 0px;
	--aleg2-about-sub-rotate: 4deg;
	--aleg2-top-about-parallax-y: var(--aleg2-about-parallax-y); /* 旧JS/CSS互換用。 */
	--aleg2-top-about-sub-rotate: var(--aleg2-about-sub-rotate); /* 旧JS/CSS互換用。 */

	position: relative;
	z-index: 0;
	isolation: isolate;
	padding-block: var(--aleg2-about-gap-before) var(--aleg2-about-gap-after);
	color: var(--aleg2-top-text, var(--aleg2-color-text, inherit));
	background: var(--aleg2-top-bg, transparent);
	overflow: hidden;
}

/**
 * Hero直後のABOUTは、TOP共通の負マージンをABOUT側だけで打ち消します。
 * top.css側の共通演出は維持し、ABOUTがHeroへ食い込まないようにします。
 */
.aleg2-main--top .aleg2-top-hero + .aleg2-top-about,
.aleg2-main--top .aleg2-top-hero + .aleg2-top-section--about,
.aleg2-main--top .aleg2-top-hero + .aleg2-section.aleg2-top-about {
	margin-top: 0;
}

/**
 * 背景グロー。
 * デザイン設定のアクセント/グローに追従し、body classで無効化できる既存方針も維持します。
 */
.aleg2-top-about::before {
	position: absolute;
	inset: 6% auto auto 0;
	z-index: -1;
	width: min(58vw, 720px);
	aspect-ratio: 1;
	pointer-events: none;
	content: "";
	background: radial-gradient(
		circle,
		var(--aleg2-glow-primary, color-mix(in srgb, var(--aleg2-color-accent, #c9a45c) 24%, transparent)),
		transparent 68%
	);
	opacity: 0.72;
	transform: translate3d(-46%, 0, 0);
}

body:not(.aleg2-bg-glow) .aleg2-top-about::before {
	display: none;
}

/* ------------------------------------------------------------
 * Shell / Layout：全レイアウト共通の土台
 * ------------------------------------------------------------ */
.aleg2-top-about__shell {
	position: relative;
	z-index: 1;
	width: min(100% - (var(--aleg2-container-padding, 24px) * 2), var(--aleg2-about-container));
	margin-inline: auto;
}

.aleg2-top-about .aleg2-top-about__layout,
.aleg2-top-about .aleg2-top-about__inner {
	position: relative;
	display: grid;
	gap: var(--aleg2-about-gap);
	align-items: center;
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* ------------------------------------------------------------
 * Copy：本文カード/テキスト
 * ------------------------------------------------------------ */
.aleg2-top-about__copy,
.aleg2-top-about__content {
	position: relative;
	z-index: 2;
	min-width: 0;
	max-width: var(--aleg2-about-copy-width);
}

.aleg2-top-about__copy .aleg2-section-heading,
.aleg2-top-about__content .aleg2-section-heading {
	max-width: min(100%, 720px);
	margin-bottom: clamp(18px, 3vw, 34px);
}

.aleg2-top-about__body {
	color: var(--aleg2-color-text-muted, var(--aleg2-color-muted, currentColor));
	font-family: var(--aleg2-font-body, inherit);
	font-size: var(--aleg2-font-size-md, 1rem);
	line-height: 2;
}

.aleg2-top-about__body p {
	margin: 0;
}

.aleg2-top-about__body p + p {
	margin-top: var(--aleg2-space-4, 1rem);
}

.aleg2-top-about__body a {
	color: var(--aleg2-color-link, var(--aleg2-color-accent, currentColor));
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--aleg2-duration-fast, .18s) var(--aleg2-ease-standard, ease);
}

.aleg2-top-about__body a:hover {
	color: var(--aleg2-color-link-hover, var(--aleg2-color-accent, currentColor));
}

.aleg2-top-about__actions {
	margin-top: clamp(24px, 4vw, 44px);
}

.aleg2-top-about__actions .aleg2-button {
	/* 余白だけABOUT側で調整し、色/角丸/hoverは共通ボタン設定へ委ねます。 */
	max-width: 100%;
}

/* ------------------------------------------------------------
 * Media：メイン画像 + サブ画像
 * ------------------------------------------------------------ */
.aleg2-top-about__media,
.aleg2-top-about__visual {
	position: relative;
	z-index: 1;
	min-width: 0;
	min-height: var(--aleg2-about-split-media-height);
	isolation: isolate;
}

.aleg2-top-about__figure,
.aleg2-top-about__image-frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--aleg2-color-surface, #111);
	border: 1px solid var(--aleg2-about-border);
	box-shadow: var(--aleg2-shadow-panel, 0 18px 60px rgba(0, 0, 0, .22));
}

.aleg2-top-about__figure::after,
.aleg2-top-about__image-frame::after {
	position: absolute;
	inset: 12px;
	z-index: 2;
	pointer-events: none;
	content: "";
	border: 1px solid color-mix(in srgb, var(--aleg2-color-border, rgba(255,255,255,.18)) 72%, transparent);
	border-radius: calc(var(--aleg2-about-media-radius) - 8px);
	opacity: 0.72;
}

.aleg2-top-about__figure--main,
.aleg2-top-about__image-frame--main {
	z-index: 1;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border-radius: var(--aleg2-about-media-radius);
}

.aleg2-top-about__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aleg2-top-about__figure--sub,
.aleg2-top-about__image-frame--sub {
	position: absolute;
	z-index: 4;
	width: var(--aleg2-about-sub-size);
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--aleg2-about-media-radius) * .72);
	transform: translate3d(0, var(--aleg2-about-parallax-y), 0) rotate(var(--aleg2-about-sub-rotate));
	transform-origin: center;
	will-change: transform;
}

.aleg2-top-about__caption {
	position: absolute;
	right: clamp(14px, 2.2vw, 28px);
	bottom: clamp(14px, 2.2vw, 28px);
	z-index: 5;
	max-width: min(76%, 360px);
	padding: .72em .95em;
	color: var(--aleg2-color-text, currentColor);
	font-size: var(--aleg2-font-size-sm, .875rem);
	line-height: var(--aleg2-line-height-body, 1.8);
	background: var(--aleg2-about-caption-bg);
	border: 1px solid var(--aleg2-about-border);
	border-radius: var(--aleg2-radius-sm, 12px);
	box-shadow: var(--aleg2-shadow-soft, 0 10px 30px rgba(0, 0, 0, .18));
	backdrop-filter: blur(12px);
}

/* ------------------------------------------------------------
 * Split：左右配置
 * ------------------------------------------------------------ */
.aleg2-top-about--type-split.has-media .aleg2-top-about__layout,
.aleg2-top-about--type-split.has-visual .aleg2-top-about__layout,
.aleg2-top-about--type-split.has-media .aleg2-top-about__inner,
.aleg2-top-about--type-split.has-visual .aleg2-top-about__inner {
	grid-template-columns: minmax(320px, .94fr) minmax(0, 1.06fr);
}

.aleg2-top-about--layout-text-left-image-right.has-media .aleg2-top-about__layout,
.aleg2-top-about--layout-text-left-image-right.has-visual .aleg2-top-about__layout,
.aleg2-top-about--layout-text-left-image-right.has-media .aleg2-top-about__inner,
.aleg2-top-about--layout-text-left-image-right.has-visual .aleg2-top-about__inner {
	grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
}

.aleg2-top-about--type-split .aleg2-top-about__media,
.aleg2-top-about--type-split .aleg2-top-about__visual {
	min-height: var(--aleg2-about-split-media-height);
}

.aleg2-top-about--type-split .aleg2-top-about__figure--main,
.aleg2-top-about--type-split .aleg2-top-about__image-frame--main {
	aspect-ratio: 16 / 11;
}

.aleg2-top-about--layout-image-left-text-right .aleg2-top-about__media,
.aleg2-top-about--layout-image-left-text-right .aleg2-top-about__visual {
	padding-right: clamp(26px, 4vw, 58px);
	padding-bottom: clamp(26px, 4vw, 58px);
}

.aleg2-top-about--layout-image-left-text-right .aleg2-top-about__figure--sub,
.aleg2-top-about--layout-image-left-text-right .aleg2-top-about__image-frame--sub {
	right: 0;
	bottom: 0;
	--aleg2-about-sub-rotate: 4deg;
}

.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__media,
.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__visual {
	padding-left: clamp(26px, 4vw, 58px);
	padding-bottom: clamp(26px, 4vw, 58px);
}

.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__figure--sub,
.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__image-frame--sub {
	left: 0;
	bottom: 0;
	--aleg2-about-sub-rotate: -4deg;
}

/* ------------------------------------------------------------
 * Overlay：画像とテキストカードの重ね
 * ------------------------------------------------------------ */
.aleg2-top-about--type-overlay.has-media .aleg2-top-about__layout,
.aleg2-top-about--type-overlay.has-visual .aleg2-top-about__layout,
.aleg2-top-about--type-overlay.has-media .aleg2-top-about__inner,
.aleg2-top-about--type-overlay.has-visual .aleg2-top-about__inner {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0;
	min-height: var(--aleg2-about-overlay-height);
	align-items: center;
}

.aleg2-top-about--type-overlay .aleg2-top-about__media,
.aleg2-top-about--type-overlay .aleg2-top-about__visual {
	grid-row: 1;
	min-height: var(--aleg2-about-overlay-height);
	padding-bottom: 0;
}

.aleg2-top-about--type-overlay .aleg2-top-about__figure--main,
.aleg2-top-about--type-overlay .aleg2-top-about__image-frame--main {
	aspect-ratio: 21 / 10;
}

.aleg2-top-about--type-overlay .aleg2-top-about__copy,
.aleg2-top-about--type-overlay .aleg2-top-about__content {
	grid-row: 1;
	width: min(100%, 640px);
	max-width: none;
	padding: var(--aleg2-about-panel-padding);
	background:
		linear-gradient(135deg, var(--aleg2-about-panel-bg), var(--aleg2-about-panel-bg-strong)),
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--aleg2-top-accent, var(--aleg2-color-accent, #c9a45c)) 16%, transparent), transparent 44%);
	border: 1px solid var(--aleg2-about-border);
	border-radius: var(--aleg2-about-panel-radius);
	box-shadow: var(--aleg2-shadow-panel, 0 18px 60px rgba(0, 0, 0, .22));
	backdrop-filter: blur(18px);
}

.aleg2-top-about--layout-image-left-text-right-overlay .aleg2-top-about__media,
.aleg2-top-about--layout-image-left-text-right-overlay .aleg2-top-about__visual {
	grid-column: 1 / 9;
	padding-right: var(--aleg2-about-overlap);
}

.aleg2-top-about--layout-image-left-text-right-overlay .aleg2-top-about__copy,
.aleg2-top-about--layout-image-left-text-right-overlay .aleg2-top-about__content {
	grid-column: 7 / 13;
	justify-self: end;
}

.aleg2-top-about--layout-image-left-text-right-overlay .aleg2-top-about__figure--sub,
.aleg2-top-about--layout-image-left-text-right-overlay .aleg2-top-about__image-frame--sub {
	right: clamp(28px, 4vw, 62px);
	bottom: clamp(28px, 4vw, 62px);
	--aleg2-about-sub-rotate: 4deg;
}

.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__media,
.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__visual {
	grid-column: 5 / 13;
	padding-left: var(--aleg2-about-overlap);
}

.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__copy,
.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__content {
	grid-column: 1 / 7;
	justify-self: start;
}

.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__figure--sub,
.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__image-frame--sub {
	left: clamp(28px, 4vw, 62px);
	bottom: clamp(28px, 4vw, 62px);
	--aleg2-about-sub-rotate: -4deg;
}

/* ------------------------------------------------------------
 * Stack：上下配置
 * ------------------------------------------------------------ */
.aleg2-top-about--type-stack.has-media .aleg2-top-about__layout,
.aleg2-top-about--type-stack.has-visual .aleg2-top-about__layout,
.aleg2-top-about--type-stack.has-media .aleg2-top-about__inner,
.aleg2-top-about--type-stack.has-visual .aleg2-top-about__inner {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 5vw, 66px);
	width: min(100%, var(--aleg2-container-lg, 1180px));
	margin-inline: auto;
}

.aleg2-top-about--type-stack .aleg2-top-about__copy,
.aleg2-top-about--type-stack .aleg2-top-about__content {
	width: min(100%, 840px);
	max-width: none;
	margin-inline: auto;
}

.aleg2-top-about--type-stack .aleg2-top-about__media,
.aleg2-top-about--type-stack .aleg2-top-about__visual {
	min-height: var(--aleg2-about-stack-media-height);
}

.aleg2-top-about--type-stack .aleg2-top-about__figure--main,
.aleg2-top-about--type-stack .aleg2-top-about__image-frame--main {
	aspect-ratio: 16 / 7;
}

.aleg2-top-about--type-stack .aleg2-top-about__figure--sub,
.aleg2-top-about--type-stack .aleg2-top-about__image-frame--sub {
	width: clamp(124px, 22%, 220px);
}

.aleg2-top-about--layout-image-top-text-bottom .aleg2-top-about__media,
.aleg2-top-about--layout-image-top-text-bottom .aleg2-top-about__visual {
	padding-right: clamp(22px, 4vw, 54px);
	padding-bottom: clamp(22px, 3.4vw, 44px);
}

.aleg2-top-about--layout-image-top-text-bottom .aleg2-top-about__figure--sub,
.aleg2-top-about--layout-image-top-text-bottom .aleg2-top-about__image-frame--sub {
	right: 0;
	bottom: 0;
	--aleg2-about-sub-rotate: 3deg;
}

.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__media,
.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__visual {
	padding-left: clamp(22px, 4vw, 54px);
	padding-bottom: clamp(22px, 3.4vw, 44px);
}

.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__figure--sub,
.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__image-frame--sub {
	left: 0;
	bottom: 0;
	--aleg2-about-sub-rotate: -3deg;
}

/* ------------------------------------------------------------
 * Text only / 画像なし
 * ------------------------------------------------------------ */
.aleg2-top-about--type-text .aleg2-top-about__layout,
.aleg2-top-about--type-text .aleg2-top-about__inner,
.aleg2-top-about.is-media-hidden .aleg2-top-about__layout,
.aleg2-top-about.is-visual-hidden .aleg2-top-about__layout,
.aleg2-top-about.is-media-hidden .aleg2-top-about__inner,
.aleg2-top-about.is-visual-hidden .aleg2-top-about__inner,
.aleg2-top-about--layout-text-only .aleg2-top-about__layout,
.aleg2-top-about--layout-text-only .aleg2-top-about__inner {
	grid-template-columns: minmax(0, 1fr);
	width: min(100%, var(--aleg2-container-lg, 1180px));
	margin-inline: auto;
}

.aleg2-top-about--type-text .aleg2-top-about__copy,
.aleg2-top-about--type-text .aleg2-top-about__content,
.aleg2-top-about.is-media-hidden .aleg2-top-about__copy,
.aleg2-top-about.is-visual-hidden .aleg2-top-about__copy,
.aleg2-top-about.is-media-hidden .aleg2-top-about__content,
.aleg2-top-about.is-visual-hidden .aleg2-top-about__content,
.aleg2-top-about--layout-text-only .aleg2-top-about__copy,
.aleg2-top-about--layout-text-only .aleg2-top-about__content {
	width: min(100%, 840px);
	max-width: none;
	margin-inline: auto;
	padding: var(--aleg2-about-panel-padding);
	background:
		linear-gradient(135deg, var(--aleg2-about-panel-bg), var(--aleg2-about-panel-bg-strong)),
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--aleg2-top-accent, var(--aleg2-color-accent, #c9a45c)) 16%, transparent), transparent 44%);
	border: 1px solid var(--aleg2-about-border);
	border-radius: var(--aleg2-about-panel-radius);
	box-shadow: var(--aleg2-shadow-panel, 0 18px 60px rgba(0, 0, 0, .22));
}

/* ------------------------------------------------------------
 * Responsive：設定値の意味を保ちながら段階的に圧縮
 * ------------------------------------------------------------ */
@media (max-width: 1023px) {
	.aleg2-top-about {
		--aleg2-about-container: var(--aleg2-container-lg, 1180px);
		--aleg2-about-gap-before: clamp(62px, 8vw, 112px);
		--aleg2-about-gap-after: clamp(72px, 9vw, 124px);
		--aleg2-about-gap: clamp(28px, 4.6vw, 54px);
		--aleg2-about-split-media-height: clamp(290px, 35vw, 390px);
		--aleg2-about-stack-media-height: clamp(250px, 34vw, 360px);
		--aleg2-about-overlay-height: clamp(430px, 52vw, 560px);
		--aleg2-about-overlap: clamp(22px, 4vw, 54px);
	}

	.aleg2-top-about--type-split.has-media .aleg2-top-about__layout,
	.aleg2-top-about--type-split.has-visual .aleg2-top-about__layout,
	.aleg2-top-about--type-split.has-media .aleg2-top-about__inner,
	.aleg2-top-about--type-split.has-visual .aleg2-top-about__inner {
		grid-template-columns: minmax(260px, .94fr) minmax(0, 1.06fr);
	}

	.aleg2-top-about--layout-text-left-image-right.has-media .aleg2-top-about__layout,
	.aleg2-top-about--layout-text-left-image-right.has-visual .aleg2-top-about__layout,
	.aleg2-top-about--layout-text-left-image-right.has-media .aleg2-top-about__inner,
	.aleg2-top-about--layout-text-left-image-right.has-visual .aleg2-top-about__inner {
		grid-template-columns: minmax(0, 1.06fr) minmax(260px, .94fr);
	}

	.aleg2-top-about--type-overlay .aleg2-top-about__copy,
	.aleg2-top-about--type-overlay .aleg2-top-about__content {
		width: min(100%, 580px);
	}
}

@media (max-width: 767px) {
	.aleg2-top-about {
		--aleg2-about-gap-before: clamp(52px, 13vw, 86px);
		--aleg2-about-gap-after: clamp(64px, 14vw, 98px);
		--aleg2-about-gap: clamp(26px, 7vw, 44px);
		--aleg2-about-split-media-height: clamp(270px, 72vw, 420px);
		--aleg2-about-stack-media-height: clamp(245px, 68vw, 380px);
		--aleg2-about-overlay-height: auto;
		--aleg2-about-panel-padding: clamp(24px, 7vw, 40px);
		--aleg2-about-sub-size: clamp(108px, 38%, 168px);
	}

	.aleg2-top-about.has-media .aleg2-top-about__layout,
	.aleg2-top-about.has-visual .aleg2-top-about__layout,
	.aleg2-top-about.has-media .aleg2-top-about__inner,
	.aleg2-top-about.has-visual .aleg2-top-about__inner,
	.aleg2-top-about--type-overlay.has-media .aleg2-top-about__layout,
	.aleg2-top-about--type-overlay.has-visual .aleg2-top-about__layout,
	.aleg2-top-about--type-overlay.has-media .aleg2-top-about__inner,
	.aleg2-top-about--type-overlay.has-visual .aleg2-top-about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--aleg2-about-gap);
		min-height: auto;
		width: 100%;
	}

	.aleg2-top-about--type-overlay .aleg2-top-about__media,
	.aleg2-top-about--type-overlay .aleg2-top-about__visual,
	.aleg2-top-about--type-overlay .aleg2-top-about__copy,
	.aleg2-top-about--type-overlay .aleg2-top-about__content {
		grid-column: auto;
		grid-row: auto;
	}

	.aleg2-top-about--type-overlay .aleg2-top-about__media,
	.aleg2-top-about--type-overlay .aleg2-top-about__visual {
		min-height: var(--aleg2-about-stack-media-height);
		padding-inline: 0 clamp(22px, 6vw, 40px);
		padding-bottom: clamp(22px, 6vw, 40px);
	}

	.aleg2-top-about--type-overlay .aleg2-top-about__copy,
	.aleg2-top-about--type-overlay .aleg2-top-about__content {
		width: 100%;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		backdrop-filter: none;
	}

	.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__media,
	.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__visual,
	.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__media,
	.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__visual,
	.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__media,
	.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__visual {
		padding-right: clamp(22px, 6vw, 40px);
		padding-left: 0;
	}

	.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__figure--sub,
	.aleg2-top-about--layout-text-left-image-right .aleg2-top-about__image-frame--sub,
	.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__figure--sub,
	.aleg2-top-about--layout-text-left-image-right-overlay .aleg2-top-about__image-frame--sub,
	.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__figure--sub,
	.aleg2-top-about--layout-text-top-image-bottom .aleg2-top-about__image-frame--sub {
		right: 0;
		left: auto;
		bottom: 0;
		--aleg2-about-sub-rotate: 3deg;
	}
}

@media (max-width: 480px) {
	.aleg2-top-about {
		--aleg2-about-gap-before: clamp(46px, 14vw, 72px);
		--aleg2-about-gap-after: clamp(58px, 16vw, 84px);
		--aleg2-about-split-media-height: clamp(244px, 78vw, 360px);
		--aleg2-about-stack-media-height: clamp(226px, 72vw, 330px);
		--aleg2-about-sub-size: clamp(98px, 40%, 148px);
	}

	.aleg2-top-about__caption {
		right: 12px;
		bottom: 12px;
		max-width: calc(100% - 24px);
		padding: .62em .8em;
	}

	.aleg2-top-about__figure::after,
	.aleg2-top-about__image-frame::after {
		inset: 8px;
		border-radius: calc(var(--aleg2-about-media-radius) - 10px);
	}
}

/* ------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.aleg2-top-about__figure--sub,
	.aleg2-top-about__image-frame--sub {
		transform: rotate(var(--aleg2-about-sub-rotate));
		will-change: auto;
	}
}

.aleg2-motion-disabled .aleg2-top-about,
.aleg2-reduced-motion .aleg2-top-about,
.aleg2-top-about.is-motion-disabled {
	--aleg2-about-parallax-y: 0px;
	--aleg2-top-about-parallax-y: 0px;
}