/*
 * components.css — Block Pattern Styles
 *
 * Visual styling for all 14 KT block patterns registered in Phase 7.
 * Each block uses the .kt-* class prefix matching the namespaces in
 * patterns/*.php so the editor and front-end share one stylesheet.
 *
 * Source attribution:
 *   - Patterns 1-7 (numbered-h2 through quick-answer): styles from
 *     Document C reference implementation, lightly adapted.
 *   - Patterns 8-9, 14 (visit-place, product-cta, three-cards): styles
 *     extracted from article-susanoo.html and renamed to the kt-* scheme.
 *   - Patterns 10-13 (newsletter, compare-table, deity-list,
 *     region-grid): newly designed in Phase 8a using the same tokens
 *     and visual language as the rest.
 *
 * @package Kadence_Kojiki_Trail
 */

/* ====================================================================
 * Pattern 1 — Numbered Heading (.kt-numbered-h2)
 * ================================================================== */

.kt-numbered-h2 {
	margin: 80px 0 32px;
}

.kt-numbered-h2 .kt-h-with-num {
	display: flex;
	align-items: baseline;
	gap: 28px;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 8px;
}

.kt-numbered-h2 .kt-h-with-num em {
	font-style: italic;
	color: var(--vermillion);
}

.kt-h-num {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.6em;
	color: var(--ink-faint);
	flex-shrink: 0;
}

.kt-h-sub {
	font-family: var(--font-label);
	font-size: var(--fs-label);
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	color: var(--vermillion);
	margin: 0 0 32px;
}

/* ====================================================================
 * Pattern 2 — Pull Quote (.kt-pullquote)
 * ================================================================== */

.kt-pullquote {
	margin: 56px -32px;
	padding: 32px 48px;
	border-top: 1px solid var(--vermillion);
	border-bottom: 1px solid var(--vermillion);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.4;
	color: var(--ink);
	text-align: center;
	position: relative;
}

.kt-pullquote::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -8px;
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	background: var(--paper);
	border: 1px solid var(--vermillion);
	border-radius: 50%;
}

/* ====================================================================
 * Pattern 3 — Original Kojiki Quote (.kt-original)
 * ================================================================== */

.kt-original {
	margin: 48px 0;
	padding: 36px 40px;
	background: var(--paper-deep);
	border-left: 3px solid var(--vermillion);
}

.kt-original-label {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 16px;
}

.kt-original-text {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 22px;
	line-height: 1.55;
	color: var(--ink);
	font-weight: 400;
	margin-bottom: 16px;
}

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

/* ====================================================================
 * Pattern 4 — Editor's Note (.kt-editor-note)
 * ================================================================== */

.kt-editor-note {
	margin: 40px 0;
	padding: 24px 0 24px 32px;
	border-left: 2px solid var(--gold);
	font-style: italic;
	color: var(--ink-soft);
	font-size: 17px;
	line-height: 1.7;
}

.kt-editor-note p { margin-bottom: 0; }

.kt-editor-note strong {
	font-style: normal;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
}

/* ====================================================================
 * Pattern 5 — Drop-Cap Lede (.kt-lede)
 * ================================================================== */

.kt-lede {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-lede);
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 48px;
}

.kt-lede::first-letter {
	font-family: var(--font-display);
	font-size: 5em;
	float: left;
	line-height: 0.85;
	margin: 8px 14px 0 0;
	color: var(--vermillion);
	font-weight: 400;
}

/* ====================================================================
 * Pattern 6 — Ornament Divider (.kt-ornament)
 * ================================================================== */

.kt-ornament {
	text-align: center;
	margin: 64px 0;
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--vermillion);
	letter-spacing: 1.2em;
	user-select: none;
}

/* ====================================================================
 * Pattern 7 — Quick Answer Box (.kt-quick-answer)
 * ================================================================== */

.kt-quick-answer {
	background: var(--paper-deep);
	border-left: 3px solid var(--vermillion);
	padding: 28px 32px;
	margin: 24px 0 40px;
}

