/**
 * Marry Grace 洋婚一覧ページ専用CSS
 *
 * モック western-wedding-archive_v0.4.html から、style.cssに移動した
 * 共通コンポーネント（.section-divider / .common-cta）と、
 * western-single.css と重複する .breadcrumb を除いた専用スタイル。
 *
 * @package Marry_Grace
 * @since 0.5.0
 */

/* ==========================================================================
   FV - カテゴリFV（フル幅画像 + コピー）
   ========================================================================== */
.cat-fv {
	margin-top: 0;
}
.cat-fv__image {
	position: relative;
	aspect-ratio: 21 / 9;
	background-color: var(--color-bg-mute);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.cat-fv__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-family: var(--font-en);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
}
.cat-fv__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(58, 53, 47, 0.35) 0%, rgba(58, 53, 47, 0.1) 50%, transparent 100%);
	display: flex;
	align-items: center;
}
.cat-fv__copy {
	color: #fff;
	max-width: 34rem;
	padding: var(--space-xl);
	background: rgba(45, 40, 35, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* backdrop-filter 非対応ブラウザ向けフォールバック（不透明度を上げて可読性を確保） */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	.cat-fv__copy {
		background: rgba(45, 40, 35, 0.48);
	}
}
.cat-fv__en {
	display: inline-block;
	font-family: var(--font-en);
	font-size: var(--fs-md);
	letter-spacing: var(--ls-xwide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	margin-bottom: var(--space-md);
}
.cat-fv__title {
	font-family: var(--font-jp);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 200;
	line-height: 1.5;
	letter-spacing: 0.06em;
	margin-bottom: var(--space-md);
}
.cat-fv__lead {
	font-family: var(--font-jp);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}


/* ==========================================================================
   CONCEPT
   ========================================================================== */
.cat-concept {
	padding: var(--space-3xl) 0;
}
.cat-concept__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
}
/* 写真あり：左に縦型写真／右にキャッチ・本文 */
.cat-concept__inner--media {
	display: grid;
	grid-template-columns: 4fr 5fr;
	gap: var(--space-2xl);
	align-items: center;
}
/* 写真なし：中央寄せ（従来レイアウト） */
.cat-concept__inner:not(.cat-concept__inner--media) {
	text-align: center;
}
.cat-concept__inner:not(.cat-concept__inner--media) .cat-concept__body {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}
.cat-concept__catch {
	font-family: var(--font-jp);
	font-size: var(--fs-xl);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: 0.08em;
	color: var(--color-text);
	margin: 0 0 var(--space-lg);
}
.cat-concept__body {
	font-family: var(--font-jp);
	font-size: var(--fs-sm);
	font-weight: 300;
	line-height: 2.4;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}
.cat-concept__image {
	margin: 0;
	overflow: hidden;
}
.cat-concept__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}


/* ==========================================================================
   VENUE LIST - 大型列型・ジグザグ配置
   ========================================================================== */
.cat-venue {
	padding: var(--space-3xl) 0;
}
.cat-venue__head {
	text-align: center;
	margin-bottom: var(--space-2xl);
}
.cat-venue__en {
	display: block;
	font-family: var(--font-en);
	font-size: var(--fs-md);
	letter-spacing: var(--ls-xwide);
	color: var(--color-secondary);
	margin-bottom: var(--space-xs);
}
.cat-venue__title {
	font-family: var(--font-jp);
	font-size: var(--fs-xl);
	font-weight: 300;
	margin-bottom: var(--space-sm);
}
.cat-venue__lead {
	max-width: 36rem;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}
.cat-venue__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-lg);
}
.cat-venue__empty {
	text-align: center;
	color: var(--color-text-muted);
	padding: var(--space-2xl) 0;
}

/* 会場カード本体（縦型：画像上・本文下） */
.venue-card {
	display: flex;
	flex-direction: column;
}
.venue-card__image {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--color-bg-mute);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	margin-bottom: var(--space-md);
	text-decoration: none;
	transition: opacity var(--transition-base);
}
.venue-card__image:hover {
	opacity: 0.88;
}
.venue-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-family: var(--font-jp);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	padding: var(--space-md);
	text-align: center;
}
.venue-card__body {
	padding: 0;
}
.venue-card__num {
	font-family: var(--font-num);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--color-secondary);
	display: block;
	margin-bottom: var(--space-md);
}
.venue-card__category {
	font-family: var(--font-en);
	font-size: var(--fs-xs);
	font-weight: 400;
	letter-spacing: var(--ls-xwide);
	text-transform: uppercase;
	color: var(--color-secondary);
	display: block;
	margin-bottom: var(--space-sm);
}
.venue-card__title {
	font-family: var(--font-jp);
	font-size: var(--fs-xl);
	font-weight: 200;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--color-text);
	margin-bottom: var(--space-xs);
}
.venue-card__subtitle {
	font-family: var(--font-en);
	font-size: var(--fs-sm);
	font-weight: 300;
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	font-style: italic;
	margin-bottom: var(--space-md);
}
.venue-card__divider {
	display: block;
	width: 2rem;
	height: 1px;
	background: var(--color-border);
	margin: var(--space-md) 0;
}
.venue-card__desc {
	font-family: var(--font-jp);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-base);
	margin-bottom: var(--space-md);
}
.venue-card__meta {
	display: flex;
	gap: var(--space-lg);
	margin-bottom: var(--space-md);
	font-family: var(--font-jp);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-base);
	flex-wrap: wrap;
}
.venue-card__meta-item {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}
.venue-card__meta-label { color: var(--color-text-muted); }
.venue-card__meta-value { color: var(--color-text); font-family: var(--font-num); }
.venue-card__price {
	font-family: var(--font-jp);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}
