/**
 * Página de alquiler.
 *
 * El contenido vive en el editor, en bloques normales de WordPress: quien lleve
 * la web puede cambiar un precio o añadir un vehículo sin tocar código. Lo único
 * que hay aquí es la apariencia, y toda sale de las variables --vor-* que publica
 * el plugin de reservas, así que la página cambia de color con el tema elegido en
 * Ajustes sin que nadie venga a tocar este fichero.
 *
 * Los nombres de clase van con prefijo aj- y no vor-: son del sitio, no del
 * plugin, y conviene que se note quién manda sobre cada cosa.
 */

/* Rejilla de vehículos ----------------------------------------------------
 *
 * Son columnas nativas de WordPress: se apilan solas en el móvil y quien edite
 * la página puede añadir o quitar una desde el editor sin tocar esto.
 *
 * Ojo con el contenedor interior: el editor mete un
 * .wp-block-group__inner-container entre la clase del grupo y sus hijos, así que
 * lo que hay que estilar es ESE, no el grupo: de ahí los selectores de hijo
 * directo contra .wp-block-group__inner-container.
 */

.aj-flota { gap: 24px; margin-bottom: 40px; align-items: stretch; }

/*
 * La tarjeta ES la columna. Sin grupos por dentro: WordPress mete su propio
 * contenedor dentro de cada grupo y anidarlos a mano descuadraba los cierres.
 *
 * El relleno va en la tarjeta y el hueco de la foto se sale de él con márgenes
 * negativos, que es la forma de que la foto llegue a los bordes sin necesidad de
 * otro contenedor.
 */
.aj-vehiculo {
	display: flex;
	flex-direction: column;
	padding: 0 22px 24px;
	overflow: hidden;
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-l);
	background: var(--vor-surface);
	box-shadow: var(--vor-shadow);
}

/*
 * Hueco de la foto. Se deja con proporción fija y marcado a la vista en lugar de
 * vacío: así la página no da un salto de altura el día que se suban las fotos, y
 * quien las suba ve exactamente dónde van. Para sustituirlo basta con meter un
 * bloque de imagen dentro de este grupo.
 */
/*
 * Hueco de la foto. Alto fijo y no aspect-ratio: así el sitio que ocupa es el
 * mismo antes y después de subir las imágenes, y la página no da un salto. Para
 * sustituirlo, se cambia este bloque HTML por un bloque de imagen.
 */
.aj-foto {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 210px;
	margin: 0 -22px 18px;
	border-bottom: 1px solid var(--vor-line);
	background:
		repeating-linear-gradient(45deg, transparent 0 12px, rgb(var(--vor-ink-rgb) / .022) 12px 24px),
		var(--vor-surface-2);
	color: var(--vor-ink-3);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.aj-foto .aj-emoji {
	font-size: 2.6rem;
	line-height: 1;
	filter: grayscale(1);
	opacity: .5;
}

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

.entry-content .aj-vehiculo h3 {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--vor-ink);
}

.aj-vehiculo__tipo {
	margin: 0;
	font-size: .84rem;
	color: var(--vor-ink-3);
}

.aj-vehiculo__destaca {
	margin: 0;
	font-size: .92rem;
	color: var(--vor-ink-2);
}

/* Tabla de tarifas -------------------------------------------------------- */

.aj-vehiculo .wp-block-table { overflow-x: auto; }

.aj-vehiculo table,
.entry-content .aj-vehiculo table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: .88rem;
}

/*
 * Nada de partir palabras. En una columna de un tercio de pantalla, «Kilómetros»
 * se rompía en «KILÓMET / ROS» y «1.295 €» en «1.29 / 5 €», que además de feo se
 * lee mal cuando lo que se está comparando son precios.
 */
.aj-vehiculo th,
.aj-vehiculo td {
	padding: 9px 8px 9px 0;
	border: 0;
	border-bottom: 1px solid var(--vor-line-soft);
	text-align: left;
	white-space: nowrap;
}

/* La primera columna sí puede partir: «Mes completo» cabe en dos líneas. */
.aj-vehiculo tbody th,
.aj-vehiculo thead th:first-child { white-space: normal; }

.aj-vehiculo th:last-child,
.aj-vehiculo td:last-child { padding-right: 0; text-align: right; }

.aj-vehiculo thead th {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vor-ink-3);
	border-bottom-color: var(--vor-line);
}

.aj-vehiculo tbody th {
	font-weight: 600;
	color: var(--vor-ink);
}

.aj-vehiculo td { color: var(--vor-ink-2); }

.aj-vehiculo tbody tr:last-child th,
.aj-vehiculo tbody tr:last-child td { border-bottom: 0; }

/* La primera fila es la tarifa de referencia: se destaca el precio del día. */
.aj-vehiculo tbody tr:first-child td:first-of-type {
	font-weight: 700;
	color: var(--vor-accent);
}

.aj-nota {
	margin: 0;
	font-size: .8rem;
	color: var(--vor-ink-3);
}

/* Botones -----------------------------------------------------------------
 *
 * Son los del plugin (.vor-btn--fantasma y .vor-btn--whatsapp), los mismos que
 * las fichas de vehículo. Aquí solo se colocan.
 */

.aj-contacto {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* Dentro de la tarjeta, el botón ocupa el ancho y se queda pegado abajo, para
   que los tres queden a la misma altura aunque los textos midan distinto. */
.aj-vehiculo .aj-contacto {
	margin-top: auto;
	padding-top: 4px;
}

.aj-vehiculo .aj-contacto .vor-btn { width: 100%; }

/* Móvil ------------------------------------------------------------------- */

@media (max-width: 600px) {
	.aj-vehiculo { padding: 0 16px 20px; }
	.aj-foto { margin: 0 -16px 16px; }

	/* La tabla es lo único que puede desbordar en un móvil estrecho. */
	.aj-vehiculo table { font-size: .82rem; }
	.aj-vehiculo th,
	.aj-vehiculo td { padding: 8px 6px; }
}