/**
 * FleetManager Homepage Car Grid Styles
 * v7.0 - The Final & Definitive Responsive Edition
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* COMMANDMENT #5: Prevents the grid from overlapping the page title above it */
.fm-homepage-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	padding: 30px 0px; /* Added top padding for breathing room */
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
}

/* The card now uses an internal CSS Grid for robust layout control */
.fm-car-card {
	display: grid;
	/* Create a layout with a top row for the image and a bottom row for the white card */
	grid-template-rows: 100px 1fr;
	margin-top: 50px; /* Provides space between rows */
}

/* COMMANDMENT #1 & #3: UNIFORM IMAGES, BREAKING THE FRAME, NO SHADOW */
.fm-car-card__image-wrapper {
	/* Place this element in the first grid row */
	grid-row: 1 / 2;
	/* The image must sit ON TOP of the white card */
	z-index: 10;
	/* Vertically centers the image in its 100px row */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Pulls the image up to float above */
	transform: translateY(-10%);
	transition: transform 0.4s ease;
}

.fm-car-card__image-wrapper img {
	height: 150px; /* COMMANDMENT #1: ALL IMAGES ARE FORCED TO A UNIFORM HEIGHT */
	max-width: 110%; /* Allows the image to bleed outside the card's edges */
	object-fit: contain; /* Prevents the image from being warped */
	filter: none; /* COMMANDMENT #3: NO MORE SHADOWS. EVER. */
}

/* COMMANDMENT #2 & #4: The White Card Itself - Consistent Height & Robust */
.fm-car-card__details-wrapper {
	/* Place this element in the second grid row */
	grid-row: 2 / 3;
	/* Sits BEHIND the floating image */
	z-index: 1;

	/* Standard styling */
	background-color: #ffffff;
	border-radius: 16px;
	border: 1px solid #f0f0f0;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

	/* COMMANDMENT #4: Internal Flexbox makes the layout robust */
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 20px;
}

/* Hover effects for the whole unit */
.fm-car-card:hover .fm-car-card__details-wrapper {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.fm-car-card:hover .fm-car-card__image-wrapper {
	transform: translateY(-60%); /* Enhanced float on hover */
}

/* --- Standard content styling, now inside a stable container --- */
.fm-car-card__content {
	flex-grow: 1; /* Pushes the footer down, fulfilling COMMANDMENT #4 */
	display: flex;
	flex-direction: column;
}
.fm-car-card__title {
	font-size: 1.2rem;
	font-weight: 600;
	margin-top: 10px;
	line-height: 1.3;
}
.fm-car-card__title a {
	text-decoration: none;
	color: #2c3e50;
}
.fm-car-card__subtitle {
	font-size: 0.75rem;
	color: #95a5a6;
	margin: 4px 0 20px;
	text-transform: uppercase;
}

.fm-car-card__specs {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	font-size: 0.8rem;
}
.fm-spec-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	background-color: #ecf0f1;
	border-radius: 20px;
}
.fm-spec-item::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-size: contain;
	opacity: 0.7;
}
.fm-spec-item--transmission::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334495e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h2M17 7h2M12 12v5M10 17h4M5 12h2M17 12h2M7 17v-5H5V7l4-2h6l4 2v5h-2v5Z'/%3E%3C/svg%3E");
}
.fm-spec-item--doors::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334495e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12h-2M5 12H3M12 19v-2M12 7V5M21 16.5V12a9 9 0 0 0-18 0v4.5A2.5 2.5 0 0 0 5.5 19h13a2.5 2.5 0 0 0 2.5-2.5Z'/%3E%3C/svg%3E");
}
.fm-spec-item--ac::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334495e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 1.9 3.8L18 7.7l-3.8 1.9L12.3 14 10.4 18 8.5 14l-4.4-2.1L8.5 10 6.6 6.2 12 2ZM5 16l-2 4h18l-2-4M16 5l4-2-4 2ZM8 5l-4-2 4 2Z'/%3E%3C/svg%3E");
}

.fm-car-card__footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 15px;
	border-top: 1px solid #f0f0f0;
}
.fm-car-card__price {
	font-size: 1.1rem;
	font-weight: 500;
	color: #2c3e50;
}
.fm-car-card__price .amount {
	font-weight: 700;
	font-size: 1.5rem;
}
.fm-car-card__price .from {
	font-size: 0.9rem;
	color: #7f8c8d;
}
.fm-button-book {
	background-image: linear-gradient(to right, #007bff 0%, #0056b3 100%);
	color: #fff;
	padding: 12px 22px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	border: none;
}
a.fm-button.fm-button-book:hover {
	color: white !important;
}

/* --- COMMANDMENT #6: RESPONSIVENESS ABOVE ALL --- */
@media (max-width: 640px) {
	.fm-homepage-grid-container {
		grid-template-columns: 1fr; /* Stack to a single column on mobile */
	}

	.fm-car-card {
		margin-top: 40px; /* Reduce top margin on mobile */
	}
}
@media (max-width: 375px) {
	.fm-button-book {
		padding: 12px 15px;
	}
	.fm-car-card__price .amount {
		font-size: 1.2rem;
	}
	.fm-car-card__price {
		font-size: 1rem;
	}
}