/* =========================================================
   イントロ
   配置想定: assets/css/intro.css

   ・data-width="full" ＝ 背景は全幅、中身（__inner）は wide 相当に制限。
   ・背景画像スライドは全枚を絶対配置で重ね、1枚目だけ表示。
     切替（フェード）は JS が .is-active を付け替えて行う予定。
     いまは JS 無しでも1枚目が見えるよう data-index="0" を初期表示にしている。
   ・背景色/画像は自由値なので inline の CSS 変数（--bg-image）で受ける。
   ========================================================= */

.lr-intro {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 100vw;   /* スマホ：横幅ぶんの高さ＝ほぼ正方形 */
	padding: var(--lr-space-xl) var(--lr-space-md);
	background: var(--lr-black);   /* 締めの黒。画像が無ければこの単色が地になる */
	color: var(--lr-white);
    position: sticky;
    top: 66px;
    z-index: 0;
}

/* タブレット以上：画面の約1/3（下限を絶対値で持たせて潰れ防止）*/
@media (min-width: 600px) {
	.lr-intro {
		min-height: max(33vh, 320px);
	}
}

/* ---- 背景スライド ---- */
.lr-intro__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.lr-intro__slide {
	position: absolute;
	inset: 0;
	background-image: var(--bg-image);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}

/* JS 無し時の初期表示（1枚目）。JS 実装時は is-ready 付与で主導権を .is-active に移す */
.lr-intro__slide[data-index="0"] {
	opacity: 1;
}
.lr-intro__bg.is-ready .lr-intro__slide[data-index="0"] {
	opacity: 0;   /* JS 起動後は初期表示ルールを解除し、.is-active に一本化 */
}
.lr-intro__bg.is-ready .lr-intro__slide.is-active {
	opacity: 1;
}

/* 背景画像ありのときの可読性オーバーレイ。
   チャコール寄りのグラデで、画像を品よく沈める。
   画像が無いときは .lr-intro 自体のチャコール地がそのまま効く。 */
.lr-intro[data-has-bg="1"] .lr-intro__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(26, 24, 23, .25),
		rgba(26, 24, 23, .55)
	);
}

/* ---- コンテンツ ---- */
.lr-intro__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1100px;      /* wide 相当。背景は全幅、中身はここで制限 */
	margin-inline: auto;
	text-align: center;
}

.lr-intro__title-image img {
	display: block;
	max-width: min(480px, 80%);
	height: auto;
	margin: 0 auto var(--lr-space-sm);
}

.lr-intro__title {
	margin: 0 0 var(--lr-space-sm);
	font-size: clamp(2.2rem, 6vw, 4rem);
	font-weight: var(--lr-weight-black);
	letter-spacing: var(--lr-tracking-tight);
	line-height: var(--lr-leading-tight);
}

.lr-intro__subtitle {
	margin: 0 0 var(--lr-space-md);
	font-size: 1.2rem;
    font-weight: var(--lr-weight-bold);
	letter-spacing: .08em;      /* サブは字間を広げて上品に */
	color: rgba(255, 255, 255, .85);
}

/* サブタイトルの下の短い区切り線。暗い地では赤がくすむので白にする */
.lr-intro__subtitle::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: var(--lr-space-md) auto 0;
	background: rgba(255, 255, 255, .6);
}

.lr-intro__overview {
	max-width: 640px;
	margin-inline: auto;        /* ブロックは中央。中の文章も親の center を継承して中央揃え */
	line-height: var(--lr-leading-body);
    font-weight: var(--lr-weight-base);
}

/* フロントページのタイトル内、括弧書き（例：（アエル））を小さく添える */
.lr-intro__title-sub {
	font-size: 0.5em;      /* 親 h1 の半分程度 */
	font-weight: var(--lr-weight-bold);   /* black だと大きく見えるので一段軽く */
	letter-spacing: normal;
}

/* ---- お問い合わせページ：イントロを低めに ---- */
.lr-intro[data-slug="contact"] {
	min-height: 50vw;
}

@media (min-width: 600px) {
	.lr-intro[data-slug="contact"] {
		min-height: max(20vh, 240px);
	}
}

/* ---- Journal / News ページ：イントロを低めに（contact と同じ流儀）---- */
.lr-intro[data-slug="journal"],
.lr-intro[data-slug="news"] {
	min-height: 50vw;
}

@media (min-width: 600px) {
	.lr-intro[data-slug="journal"],
	.lr-intro[data-slug="news"] {
		min-height: max(20vh, 240px);
	}
}