.kt-qa-label {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 12px;
}

.kt-quick-answer p:last-child {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
}

/* ====================================================================
 * Pattern 8 — Visit the Place CTA (.kt-visit-place)
 * Adapted from article-susanoo.html .visit-place
 * ================================================================== */

.kt-visit-place {
	margin: 56px 0;
	padding: 40px 44px;
	background: var(--ink);
	color: var(--paper);
	position: relative;
	overflow: hidden;
}

.kt-vp-label {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 12px;
	position: relative;
}

.kt-vp-title {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 12px;
	color: var(--paper);
	position: relative;
}

.kt-vp-title em {
	font-style: italic;
	color: var(--gold);
}

.kt-vp-text {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(242, 237, 224, 0.8);
	margin-bottom: 24px;
	position: relative;
	max-width: 540px;
}

.kt-vp-link {
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 1px solid var(--gold);
	padding-bottom: 4px;
	position: relative;
	display: inline-block;
}

.kt-vp-link:hover {
	color: var(--paper);
	border-bottom-color: var(--paper);
}

/* ====================================================================
 * Pattern 9 — Product CTA Inline (.kt-product-cta)
 * Adapted from article-susanoo.html .product-cta
 * ================================================================== */

.kt-product-cta {
	margin: 60px 0;
	padding: 48px 44px;
	background: var(--paper-deep);
	border: 1px solid var(--hairline);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.kt-pcta-vertical {
	position: absolute;
	top: 50%;
	left: -10px;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	font-family: var(--font-display);
	font-size: 140px;
	color: var(--vermillion);
	opacity: 0.06;
	user-select: none;
	pointer-events: none;
}

.kt-pcta-eyebrow {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 16px;
	position: relative;
}

.kt-pcta-title {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 16px;
	position: relative;
}

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

.kt-pcta-text {
	font-size: 16px;
	color: var(--ink-soft);
	max-width: 480px;
	margin: 0 auto 28px;
	position: relative;
	line-height: 1.7;
}

.kt-pcta-btn {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	padding: 16px 32px;
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	transition: background 0.3s;
	position: relative;
}

.kt-pcta-btn:hover {
	background: var(--vermillion);
	color: var(--paper);
}

/* ====================================================================
 * Pattern 10 — Newsletter Inline (.kt-newsletter)
 * New design — paper-deep + vermillion left border, matching the
 * quick-answer / original-quote family.
 * ================================================================== */

.kt-newsletter {
	margin: 56px 0;
	padding: 36px 40px;
	background: var(--paper-deep);
	border-left: 3px solid var(--vermillion);
}

.kt-news-label {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 12px;
}

.kt-news-title {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 12px;
	color: var(--ink);
}

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

.kt-news-text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin-bottom: 24px;
	max-width: 540px;
}

.kt-news-form {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.kt-news-input {
	flex: 1 1 240px;
	padding: 14px 18px;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--hairline-strong);
	border-radius: 0;
	transition: border-color 0.3s;
}

.kt-news-input:focus {
	outline: none;
	border-color: var(--vermillion);
}

.kt-news-btn {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	padding: 14px 28px;
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: background 0.3s;
}

.kt-news-btn:hover {
	background: var(--vermillion);
}

/* ====================================================================
 * Pattern 11 — Comparison Table (.kt-compare)
 * New design — editorial-style table with hairline borders, Cormorant
 * body, Cinzel header row.
 * ================================================================== */

.kt-compare {
	margin: 48px 0;
}

.kt-compare table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.55;
}

.kt-compare thead th {
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--vermillion);
	text-align: left;
	padding: 16px 20px;
	border-bottom: 1px solid var(--vermillion);
}

.kt-compare tbody td {
	padding: 18px 20px;
	border-bottom: 1px solid var(--hairline);
	color: var(--ink);
	vertical-align: top;
}

.kt-compare tbody td:first-child {
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
	width: 28%;
}

.kt-compare tbody tr:last-child td {
	border-bottom: 1px solid var(--vermillion);
}

