/**
 * Cart Launch — Interior Page Styles
 * Shared styles for financing, service, and other interior pages.
 * Builds on mgc-homepage.css — must be loaded after it.
 */

/* ─── Interior hero ──────────────────────────────────────────────── */
.mgc-hp-hero--interior {
	min-height: 80vh;
}

.mgc-hp-hero--interior .mgc-hp-hero__title-sm {
	font-weight: 700;
}

.mgc-hp-hero--interior .mgc-hp-hero__sub {
	font-weight: 500;
	color: rgba(255,255,255,0.88);
}

/* ─── Section titles on dark bg ─────────────────────────────────── */
.mgc-ip-section--dark .mgc-hp-section__title,
.mgc-ip-section--dark .mgc-hp-section__sub {
	color: #ffffff;
}
.mgc-ip-section--dark .mgc-hp-section__sub {
	color: rgba(255,255,255,0.55);
}

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — 3-step strip
   ═══════════════════════════════════════════════════════════════════ */
.mgc-ip-steps {
	background: #ffffff;
	padding: 88px 24px;
}

.mgc-ip-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	max-width: 860px;
	margin: 0 auto;
	position: relative;
}

/* Connecting line between step circles */
.mgc-ip-steps__grid::before {
	content: '';
	position: absolute;
	top: 35px;
	left: calc(50% / 3 + 36px);
	right: calc(50% / 3 + 36px);
	height: 2px;
	background: #e5e7eb;
	z-index: 0;
}

.mgc-ip-step {
	text-align: center;
	padding: 0 28px;
	position: relative;
	z-index: 1;
}

.mgc-ip-step__num {
	width: 72px;
	height: 72px;
	background: var(--hp-red);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	font-family: var(--hp-font, var(--cl-font));
	font-size: 26px;
	font-weight: 900;
	color: #ffffff;
	position: relative;
	z-index: 1;
	box-shadow: 0 4px 20px color-mix(in srgb, var(--cl-red) 35%, transparent);
}

.mgc-ip-step h4 {
	font-family: var(--hp-font, var(--cl-font));
	font-size: 18px;
	font-weight: 700;
	color: #0d0d0d;
	margin: 0 0 10px;
	letter-spacing: -0.3px;
}

.mgc-ip-step p {
	font-family: var(--hp-font, var(--cl-font));
	font-size: 14px;
	color: #6b7280;
	line-height: 1.7;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES GRID
   ═══════════════════════════════════════════════════════════════════ */
.mgc-ip-services {
	background: #f9fafb;
	padding: 88px 24px;
}

.mgc-ip-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.mgc-ip-service-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-top: 3px solid var(--hp-red);
	border-radius: 8px;
	padding: 36px 28px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mgc-ip-service-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	transform: translateY(-4px);
}

.mgc-ip-service-card__icon {
	width: 52px;
	height: 52px;
	background: var(--hp-red);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.mgc-ip-service-card__icon i {
	color: #ffffff;
	font-size: 19px;
}

.mgc-ip-service-card h4 {
	font-family: var(--hp-font, var(--cl-font));
	font-size: 17px;
	font-weight: 700;
	color: #0d0d0d;
	margin: 0 0 10px;
	letter-spacing: -0.2px;
}

.mgc-ip-service-card p {
	font-family: var(--hp-font, var(--cl-font));
	font-size: 14px;
	color: #6b7280;
	line-height: 1.65;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RENTALS CARDS (2026-07-29)
   The rentals grid holds one card per cart type the dealer rents, so it can be
   anywhere from one card to six. These rules keep every count looking
   deliberate and give the cart drawings a badge shaped to fit them.
   Placed above RESPONSIVE on purpose: the mobile rules down there share the
   same specificity, so they have to come last to win.
   ═══════════════════════════════════════════════════════════════════ */

/* Icon-font cards get a 52px circle. The cart drawings are twice as wide as
   they are tall, so theirs is a rounded rectangle. `color` is what paints the
   drawing, since the strokes are set to currentColor. */
.mgc-ip-service-card__icon--cart {
	/* fit-content, not auto: the base rule is display:flex, so an auto width
	   would stretch the red plate across the whole card. */
	width: fit-content;
	min-width: 52px;
	height: 52px;
	padding: 0 13px;
	border-radius: 12px;
	color: #ffffff;
}

.mgc-ip-service-card__icon--cart svg {
	display: block;
	width: auto;
	height: 25px;
}

/* Street Legal flag on the LSV cards. */
.mgc-ip-service-card__badge {
	display: inline-block;
	margin: 0 0 9px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--hp-red);
	color: #ffffff;
	font-family: var(--hp-font, var(--cl-font));
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* One or two cards in a three column grid leaves a hole where the cards the
   dealer does not rent would have been. Four reads better as a 2x2 than as a
   row of three with one orphan underneath. */
.mgc-ip-services__grid--n1 {
	grid-template-columns: minmax(0, 400px);
	justify-content: center;
}

.mgc-ip-services__grid--n2,
.mgc-ip-services__grid--n4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 800px;
}

/* ═══════════════════════════════════════════════════════════════════
   BENEFITS STRIP (financing page)
   ═══════════════════════════════════════════════════════════════════ */
.mgc-ip-benefits {
	background: #111111;
	padding: 56px 24px;
}

.mgc-ip-benefits__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	max-width: 1200px;
	margin: 0 auto;
}

