/**
 * Single Place Styles — Kojiki Trail
 *
 * Page-template-scoped styles for single-place.php. Uses existing
 * tokens from tokens.css and matches the editorial typography
 * established by single-myth.css.
 *
 * Class prefix: `place-` (template-scope).
 *
 * @package Kadence_Kojiki_Trail
 * @since   Phase 8d-2
 */

/* =====================================================================
 * MAIN — base layout container
 * ===================================================================== */

.place-main {
	background: var(--paper);
	color: var(--ink);
}

/* =====================================================================
 * BREADCRUMB
 * ===================================================================== */

.place-breadcrumb {
	max-width: 880px;
	margin: 0 auto;
	padding: 60px 48px 0;
}

.place-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.place-breadcrumb-list li + li::before {
	content: '·';
	margin: 0 14px;
	color: var(--ink-faint);
}

.place-breadcrumb-list a {
	color: var(--ink-faint);
	text-decoration: none;
	transition: color 0.3s;
}

.place-breadcrumb-list a:hover,
.place-breadcrumb-list a:focus-visible {
	color: var(--vermillion);
}

.place-breadcrumb-list li[aria-current="page"] {
	color: var(--ink);
}

/* =====================================================================
 * ARTICLE HEADER
 * ===================================================================== */

.place-header {
	max-width: 880px;
	margin: 0 auto;
	padding: 56px 48px 32px;
}

.place-eyebrow {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 11px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.place-eyebrow::before {
	content: '';
	width: 48px;
	height: 1px;
	background: var(--vermillion);
}

.place-title {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-weight: 300;
	font-size: clamp(48px, 6vw, 88px);
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 0 0 24px;
	color: var(--ink);
}

.place-japanese {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--ink-soft);
	margin: 0 0 32px;
	letter-spacing: 0.02em;
}

.place-japanese-kanji {
	color: var(--ink);
	font-weight: 400;
}

.place-japanese-romaji {
	font-style: italic;
	color: var(--ink-soft);
}

.place-japanese-sep {
	color: var(--vermillion);
	margin: 0 4px;
}

.place-subtitle {
	font-family: var(--font-body, 'Lora'), serif;
	font-size: 20px;
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: 720px;
	margin: 0 0 48px;
	font-style: italic;
}

.place-meta {
	display: flex;
	gap: 32px;
	padding: 24px 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	flex-wrap: wrap;
}

.place-meta-item {
	flex: 1;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.place-meta-label {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.place-meta-value {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 17px;
	color: var(--ink);
	font-weight: 400;
}

/* Hero image (optional) */
.place-hero-figure {
	margin: 56px 0 0;
	padding: 0;
}

.place-hero-image {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--hairline);
}

.place-hero-caption {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: 12px;
	text-align: right;
}

/* =====================================================================
 * ARTICLE BODY (the_content)
 * ===================================================================== */

.place-article {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 48px 80px;
	font-family: var(--font-body, 'Lora'), serif;
	font-size: 18px;
	line-height: 1.85;
	color: var(--ink);
}

.place-article > p:first-of-type::first-letter {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 4.5em;
	float: left;
	line-height: 0.85;
	margin: 8px 14px 0 0;
	color: var(--vermillion);
	font-weight: 400;
}

.place-article p {
	margin: 0 0 24px;
}

.place-article h2,
.place-article h3,
.place-article h4 {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: -0.01em;
	margin: 56px 0 20px;
	line-height: 1.2;
}

.place-article h2 { font-size: 36px; }
.place-article h3 { font-size: 28px; }
.place-article h4 { font-size: 22px; }

.place-article a {
	color: var(--vermillion);
	border-bottom: 1px solid rgba(168, 57, 46, 0.3);
	transition: border-color 0.3s, color 0.3s;
}

.place-article a:hover,
.place-article a:focus-visible {
	color: var(--vermillion-deep);
	border-bottom-color: var(--vermillion);
}

.place-article blockquote {
	margin: 40px 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--gold);
	font-style: italic;
	color: var(--ink-soft);
}

