@charset "UTF-8";

/* ===================================================================
   Gallery grid (sits at the top of the Info tab)
   =================================================================== */

.mediaGallery {
	margin-bottom: 0;
}

/* ===================================================================
   Info tab layout: gallery hero on the left, an info panel of matching
   height on the right with its own bordered title bar.
   =================================================================== */

.infoLayout {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	/* Now a flex ITEM inside .tabPanelActive (a flex column) - without
	   this, the default flex-shrink:1 could squeeze this shorter than
	   its natural ~320px height under tight vertical space. Fixed,
	   natural height; .aircraftHistory takes whatever's left. */
	flex: 0 0 auto;
}

.infoPanel {
	flex: 1 1 auto;
	min-width: 0;
	height: 320px;
	display: flex;
	flex-direction: column;
	background-color: var(--color-panel-nav);
}

.infoPanelTitleBar {
	/* Matches the active tab's own border color exactly - confirmed
	   against tabs.css (.contentTab / .tabItemActive both use this same
	   variable for their borders). */
	border-top: 2px solid var(--color-border-dark);
	border-bottom: 2px solid var(--color-border-dark);
	padding: 6px 4px;
	text-align: center;
	font-weight: bold;
	font-style: italic;
	flex: 0 0 auto;
}

.infoPanelBody {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-top: 8px;
}

.galleryGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 6px;
}

/* Single featured/hero image shown on page load - clicking it opens the
   lightbox (at index 0, since Featured is always sorted first by the
   query). The .galleryGrid/.galleryThumb rules above are left in place,
   unused for now, in case a full-grid view comes back later. */

.galleryHero {
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 320px;
	width: auto;
	max-width: 100%;
	overflow: hidden;
	box-shadow: 1px 3px 4px var(--color-border-dark);
	cursor: pointer;
	background-color: var(--color-border-dark);
}

.galleryHero img {
	height: 100%;
	width: auto;
	object-fit: contain;
	display: block;
	transition: transform 0.15s ease;
}

.galleryHero:hover img,
.galleryHero:focus img {
	transform: scale(1.03);
}

/* The site's shared .tooltip:hover:before rule (style.css) draws a small
   arrow above the label - suppressed here only, rather than editing the
   shared rule and affecting tooltips used elsewhere on the site. */
.galleryHero.tooltip:hover:before {
	display: none;
}

.galleryHero:focus {
	outline: 2px solid var(--color-border-dark);
	outline-offset: -2px;
}

.galleryEmpty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 320px;
	width: 400px;
	max-width: 100%;
	border: 1px dashed var(--color-title-border);
	background-color: rgba(0, 0, 0, 0.05);
	color: var(--color-divider);
	font-style: italic;
	text-align: center;
}

.galleryThumb {
	position: relative;
	height: 90px;
	overflow: hidden;
	border: 1px solid var(--color-title-border);
	cursor: pointer;
	background-color: var(--color-border-dark);
}

.galleryThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.15s ease;
}

.galleryThumb:hover img,
.galleryThumb:focus img {
	transform: scale(1.06);
}

.galleryThumb:focus {
	outline: 2px solid var(--color-border-dark);
	outline-offset: -2px;
}

.galleryThumbFeatured {
	border-color: var(--color-border-dark);
	border-width: 2px;
}

.galleryFeaturedBadge {
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-chrome);
	color: var(--color-border-light);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 6px;
}

/* ===================================================================
   Lightbox shell
   =================================================================== */

.galleryLightbox {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 500;
	align-items: center;
	justify-content: center;
}

.galleryLightbox.galleryOpen {
	display: flex;
}

.galleryLightboxInner {
	position: relative;
	width: 1200px;
	max-width: 96vw;
	max-height: 92vh;
	background-color: var(--color-chrome-dark);
	border: 1px solid var(--color-title-border);
	box-shadow: 1px 3px 6px var(--color-border-dark);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.galleryImageWrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 0;
	padding: 0 50px;
}

.galleryLightboxImage {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.galleryClose,
.galleryArrow {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.45);
	color: var(--color-border-light);
	border: 1px solid var(--color-title-border);
	cursor: pointer;
	z-index: 10;
}

.galleryClose:hover,
.galleryArrow:hover {
	background-color: var(--color-chrome);
}

