/**
 * Vehicle Grid for Elementor - frontend styles
 * All colors/sizes here are just safe fallbacks; Elementor controls
 * override them per-instance via inline CSS (see the widget's
 * `selectors` in class-vehicle-grid-widget.php).
 */

/**
 * Layout: flexbox with wrap instead of CSS Grid. This is what makes an
 * incomplete last row (e.g. 1 or 2 cards left over from a 3-column grid)
 * center itself instead of sticking to the left — with CSS Grid a leftover
 * item stays pinned to column 1. `justify-content` is controlled by the
 * "Alineación del contenido" control (default: center) and applies per
 * row/line, so full rows are unaffected and only short rows get centered.
 * `align-items: stretch` (the flex default) also makes every card in the
 * same row match the tallest one automatically.
 */
.vge-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	column-gap: 40px;
	row-gap: 70px;
	width: 100%;
	--vge-columns: 3;
	--vge-col-gap: 40px;
}

.vge-item {
	position: relative;
	flex: 0 1 calc((100% - (var(--vge-columns) - 1) * var(--vge-col-gap)) / var(--vge-columns));
	min-width: 0;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	--vge-hover-lift: 10px;
	--vge-hover-scale: 1.06;
}

.vge-card {
	position: relative;
	background-color: #ffffff;
	border: 1px solid #c9c9c9;
	padding: 20px 20px 15px;
	text-align: center;
	overflow: visible;
	transition-property: transform, box-shadow, border-color;
	transition-duration: 0.35s;
	transition-timing-function: ease;
	/* Fill the full (stretched) height of .vge-item and push the button to
	   the bottom via margin-top: auto on .vge-button, so every card in a
	   row lines up even when the photos have different proportions. */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.vge-title-wrap {
	position: relative;
	z-index: 4;
	margin-bottom: 15px;
}

.vge-title {
	display: block;
	color: #1b3a5c;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
	letter-spacing: 0.02em;
}

.vge-divider {
	display: block;
	height: 3px;
	width: 40px;
	margin: 10px auto 0;
	background-color: #4d7ea8;
}

.vge-image {
	position: relative;
	z-index: 2;
	margin-top: -80px !important;
	margin-bottom: 45px !important;
	overflow: visible;
	pointer-events: none;
}

.vge-image img {
	/* Width is set (often >100%) via the "Ancho de imagen" control so the
	   photo can bleed past the card's left/right edges. text-align:center
	   on .vge-card + inline-block here keeps it symmetric on both sides
	   even when it's wider than the card.
	   !important on width/max-width fights common theme resets like
	   `img { max-width: 100%; height: auto; }` which would otherwise
	   silently clamp the photo back to 100% and kill the overlap. */
	display: inline-block !important;
	width: 130% !important;
	max-width: none !important;
	height: auto;
	transition-property: transform;
	transition-duration: 0.35s;
	transition-timing-function: ease;
}

.vge-button {
	position: relative;
	z-index: 3;
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 88%;
	margin-top: auto;
	margin-bottom: -22px !important;
	flex-shrink: 0;
	padding: 14px 10px;
	background-color: #1b3a5c;
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition-property: background-color, color, transform;
	transition-duration: 0.35s;
	transition-timing-function: ease;
}

.vge-button:hover,
.vge-button:focus {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Hover effect (enabled by default via the "Efecto hover" control,
 * which toggles the .vge-hover-effect-yes class on the wrapper).
 * ---------------------------------------------------------------- */
.vge-hover-effect-yes .vge-item:hover .vge-card {
	transform: translateY(calc(-1 * var(--vge-hover-lift)));
	box-shadow: 0 18px 34px rgba(15, 35, 60, 0.18);
}

.vge-hover-effect-yes .vge-item:hover .vge-image img {
	transform: scale(var(--vge-hover-scale));
}

.vge-hover-effect-yes .vge-item:hover .vge-button {
	transform: translateY(-2px);
}

/* Fallback breakpoints (only apply if Elementor's own responsive values for
   the "Columnas" control aren't present for some reason — normally the
   widget's responsive controls already override --vge-columns per device). */
@media (max-width: 1024px) {
	.vge-grid {
		--vge-columns: 2;
	}
}

@media (max-width: 600px) {
	.vge-grid {
		--vge-columns: 1;
	}
}