.venue-card__price strong {
	font-family: var(--font-num);
	font-size: var(--fs-md);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0.2em;
}
.venue-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75rem 1.75rem;
	font-family: var(--font-jp);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-base);
	text-decoration: none;
	transition: all var(--transition-base);
}
.venue-card__cta:hover {
	background-color: var(--color-primary);
	color: var(--color-bg);
}
.venue-card__cta-arrow {
	font-family: var(--font-en);
	font-size: var(--fs-md);
	line-height: 1;
}


/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
	.cat-fv { padding-bottom: 6rem; }
	.cat-fv__image { aspect-ratio: 2 / 3; overflow: visible; }
	.cat-fv__overlay {
		inset: auto 0 0 0;
		align-items: flex-end;
		background: none;
		transform: translateY(40%);
	}
	.cat-fv__copy {
		max-width: 100%;
		padding: var(--space-md);
		background: rgba(45, 40, 35, 0.62);
	}
	.cat-concept__inner--media { grid-template-columns: 1fr; gap: var(--space-lg); }
	.cat-venue__list { grid-template-columns: 1fr; gap: var(--space-2xl); }
	.venue-card__title { font-size: var(--fs-xl); }
}


/**
 * 和婚 一覧ページ専用スタイル
 *
 * western-archive.css の後に読み込み、和の差別化（臙脂のさし色・縦書き・
 * 和紙風パネル）を上書き／追加する。FV・CONCEPTは和専用、会場一覧・CTAは
 * 洋婚と共通のうえ .venue-archive--japanese スコープでさし色のみ変更。
 *
 * @package Marry_Grace
 * @since 0.8.3
 */

.venue-archive--japanese {
	--wa-accent: #9E3B3B; /* 臙脂 */
	--wa-sumi: #2E2A25;   /* 墨 */
}

/* ==========================================================================
   FV（和：縦書きキャッチ＋和紙風パネル）
   ========================================================================== */
.wakon-fv {
	margin-top: 0;
}
.wakon-fv__image {
	position: relative;
	aspect-ratio: 21 / 9;
	background-color: var(--color-bg-mute);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.wakon-fv__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-family: var(--font-en);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
}
.wakon-fv__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
}
.wakon-fv__panel {
	margin-left: auto;
	width: -webkit-fit-content;
	width: fit-content;
	max-width: 30rem;
	padding: var(--space-lg) var(--space-xl);
	background: rgba(250, 247, 239, 0.86);
	border: 1px solid rgba(158, 59, 59, 0.28);
	border-radius: 3px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	.wakon-fv__panel { background: rgba(250, 247, 239, 0.95); }
}
.wakon-fv__vertical {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: var(--space-md);
}
.wakon-fv__label {
	writing-mode: vertical-rl;
	font-family: var(--font-jp);
	font-size: var(--fs-xs);
	letter-spacing: 0.34em;
	color: var(--wa-accent);
	border-right: 1px solid var(--wa-accent);
	padding-right: var(--space-xs);
}
.wakon-fv__catch {
	writing-mode: vertical-rl;
	font-family: var(--font-jp);
	font-weight: 400;
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 2;
	letter-spacing: 0.16em;
	color: var(--wa-sumi);
	margin: 0;
}
.wakon-fv__lead {
	writing-mode: vertical-rl;
	max-height: 22rem;
	margin-top: 1rem;
	font-family: var(--font-jp);
	font-size: var(--fs-sm);
	font-weight: 300;
	line-height: 2.1;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

/* ==========================================================================
   CONCEPT（和：臙脂のアクセント線）
   ========================================================================== */
/* ==========================================================================
   会場一覧・CTA（共通部品に臙脂のさし色だけ付与）
   ========================================================================== */
.venue-archive--japanese .cat-venue__en {
	color: var(--wa-accent);
}
.venue-archive--japanese .venue-card__cta {
	color: var(--wa-accent);
	border-color: var(--wa-accent);
}
.venue-archive--japanese .venue-card__cta:hover {
	background: var(--wa-accent);
	color: #fff;
}
.venue-archive--japanese .common-cta__en {
	color: var(--wa-accent);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
	.wakon-fv { padding-bottom: 10rem; }
	.wakon-fv__image { aspect-ratio: 3 / 4; overflow: visible; }
	.wakon-fv__overlay {
		inset: auto 0 0 0;
		align-items: flex-end;
		justify-content: center;
		transform: translateY(48%);
	}
	.wakon-fv__panel {
		width: -webkit-fit-content;
		width: fit-content;
		max-width: 92%;
		margin: 0 auto;
		padding: var(--space-lg);
	}
	.wakon-fv__vertical { justify-content: center; }
	.wakon-fv__label { margin-left: calc(var(--space-xs) * -1); }
	.wakon-fv__catch { font-size: var(--fs-lg); }
	.wakon-fv__lead { max-height: 16rem; }
}