.galleryClose {
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	font-size: 20px;
	line-height: 1;
}

/* Vertical position is --arrow-center (a px value), not a plain 50% -
   2026-09-08, revised same day per Peter after the first version (a
   dynamic bottom-bound zone) made the arrows visibly shift on almost
   every photo, which read as fidgety rather than helpful. --arrow-center
   is computed by mediaGallery.js's syncArrowPosition(): normally it's
   just the true vertical center of the lightbox (so the arrows don't
   move AT ALL between most photos), and only pulls up off that center
   once the caption's actual top edge would otherwise come within 40px
   of the arrow - i.e. a threshold/snap behavior, not a continuous
   follow, per Peter: "let them be centered until the location of the
   top of the comments is within a certain distance... if it gets to
   that point, have the arrows move." Falls back to plain 50% via the
   var()'s second argument for the brief instant before the first
   measurement runs (harmless - see mediaGallery.js). */
.galleryArrow {
	top: var(--arrow-center, 50%);
	transform: translateY(-50%);
	width: 40px;
	height: 60px;
	font-size: 18px;
}

.galleryPrev { left: 10px; }
.galleryNext { right: 10px; }

/* ===================================================================
   Caption overlay - collapsible, scrollable body
   =================================================================== */

.galleryCaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px; /* clears the nav bar below */
	background-color: rgba(0, 0, 0, 0.72);
	color: var(--color-border-light);
	z-index: 8;
}

.galleryCaptionPeek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	cursor: pointer;
}

.galleryCaptionSubject {
	font-weight: bold;
	font-size: 14px;
}

.galleryCaptionToggle {
	font-size: 11px;
	opacity: 0.8;
}

.galleryCaptionBody {
	max-height: 180px;
	overflow-y: auto;
	padding: 0 14px 12px 14px;
	font-size: 13px;
	line-height: 1.5;
}

.galleryCaptionCollapsed .galleryCaptionBody {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
}

.galleryCaptionDescription {
	white-space: pre-line;
	margin-bottom: 8px;
}

.galleryCaptionSource {
	font-size: 11px;
	opacity: 0.75;
	font-style: italic;
}

/* ===================================================================
   Nav bar - dots (small galleries) or counter+scrubber (large galleries)
   =================================================================== */

.galleryNavBar {
	position: relative;
	height: 34px;
	flex: 0 0 auto;
	background-color: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
}

.galleryDots {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: nowrap;
	overflow: hidden;
}

.galleryDot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--color-border-light);
	background-color: transparent;
	padding: 0;
	cursor: pointer;
	flex: 0 0 auto;
}

.galleryDot:hover {
	background-color: var(--color-title-border);
}

.galleryDotActive {
	background-color: var(--color-chrome);
	border-color: var(--color-border-dark);
}

.galleryDotFeatured {
	border-color: var(--color-border-dark);
}

.galleryScrubberWrap {
	display: none;
	align-items: center;
	gap: 10px;
	width: 80%;
}

.galleryScrubBtn {
	background: none;
	border: none;
	color: var(--color-border-light);
	cursor: pointer;
	font-size: 13px;
	padding: 2px 6px;
	flex: 0 0 auto;
}

.galleryScrubBtn:hover {
	color: var(--color-chrome);
}

.galleryCounter {
	color: var(--color-border-light);
	font-size: 12px;
	white-space: nowrap;
	flex: 0 0 auto;
}

.galleryScrubTrack {
	position: relative;
	flex: 1 1 auto;
	height: 4px;
	background-color: rgba(255, 255, 255, 0.25);
	cursor: pointer;
}

.galleryScrubFill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: var(--color-chrome);
	width: 0%;
}

.galleryHoverThumb {
	display: none;
	position: absolute;
	bottom: 40px;
	transform: translateX(-50%);
	border: 2px solid var(--color-border-light);
	box-shadow: 1px 3px 6px var(--color-border-dark);
	z-index: 20;
	pointer-events: none;
}

.galleryHoverThumb img {
	display: block;
	width: 120px;
	height: 90px;
	object-fit: cover;
}

/* ===================================================================
   Small screens - shrink the fixed lightbox rather than let it overflow
   =================================================================== */

@media (max-width: 960px) {
	.galleryLightboxInner {
		width: 96vw;
	}
}