/**
 * NEO events archive styles（/events/ のみ読み込み）
 *
 * - 月別表示: EVENTS 見出し → 月の切り替え → カレンダー画像 → その月のイベント → 月の切り替え.
 * - neo-base.css の変数・部品（.neo-status / .neo-button）を前提とする.
 * - 1カラム. 読みやすさのため最大幅 48rem で中央に置く. カレンダー画像を最も大きく見せる.
 * - スマホを基準に書き、768px で文字サイズ・余白を調整する.
 * - グラデーション・発光・影・アニメーションは使わない.
 */

/*
 * カレンダーのイベント名から下の「○月のイベント」へのページ内移動をなめらかにする（JS なし. このページだけ読み込まれる）.
 * 動きを減らす設定（prefers-reduced-motion）の端末では通常どおり瞬時に移動する.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.neo-archive-events {
	max-width: 48rem;
	margin-inline: auto;
	color: var(--neo-color-text);
}

/* ==========================================================================
   1. ページタイトル（EVENTS / イベントスケジュール）
   ========================================================================== */

.neo-page-title {
	margin-bottom: 2rem;
}

/* Lightning / スキンの見出し装飾を打ち消す */
.neo-page-title__heading {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1.3;
	color: var(--neo-color-text);
}

.neo-page-title__heading::before,
.neo-page-title__heading::after {
	content: none;
}

.neo-page-title__en {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--neo-color-text);
}

.neo-page-title__ja {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--neo-color-text-sub);
}

.neo-page-title__description {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--neo-color-text);
}

/* ==========================================================================
   2. 月の切り替え（← 前月 / 表示中の年月 / 次月 →）
   ========================================================================== */

/* 左右の列は同じ幅にし、表示中の年月を常に中央に置く（前月・次月がない場合も位置を保つ） */
.neo-month-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	border-top: 1px solid var(--neo-color-line);
	border-bottom: 1px solid var(--neo-color-line);
}

.neo-month-nav--bottom {
	margin: 2.5rem 0 0;
}

.neo-month-nav__prev {
	justify-self: start;
}

.neo-month-nav__next {
	justify-self: end;
}

.neo-month-nav__current {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: nowrap;
	color: var(--neo-color-text);
}

/* タップしやすい高さを確保する */
.neo-month-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 48px;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--neo-color-text-sub);
	text-decoration: none;
	white-space: nowrap;
}