.mgc-ip-benefit {
	text-align: center;
	padding: 36px 24px;
	background: #1a1a1a;
	border-radius: 6px;
}

.mgc-ip-benefit__icon {
	width: 52px;
	height: 52px;
	background: var(--hp-red);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.mgc-ip-benefit__icon i {
	color: #ffffff;
	font-size: 18px;
}

.mgc-ip-benefit strong {
	display: block;
	font-family: var(--hp-font, var(--cl-font));
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 6px;
}

.mgc-ip-benefit span {
	font-family: var(--hp-font, var(--cl-font));
	font-size: 13px;
	color: rgba(255,255,255,0.45);
	line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.mgc-ip-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mgc-ip-benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mgc-ip-steps__grid::before {
		display: none;
	}
}

@media (max-width: 600px) {
	.mgc-ip-steps__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.mgc-ip-services__grid {
		grid-template-columns: 1fr;
	}

	.mgc-ip-benefits__grid {
		grid-template-columns: 1fr 1fr;
	}

	.mgc-hp-hero--interior {
		min-height: 75vh;
	}
}

/* ---- Mobile paragraph legibility ----
   These interior-page paragraph styles set explicit small sizes, so the
   generic mobile "+2px" paragraph rule in style.css can't reach them.
   Bump them for phones. */
@media (max-width: 767px) {
	.mgc-ip-step p,
	.mgc-ip-service-card p {
		font-size: 16px;
	}
}

/* ═══ FINANCING — the dealer's own buttons (2026-09-24 owner ask) ═════════
   Up to six lender buttons, set in Site Content -> Financing Page. They print
   twice: a row under the hero copy, and a band of their own above the bottom
   CTA. Nothing here renders unless a button is filled in.
   The hero row wraps under the hero button and keeps the hero's rhythm; the
   band is a plain light section so six buttons read as a list of lenders
   rather than a second call to action competing with the CTA below it. */
.mgc-fin-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.mgc-fin-btns--hero {
	margin-top: 16px;
}
.mgc-fin-btns--band {
	justify-content: center;
	gap: 14px;
	max-width: 980px;
	margin: 0 auto;
}
/* The buttons are the theme's brand button (.mgc-hp-btn--red), same as Apply
   Now — see cl_fin_buttons_row(). An outlined variant was tried first and
   pulled: .mgc-hp-btn ships `border: 2px solid transparent` with no background
   and the theme has no plain `--outline` rule, so it rendered as bare text,
   and the white-on-photo version disappeared on the light heroes some dealers
   run. Nothing here restyles the face; this file only lays the row out. */

/* Six buttons is a lot of ink: hold each one to a readable, even width rather
   than letting a long lender name stretch one across half the row. */
.mgc-fin-btns--band .mgc-hp-btn {
	flex: 0 1 auto;
	min-width: 220px;
	justify-content: center;
	text-align: center;
}
.mgc-fin-linkband {
	padding: 64px 24px 68px;
	background: #f7f8fa;
}
.mgc-fin-linkband__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #17181c;
	text-align: center;
	margin: 0 0 26px;
}
@media (max-width: 768px) {
	.mgc-fin-linkband { padding: 46px 16px 50px; }
	.mgc-fin-btns { gap: 10px; }
	/* Phones: full-width buttons, one per row — a half-width lender name wraps
	   to three lines otherwise. */
	.mgc-fin-btns .mgc-hp-btn { flex: 1 1 100%; min-width: 0; justify-content: center; text-align: center; }
}