/**
 * MG offers coupon restyle — Custom Design Heating & Air variant.
 * Targets [mg_offers] / [mg_offer] output rendered through the child-theme
 * offers-single.php template. Pairs with mg-offers-coupon.js for deal parsing.
 *
 * Design: rectangular dashed card, red label badge top, navy hero amount,
 * red divider, navy CTA button, red expiration text. No alternating accents.
 */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ─── Tokens ─── */
.offers {
	--offer-red:        #c8252c;
	--offer-red-deep:   #a91a21;
	--offer-navy:       #102a52;
	--offer-navy-deep:  #1a3a7e;
	--offer-ink:        #1d1d3d;
	--offer-ink-soft:   #475064;
	--offer-paper:      #ffffff;
	--offer-border:     #c2c2c8;
}

/* ─── Grid: 3 across desktop, responsive ─── */
.offers {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	max-width: 1280px !important;
	margin: 32px auto !important;
	padding: 0 16px !important;
	width: auto !important;
	grid-gap: 24px !important;
	justify-content: initial !important;
}
@media (max-width: 1024px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .offers { grid-template-columns: 1fr !important; } }

/* ─── Card shell ─── */
.offers .offer {
	text-align: center;
	position: relative;
	display: flex;
	align-items: stretch;
	height: 100%;
}

.offers .offer .offer-content {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-top: 18px;
}

.offers .offer .offer-body {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	flex: 1 !important;
	height: auto !important;
	width: 100% !important;
	background: var(--offer-paper) !important;
	border: 2px dashed var(--offer-border) !important;
	border-radius: 10px !important;
	padding: 36px 28px 28px !important;
	color: var(--offer-ink) !important;
	font-family: 'Inter', system-ui, sans-serif;
	box-shadow: none !important;
	position: relative;
	text-align: center !important;
	text-decoration: none !important;
}
.offers .offer .offer-body > * { width: 100%; }

/* ─── Title → red label badge floating at top of card ─── */
.offers .offer .offer-title {
	position: absolute !important;
	top: -16px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
	padding: 8px 22px !important;
	background: var(--offer-red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	font: 700 13px/1 'Oswald', sans-serif !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	width: auto !important;
}

/* ─── Deal stack (parsed by JS into pre / big / post) ─── */
.offers .offer .offer-deal {
	margin: 14px 0 18px !important;
	padding: 0 0 18px !important;
	border: 0 !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--offer-navy) !important;
	text-align: center !important;
	font-family: 'Anton', sans-serif;
	position: relative;
}
/* Red divider line under the deal stack */
.offers .offer .offer-deal::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 2px;
	background: var(--offer-red);
}
.offers .offer .offer-deal .offer-deal__pre {
	font: 600 14px/1.2 'Oswald', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--offer-navy);
}
.offers .offer .offer-deal .offer-deal__big {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	font-size: 76px;
	line-height: .92;
	letter-spacing: -.01em;
	color: var(--offer-navy);
	white-space: nowrap;
	display: inline-block;
	max-width: 100%;
	text-transform: uppercase;
}
.offers .offer .offer-deal .offer-deal__big--lg { font-size: 58px; }
.offers .offer .offer-deal .offer-deal__big--xl { font-size: 44px; }
.offers .offer .offer-deal .offer-deal__post {
	margin-top: 2px;
	font: 600 14px/1.25 'Oswald', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--offer-navy);
	text-wrap: balance;
	max-width: 95%;
}
/* Fallback: deal text without a $ or % amount — keep readable */
.offers .offer .offer-deal:not(:has(.offer-deal__big)) {
	font: 400 28px/1.15 'Anton', sans-serif !important;
	display: block !important;
}

/* ─── Terms (description copy) ─── */
.offers .offer .offer-terms {
	margin: 4px 0 22px !important;
	padding: 0 8px !important;
	font: 400 14px/1.5 'Inter', sans-serif !important;
	color: var(--offer-ink-soft) !important;
	text-align: center !important;
}
.offers .offer .offer-terms p { margin: 0 0 6px !important; }
.offers .offer .offer-terms p:last-child { margin-bottom: 0 !important; }

/* ─── CTA button (per-offer label, single configured URL) ─── */
.offers .offer .offer-cta-button {
	display: block;
	width: 100%;
	margin: auto 0 16px;
	padding: 14px 16px;
	background: var(--offer-navy);
	color: #fff;
	font: 600 14px/1.2 'Inter', sans-serif;
	letter-spacing: .02em;
	text-align: center;
	text-decoration: none !important;
	border-radius: 6px;
	transition: background-color .15s ease;
	border: 0;
}
.offers .offer .offer-cta-button:hover,
.offers .offer .offer-cta-button:focus {
	background: var(--offer-navy-deep);
	color: #fff;
	text-decoration: none !important;
}

/* ─── Expiration → plain red text, no ribbon ─── */
.offers .offer .offer-expiration {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--offer-red) !important;
	font: 500 13px/1.2 'Inter', sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: center !important;
	clip-path: none !important;
}

/* ─── Logo ─── */
.offers .offer .offer-logo {
	margin: 8px 0;
}
.offers .offer .offer-logo img {
	max-width: 120px;
	max-height: 48px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* ─── Address ─── */
.offers .offer .offer-address {
	font: 400 12px/1.5 'Inter', sans-serif;
	color: var(--offer-ink-soft);
	margin: 4px 0;
}
.offers .offer .offer-address .street-number {
	display: block;
}

/* ─── Phone ─── */
.offers .offer .offer-phone {
	font: 600 14px/1.4 'Inter', sans-serif;
	color: var(--offer-navy);
	margin: 4px 0;
}

/* ─── Promo code ─── */
.offers .offer .offer-promocode {
	margin: 8px 0;
}
.offers .offer .offer-promocode code {
	display: inline-block;
	padding: 4px 12px;
	background: #f0f4ff;
	border: 1px dashed var(--offer-navy);
	border-radius: 4px;
	font: 600 13px/1.4 monospace;
	color: var(--offer-navy);
	letter-spacing: .08em;
}

/* ─── Solo [mg_offer] wrapper (mg-offers-restyle Rule 2) ─── */
.offers.offers--solo {
	display: block !important;
	max-width: 420px !important;
	margin: 24px auto !important;
	padding: 0 16px !important;
	grid-template-columns: none !important;
}
.offers.offers--solo .offer { width: 100%; }