.place-article ul,
.place-article ol {
	margin: 0 0 24px 24px;
	padding: 0;
}

.place-article li {
	margin-bottom: 8px;
}

.place-article hr {
	border: none;
	border-top: 1px solid var(--hairline);
	margin: 56px 0;
}

/* =====================================================================
 * PRACTICAL INFO
 * ===================================================================== */

.place-practical {
	background: var(--paper-deep);
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	padding: 80px 48px;
}

.place-practical-inner {
	max-width: 880px;
	margin: 0 auto;
}

.place-practical-header {
	margin-bottom: 48px;
}

.place-practical-eyebrow {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 11px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 16px;
	display: block;
}

.place-practical-title {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--ink);
}

.place-practical-list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.place-practical-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 32px;
	padding: 20px 0;
	border-top: 1px solid var(--hairline);
	align-items: baseline;
}

.place-practical-row:last-child {
	border-bottom: 1px solid var(--hairline);
}

.place-practical-label {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0;
}

.place-practical-value {
	font-family: var(--font-body, 'Lora'), serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
	margin: 0;
}

.place-practical-row-address-jp .place-practical-value {
	font-family: var(--font-body, 'Lora'), 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

.place-practical-row-access .place-practical-value {
	white-space: normal;
}

/* =====================================================================
 * MAP LINK
 * ===================================================================== */

.place-map-link {
	padding: 56px 48px;
	border-bottom: 1px solid var(--hairline);
}

.place-map-link-inner {
	max-width: 880px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
}

.place-map-link-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.place-map-link-eyebrow {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--vermillion);
}

.place-map-link-loc {
	font-family: var(--font-body, 'Lora'), serif;
	font-size: 16px;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.5;
}

.place-map-link-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink);
	border: 1px solid var(--ink);
	padding: 16px 28px;
	transition: background 0.3s, color 0.3s;
	text-decoration: none;
	white-space: nowrap;
}

.place-map-link-cta:hover,
.place-map-link-cta:focus-visible {
	background: var(--ink);
	color: var(--paper);
	outline: none;
}

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

.place-connected-myths {
	padding: 100px 48px;
}

.place-connected-myths-inner {
	max-width: 880px;
	margin: 0 auto;
}

.place-connected-myths-header {
	margin-bottom: 48px;
}

.place-connected-myths-eyebrow {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 11px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 16px;
	display: block;
}

.place-connected-myths-title {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--ink);
}

.place-connected-myths-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--hairline);
}

.place-connected-myth {
	border-bottom: 1px solid var(--hairline);
}

.place-connected-myth-link {
	display: grid;
	grid-template-columns: 88px 1fr 32px;
	gap: 32px;
	padding: 32px 0;
	color: inherit;
	text-decoration: none;
	transition: background 0.3s;
	align-items: start;
}

.place-connected-myth-link:hover,
.place-connected-myth-link:focus-visible {
	background: var(--paper-deep);
	outline: none;
}

.place-connected-myth-link:hover .place-connected-myth-arrow,
.place-connected-myth-link:focus-visible .place-connected-myth-arrow {
	transform: translateX(8px);
	color: var(--vermillion);
}

.place-connected-myth-roman {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 56px;
	font-weight: 300;
	color: var(--vermillion);
	line-height: 1;
	text-align: center;
}

.place-connected-myth-body {
	min-width: 0;
}

.place-connected-myth-title {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 6px;
	color: var(--ink);
}

.place-connected-myth-japanese {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 16px;
	color: var(--ink-soft);
	margin-bottom: 12px;
	font-style: italic;
}

.place-connected-myth-subtitle {
	font-family: var(--font-body, 'Lora'), serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 0 16px;
}

