/* =========================================================================
   PROMOTION OFFER PAGE — page-promo.php only (enqueued by inc/site-promo.php).
   Same palette as the banner so the page reads as its continuation: #101010
   ground, the logo's #C8102E for the one action, white type.

   SPECIFICITY: every rule is prefixed with `.i1promo-page` to beat the
   Elementor kit's (0,1,1) h1/h2/a rules.
   ========================================================================= */

.i1promo-page { font-family: var(--i1-body); color: var(--i1-ink); background: #fff; }
.i1promo-page .i1pp-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
.i1promo-page .i1pp-wrap--narrow { max-width: 820px; }

/* ---- Hero ---- */
.i1promo-page .i1pp-hero {
	background: #101010;
	color: #fff;
	border-bottom: 4px solid #C8102E;
	padding: clamp(44px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
}
.i1promo-page .i1pp-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font: 700 12px/1.3 var(--i1-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}
.i1promo-page .i1pp-mark { flex: none; width: 5px; height: 15px; border-radius: 1px; background: #C8102E; }
.i1promo-page .i1pp-h1 {
	margin: 0 0 14px;
	max-width: 18ch;
	text-wrap: balance;
	font: 800 clamp(2.1rem, 1.3rem + 3.6vw, 4rem)/1.02 var(--i1-display);
	letter-spacing: -.02em;
	color: #fff;
}
.i1promo-page .i1pp-lede {
	margin: 0 0 28px;
	max-width: 52ch;
	font: 400 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.5 var(--i1-body);
	color: rgba(255, 255, 255, .86);
}
.i1promo-page .i1pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.i1promo-page a.i1pp-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 54px;
	padding: 0 28px;
	border-radius: 15px;
	background: #C8102E;
	color: #fff;
	font: 600 15px/1 var(--i1-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease;
}
.i1promo-page a.i1pp-btn:hover,
.i1promo-page a.i1pp-btn:focus { background: #A50D26; color: #fff; }
.i1promo-page a.i1pp-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #fff;
	font: 600 15px/1.2 var(--i1-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.i1promo-page .i1pp-tip {
	margin: 18px 0 0;
	max-width: 60ch;
	font: 400 15px/1.5 var(--i1-body);
	color: rgba(255, 255, 255, .86);
}
.i1promo-page .i1pp-fine {
	margin: 14px 0 0;
	max-width: 70ch;
	font: 400 13.5px/1.5 var(--i1-body);
	color: rgba(255, 255, 255, .72);
}
.i1promo-page .i1pp-hero a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Campaign photo on the right, faded into the ground so the copy never sits
   on it. Only from 1024px, where the copy column clears it: the custom
   property is only used inside this query, so phones never download it. */
@media (min-width: 1024px) {
	.i1promo-page .i1pp-hero--img { position: relative; overflow: hidden; }
	.i1promo-page .i1pp-hero--img::after {
		content: "";
		position: absolute;
		inset: 0 0 0 auto;
		width: min(42%, 620px);
		background:
			linear-gradient(90deg, #101010 0%, rgba(16, 16, 16, .55) 28%, rgba(16, 16, 16, 0) 62%),
			var(--i1pp-img) center / cover no-repeat;
		pointer-events: none;
	}
	.i1promo-page .i1pp-hero--img .i1pp-wrap { position: relative; z-index: 1; }
	.i1promo-page .i1pp-hero--img .i1pp-wrap > * { max-width: min(640px, 56%); }
}

/* ---- Reviewer box (staging / editors only) ---- */
.i1promo-page .i1pp-review { background: #FFF7E0; border-bottom: 1px solid #E9D9A6; padding: 22px 0; font-size: 15px; line-height: 1.5; }
.i1promo-page .i1pp-review p { margin: 0 0 8px; }
.i1promo-page .i1pp-review ol { margin: 0; padding-left: 1.3em; }
.i1promo-page .i1pp-review li { margin: 0 0 4px; }
.i1promo-page .i1pp-review__title { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: #6B5200; }

/* ---- Sections ---- */
.i1promo-page .i1pp-sec { padding: clamp(44px, 6vw, 76px) 0; }
/* "Read the terms" jumps here; the sticky header (89-104px) would cover the
   heading without this. */
.i1promo-page #offer-terms { scroll-margin-top: 80px; }
.i1promo-page .i1pp-sec--wash { background: var(--i1-bone); }
.i1promo-page .i1pp-h2 {
	margin: 0 0 22px;
	font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.05 var(--i1-display);
	letter-spacing: var(--i1-track-sm);
	text-transform: uppercase;
	color: var(--i1-ink);
}
.i1promo-page .i1pp-note { margin: -8px 0 24px; max-width: 64ch; font-size: 16px; line-height: 1.5; color: var(--i1-slate); }

/* ---- Terms card ---- */
.i1promo-page .i1pp-card {
	border: 1px solid var(--i1-line);
	border-radius: var(--i1-radius);
	padding: clamp(22px, 3vw, 32px);
	background: #fff;
}
.i1promo-page .i1pp-card__offer { margin: 0 0 14px; font: 800 1.25rem/1.2 var(--i1-display); color: var(--i1-ink); }
.i1promo-page .i1pp-terms { margin: 0; padding-left: 1.2em; font-size: 16px; line-height: 1.6; color: #2A2A2C; }
.i1promo-page .i1pp-terms li { margin: 0 0 6px; }
.i1promo-page .i1pp-terms li::marker { color: #C8102E; }
.i1promo-page .i1pp-dates { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--i1-line); font-weight: 600; }

/* ---- Shops ---- */
.i1promo-page .i1pp-shops {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.i1promo-page .i1pp-shop {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--i1-line);
	border-radius: 16px;
}
.i1promo-page .i1pp-shop p { margin: 0; }
.i1promo-page .i1pp-shop__name { font: 800 1.05rem/1.2 var(--i1-display); color: var(--i1-ink); }
.i1promo-page .i1pp-shop__addr { margin-top: 4px !important; font-size: 14.5px; line-height: 1.45; color: var(--i1-slate); }
/* Full-width cards (phones) have room for both links on one row; the narrow
   desktop cards stack them so every card lines up the same way. */
.i1promo-page .i1pp-shop__links { margin-top: auto !important; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 0 20px; }
@media (min-width: 640px) {
	.i1promo-page .i1pp-shop__links { flex-direction: column; align-items: flex-start; padding-top: 10px; }
}
@media (max-width: 639px) {
	.i1promo-page .i1pp-shops { gap: 10px; }
	.i1promo-page .i1pp-shop { padding: 14px 16px 8px; }
}
.i1promo-page .i1pp-shop a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 600 14.5px/1.2 var(--i1-body);
	text-underline-offset: 3px;
}
.i1promo-page a.i1pp-shop__book { color: #B00E29; text-decoration: underline; }
.i1promo-page a.i1pp-shop__page { color: var(--i1-ink); text-decoration: underline; }
.i1promo-page .i1pp-shop a:focus-visible { outline: 3px solid #C8102E; outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
	.i1promo-page a.i1pp-btn { transition: none; }
}