/**
 * single-itinerary.css
 *
 * Phase 8d-5: Styles for the Itinerary CPT single template
 * (single-itinerary.php) and its parts.
 *
 * Depends on tokens.css, typography.css, and components.css being
 * loaded earlier in the cascade. CSS-variable fallbacks are provided
 * inline so that an unexpected variable rename will not crash the
 * layout.
 *
 * @package Kadence_Kojiki_Trail
 */

/* ---------------------------------------------------------------
 * Wrapper rhythm
 * --------------------------------------------------------------- */

.kt-itinerary {
	padding-block: var(--space-8, 4rem) var(--space-10, 5rem);
}

/* Spacing between top-level children (body wrapper / CTA / body wrapper). */
.kt-itinerary > * + * {
	margin-block-start: var(--space-10, 5rem);
}

/*
 * Body wrapper: constrained reading column for prose, places, and
 * related sections. Defined explicitly here rather than relying on
 * the .kt-narrow utility class, since that class does not constrain
 * width in this template's context.
 */
.kt-itinerary__body {
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
	box-sizing: border-box;
}

/* Spacing between sections inside a body wrapper (plan → places, etc.). */
.kt-itinerary__body > * + * {
	margin-block-start: var(--space-10, 5rem);
}

/* ---------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------- */

.kt-itinerary-hero {
	padding-block: var(--space-10, 5rem) var(--space-6, 3rem);
}

.kt-itinerary-hero__inner {
	text-align: center;
}

.kt-itinerary-hero__region-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease;
}

.kt-itinerary-hero__region-link:hover,
.kt-itinerary-hero__region-link:focus-visible {
	border-bottom-color: currentColor;
}

.kt-itinerary-hero__title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--ink, #1c1813);
	margin: 0 0 var(--space-5, 2rem);
	letter-spacing: -0.005em;
}

.kt-itinerary-hero__lead {
	font-family: var(--font-body, "Lora", Georgia, serif);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--ink, #1c1813);
	max-width: 36em;
	margin: 0 auto var(--space-6, 3rem);
}

.kt-itinerary-hero__lead p {
	margin: 0 0 1em;
}

.kt-itinerary-hero__lead p:last-child {
	margin-bottom: 0;
}

.kt-itinerary-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 1.5rem 0;
	border-block: 1px solid var(--gold-soft, rgba(176, 141, 87, 0.35));
}

.kt-itinerary-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.kt-itinerary-hero__stat-label {
	font-family: var(--font-eyebrow, "Cinzel", Georgia, serif);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--gold, #b08d57);
}