/* ====================================================================
 * Pattern 12 — Numbered Deity List (.kt-deity-list)
 * New design — Roman numeral prefix (mirrors numbered-h2), grid layout
 * for each item.
 * ================================================================== */

.kt-deity-list {
	margin: 48px 0;
}

.kt-deity-item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--hairline);
	align-items: baseline;
}

.kt-deity-item:first-child {
	border-top: 1px solid var(--hairline);
}

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

.kt-deity-name {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 6px;
}

.kt-deity-name em {
	font-style: italic;
	color: var(--vermillion);
}

.kt-deity-desc {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0;
}

/* ====================================================================
 * Pattern 13 — Region Card Grid (.kt-region-grid)
 * New design — 5 columns desktop, 1 column mobile.
 * ================================================================== */

.kt-region-grid {
	margin: 48px 0;
}

.kt-region-grid .kt-region-cols {
	gap: 24px;
}

.kt-region-card {
	padding: 28px 24px;
	background: var(--paper);
	border: 1px solid var(--hairline);
	transition: border-color 0.3s, transform 0.3s;
	display: flex;
	flex-direction: column;
	min-height: 260px;
}

.kt-region-card:hover {
	border-color: var(--vermillion);
	transform: translateY(-4px);
}

.kt-region-label {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 12px;
}

.kt-region-name {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--ink);
	margin-bottom: 12px;
}

.kt-region-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
	flex: 1;
	margin-bottom: 16px;
}

.kt-region-link {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--vermillion);
	padding-top: 12px;
	border-top: 1px solid var(--hairline);
	display: inline-block;
}

.kt-region-link:hover {
	color: var(--vermillion-deep);
}

/* ====================================================================
 * Pattern 14 — Three Related Cards (.kt-three-cards)
 * Adapted from article-susanoo.html .related-grid
 * ================================================================== */

.kt-three-cards {
	margin: 80px 0 0;
}

.kt-card-grid {
	gap: 32px;
}

.kt-card {
	background: var(--paper);
	border: 1px solid var(--hairline);
	padding: 36px 32px;
	transition: border-color 0.3s, transform 0.3s;
	display: flex;
	flex-direction: column;
	min-height: 320px;
}

.kt-card:hover {
	border-color: var(--vermillion);
	transform: translateY(-4px);
}

.kt-card-num {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 300;
	color: var(--vermillion);
	line-height: 1;
	margin-bottom: 16px;
}

.kt-card-label {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	color: var(--vermillion);
	margin-bottom: 12px;
}

.kt-card-title {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 12px;
	color: var(--ink);
}

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

.kt-card-text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-soft);
	flex: 1;
	margin-bottom: 20px;
}

.kt-card-link {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.3em;
	color: var(--vermillion);
	text-transform: uppercase;
	padding-top: 16px;
	border-top: 1px solid var(--hairline);
	display: inline-block;
}

.kt-card-link:hover {
	color: var(--vermillion-deep);
}

/* ====================================================================
 * Responsive — Mobile breakpoint (≤720px)
 * ================================================================== */

@media (max-width: 720px) {
	.kt-pullquote {
		margin: 40px 0;
		padding: 24px 20px;
		font-size: 24px;
	}

	.kt-original {
		padding: 24px 20px;
	}

	.kt-original-text {
		font-size: 19px;
	}

	.kt-visit-place {
		padding: 28px 20px;
	}

	.kt-vp-title {
		font-size: 26px;
	}

	.kt-product-cta {
		padding: 32px 20px;
	}

	.kt-pcta-title {
		font-size: 26px;
	}

	.kt-pcta-vertical {
		display: none;
	}

	.kt-newsletter {
		padding: 24px 20px;
	}

	.kt-news-form {
		flex-direction: column;
	}

	.kt-news-input,
	.kt-news-btn {
		width: 100%;
	}

	.kt-deity-item {
		grid-template-columns: 60px 1fr;
		gap: 20px;
	}

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

	.kt-numbered-h2 .kt-h-with-num {
		gap: 16px;
	}
}