/*
 * taxonomy-region.css — Region Archive Styles
 *
 * Layout for the region hub page (taxonomy-region.php):
 *   - Hero (eyebrow, roman numeral, japanese, title, lede, stats)
 *   - Intro 2-column section
 *   - Sacred Sites numbered list
 *   - Connected Myths list
 *   - Featured-volume product CTA wrapper
 *
 * Block patterns reused inside this template (e.g. .kt-product-cta)
 * are styled in components.css. This file only adds region-specific
 * structure.
 *
 * Loaded conditionally on is_tax( 'region' ) only.
 *
 * @package Kadence_Kojiki_Trail
 */

/* ====================================================================
 * HERO
 * ================================================================== */

.kt-region-hero {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 80px 48px 64px;
}

.kt-region-hero-inner {
	max-width: 920px;
}

.kt-region-eyebrow {
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin: 0 0 32px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.kt-region-eyebrow::before {
	content: '';
	width: 48px;
	height: 1px;
	background: var(--vermillion);
	flex-shrink: 0;
}

.kt-region-roman {
	font-family: var(--font-display);
	font-size: 110px;
	font-weight: 300;
	color: var(--vermillion);
	line-height: 0.85;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
}

.kt-region-jp {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.6vw, 32px);
	color: var(--ink-soft);
	margin: 0 0 24px;
	font-weight: 400;
}

.kt-region-jp em {
	font-style: italic;
	color: var(--ink-faint);
}

.kt-region-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(48px, 6vw, 88px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: 0 0 32px;
	color: var(--ink);
	max-width: 920px;
}

.kt-region-title em {
	font-style: italic;
	color: var(--vermillion);
	font-weight: 400;
}

.kt-region-lede {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.45;
	color: var(--ink-soft);
	max-width: 760px;
	margin: 0 0 56px;
}

.kt-region-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding: 32px 0;
	margin: 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.kt-region-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kt-region-stat-num {
	font-family: var(--font-display);
	font-size: clamp(36px, 4vw, 48px);
	font-weight: 300;
	color: var(--vermillion);
	line-height: 1;
	margin: 0;
}

.kt-region-stat-label {
	font-family: var(--font-label);
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0;
}

/* ====================================================================
 * INTRO 2-COLUMN
 * ================================================================== */

.kt-region-intro {
	background: var(--paper-deep);
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	padding: 100px 48px;
}

.kt-region-intro-inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.kt-region-intro-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: start;
}

.kt-region-intro-eyebrow {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin: 0 0 24px;
}

.kt-region-intro-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--ink);
}

.kt-region-intro-title em {
	font-style: italic;
	color: var(--vermillion);
	font-weight: 400;
}

.kt-region-intro-body {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.78;
	color: var(--ink-soft);
}

.kt-region-intro-body p {
	margin-bottom: 24px;
}

.kt-region-intro-body p:last-child {
	margin-bottom: 0;
}

/* ====================================================================
 * SECTION HEADER (shared by sites + myths)
 * ================================================================== */

.kt-region-section {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 100px 48px 80px;
}

.kt-region-section-inner {
	max-width: 920px;
}

.kt-region-section-header {
	margin-bottom: 60px;
}

.kt-region-section-num {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--vermillion);
	display: block;
	margin-bottom: 24px;
}

.kt-region-section-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(32px, 4.5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--ink);
}

.kt-region-section-title em {
	font-style: italic;
	color: var(--vermillion);
	font-weight: 400;
}

/* ====================================================================
 * SACRED SITES LIST
 * ================================================================== */

.kt-sites {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
}

.kt-site {
	border-bottom: 1px solid var(--hairline);
	transition: background 0.3s;
}

.kt-site:hover {
	background: var(--paper-deep);
}

.kt-site-link {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 32px;
	padding: 36px 0;
	color: var(--ink);
	text-decoration: none;
	border: none;
}

/* Override generic article-link underline for site links. */
.kt-site-link,
.kt-site-link:hover {
	border-bottom: none;
}

.kt-site-num {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 36px;
	font-weight: 300;
	color: var(--vermillion);
	line-height: 1;
	text-align: right;
	padding-top: 6px;
}

.kt-site-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kt-site-category {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0;
}

.kt-site-title {
	font-family: var(--font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--ink);
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
}

.kt-site-title-jp {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.65em;
	color: var(--ink-faint);
	font-weight: 400;
}

.kt-site-text {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 4px 0 0;
	max-width: 640px;
}

.kt-site-myth-link {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin: 8px 0 0;
}

.kt-site-myth-link em {
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink);
	margin: 0 4px;
}

/* ====================================================================
 * CONNECTED MYTHS SECTION
 * ================================================================== */

.kt-region-myths {
	background: var(--paper-deep);
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	max-width: 100%;
	padding: 100px 48px;
}

.kt-region-myth-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline);
}

.kt-region-myth-item {
	border-bottom: 1px solid var(--hairline);
	transition: background 0.3s;
}

.kt-region-myth-item:hover {
	background: var(--paper);
}

