/**
 * Land Airline — Fleet listing shortcodes.
 *
 * Two layouts sharing one vehicle-card structure:
 *   .lair-fleetlist--grid  large 2-up (Fleet page)
 *   .lair-fleetlist--home  compact 4-up with fade-in (home)
 *
 * Palette: #1c1c1c text, #97785a gold, #e8e4df borders, #f9f8f6 image bg.
 *
 * @package landairline-services
 */

.lair-fleetlist {
	font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================= */
/* Grid layout (Fleet page): grid-cols-1 sm:grid-cols-2 gap-8    */
/* max-w-5xl mx-auto                                              */
/* ============================================================= */
.lair-fleetlist--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                       /* gap-8 */
	max-width: 64rem;                /* max-w-5xl */
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 640px) {
	.lair-fleetlist--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================= */
/* Home layout: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5  */
/* ============================================================= */
.lair-fleetlist--home {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;                       /* gap-5 */
}

@media (min-width: 640px) {
	.lair-fleetlist--home {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.lair-fleetlist--home {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================================= */
/* Shared vehicle card                                            */
/* ============================================================= */
.lair-vcard {
	background: #ffffff;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #ddd4ca;
	border-top: 2px solid #97785a;
	box-shadow: 0 16px 36px rgba(28, 28, 28, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.lair-vcard:hover {
	border-color: #97785a;
	transform: translateY(-2px);
	box-shadow: 0 20px 42px rgba(28, 28, 28, 0.13);
}

/* Keep the 2px gold top border on hover (the shorthand above would reset it
   to the perimeter color otherwise). */
.lair-vcard:hover {
	border-top-color: #97785a;
}

/* Respect reduced-motion preferences for the lift on hover. */
@media (prefers-reduced-motion: reduce) {
	.lair-vcard {
		transition: box-shadow 0.2s ease, border-color 0.2s ease;
	}
	.lair-vcard:hover {
		transform: none;
	}
}

/* --- Header --------------------------------------------------- */
.lair-vcard-head {
	border-bottom: 1px solid #e8e4df;
}

.lair-vcard-title {
	color: #1c1c1c;
	font-weight: 700;                /* font-bold */
	margin: 0 0 4px;                 /* mb-1 */
}

.lair-vcard-sub {
	color: #97785a;
	margin: 0;
}

/* Thin rule under the title (grid layout only). */
.lair-vcard-rule {
	width: 100%;
	height: 1px;
	background: #e8e4df;
	margin: 12px 0;                  /* mt-3 both sides */
}

/* --- Image --------------------------------------------------- */
.lair-vcard-image {
	background: #f9f8f6;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lair-vcard-img {
	display: block;
	width: 100%;
	object-fit: contain;
}

/* --- Stats --------------------------------------------------- */
.lair-vcard-stats {
	border-top: 1px solid #e8e4df;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.lair-vcard-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.lair-vcard-icon {
	color: #97785a;
}

.lair-vcard-stat-main {
	color: #1c1c1c;
	font-weight: 600;                /* font-semibold */
	margin: 0;
}

.lair-vcard-stat-sub {
	color: rgba(28, 28, 28, 0.50);   /* #1c1c1c/50 */
	line-height: 1.25;               /* leading-tight */
	margin: 4px 0 0;                 /* mt-1 */
}

/* ============================================================= */
/* Grid (large) scale                                            */
/* ============================================================= */
.lair-vcard-head {
	padding: 24px 24px 16px;         /* px-6 pt-6 pb-4 */
}

.lair-vcard-image--lg {
	padding: 48px 32px;              /* px-8 py-12 */
	min-height: 300px;
}

.lair-vcard-image--lg .lair-vcard-img {
	max-height: 288px;               /* max-h-72 */
}

.lair-vcard-title {
	font-size: 20px;                 /* text-xl */
}

.lair-vcard-sub {
	font-size: 14px;                 /* text-sm */
	margin-top: 12px;                /* mt-3 */
}

.lair-vcard-stats--lg .lair-vcard-stat {
	padding: 24px;                   /* px-6 py-6 */
}

.lair-vcard-stats--lg .lair-vcard-stat--right {
	border-left: 1px solid #e8e4df;
}

.lair-vcard-stats--lg .lair-vcard-icon {
	margin-bottom: 8px;              /* mb-2 */
}

.lair-vcard-stats--lg .lair-vcard-stat-main {
	font-size: 14px;                 /* text-sm */
}

.lair-vcard-stats--lg .lair-vcard-stat-sub {
	font-size: 12px;                 /* text-xs */
}

/* ============================================================= */
/* Home (compact) scale — overrides                              */
/* ============================================================= */
.lair-vcard--compact .lair-vcard-head {
	padding: 20px;                   /* p-5 */
}

/* Compact layout has no thin rule under the title. */
.lair-vcard--compact .lair-vcard-rule {
	display: none;
}

.lair-vcard--compact .lair-vcard-title {
	font-size: 14px;                 /* text-sm */
}

.lair-vcard--compact .lair-vcard-sub {
	font-size: 12px;                 /* text-xs */
	margin-top: 0;
}

.lair-vcard-image--sm {
	padding: 20px;                   /* p-5 */
	flex: 1 1 auto;
}

.lair-vcard-image--sm .lair-vcard-img {
	max-height: 144px;               /* max-h-36 */
}

.lair-vcard-stats--sm {
	padding: 20px;                   /* p-5 */
	gap: 12px;                       /* gap-3 */
	border-top: 1px solid #e8e4df;
}

/* In the compact layout the divider between the two stats is a left border
   on the second cell (not full-height cell padding like the grid layout). */
.lair-vcard-stats--sm .lair-vcard-stat--right {
	border-left: 1px solid #e8e4df;
}

.lair-vcard-stats--sm .lair-vcard-icon {
	margin-bottom: 6px;              /* mb-1.5 */
}

.lair-vcard-stats--sm .lair-vcard-stat-main {
	font-size: 12px;                 /* text-xs */
}

.lair-vcard-stats--sm .lair-vcard-stat-sub {
	font-size: 12px;                 /* text-xs */
	margin-top: 2px;                 /* mt-0.5 */
}

/* ============================================================= */
/* Fade-in (home layout)                                         */
/* ============================================================= */
.lair-vcard-fade {
	opacity: 0;
	transform: translateY(12px);
	animation: lair-vcard-fade-in 0.5s ease forwards;
}

@keyframes lair-vcard-fade-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.lair-vcard-fade {
		opacity: 1;
		transform: none;
		animation: none;
	}
}