/* ==========================================================================
   Al Fajar — Fleet page (page-templates/fleet.php), on top of about.css.
   From "ALFAJAR-FLEET.html". The vehicle cards (.fleet/.veh), the city list
   (.cities), the plate table (.routes) and the assurances (.assure) reuse the
   homepage styles in sections.css; this file adds what the fleet page needs.
   Inline style="" attributes from the mockup moved here as classes.
   ========================================================================== */

/* vehicle cards: link sits at the foot of every card */
.veh .svc-link { margin-top: auto; padding-top: .35rem; }

/* links inside leads (comparison footnote, card texts) */
.fleet-foot { margin-top: 1rem; font-size: .9rem; }
.lead a,
.aside-card p a,
.aside-card .svc-meta a { color: var(--accent-text); font-weight: var(--fw-semibold); }
.on-plate .lead a { color: var(--on-plate-accent); }

/* table beside a photo */
.cover-side { display: flex; flex-direction: column; align-items: flex-start; }
.cover-photo,
.assure-photo { width: 100%; aspect-ratio: 4 / 3; }
.cover-side .cover-note { margin-top: 1rem; font-size: .9rem; }
.cover-side .cover-btn { margin-top: .9rem; }
.cover > div > .cover-note { margin-top: 1.25rem; font-size: .9rem; }

/* row headers: the first column reads as a label, not as a column heading */
.routes tbody th {
	color: var(--on-plate);
	font-family: var(--body);
	font-size: inherit;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
}
.tbl .veh-alt { display: inline; margin: 0; }

/* narrow screens: tables scroll inside their container instead of squeezing */
.tscroll > .tbl,
.tscroll > .routes { min-width: 600px; }
.tscroll > .routes { min-width: 480px; }

/* owned, not brokered */
.assure-lead { margin-top: 1rem; }
.assure-photo { margin-top: 1.25rem; }
.assure svg { color: var(--accent-text); }