/* ============================================================
   Jersey Jump — Packages Page
   Section-level heading/description, a grid of package cards (its
   own distinct look — not the shared .rental-card/.feature-card
   components, per the client's design brief), a closing disclaimer
   line, then the shared .phone-cta box.

   Grid: 1 column mobile → 2 at 667px → 3 at 1024px → 5 at 1200px —
   same flexbox + fixed-width + justify-content:center pattern used
   by .rental-item-grid/.feature-cards-grid elsewhere in the project
   (a row with fewer cards than the target count centers them as a
   group instead of leaving an unfilled track).
   ============================================================ */

/* This page's own section-header needs a narrower max-width (876px)
   than the shared .section-header default (1039px, main.css) — scoped
   here instead of changing the shared value used elsewhere. */
.packages-page-section .section-header {
	max-width: 740px;
}

.package-card-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin-block-end: 2.5rem;
}

.package-card {
	width: 100%;
	background-color: var(--color-blue-150);
	border-radius: 16px;
	padding: 1.5rem;
	text-align: center;
}

@media (min-width: 667px) {
	.package-card {
		width: calc((100% - 1.5rem) / 2);
	}
}

@media (min-width: 1024px) {
	.package-card {
		width: calc((100% - 2 * 1.5rem) / 3);
	}
}

@media (min-width: 1200px) {
	.package-card {
		width: calc((100% - 4 * 1.5rem) / 5);
	}
}

.package-card-title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-blue-800);
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0;
}

.package-card-price-block {
	margin-block-start: 1rem;
}

.package-card-price-label {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-navy-900);
	font-size: 0.75rem;
	margin: 0;
}

.package-card-price {
	font-family: var(--font-accent);
	color: var(--color-cta);
	font-size: 2rem;
	margin: 0;
}

.package-card-description {
	font-family: var(--font-body);
	color: var(--color-gray-900);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin-block-start: 0.75rem;
}

.packages-closing-text {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--color-text);
	text-align: center;
	max-width: 740px;
	margin-inline: auto;
	margin-block-end: 2.5rem;
}