/* プランカード（hilton/plan-card）と対象プラングリッド（hilton/related-plans）。 */

/* ===== 縦カード（既定） ===== */
.plan-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
/* 本文内では post-content の a 下線（blocks.css）を打ち消す（カード全体がリンクのため）。 */
.related-plans .plan-card,
.related-content .content-card,
.plans-grid .plan-card,
.content-grid .content-card {
	text-decoration: none;
}
/* カード画像は画像本来の比率で全体表示（object-fit:cover でトリミングしない）。 */
.plan-card .ph {
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f4f2f3);
}
.plan-card .ph img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}
.plan-card:hover .ph img {
	transform: scale(1.04);
}
.plan-card .body {
	padding: 8px 0 0;
}
.plan-card .plan-card__title {
	font-family: var(--wp--custom--brand-heading);
	font-weight: var(--wp--custom--heading-weight-sub, 800);
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--text, #000);
	margin: 0;
}
.plan-card .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px;
}
.plan-card .tag {
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	letter-spacing: 0.04em;
	color: var(--aureate, #b89766);
	background: color-mix(in srgb, var(--aureate, #b89766) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--aureate, #b89766) 25%, transparent);
}
.plan-card .body p {
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 13px;
	line-height: 1.85;
	color: #333;
	letter-spacing: 0.02em;
	margin: 10px 0 0;
}

/* ===== 横カード（layout=horizontal / plan-card--horizontal） ===== */
.plan-card--horizontal {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 28px;
	align-items: center;
	max-width: 880px;
	margin: 0 auto;
}
.plan-card--horizontal .ph img {
	height: auto;
}
.plan-card--horizontal .body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: 0;
}
.plan-card--horizontal .plan-card__title {
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text, #111);
}
.plan-card--horizontal .tags,
.plan-card--horizontal .body p {
	margin-top: 0;
}
/* 詳細ボタンは core/button の is-style-outline（secondary）で見せる（枠線・余白はその CSS が担う）。
   ここでは配置（上余白）と、カード全体ホバー時の反転だけ持たせる。 */
.plan-detail-btn {
	margin-top: 16px;
	display: flex;
	justify-content: center;
}
.plan-card:hover .plan-detail-btn .wp-block-button__link {
	background: var(--aureate, #b89766);
	color: var(--wp--preset--color--base, #fff);
}
@media (max-width: 700px) {
	.plan-card--horizontal {
		grid-template-columns: 1fr;
		gap: 14px;
		max-width: 480px;
	}
}

/* ===== 対象プラン／対象コンテンツ（本文末尾の見出し＋カードグリッド） ===== */
.related-plans,
.related-content {
	margin-top: var(--wp--preset--spacing--section);
	padding-bottom: var(--wp--preset--spacing--section);
}
/* CTA 帯直後は section 余白を取らずに密着させる。 */
.restaurant-reserve-cta + .related-plans,
.restaurant-reserve-cta + .related-content {
	margin-top: 0;
}
.related-plans .sub-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin: 0 0 clamp(16px, 2.4vw, 24px);
	flex-wrap: wrap;
}
.related-plans .sub-head .wp-block-heading {
	margin: 0;
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-weight: 700;
	font-size: clamp(17px, 1.8vw, 21px);
	letter-spacing: 0.06em;
	color: var(--aureate, #b89766);
}
.related-plans .all-link {
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 12px;
	font-weight: 500;
	color: var(--aureate, #b89766);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	white-space: nowrap;
}
.plans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 24px;
}
@media (max-width: 900px) {
	.plans-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.plans-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

/* ===== コンテンツカード（hilton/content-card）と対象コンテンツグリッド（related-content） ===== */
.content-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
/* カード画像は画像本来の比率で全体表示（トリミングしない）。 */
.content-card .ph {
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f4f2f3);
}
.content-card .ph img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}
.content-card:hover .ph img { transform: scale(1.04); }
.content-card .body { padding: 12px 0 0; }
.content-card .content-card__title {
	font-family: var(--wp--custom--brand-heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--text, #000);
	margin: 0;
}
.content-card .eyebrow {
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--aureate, #b89766);
	margin: 6px 0 0;
}

/* 横カード（layout=horizontal） */
.content-card--horizontal {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 28px;
	align-items: center;
	max-width: 880px;
}
.content-card--horizontal .body { padding: 0; }
@media (max-width: 700px) {
	.content-card--horizontal { grid-template-columns: 1fr; gap: 14px; max-width: 480px; }
}

/* 対象◯◯ 見出し（プランページ下部）。 */
.related-content .sub-head {
	margin: 0 0 clamp(16px, 2.4vw, 24px);
}
.related-content .sub-head .wp-block-heading {
	margin: 0;
	font-family: var(--wp--custom--brand-heading);
	font-weight: 700;
	font-size: clamp(17px, 1.8vw, 21px);
	letter-spacing: 0.06em;
	color: var(--aureate, #b89766);
}
.content-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 24px;
}
@media (max-width: 900px) {
	.content-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.content-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

/* ===== プラン一覧のカテゴリー絞り込み（hilton/plan-archive） =====
   nav.plan-filter は要素＋クラスの組み合わせで WP の余白リセット（:where 0,0,0）に勝たせる。 */
nav.plan-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-bottom: clamp(32px, 4vw, 48px);
}
.plan-filter .filter-btn {
	display: inline-block;
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 8px 16px;
	background: transparent;
	color: #555;
	border: 1px solid var(--wp--preset--color--line, #d8d0cc);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.plan-filter .filter-btn:hover {
	color: var(--wp--preset--color--brand-primary, #b89766);
	border-color: var(--wp--preset--color--brand-primary, #b89766);
}
.plan-filter .filter-btn.active {
	background: var(--wp--preset--color--brand-primary, #b89766);
	color: #fff;
	border-color: var(--wp--preset--color--brand-primary, #b89766);
}

/* プラン詳細: 対象レストラン名（eyebrow）。余白はブロック属性 style.spacing.margin で持つ。 */
.plan-restaurant-eyebrow {
	font-family: var(--wp--custom--brand-sub-heading, var(--wp--custom--brand-heading));
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted, #6e6e6e);
	/* タイトル（h1）に合わせてレストラン名・タグも中央寄せに統一する。 */
	text-align: center;
}
.plan-restaurant-eyebrow a { color: inherit; text-decoration: none; border-bottom: 0; }
.plan-restaurant-eyebrow a:hover { color: var(--wp--preset--color--brand-primary, #b89766); }

/* プラン詳細: タグ一覧。プランカード .tag と同じトーン。余白はブロック属性で持つ。 */
.plan-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
}
.plan-tags .plan-tag {
	display: inline-block;
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	letter-spacing: 0.04em;
	color: var(--aureate, #b89766);
	background: color-mix(in srgb, var(--aureate, #b89766) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--aureate, #b89766) 25%, transparent);
}

/* eGift 等の「贈り方・受け取り方」写真3点。PC は等幅で横3枚並べ、SP は縦積み。 */
.gift-steps { flex-wrap: nowrap; align-items: flex-start; }
.gift-steps > .wp-block-image { flex: 1 1 0; margin: 0; max-width: none; }
.gift-steps > .wp-block-image img { width: 100%; height: auto; }
@media (max-width: 600px) {
	.gift-steps { flex-direction: column; align-items: center; }
	.gift-steps > .wp-block-image { width: 100%; max-width: 360px; }
}