/* =====================================================================
   Top Grade Movers — pages/offers.css
   Offers page (pages/template-offers.php) styles only. The shared
   inner-page hero (.page-hero) lives in components/sections.css.
   ===================================================================== */

/* =========================================================
   1. SPECIAL OFFERS INTRO (white, photo + text)
   ========================================================= */
.offers-intro { padding-block: var(--section-spacing); }

.offers-intro__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.offers-intro__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.offers-intro__subhead {
	font-size: 1.1875rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.005em;
	color: var(--heading-color);
	margin: 1rem 0 1rem;
}

/* =========================================================
   2. OFFER (repeatable, alternating photo/text)
   ========================================================= */
.offer { padding-block: var(--section-spacing); }
.offer:nth-of-type(even) { background: var(--light-bg); }

.offer__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card-sm);
}
.offer__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.offer__title-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .625rem 1rem;
	margin-bottom: 1.25rem;
}
.offer__title-row--stacked { flex-direction: column; gap: .375rem; }

.offer__title {
	font-size: 1.875rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.02em;
	color: var(--heading-color);
	margin: 0;
}
.offer__badge {
	font-size: 1.4375rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -.01em;
	color: var(--primary-color);
}

.offer__body { color: var(--text-color); margin-bottom: 1.5rem; }
.offer__body > p {
	font-size: .96875rem;
	line-height: 1.75;
	margin-bottom: 1rem;
}
.offer__body h4 {
	font-size: 1.0625rem;
	font-weight: var(--font-weight-bold);
	color: var(--heading-color);
	margin: 1.25rem 0 .75rem;
}
.offer__body ul {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.offer__body ul li {
	position: relative;
	padding-left: 1.75rem;
	font-size: .96875rem;
	line-height: 1.6;
}
.offer__body ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-4);
	background: rgba(var(--primary-rgb), .1);
	color: var(--primary-color);
	font-size: .7rem;
	font-weight: var(--font-weight-bold);
	line-height: 20px;
	text-align: center;
}
.offer__body strong { font-weight: var(--font-weight-bold); color: var(--heading-color); }

.offer__benefits {
	background: var(--primary-tint-bg);
	border-radius: var(--radius-md);
	padding: 1.375rem 1.375rem 1.75rem;
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.offer__benefit { display: flex; align-items: flex-start; gap: .75rem; }
.offer__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: .15rem;
	border-radius: var(--radius-5);
	background: var(--state-badge-bg);
	color: var(--text-color-light);
}
.offer__benefit p {
	margin: 0;
	font-size: .90625rem;
	line-height: 1.5;
	color: var(--text-color);
}
.offer__benefit strong { color: var(--heading-color); }

.offer__cta { display: inline-flex; }

/* =========================================================
   3. TERMS AND CONDITIONS
   ========================================================= */
.offers-terms { padding-block: clamp(3rem, 5vw, 4.5rem); background: var(--background-color); }

.offers-terms__heading {
	font-size: 1.625rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.01em;
	color: var(--heading-color);
	margin-bottom: 1.5rem;
}

.offers-terms__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.offers-terms__list li {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	font-size: var(--body-size-sm);
	line-height: 1.6;
	color: var(--muted-color);
}
.offers-terms__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: .15rem;
	border-radius: var(--radius-4);
	background: rgba(var(--primary-rgb), .1);
	color: var(--primary-color);
}

/* =========================================================
   4. RESPONSIVE
   (shared header/footer/hero breakpoints live in media.css /
   components/sections.css; these are specific to this page)
   ========================================================= */
@media (max-width: 991.98px) {
	.offer .offer__col:first-child { margin-bottom: 2rem; }
}

@media (max-width: 767.98px) {
	.offer__title { font-size: var(--h4-size); }
	.offer__badge { font-size: 1.15rem; }
	.offers-intro__subhead { font-size: 1.0625rem; }
	.offers-terms__heading { font-size: 1.375rem; }
}