/**
 * Land Airline — Service content shortcodes (How It Works, Who Uses, Fleet).
 *
 * Reproduces the reference designs with plain CSS (no Tailwind runtime):
 * DM Sans, #1c1c1c text, #e8e4df borders, #97785a gold accents, #f5f2ee chips.
 *
 * @package landairline-services
 */

/* Shared font on every element these shortcodes emit. */
.lair-hiw,
.lair-who,
.lair-fleet {
	font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================= */
/* How It Works                                                   */
/* grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6                */
/* ============================================================= */
.lair-hiw {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                       /* gap-6 */
}

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

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

.lair-hiw-card {
	background: #ffffff;             /* bg-white */
	padding: 24px;                   /* p-6 */
	border: 1px solid #e8e4df;
}

/* Icon chip: w-8 h-8 flex center bg-[#97785a]/10 mb-4 */
.lair-hiw-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(151, 120, 90, 0.10);
	margin-bottom: 16px;
	color: #97785a;                  /* so inline SVG stroke=currentColor is gold */
}

.lair-hiw-icon svg {
	width: 16px;
	height: 16px;
}

.lair-hiw-title {
	color: #1c1c1c;
	font-weight: 600;                /* font-semibold */
	font-size: 14px;                 /* text-sm */
	line-height: 1.4;
	margin: 0 0 8px;                 /* mb-2 */
}

.lair-hiw-desc {
	color: rgba(28, 28, 28, 0.60);   /* text-[#1c1c1c]/60 */
	font-size: 14px;
	line-height: 1.625;              /* leading-relaxed */
	margin: 0;
}

/* ============================================================= */
/* Who Uses This Service                                          */
/* flex flex-wrap gap-2                                           */
/* ============================================================= */
.lair-who {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;                        /* gap-2 */
}

.lair-who-chip {
	padding: 8px 16px;               /* py-2 px-4 */
	background: #f5f2ee;
	border: 1px solid #e8e4df;
	color: #1c1c1c;
	font-size: 14px;                 /* text-sm */
	line-height: 1.4;
}

/* ============================================================= */
/* Fleet for this service                                         */
/* grid grid-cols-2 gap-3                                         */
/* ============================================================= */
.lair-fleet {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;                       /* gap-3 */
}

.lair-fleet-card {
	background: #f5f2ee;
	border: 1px solid #e8e4df;
	padding: 12px;                   /* p-3 */
}

/* img: uniform box for every vehicle — same size and aspect ratio.
   A fixed 16:9 box (driven by aspect-ratio from the column width) guarantees
   every card's image is identical regardless of the source image's real
   dimensions. max-height matches the original h-20 reference (80px). */
.lair-fleet-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 80px;
	object-fit: contain;
	margin-bottom: 8px;              /* mb-2 */
}

.lair-fleet-name {
	color: #1c1c1c;
	font-size: 12px;                 /* text-xs */
	font-weight: 600;                /* font-semibold */
	line-height: 1.4;
	margin: 0 0 4px;                 /* mb-1 */
}

/* stats: flex items-center gap-3 */
.lair-fleet-stats {
	display: flex;
	align-items: center;
	gap: 12px;                       /* gap-3 */
}

/* each stat: flex items-center gap-1 text-[#97785a] text-xs */
.lair-fleet-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;                        /* gap-1 */
	color: #97785a;
	font-size: 12px;                 /* text-xs */
	line-height: 1;
}

.lair-fleet-stat svg {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}

/* On very narrow screens, let fleet fall to a single column. */
@media (max-width: 380px) {
	.lair-fleet {
		grid-template-columns: 1fr;
	}
}