.neo-month-nav__link:hover {
	color: var(--neo-color-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ==========================================================================
   3. カレンダー画像（ある場合のみ出力. 切り取らず全体を表示し、タップで元画像を開く）
   ========================================================================== */

.neo-schedule {
	margin: 0 0 2.5rem;
}

.neo-schedule__link {
	display: block;
}

.neo-schedule__image {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   3-2. HTMLカレンダー（月間スケジュールの表示方法が「HTMLカレンダー」の月. template-parts/archive/calendar.php）
   スマホ・PC とも7列（日〜土）の月間表. 列は均等幅（table-layout: fixed）で、表は画面幅を超えない.
   セル: 日付 → 営業時間（12-20 の短縮表示）/ 定休 → ラベル → イベント名（最大2行）.
   Lightning の表の既定（セルの padding 0.5rem 1rem・小さい文字）は 7列が収まらないため、ここで上書きする.
   ========================================================================== */

.neo-calendar {
	margin: 0 0 2.5rem;
}

/* カレンダーの直後の操作案内: 補足説明として小さく控えめに（背景・枠・太字なし） */
.neo-calendar__hint {
	margin: 0.5rem 0 0;
	color: #999;
	font-size: 0.75rem;
	line-height: 1.6;
}

.neo-calendar__table {
	width: 100%;
	margin: 0;
	table-layout: fixed;
	border-collapse: collapse;
	border: 1px solid var(--neo-color-line);
	color: var(--neo-color-text);
}

.neo-calendar__table th,
.neo-calendar__table td {
	border: 1px solid var(--neo-color-line);
}

/* 曜日（日〜土は同じ色. 土日の色分けはしない） */
.neo-calendar__table th {
	padding: 0.25rem 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	color: var(--neo-color-text-sub);
}

/* 表のセルの height は最小の高さとして働く（中身が多い日は自然に伸びる） */
.neo-calendar__table td {
	height: 5.5rem;
	padding: 0.25rem 0.1875rem;
	font-size: 0.6875rem;
	line-height: 1.35;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.neo-calendar__date {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.neo-calendar__cell.is-closed .neo-calendar__date {
	color: var(--neo-color-text-sub);
}

/* 現在の営業日: 白い細枠で囲む（背景・色は変えない） */
.neo-calendar__cell.is-today {
	outline: 1px solid var(--neo-color-text);
	outline-offset: -1px;
}

.neo-calendar__hours,
.neo-calendar__range,
.neo-calendar__closed,
.neo-calendar__label,
.neo-calendar__event {
	display: block;
}

.neo-calendar__hours,
.neo-calendar__closed,
.neo-calendar__label,
.neo-calendar__event {
	margin-top: 0.125rem;
}

/* 営業時間: 日付より小さく控えめに. 2枠は2行 */
.neo-calendar__range {
	font-variant-numeric: tabular-nums;
	color: var(--neo-color-text-sub);
}

.neo-calendar__closed {
	color: var(--neo-color-text-muted);
}

/* ラベル・イベント名: 長い名前は最大2行（列幅は変えない） */
.neo-calendar__label,
.neo-calendar__event {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/*
 * 日別ラベル（月間スケジュールの補助情報）: 白文字 + 暗めのくすんだ背景色（管理画面で10色から選ぶ. 初期はグレー）.
 * 7列の狭いセルに収まるよう余白は小さく、角丸は控えめ. 最大2行（上の共通指定）. リンクにしない.
 */
.neo-calendar__label {
	padding: 0.0625rem 0.1875rem;
	border-radius: 2px;
	font-weight: 500;
	color: var(--neo-color-text);
	background-color: #3d3d3d;
}

.neo-calendar__label--gray {
	background-color: #3d3d3d;
}

.neo-calendar__label--red {
	background-color: #7a3030;
}

.neo-calendar__label--orange {
	background-color: #7d4a22;
}

.neo-calendar__label--yellow {
	background-color: #6e5c1a;
}

.neo-calendar__label--green {
	background-color: #2f5c3a;
}

.neo-calendar__label--teal {
	background-color: #235c5c;
}

.neo-calendar__label--blue {
	background-color: #2a4a73;
}

.neo-calendar__label--indigo {
	background-color: #3b3b75;
}

.neo-calendar__label--purple {
	background-color: #583d73;
}

.neo-calendar__label--pink {
	background-color: #753d5a;
}

/*
 * スマホ: 日別ラベルだけ1行で表示する（文字を少し小さく. 省略記号は付けない）.
 * 2行までの表示（-webkit-box）をやめて1行の小さなタグにし、背景色は文字の幅だけにする.
 * セル幅より長い場合はセル幅で切る. イベント名は2行のまま.
 */
@media (max-width: 767.98px) {
	.neo-calendar__label {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		padding: 0.0625rem 0.125rem;
		font-size: 0.625rem;
		line-height: 1.2;
		letter-spacing: 0;
		white-space: nowrap;
		vertical-align: top;
	}
}

/*
 * イベント（neo_event）: 薄いグレー背景 + 黒の太字の小さなタグで、日別ラベル（色付き背景 + 白文字）より強く見せる.
 * 背景は文字の幅だけ（width: fit-content）. 2行までの表示（上の共通指定 -webkit-box）のまま、1件ずつ別の行に置く.
 * 影・発光・グラデーションなし. リンクにはしない（詳細は下の「○月のイベント」）.
 */
.neo-calendar__event {
	width: fit-content;
	max-width: 100%;
	padding: 0.0625rem 0.1875rem;
	border-radius: 2px;
	font-weight: 700;
	color: var(--neo-color-bg);
	background-color: #e6e6e6;
}

/*
 * 特別イベント（管理画面で「特別イベント」にチェックしたイベントだけ）: 淡くくすんだアンティークメタル調（5色から選ぶ）.
 * 黒基調のカレンダーで色が勝ちすぎないよう、彩度と外側の光は控えめにする.
 * 共通: 縦方向のグラデーション + 細い枠 + ごく弱い内側のハイライトと外側の光. アニメーションなし.
 * 枠線 1px の分だけ余白を 1px 減らし、タグの外寸・太さ・角丸・2行までの表示は通常のイベントと同じにする.
 * 色は下の各色の指定でカスタムプロパティだけを変える（初期値・色の指定がない場合は GOLD）.
 */
.neo-calendar__event--special,
.neo-calendar__event--special-gold {
	--neo-special-text: #3a2c14;
	--neo-special-fallback: #c8b27e;
	--neo-special-gradient: linear-gradient(180deg, #f4ecd2 0%, #dfd0a8 35%, #c8b27e 55%, #9f8b5e 100%);
	--neo-special-border: #d4c49a;
	--neo-special-glow: rgba(214, 196, 154, 0.11);
}

.neo-calendar__event--special {
	padding: calc(0.0625rem - 1px) calc(0.1875rem - 1px);
	border: 1px solid var(--neo-special-border);
	color: var(--neo-special-text);
	background-color: var(--neo-special-fallback);
	background-image: var(--neo-special-gradient);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 0 6px var(--neo-special-glow);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* SILVER: 柔らかいプラチナ寄りのシルバー（白にしない） */
.neo-calendar__event--special-silver {
	--neo-special-text: #272b2e;
	--neo-special-fallback: #bcc2c6;
	--neo-special-gradient: linear-gradient(180deg, #f3f4f5 0%, #d9dde0 35%, #bcc2c6 55%, #8f969b 100%);
	--neo-special-border: #c9ced2;
	--neo-special-glow: rgba(205, 212, 216, 0.1);
}

/* ROSE GOLD: ピンクではなく、ベージュ寄りのローズゴールド */
.neo-calendar__event--special-rose {
	--neo-special-text: #3a2927;
	--neo-special-fallback: #c29d96;
	--neo-special-gradient: linear-gradient(180deg, #f0ddd9 0%, #d9bbb5 35%, #c29d96 55%, #97736e 100%);
	--neo-special-border: #d0afa9;
	--neo-special-glow: rgba(205, 170, 165, 0.1);
}

/* COPPER: オレンジではなく、落ち着いたブロンズ・赤銅寄り */
.neo-calendar__event--special-copper {
	--neo-special-text: #35251c;
	--neo-special-fallback: #b6805f;
	--neo-special-gradient: linear-gradient(180deg, #e5c1a9 0%, #cca083 35%, #b6805f 55%, #815b45 100%);
	--neo-special-border: #c49a7d;
	--neo-special-glow: rgba(185, 140, 110, 0.1);
}

/* BLUE STEEL: 鮮やかな青ではなく、銀に青を少し混ぜた鋼鉄色 */
.neo-calendar__event--special-blue {
	--neo-special-text: #263137;
	--neo-special-fallback: #a5b4bc;
	--neo-special-gradient: linear-gradient(180deg, #e1e8eb 0%, #c5d0d5 35%, #a5b4bc 55%, #788a94 100%);
	--neo-special-border: #b7c3c8;
	--neo-special-glow: rgba(165, 185, 195, 0.1);
}

/*
 * イベント名のページ内リンク（下の「○月のイベント」の同じイベントへ移動）: タグの中の文字だけをリンクにする.
 * 文字色はタグの色（通常・特別イベント5色）をそのまま使い、リンクの青・紫にしない. 下線は付けない.
 * Lightning の a:hover の色・下線より優先するため、:hover / :focus-visible でも指定する.
 */
.neo-calendar__event-link,
.neo-calendar__event-link:hover,
.neo-calendar__event-link:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* キーボード操作のフォーカス枠: タグは overflow: hidden で内側の枠が切れるため、タグの外側に表示する */
@supports selector(:has(a)) {
	.neo-calendar__event:has(.neo-calendar__event-link:focus-visible) {
		outline: var(--neo-focus-ring);
		outline-offset: 1px;
	}

	.neo-calendar__event-link:focus-visible {
		outline: none;
	}
}

/* ==========================================================================
   4. その月のイベント
   ========================================================================== */

/* Lightning / スキンの h2 装飾を打ち消す */
.neo-archive-events__heading {
	margin: 0 0 0.5rem;
	padding: 0 0 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--neo-color-line-strong);
	background: none;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: var(--neo-color-text);
}

.neo-archive-events__heading::before,
.neo-archive-events__heading::after {
	content: none;
}

.neo-archive-events__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.neo-archive-events__item {
	margin: 0;
	border-bottom: 1px solid var(--neo-color-line);
}

/* イベント1件（template-parts/event/list-item.php）: 日付 → タイトル → アイキャッチ画像（主役） */
.neo-month-event {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-block: 1.25rem;
	/* カレンダーのイベント名（#neo-event-{ID}）から移動したとき、管理バー・画面上端に重ならないよう少し余白をとる */
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

/*
 * カレンダーのイベント名から移動した先のイベント（:target）: どのイベントに移動したか分かる程度にごく軽く示す.
 * outline は場所をとらないため、レイアウトは動かない. 発光・アニメーションなし.
 */
.neo-month-event:target {
	background-color: rgba(255, 255, 255, 0.025);
	outline: 1px solid rgba(255, 255, 255, 0.18);
	outline-offset: 4px;
}

.neo-month-event__meta {
	margin: 0;
	line-height: 1.5;
}

.neo-month-event__date {
	font-size: 1rem;
	font-weight: 700;
}

/* Lightning / スキンの h3 装飾（下線・疑似要素）を打ち消す */
.neo-month-event__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--neo-color-text);
	overflow-wrap: anywhere;
}

.neo-month-event__title::before,
.neo-month-event__title::after {
	content: none;
}

/* 画像: 横幅いっぱい・元の縦横比のまま（切り抜かない. 角丸・影なし） */
/*
 * 本文の文章（画像を除く. ある場合だけ）: タイトルの下に控えめな色・小さめの文字で.
 * タイトルとの間はイベントの gap（0.5rem）、画像との間は gap + 画像の上の余白（0.875rem）.
 */
.neo-month-event__content {
	color: #d0d0d0;
	font-size: 0.875rem;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.neo-month-event__content p,
.neo-month-event__content ul,
.neo-month-event__content ol {
	margin: 0 0 0.75em;
}

.neo-month-event__content > :last-child {
	margin-bottom: 0;
}

.neo-month-event__content ul,
.neo-month-event__content ol {
	padding-left: 1.25em;
}

.neo-month-event__content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.neo-month-event__media {
	margin: 0.375rem 0 0;
}

/* 画像（最大2枚）: スマホ・PC とも縦に並べ、2枚ある場合だけ間をあける */
.neo-month-event__images {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.neo-month-event__image {
	display: block;
	width: 100%;
	height: auto;
}

/* スマホ: 画面幅いっぱいだと圧迫感があるため、幅 80% で中央に置く（2枚とも同じ幅） */
@media (max-width: 767.98px) {
	.neo-month-event__image {
		width: 80%;
		height: auto;
		margin-inline: auto;
	}
}

/* ==========================================================================
   5. 空状態・表示不可
   ========================================================================== */

.neo-archive-events__empty {
	margin-top: 1rem;
	padding: 2.5rem 1.5rem;
	border: 1px solid var(--neo-color-line);
	text-align: center;
	color: var(--neo-color-text-sub);
}

.neo-archive-events__empty p {
	margin: 0;
}

.neo-archive-events__notice {
	margin: 0;
	color: var(--neo-color-text-sub);
}

/* ==========================================================================
   6. 768px 以上
   ========================================================================== */

@media (min-width: 768px) {
	.neo-page-title {
		margin-bottom: 2.5rem;
	}

	.neo-page-title__en {
		font-size: 1.75rem;
	}

	.neo-month-nav__current {
		font-size: 1.25rem;
	}

	.neo-month-nav__link {
		font-size: 1rem;
	}

	.neo-schedule {
		margin-bottom: 3rem;
	}

	/* HTMLカレンダー: セルの高さ・余白・文字を少し広げる（7列の構成はスマホと同じ） */
	.neo-calendar {
		margin-bottom: 3rem;
	}

	.neo-calendar__table th {
		padding: 0.375rem 0;
		font-size: 0.8125rem;
	}

	.neo-calendar__table td {
		height: 7rem;
		padding: 0.375rem 0.5rem;
		font-size: 0.75rem;
		line-height: 1.45;
	}

	.neo-calendar__date {
		font-size: 1rem;
	}

	.neo-month-event {
		padding-block: 1.5rem;
	}

	.neo-month-event__title {
		font-size: 1.25rem;
	}
}