.place-connected-myth-meta {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.place-connected-myth-arrow {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 24px;
	color: var(--ink-soft);
	transition: transform 0.3s, color 0.3s;
	align-self: center;
	text-align: right;
}

/* =====================================================================
 * SIBLING PLACES
 * ===================================================================== */

.place-siblings {
	background: var(--ink);
	color: var(--paper);
	padding: 100px 48px;
}

.place-siblings-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.place-siblings-header {
	margin-bottom: 56px;
	text-align: center;
}

.place-siblings-eyebrow {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 11px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 16px;
	display: block;
}

.place-siblings-title {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--paper);
}

.place-siblings-list {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(242, 237, 224, 0.15);
}

.place-sibling {
	border-right: 1px solid rgba(242, 237, 224, 0.15);
	border-bottom: 1px solid rgba(242, 237, 224, 0.15);
}

.place-sibling:last-child {
	border-right: none;
}

.place-sibling-link {
	display: flex;
	flex-direction: column;
	padding: 40px 32px;
	min-height: 320px;
	color: inherit;
	text-decoration: none;
	transition: background 0.3s;
	position: relative;
}

.place-sibling-link:hover,
.place-sibling-link:focus-visible {
	background: rgba(242, 237, 224, 0.04);
	outline: none;
}

.place-sibling-link:hover .place-sibling-arrow,
.place-sibling-link:focus-visible .place-sibling-arrow {
	transform: translateX(8px);
	color: var(--gold);
}

.place-sibling-type {
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 16px;
}

.place-sibling-title {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--paper);
}

.place-sibling-japanese {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 15px;
	font-style: italic;
	color: rgba(242, 237, 224, 0.7);
	margin-bottom: 20px;
}

.place-sibling-note {
	font-family: var(--font-body, 'Lora'), serif;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(242, 237, 224, 0.7);
	margin: 0;
	flex: 1;
}

.place-sibling-arrow {
	font-family: var(--font-serif, 'Cormorant Garamond'), serif;
	font-size: 22px;
	color: rgba(242, 237, 224, 0.6);
	margin-top: 24px;
	transition: transform 0.3s, color 0.3s;
}

.place-siblings-cta {
	text-align: center;
}

.place-siblings-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display, 'Cinzel'), serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 1px solid rgba(176, 141, 87, 0.4);
	padding-bottom: 6px;
	text-decoration: none;
	transition: color 0.3s, border-color 0.3s;
}

.place-siblings-cta-link:hover,
.place-siblings-cta-link:focus-visible {
	color: var(--paper);
	border-bottom-color: var(--paper);
}

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

@media (max-width: 1024px) {
	.place-breadcrumb,
	.place-header,
	.place-article,
	.place-map-link,
	.place-connected-myths,
	.place-siblings {
		padding-left: 32px;
		padding-right: 32px;
	}
	.place-practical {
		padding-left: 32px;
		padding-right: 32px;
	}
	.place-siblings-list {
		grid-template-columns: 1fr;
	}
	.place-sibling {
		border-right: none;
	}
	.place-sibling:last-child {
		border-bottom: none;
	}
}

@media (max-width: 720px) {
	.place-breadcrumb {
		padding: 32px 24px 0;
	}
	.place-header {
		padding: 32px 24px 24px;
	}
	.place-article {
		padding: 40px 24px 60px;
		font-size: 17px;
	}
	.place-article > p:first-of-type::first-letter {
		font-size: 3.5em;
	}
	.place-meta {
		gap: 24px;
	}
	.place-practical {
		padding: 60px 24px;
	}
	.place-practical-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.place-map-link {
		padding: 40px 24px;
	}
	.place-map-link-inner {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.place-map-link-cta {
		justify-self: start;
	}
	.place-connected-myths {
		padding: 60px 24px;
	}
	.place-connected-myth-link {
		grid-template-columns: 64px 1fr;
		gap: 24px;
	}
	.place-connected-myth-arrow {
		display: none;
	}
	.place-connected-myth-roman {
		font-size: 44px;
	}
	.place-connected-myth-title {
		font-size: 24px;
	}
	.place-siblings {
		padding: 60px 24px;
	}
	.place-sibling-link {
		min-height: 0;
		padding: 32px 24px;
	}
}