/* ==========================================================================
   SkyTrade Aviation — Hero
   Shared hero utilities and image placeholders. Homepage section layout
   lives in home.css (front page only).
   ========================================================================== */

/* Fallback homepage, shown only if no Elementor content exists yet */
.homepage-fallback {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: var(--st-space-3xl);
}

.homepage-fallback h1 {
	font-size: 40px;
}

.homepage-fallback__note {
	margin-top: var(--st-space-lg);
	color: var(--st-white-20);
	font-size: 13px;
}

/* Utility classes available to any Elementor section that wants the
   app's visual language — full-bleed dark overlay for text-over-photo
   sections, gold accent divider, etc. */
.hero-overlay {
	position: relative;
}

.hero-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 22, 40, 0.15) 0%, rgba(10, 22, 40, 0.85) 100%);
	pointer-events: none;
}

.hero-overlay > * {
	position: relative;
	z-index: 1;
}

.gold-divider {
	width: 48px;
	height: 1px;
	background-color: var(--st-gold);
	border: none;
	margin: var(--st-space-md) 0;
}

/* Image placeholder — shown by skytrade_img_box() when a photo hasn't
   been added yet at the expected path. Clean, on-brand, tells you exactly
   which file to drop in. Disappears automatically once the real image
   exists — no code changes needed. */
.skytrade-img-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background-color: var(--st-navy-mid);
	border: 1px dashed var(--st-white-20);
	border-radius: var(--st-radius-card);
	text-align: center;
	padding: var(--st-space-md);
}

.skytrade-img-placeholder__label {
	color: var(--st-white-60);
	font-size: 13px;
	font-weight: 600;
}

.skytrade-img-placeholder__path {
	color: var(--st-white-20);
	font-family: monospace;
	font-size: 11px;
}

.skytrade-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}