/* =========================================================================
   /{make}/pcpoffers model slabs — #90 redesign
   -------------------------------------------------------------------------
   Restyles the model cards into the same visual language as the new offer
   slabs (see mfr-newcaroffers.css, which cannot be reused directly: its rules
   are all scoped to #offersectionframe / #mdloffersframe, neither of which
   exists on this page). Values below are copied from that stylesheet so the
   two designs stay identical.

   Everything is scoped to .mfrnewcaroffers #newCarSearchResultsUpdateBlock —
   .manufacturerNewModelBox and friends are also used by the branch sliders and
   the finance-offer rows and must not be touched here. The ID is in the selector
   for specificity as much as scope: business.css sets min-height/height on
   "#newCarSearchResultsUpdateBlock .manufacturerPickupRow", which an all-class
   selector can never outrank however many classes it chains.

   The markup keeps its legacy class hooks (boxtitle title, fuelbox,
   flex-item richtext, manufacturerNewModelBox-more) so each brand's own
   stylesheet still applies its typeface; this file overrides the layout.
   ========================================================================= */


/* ---- Card shell ---- */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow.mo-model-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;                 /* whole card navigates */
	flex: 1;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow.mo-model-card:hover {
	border-color: #c8c8c8;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Equal-height cards. The grid cell (.manufacturerPickupRow) is floated by the
   rs-column system, so the cards can't be stretched by a flex row - instead the
   cell gets a min-height and becomes its own flex container, which lets the card
   inside stretch to fill it. The button, pinned by .mo-card-spacer, then lines up
   across the row. Sized for the tallest realistic card (four synopsis lines);
   this mirrors how the offer slabs equalise (mfr-newcaroffers.css min-height). */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerPickupRow.model {
	min-height: 500px;         /* Tallest natural card across every make is 495.4px, so this
	                              floor binds on every card and makes them all exactly equal.
	                              That matters beyond tidiness: model images differ by
	                              fractions of a pixel between cards, so if the floor stops
	                              binding the rows go visibly ragged by half a pixel. Keep
	                              this ABOVE the natural maximum whenever the reserved
	                              synopsis height below changes. */
	height: auto;              /* business.css forces calc(100%) on this block */
	display: flex !important;  /* ...and display:block !important, hence the override */
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow.mo-model-card .manufacturerNewModelBox {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;

	/* metro-style-mfr.css sets `font: normal 1em/1.6625 "SeatBOld", Lato, sans-serif`
	   on .manufacturerNewModelBox - a SEAT face used as the base font for EVERY
	   manufacturer's card. It is also misspelled (every other rule in the codebase
	   says "SeatBold"), so it never resolves and silently lands on Lato.
	   The brand stylesheets each override the title, fuel badge, synopsis and button
	   by name, which is why nobody noticed - but anything they don't name, such as
	   the spec row added in this redesign, inherited Lato while the rest of the card
	   was in the brand face. Inherit instead: .mfrnewcaroffers carries the brand
	   typeface (MazdaType, hyundaisanshead, KiaM, Poppins, Montserrat, ...).
	   Only the font-family is overridden - the 1.6625 line-height that the rest of
	   the shorthand supplies is left alone. Scoped here rather than fixed at source:
	   ModuleSGPetchAliasReader injects metro-style-mfr.css at 21 different points
	   across many manufacturer page types, so changing it is its own job. */
	font-family: inherit;
}


/* ---- Image ----
   Fixed aspect box. Model images are NOT all the same shape - Mazda alone ships two
   ratios (1.942 and 1.948) - and with an auto-height image that difference becomes a
   difference in card height. It is invisible at desktop only because the card's
   min-height floor is doing the levelling; at tablet widths the images scale up, the
   floor stops binding and the rows would go ragged by a couple of pixels. Reserving
   the box height with the padding-top percentage trick (rather than aspect-ratio,
   which this site's older-browser support predates) makes every image render at
   exactly the same height, so card heights are equal by construction at ANY viewport
   width, floor or no floor. object-fit:contain, so a slightly-off-ratio image is
   letterboxed against the grey rather than cropped - no car ever gets clipped. */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox .manufacturerNewModelImage.imgoffer.mo-card-image-wrap {
	position: relative;
	background: #f5f5f5;
	overflow: hidden;
	padding: 0 0 51.5% 0;   /* 100 / 1.942 - the dominant model-image ratio */
	height: 0;
	margin: 0;
	text-align: center;
}

/* overrides the old 220px cap — the new design runs the image full-bleed */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelImage.imgoffer.mo-card-image-wrap img.mo-card-img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100% !important;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}


/* ---- Card body ---- */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-card-body {
	padding: 14px 16px 0 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: left;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox .boxtitle.title.mo-card-title {
	color: #2c3e50;
	font-size: 1.3em;
	line-height: 1.25;
	margin: 0 0 8px;
	padding: 0;
	text-align: left;
}


/* ---- Fuel-type badges ---- */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 0;
	justify-content: left;
}

/* the old .fuelbox is a small grey float — restyle it as a blue pill to match
   the Brand New / In Stock badges on the offer slabs */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox .fuelbox.mo-fuel-badge-pill {
	display: inline-block;
	float: none;
	width: auto;
	background: #3498db;
	color: #fff;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.2;
	padding: 5px 10px;
	border-radius: 4px;
	margin: 0;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}


/* ---- Spec row (body style + fuel) ---- */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-vehicle-details {
	margin-bottom: 4px;
	text-align: left;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-detail-row {
	display: flex;
	gap: 6px;
	margin-bottom: 5px;
}

/* The cells carry "boxtitle light" only to borrow each brand's typeface (see the
   note in the JS). That hook drags in font-size:1.15em and line-height:38px from
   mfr-finance-offers-set.css, and font-size:0.8em/line-height:1.4em from
   newcarofferssearch.css - both are re-stated here so only the family is borrowed. */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-detail-cell.boxtitle.light,
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-detail-cell {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.90em;
	line-height: 1.35;
	letter-spacing: normal;
	color: #333;
	flex: 1;
	min-width: 0;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-detail-cell i {
	color: #555;
	width: 14px;
	text-align: center;
	flex-shrink: 0;
}


/* ---- Offer synopsis ---- */
/* the bullet glyph comes from metro-style-mfr.css (li::before "•"), so no list
   marker here - adding one would double it up */
/* Fixed zone height. Every model image in a given make renders at the same
   height, so the synopsis is the only thing that varies between cards - pinning
   it makes card heights structurally equal at ANY column count, rather than
   relying on the min-height floor above, which is only correct at the width it
   was measured at. (The offer slabs do the same with .mo-finance-line.)
   Tallest synopsis across all makes is 126px (Kia EV3). */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox ul.flexcontainer.mo-synopsis {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	min-height: 130px;
}

/* Bullet flush, text indented - a standard hanging indent.
   The BULLET sits on the card's content edge, in line with the title, the fuel
   badge, the spec row and the button; the text is indented past it and wrapped
   continuation lines align under the text rather than running back under the
   bullet. (metro-style-mfr.css supplies the "•" as an inline-block ::before. With
   no padding it sat in the text flow, so the first line was pushed right of
   everything else while wrapped lines started further left again.)
   The two 11px values must match: the ::before is given an explicit width so the
   gutter is a known quantity rather than whatever the glyph happens to measure,
   and the negative text-indent pulls only the first line back by that same amount
   to seat the bullet on the edge. */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox ul.flexcontainer.mo-synopsis li.flex-item.richtext {
	text-align: left;
	font-size: 0.85em !important;
	line-height: 1.35 !important;
	color: #333;
	margin: 0 0 4px;
	padding-left: 11px;
	text-indent: -11px;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox ul.flexcontainer.mo-synopsis li.flex-item.richtext:before {
	display: inline-block;
	width: 11px;
	text-indent: 0;   /* the li's negative indent would otherwise shift the glyph too */
	margin: 0;
	padding: 0;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .firstli.pcpoff {
	padding-top: 0;
}


/* ---- Pinned action button ---- */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-card-spacer {
	flex: 1;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .mo-card-actions {
	display: flex;
	gap: 8px;
	padding: 12px 0 14px 0;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox .manufacturerNewModelBox-more.mo-card-button {
	flex: 1;
	display: block;
	width: auto;
	text-align: center;
	background: #111;
	color: #fff;
	padding: 10px 8px;
	margin: 0;
	border: 2px solid #111;
	border-radius: 4px;
	font-size: 0.85em !important;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s;
}

.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox .manufacturerNewModelBox-more.mo-card-button:hover {
	background: #333;
	border-color: #333;
}

/* the old button rendered a chevron via data-icon — the new one doesn't */
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox .manufacturerNewModelBox-more.mo-card-button:after,
.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox .manufacturerNewModelBox-more.mo-card-button:before {
	content: none;
}


/* ---- Narrow screens: cards stack one-up, so nothing needs equalising and the
       reserved heights would only add whitespace ---- */
@media all and (max-width: 767px) {
	.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerPickupRow.model {
		min-height: 0;
	}

	.main-content .mfrnewcaroffers #newCarSearchResultsUpdateBlock .manufacturerNewModelRow .manufacturerNewModelBox ul.flexcontainer.mo-synopsis {
		min-height: 0;
	}
}