.kt-itinerary-hero__stat-value {
	font-family: var(--font-body, "Lora", Georgia, serif);
	font-size: 1rem;
	color: var(--ink, #1c1813);
}

.kt-itinerary-hero__figure {
	margin: var(--space-6, 3rem) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.kt-itinerary-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------
 * Day-by-Day Plan
 * --------------------------------------------------------------- */

.kt-itinerary-plan__content h3 {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(1.6rem, 2.4vw + 0.5rem, 2.2rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--vermilion, #a8392e);
	margin: 2.5em 0 0.6em;
	padding-block-start: 1.2em;
	border-block-start: 1px solid var(--gold-soft, rgba(176, 141, 87, 0.3));
}

.kt-itinerary-plan__content h3:first-child {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: none;
}

.kt-itinerary-plan__content h4 {
	font-family: var(--font-eyebrow, "Cinzel", Georgia, serif);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--gold, #b08d57);
	margin: 2em 0 0.6em;
	font-weight: 500;
}

.kt-itinerary-plan__content p {
	font-family: var(--font-body, "Lora", Georgia, serif);
	line-height: 1.75;
	color: var(--ink, #1c1813);
	margin: 0 0 1.2em;
}

.kt-itinerary-plan__content ul,
.kt-itinerary-plan__content ol {
	font-family: var(--font-body, "Lora", Georgia, serif);
	line-height: 1.7;
	color: var(--ink, #1c1813);
	margin: 0 0 1.2em 1.5em;
}

.kt-itinerary-plan__content li {
	margin: 0 0 0.4em;
}

.kt-itinerary-plan__content a {
	color: var(--vermilion, #a8392e);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.kt-itinerary-plan__content a:hover,
.kt-itinerary-plan__content a:focus-visible {
	color: var(--vermilion-deep, #8e2f25);
}

/* ---------------------------------------------------------------
 * Featured Places
 * --------------------------------------------------------------- */

.kt-itinerary-places__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: var(--space-5, 2rem) 0 0;
	padding: 0;
}

.kt-itinerary-place {
	margin: 0;
}

.kt-itinerary-place__link {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--paper, #f2ede0);
	border: 1px solid var(--gold-soft, rgba(176, 141, 87, 0.3));
	transition: transform 200ms ease, box-shadow 200ms ease;
	height: 100%;
}

.kt-itinerary-place__link:hover,
.kt-itinerary-place__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(28, 24, 19, 0.1);
	outline: none;
}

.kt-itinerary-place__figure {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.kt-itinerary-place__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.kt-itinerary-place__link:hover .kt-itinerary-place__figure img,
.kt-itinerary-place__link:focus-visible .kt-itinerary-place__figure img {
	transform: scale(1.04);
}

.kt-itinerary-place__body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.kt-itinerary-place__region {
	font-family: var(--font-eyebrow, "Cinzel", Georgia, serif);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--gold, #b08d57);
	display: block;
	margin: 0 0 0.5em;
}

.kt-itinerary-place__title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink, #1c1813);
	margin: 0;
}

/* ---------------------------------------------------------------
 * Volume CTA
 * --------------------------------------------------------------- */

.kt-itinerary-cta {
	background: var(--ink, #1c1813);
	color: var(--paper, #f2ede0);
	padding: var(--space-8, 4rem) var(--space-5, 2rem);
}

.kt-itinerary-cta__inner {
	max-width: 36em;
	margin: 0 auto;
	text-align: center;
}

.kt-itinerary-cta__eyebrow {
	color: var(--gold, #b08d57);
	margin: 0 0 1rem;
}

.kt-itinerary-cta__title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(1.8rem, 3.2vw + 0.5rem, 2.6rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--paper, #f2ede0);
	margin: 0 0 1.2rem;
}

.kt-itinerary-cta__excerpt {
	font-family: var(--font-body, "Lora", Georgia, serif);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1.8rem;
	color: rgba(242, 237, 224, 0.85);
}

.kt-itinerary-cta__excerpt p {
	margin: 0 0 0.8em;
	color: rgba(242, 237, 224, 0.85);
}

.kt-itinerary-cta__excerpt p:last-child {
	margin-bottom: 0;
}

.kt-itinerary-cta__action {
	margin: 0;
}

.kt-itinerary-cta__button {
	background: var(--vermilion, #a8392e);
	color: var(--paper, #f2ede0);
	border-color: transparent;
}

.kt-itinerary-cta__button:hover,
.kt-itinerary-cta__button:focus-visible {
	background: var(--vermilion-deep, #8e2f25);
	color: var(--paper, #f2ede0);
}

/* ---------------------------------------------------------------
 * Related Itineraries
 * --------------------------------------------------------------- */

.kt-itinerary-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: var(--space-5, 2rem) 0 0;
	padding: 0;
}

.kt-itinerary-related__item {
	margin: 0;
}

.kt-itinerary-related__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.kt-itinerary-related__figure {
	margin: 0 0 1rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.kt-itinerary-related__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.kt-itinerary-related__link:hover .kt-itinerary-related__figure img,
.kt-itinerary-related__link:focus-visible .kt-itinerary-related__figure img {
	transform: scale(1.04);
}

.kt-itinerary-related__meta {
	font-family: var(--font-eyebrow, "Cinzel", Georgia, serif);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--gold, #b08d57);
	display: block;
	margin: 0 0 0.4em;
}

.kt-itinerary-related__title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink, #1c1813);
	margin: 0;
	transition: color 200ms ease;
}

.kt-itinerary-related__link:hover .kt-itinerary-related__title,
.kt-itinerary-related__link:focus-visible .kt-itinerary-related__title {
	color: var(--vermilion, #a8392e);
}

/* ---------------------------------------------------------------
 * Mobile adjustments
 * --------------------------------------------------------------- */

@media (max-width: 600px) {
	.kt-itinerary-hero {
		padding-block: var(--space-7, 3.5rem) var(--space-5, 2rem);
	}

	.kt-itinerary-hero__stats {
		gap: 1.5rem;
		padding: 1.25rem 0;
	}

	.kt-itinerary-cta {
		padding: var(--space-7, 3.5rem) var(--space-4, 1.5rem);
	}

	.kt-itinerary > * + * {
		margin-block-start: var(--space-9, 4.5rem);
	}

	.kt-itinerary__body > * + * {
		margin-block-start: var(--space-9, 4.5rem);
	}
}