.kt-region-myth-link {
	display: grid;
	grid-template-columns: 80px 1fr 40px;
	gap: 24px;
	padding: 32px 0;
	color: var(--ink);
	text-decoration: none;
	align-items: center;
	border: none;
}

.kt-region-myth-link,
.kt-region-myth-link:hover {
	border-bottom: none;
}

.kt-region-myth-num {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 28px;
	font-weight: 300;
	color: var(--vermillion);
	line-height: 1;
	text-align: right;
}

.kt-region-myth-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kt-region-myth-title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--ink);
	margin: 0;
}

.kt-region-myth-jp {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 14px;
	color: var(--ink-faint);
	margin: 0;
}

.kt-region-myth-sub {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 4px 0 0;
	max-width: 600px;
}

.kt-region-myth-arrow {
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--vermillion);
	text-align: center;
	transition: transform 0.3s;
}

.kt-region-myth-item:hover .kt-region-myth-arrow {
	transform: translateX(6px);
}

/* ====================================================================
 * REGION PRODUCT CTA WRAPPER
 * ================================================================== */

.kt-region-product-section {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 100px 48px;
}

.kt-region-product-inner {
	max-width: 760px;
	margin: 0 auto;
}

/* ====================================================================
 * RESPONSIVE
 * ================================================================== */

@media (max-width: 720px) {
	.kt-region-hero {
		padding: 60px 24px 48px;
	}

	.kt-region-roman {
		font-size: 80px;
	}

	.kt-region-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.kt-region-intro {
		padding: 60px 24px;
	}

	.kt-region-intro-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.kt-region-section {
		padding: 60px 24px;
	}

	.kt-region-myths {
		padding: 60px 24px;
	}

	.kt-site-link {
		grid-template-columns: 50px 1fr;
		gap: 16px;
		padding: 28px 0;
	}

	.kt-site-num {
		font-size: 24px;
	}

	.kt-region-myth-link {
		grid-template-columns: 50px 1fr 30px;
		gap: 16px;
		padding: 24px 0;
	}

	.kt-region-myth-num {
		font-size: 22px;
	}

	.kt-region-product-section {
		padding: 60px 24px;
	}
}

/* ========================================================================
 * Phase 8d-7 — Taxonomy Archive Breadcrumb Hide Patch
 *
 * 問題:
 *   /regions/{slug}/ (taxonomy-region.php) で生 HTML の <ul><li> として
 *   breadcrumb が浮いて表示される。CSS が当たっていない。
 *
 * 解決方針:
 *   サイト全体で breadcrumb は使わない方針(他のページには出ていない、
 *   Hero の eyebrow で位置感を伝える編集ブランド統一)。
 *   class 名が不明なので、複数の候補を網羅して非表示。
 *
 * 適用先:
 *   taxonomy-region.css の末尾に追加(SFTP で開いて末尾に貼り付け)
 *
 * @since   Phase 8d-7
 * ====================================================================== */

/* 一般的な breadcrumb class 名候補 — taxonomy archive 限定で適用 */
body.tax-region nav.kt-breadcrumb,
body.tax-region .kt-breadcrumb,
body.tax-region nav.breadcrumb,
body.tax-region .breadcrumb,
body.tax-region .breadcrumbs,
body.tax-region .breadcrumb-nav,
body.tax-region .breadcrumb-list,
body.tax-region .kt-region-breadcrumb,
body.tax-region .kt-taxonomy-breadcrumb,
body.tax-region .kt-tax-breadcrumb,
body.tax-region .yoast-breadcrumb,
body.tax-region .yoast-breadcrumbs,
body.tax-region #breadcrumbs,
body.tax-region .site-breadcrumbs,
body.tax-region .kadence-breadcrumb,
body.tax-region .kadence-breadcrumbs,
body.tax-region nav[aria-label="breadcrumb"],
body.tax-region nav[aria-label="Breadcrumb"],
body.tax-region nav[aria-label*="readcrumb"] {
	display: none !important;
}

/* class 名フォールバック: taxonomy archive で main 直下の最初の <ul> または <nav> を非表示
 * ※ Hero セクション(.kt-region-hero)の前に浮いている要素をターゲット */
body.tax-region .site-main > nav:first-of-type,
body.tax-region .site-main > ul:first-of-type,
body.tax-region #main > nav:first-of-type,
body.tax-region #main > ul:first-of-type,
body.tax-region #content > nav:first-of-type,
body.tax-region #content > ul:first-of-type {
	display: none !important;
}

/* Hero セクションより前に出る breadcrumb をターゲット
 * (一般的に breadcrumb は Hero の前に出る) */
body.tax-region .kt-region-hero ~ ul,
body.tax-region .kt-region-hero ~ nav {
	display: none !important;
}

/* 最後の防御: archive ページで最初に出る生 ul (kadence デフォルト等) */
body.archive.tax-region main > ul:not([class]):first-child,
body.archive.tax-region article > ul:not([class]):first-child {
	display: none !important;
}