/*
 * Aircraft Encyclopedia — frontend styles.
 * Uses The Aviation Diary theme's own CSS variables (--gold, --panel,
 * --line, --ink, --muted, --max) so it matches the rest of the site
 * without duplicating color decisions here.
 */

.tade-aircraft,
.tade-archive {
	max-width: var( --max, 1480px );
	margin: 0 auto;
	padding: 100px 28px 60px;
	color: var( --ink, #f4f8fb );
	font-family: "Inter", Arial, Helvetica, sans-serif;
}

.tade-status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	color: var( --muted, #8fa3b6 );
}

.tade-status-complete,
.tade-status-expanded {
	border-color: var( --gold, #d9aa45 );
	color: var( --gold, #d9aa45 );
}

.tade-hero h1 {
	margin: 12px 0 6px;
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: clamp( 30px, 4vw, 46px );
	letter-spacing: -.03em;
}

.tade-hero-meta {
	display: flex;
	gap: 16px;
	color: var( --muted, #8fa3b6 );
	font-size: 13px;
	margin-bottom: 20px;
}


/* v7.0.3: server-rendered specs-left / image-right profile lead. */
.tade-spec-media-row {
	display: block;
	margin-top: 18px;
	margin-bottom: 30px;
}

.tade-spec-media-row--has-media {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr);
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

.tade-spec-col,
.tade-media-col {
	min-width: 0;
}

.tade-spec-col > section:first-child > h2,
.tade-spec-col > h2:first-child {
	margin-top: 0;
}

.tade-overview-copy {
	color: var( --ink, #f4f8fb );
	font-size: 15px;
	line-height: 1.75;
}

.tade-overview-copy > :first-child {
	margin-top: 0;
}

.tade-overview-copy > :last-child {
	margin-bottom: 0;
}

.tade-media-col {
	position: sticky;
	top: 108px;
}

.tade-hero-image {
	margin: 0;
	overflow: hidden;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	border-radius: 8px;
	background: #06111b;
	box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

.tade-hero-image img {
	display: block;
	width: 100%;
	height: clamp(280px, 34vw, 440px);
	max-height: 440px;
	object-fit: cover;
	object-position: center;
	margin: 0;
}

.tade-image-credit {
	font-size: 11px;
	line-height: 1.45;
	color: var( --muted, #8fa3b6 );
	margin: 7px 2px 0;
}

.tade-specs-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}


.tade-body h2 {
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 22px;
	margin-top: 40px;
	margin-bottom: 14px;
}

.tade-breadcrumbs {
	font-size: 12px;
	color: var( --muted, #8fa3b6 );
	margin-bottom: 18px;
}

.tade-breadcrumbs a {
	color: var( --muted, #8fa3b6 );
	text-decoration: none;
}

.tade-breadcrumbs a:hover {
	color: var( --gold, #d9aa45 );
}

.tade-breadcrumbs span {
	margin: 0 6px;
}

.tade-quick-facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 12px;
}

.tade-fact-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	background: linear-gradient( 145deg, #0b1b29, #06111b );
}

.tade-fact-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --muted, #8fa3b6 );
}

.tade-fact-value {
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.tade-variant-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tade-variant-chip {
	padding: 6px 14px;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	border-radius: 999px;
	font-size: 12px;
	color: var( --ink, #f4f8fb );
	text-decoration: none;
}

.tade-variant-chip:hover {
	border-color: var( --gold, #d9aa45 );
	color: var( --gold, #d9aa45 );
}

.tade-related-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 12px;
}

.tade-related-card {
	padding: 14px;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	background: linear-gradient( 145deg, #0b1b29, #06111b );
	color: var( --ink, #f4f8fb );
	text-decoration: none;
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 14px;
	text-align: center;
}

.tade-related-card:hover {
	border-color: rgba( 217,170,69,.6 );
}

.tade-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tade-news-list li {
	padding: 10px 0;
	border-bottom: 1px solid var( --line, rgba(139,168,190,.22) );
}

.tade-news-list a {
	color: var( --gold, #d9aa45 );
	text-decoration: none;
	font-weight: 600;
}

.tade-news-list a:hover {
	text-decoration: underline;
}

.tade-specs-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
}

.tade-specs-table th,
.tade-specs-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var( --line, rgba(139,168,190,.22) );
	text-align: left;
	font-size: 14px;
}

.tade-specs-table th {
	width: 40%;
	color: var( --muted, #8fa3b6 );
	font-weight: 600;
}

.tade-data-status,
.tade-sources {
	font-size: 12px;
	color: var( --muted, #8fa3b6 );
	margin-top: 10px;
}

.tade-sources a {
	color: var( --gold, #d9aa45 );
}

/* Archive */

.tade-archive-heading {
	margin-bottom: 30px;
}

.tade-browse-hub {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var( --line, rgba(139,168,190,.22) );
}

.tade-search-form {
	display: flex;
	gap: 10px;
	margin-bottom: 28px;
	max-width: 480px;
}

.tade-search-form input[type="search"] {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	background: #06111b;
	color: var( --ink, #f4f8fb );
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.tade-search-form input[type="search"]::placeholder {
	color: var( --muted, #8fa3b6 );
}

.tade-search-form button {
	padding: 10px 20px;
	border: 1px solid var( --gold, #d9aa45 );
	background: var( --gold, #d9aa45 );
	color: #001119;
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-weight: 800;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
}

.tade-search-meta {
	font-size: 13px;
	color: var( --muted, #8fa3b6 );
	margin-bottom: 20px;
}

.tade-search-meta a {
	color: var( --gold, #d9aa45 );
}

.tade-az-index {
	margin-bottom: 32px;
}

.tade-az-index h2 {
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --muted, #8fa3b6 );
	margin: 0 0 10px;
}

.tade-az-index .tade-filters {
	flex-wrap: wrap;
}

.tade-browse-group h2 {
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --muted, #8fa3b6 );
	margin: 0 0 10px;
}

.tade-eyebrow {
	color: var( --gold, #d9aa45 );
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.tade-archive-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 18px;
}

.tade-archive-card {
	display: block;
	padding: 18px;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	background: linear-gradient( 145deg, #0b1b29, #06111b );
	color: var( --ink, #f4f8fb );
	text-decoration: none;
	transition: .2s;
}

.tade-archive-card:hover {
	border-color: rgba( 217,170,69,.6 );
	transform: translateY( -3px );
}

.tade-archive-thumb img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	margin-bottom: 12px;
}

.tade-archive-card h3 {
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 16px;
	margin: 0 0 8px;
}

.tade-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.tade-filter {
	display: inline-block;
	appearance: none;
	background: transparent;
	border: 1px solid var( --line, rgba(139,168,190,.22) );
	color: var( --muted, #8fa3b6 );
	border-radius: 999px;
	padding: 6px 14px;
	font-family: "Oxanium", "Arial Narrow", Arial, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: .18s ease;
}

.tade-filter:hover {
	border-color: var( --gold, #d9aa45 );
	color: var( --gold, #d9aa45 );
}

.tade-filter.is-active {
	background: var( --gold, #d9aa45 );
	border-color: var( --gold, #d9aa45 );
	color: #001119;
}

@media ( max-width: 620px ) {
	.tade-aircraft,
	.tade-archive {
		padding: 40px 18px;
	}
}


/* v7.0.3 responsive profile layout */
@media (max-width: 980px) {
	.tade-spec-media-row--has-media {
		grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
		gap: 24px;
	}

	.tade-media-col {
		position: static;
	}

	.tade-hero-image img {
		height: 340px;
	}
}

@media (max-width: 820px) {
	.tade-spec-media-row--has-media {
		grid-template-columns: 1fr;
	}

	.tade-media-col {
		order: -1;
		max-width: 680px;
		width: 100%;
	}

	.tade-hero-image img {
		height: min(58vw, 360px);
	}
}

@media (max-width: 560px) {
	.tade-hero-meta {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.tade-hero-image img {
		height: 240px;
	}

	.tade-specs-table {
		min-width: 520px;
	}
}