/**
 * ヒルトン東京 ケータリング特設ページ（/mice/catering/）専用スタイル。
 * 黒背景バンド＋白文字＋金のサブラベルの designed LP。ホテル固有のためここに置く（CLAUDE.md §5）。
 * フロント・エディタ両方に読み込む（functions.php の enqueue_block_assets）。
 */

/* 黒背景の全幅バンド（ヒーロー／各セクション）。内側テキストは白系。隣接バンドは隙間なく連続させる。 */
.catering-hero,
.catering-sec {
	color: #fff;
	margin-top: 0;
	margin-bottom: 0;
}
/* セクション間（ヒーロー直下リード→各セクション、セクション同士）に細い区切り線を入れる。 */
.catering-hero + .catering-sec,
.catering-sec + .catering-sec {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* 背景帯はビューポート全幅（100vw）まで広げる。親テーマの alignfull は内容幅(1256)でキャップする
   高詳細度ルールのため、ここは !important で上書きする（ホテル固有なので子テーマ側で対処）。内側の
   見出し・本文・スライダーは group の constrained レイアウトが内容幅に収める。 */
.catering-hero.alignfull,
.catering-sec.alignfull,
.catering-kv.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* KV の中にページタイトル（h1）をオーバーレイする。 */
.catering-kv {
	position: relative;
	margin-bottom: 0;
}
/* タイトルは左・上下中央。左からの暗いグラデで可読性を確保。 */
.catering-kv::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 60%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.55), transparent);
	z-index: 2;
	pointer-events: none;
}
.catering-kv__caption {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* タイトルは KV 全幅の中で、内容幅(1256・ヘッダーと同じ)の左端から始める＝ヘッダーのロゴと左揃え。 */
.catering-kv__title {
	width: 100%;
	max-width: 1256px;
	margin-inline: auto;
	padding-inline: 32px;
	box-sizing: border-box;
	text-align: left;
	color: #fff;
	font-family: var(--wp--custom--brand-heading);
	font-weight: 700;
	font-size: clamp(26px, 3.6vw, 46px);
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
/* h1 の下のサブタイトル（ケータリングサービス）。少し小さく、左揃え・同じ内容幅ガター。 */
.catering-kv__subtitle {
	width: 100%;
	max-width: 1256px;
	margin: 8px auto 0;
	padding-inline: 32px;
	box-sizing: border-box;
	text-align: left;
	color: rgba(255, 255, 255, 0.94);
	font-family: var(--wp--custom--brand-body);
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 21px);
	letter-spacing: 0.1em;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
@media (max-width: 782px) {
	.catering-kv__title,
	.catering-kv__subtitle { padding-inline: 16px; }
}
.catering-hero :is(p, h2, h3),
.catering-sec :is(p, h2, h3) {
	color: #fff;
}

/* セクションは PC で「文章 / スライダー」の左右2カラム。SP は縦積み。 */
.catering-sec__cols {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}
@media (min-width: 900px) {
	.catering-sec__cols {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: clamp(32px, 4vw, 64px);
	}
	/* 交互レイアウト: reverse はスライダーを左・文章を右に。 */
	.catering-sec--reverse .catering-sec__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
	.catering-sec--reverse .catering-sec__text { order: 2; }
	.catering-sec--reverse .catering-sec__media { order: 1; }
}
.catering-sec__text { color: #fff; }
.catering-sec__media { margin: 0; }

/* セクション見出し（白・左寄せ）。汎用 h2 ルールに勝つよう詳細度を上げる。 */
.catering-sec .wp-block-heading.catering-sec__title,
.catering-hero .wp-block-heading {
	margin: 0 0 14px;
	font-family: var(--wp--custom--brand-heading);
	font-weight: 700;
	font-size: clamp(21px, 2.3vw, 28px);
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: #fff;
}

/* 区切り見出しの英語サブラベル（金・小・大文字）。 */
.catering-en {
	display: block;
	margin-top: 8px;
	font-weight: 400;
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--aureate, #b89766);
}

/* リード文（ヒーロー直下・中央・読み幅）。 */
.catering-hero .intro-lead__lead {
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 2;
	color: rgba(255, 255, 255, 0.88);
}
/* セクション本文（文章カラム内・左寄せ・やや明るいグレー）。 */
.catering-sec__text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.95;
	color: rgba(255, 255, 255, 0.86);
}

/* スライダーの送りボタン・インジケーターは暗背景で見えるよう白系に。 */
.catering-hero .is-style-hilton-slider .gallery-slider__btn,
.catering-sec .is-style-hilton-slider .gallery-slider__btn {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
.catering-hero .is-style-hilton-slider .gallery-slider__dot,
.catering-sec .is-style-hilton-slider .gallery-slider__dot {
	background: rgba(255, 255, 255, 0.4);
}
.catering-hero .is-style-hilton-slider .gallery-slider__dot.is-active,
.catering-sec .is-style-hilton-slider .gallery-slider__dot.is-active {
	background: #fff;
}

/* 衛生基準バナーの見出し（直前が黒帯なので罫線なし・上余白なし）。汎用 h2 ルールに勝つよう詳細度を上げる。 */
.catering-single .wp-block-heading.catering-banner__head {
	margin: 40px 0 18px;
	font-size: clamp(16px, 1.8vw, 19px);
}
/* 衛生基準バナー（別窓リンク画像）は中央寄せ・サイズを小さく。 */
.catering-banner {
	text-align: center;
}
.catering-banner img {
	max-width: 220px;
	height: auto;
}

/* ご予約・お問い合わせ（連絡先カード）はカードの内側上下余白(36px)と同じだけ上に離す。 */
.catering-single .contact-card {
	margin-top: 36px;
}

/* 英語ページでは KV の日本語サブタイトルを出さない（原文の英語ページにサブタイトルは無い）。 */
html[lang^="en"] .catering-single .catering-kv__subtitle { display: none; }

/* 英語版の連絡先（電話＋メール）。日本語版の連絡先カードに合わせて上下に余白を取り中央寄せ。 */
.catering-single .catering-contact-en {
	max-width: 720px;
	margin: 56px auto;
	padding: 0 16px;
	line-height: 1.9;
}

/* ケータリングは黒基調。KV と黒帯リードの間に入る言語切替は、白地で途切れないよう
   全幅の黒帯にし、文字は明色にする。 */
.catering-single .title-lang-switcher.wp-block-polylang-language-switcher {
	width: 100vw;
	margin: 0 0 0 calc(50% - 50vw);
	background: #111111;
	padding: 16px;
}
/* KV 直下に隙間を作らないよう、KV グループの下マージンを除く。 */
.catering-single .catering-kv { margin-bottom: 0; }
.catering-single .title-lang-switcher.wp-block-polylang-language-switcher a { color: rgba(255, 255, 255, 0.7); }
.catering-single .title-lang-switcher.wp-block-polylang-language-switcher a:hover { color: #fff; }
.catering-single .title-lang-switcher.wp-block-polylang-language-switcher .current-lang a { color: #fff; }
.catering-single .title-lang-switcher.wp-block-polylang-language-switcher li + li::before { color: rgba(255, 255, 255, 0.4); }