/* Hero → Promotions (inc/hero-promos.php): the hero copy on the left, a promo rail on the right.
   Colors, fonts and buttons come from Branding (the --color-*, --font-* and button variables), so the rail
   matches every site without per-site CSS. Loaded only on pages with live promos. */

.hero-promo-layout { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(32px, 5vw, 88px); height: 100%; padding: 0 10%; box-sizing: border-box; }
.hero-promo-layout.hero-promo-hero-bottom { align-items: flex-end; padding-bottom: clamp(48px, 7vh, 96px); }
.hero-promo-layout.hero-promo-hero-top { align-items: flex-start; }
/* the copy is a normal column here, not absolutely centered */
/* specific enough to win over a site's own hero-content rules (Additional CSS loads after this file) */
.page-hero .overlay .hero-promo-layout > .hero-content { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 760px !important; padding: 0 !important; margin: 0 !important; }
.page-hero .overlay .hero-promo-layout > .hero-content h1 { overflow-wrap: break-word; }
.hero-promos { flex-shrink: 0; }

/* the rail */
.hero-promos { position: relative; flex: 0 0 min(420px, 36%); background: rgba(255, 255, 255, .97); color: var(--color-headings, #111); border-radius: max(12px, min(var(--img-radius, 16px), 24px)); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .45); overflow: hidden; text-align: left; }
.hero-promos-stage { display: grid; padding: clamp(24px, 2.4vw, 34px) clamp(24px, 2.4vw, 34px) clamp(22px, 2vw, 28px); }
/* every promo sits in the same cell, so the card never jumps in height between offers */
.hero-promo { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; animation: hp-in .45s ease; }
.hero-promo[hidden] { display: flex; visibility: hidden; animation: none; }
@keyframes hp-in { from { opacity: 0; transform: translateY(6px); } }
.hero-promo-tag { margin: 0 0 12px !important; font: 600 16px/1.2 var(--font-small-titles, var(--font-body)) !important; letter-spacing: .02em; color: var(--color-main) !important; }
.hero-promo-title { margin: 0 !important; font-family: var(--font-titles) !important; font-size: clamp(22px, 1.9vw, 28px) !important; line-height: 1.15 !important; font-weight: var(--weight-headers, 700); color: var(--color-headings, #111) !important; text-transform: none !important; letter-spacing: -.01em; }
.hero-promo-rate { margin: 16px 0 0 !important; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hero-promo-number { font-family: var(--font-data-numbers, var(--font-titles)); font-size: clamp(44px, 4vw, 60px); line-height: .95; font-weight: var(--weight-headers, 700); letter-spacing: -.03em; color: var(--color-main); font-variant-numeric: tabular-nums; }
.hero-promo-unit { font: 600 16px/1.2 var(--font-body); color: var(--color-body, #555); }
.hero-promo-text { margin: 12px 0 0 !important; font-size: 16px !important; line-height: 1.5 !important; color: var(--color-body, #555) !important; }
.hero-promo-button { margin-top: 22px !important; }

/* tabs: number + name, the active one carries a progress line */
.hero-promos-tabs { border-top: 1px solid rgba(0, 0, 0, .08); }
.hero-promos-tab { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 14px clamp(24px, 2.4vw, 34px); padding-right: 64px; cursor: pointer; color: rgba(0, 0, 0, .5); font: 500 15px/1.3 var(--font-body); transition: color .2s, background-color .2s; }
.hero-promos-tab + .hero-promos-tab { border-top: 1px solid rgba(0, 0, 0, .06); }
.hero-promos-tab:hover { color: var(--color-headings, #111); background: rgba(0, 0, 0, .025); }
.hero-promos-tab:focus-visible { outline: 2px solid var(--color-main); outline-offset: -2px; }
.hero-promos-tab[aria-selected="true"] { color: var(--color-headings, #111); font-weight: 600; }
.hero-promos-n { font-variant-numeric: tabular-nums; font-weight: 600; color: inherit; opacity: .7; }
.hero-promos-tab[aria-selected="true"] .hero-promos-n { color: var(--color-main); opacity: 1; }
.hero-promos-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--color-main); }
.hero-promos.is-playing .hero-promos-tab[aria-selected="true"] .hero-promos-bar { animation: hp-fill var(--hp-seconds, 7s) linear forwards; }
.hero-promos.is-playing.is-paused .hero-promos-tab[aria-selected="true"] .hero-promos-bar { animation-play-state: paused; }
@keyframes hp-fill { to { width: 100%; } }

/* pause / play */
.hero-promos-pause { all: unset; box-sizing: border-box; position: absolute; right: clamp(16px, 1.6vw, 24px); bottom: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .05); color: var(--color-headings, #111); }
.hero-promos-pause:hover { background: rgba(0, 0, 0, .1); }
.hero-promos-pause:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
.hero-promos-pause span { width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.hero-promos-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }

@media (prefers-reduced-motion: reduce) { .hero-promo { animation: none; } }

/* tablets and phones: the rail drops under the copy, full width */
@media (max-width: 1024px) {
	.page-hero:has(.hero-promo-layout), .page-hero:has(.hero-promo-layout) .overlay { height: auto !important; min-height: 100vh; min-height: 100svh; }
	.hero-promo-layout { flex-direction: column; align-items: stretch !important; justify-content: flex-end; min-height: inherit; padding: 140px 7% 48px; gap: 36px; }
	.hero-promos { flex: none; width: 100%; max-width: 560px; }
}
@media (max-width: 767px) {
	.hero-promo-layout { padding: 120px 20px 32px; gap: 28px; }
	.hero-promos-tab { padding-top: 12px; padding-bottom: 12px; }
}

/* ── Slide styles (Full slides, Split slides): the hero copy is slide 1, each offer another slide; dots below ── */
.hero-promo-layout.hp-style-slides, .hero-promo-layout.hp-style-split { flex-wrap: wrap; align-content: center; }
.hp-stage { display: grid; flex: 1 1 0; min-width: 0; position: relative; z-index: 2; }
/* every slide sits in the same cell, so the hero never changes height between slides */
.page-hero .overlay .hp-stage > .hero-content { grid-area: 1 / 1; position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; max-width: 760px !important; padding: 0 !important; margin: 0 !important; transition: opacity .6s ease, transform .6s ease; }
.page-hero .overlay .hp-stage > .hero-content[hidden] { display: block !important; visibility: hidden; opacity: 0; transform: translateY(10px) !important; }
/* offer titles take the hero title's look (copied from the page's h1 by js/hero-promos.js) */
.hp-title { font-family: var(--hp-h1-font, var(--font-headlines)); font-size: var(--hp-h1-size, var(--size-titles-hero)); font-weight: var(--hp-h1-weight, 700); line-height: var(--hp-h1-lh, 1.05); letter-spacing: var(--hp-h1-ls, normal); text-transform: var(--hp-h1-tt, none); margin: 0 0 30px !important; }
.hp-rate { display: block; margin-top: .12em; color: var(--hp-accent, #fff); }
.hp-rate small { font-size: .38em; font-weight: 600; letter-spacing: 0; vertical-align: .55em; }

/* Full slides: each offer's photo fades in behind the copy, under a shade so white text stays readable */
.hp-backgrounds { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* above the hero photo, under the copy */
.hp-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .9s ease; }
.hp-bg:first-child { background: none; }
.hp-bg:not(:first-child)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .25) 100%); }
.hp-centered .hp-bg:not(:first-child)::after, .page-hero:has(.hp-centered) .hp-bg:not(:first-child)::after { background: rgba(0, 0, 0, .58); }
.hp-bg.is-on { opacity: 1; }
.hp-style-slides > .hp-stage { flex-basis: 100%; }

/* Split slides: the photo changes in a rounded frame beside the copy */
.hp-frame { position: relative; z-index: 2; flex: 0 0 min(460px, 38%); aspect-ratio: 4 / 5; border-radius: max(12px, min(var(--img-radius, 16px), 28px)); overflow: hidden; background: rgba(255, 255, 255, .08); }
.hp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hp-photo.is-on { opacity: 1; }

/* dots: the active one stretches into a progress pill */
.hp-centered .hp-dots { justify-content: center; }
.page-hero .overlay .hp-centered .hp-stage > .hero-content { margin-inline: auto !important; justify-self: center; text-align: center; }
.hp-dots { flex-basis: 100%; position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; margin-top: clamp(28px, 4vh, 48px); }
.hp-dot { all: unset; box-sizing: border-box; position: relative; width: 10px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .4); cursor: pointer; overflow: hidden; transition: width .35s ease, background-color .2s; }
.hp-dot:hover { background: rgba(255, 255, 255, .7); }
.hp-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hp-dot[aria-current="true"] { width: 44px; background: rgba(255, 255, 255, .35); }
.hp-dot i { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: inherit; }
.hp-dot[aria-current="true"] i { width: 100%; }
.hp-dots.is-playing .hp-dot[aria-current="true"] i { width: 0; animation: hp-fill var(--hp-seconds, 7s) linear forwards; }
.hp-dots.is-playing.is-paused .hp-dot[aria-current="true"] i { animation-play-state: paused; }
.hp-dots .hero-promos-pause { position: static; margin-left: 8px; width: 30px; height: 30px; background: rgba(255, 255, 255, .14); color: #fff; }
.hp-dots .hero-promos-pause:hover { background: rgba(255, 255, 255, .26); }

@media (prefers-reduced-motion: reduce) { .page-hero .overlay .hp-stage > .hero-content, .hp-bg, .hp-photo { transition: none; } }
@media (max-width: 1024px) {
	.hp-frame { flex: none; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; order: -1; }
}

/* Full slides → Arrows: previous and next on the sides of the hero, vertically centered */
.hp-arrow { all: unset; box-sizing: border-box; position: absolute; z-index: 4; top: 50%; translate: 0 -50%; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .28); transition: background-color .2s, border-color .2s, transform .2s; }
.hp-arrow:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); }
.hp-arrow:active { transform: scale(.94); }
.hp-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hp-arrow span { width: 10px; height: 10px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.hp-prev { left: clamp(12px, 2.5vw, 36px); } .hp-prev span { rotate: 45deg; margin-left: 4px; }
.hp-next { right: clamp(12px, 2.5vw, 36px); } .hp-next span { rotate: -135deg; margin-right: 4px; }
@media (max-width: 767px) { .hp-arrow { display: none; } } /* phones swipe */

/* Full slides: the copy lines up with the page sections, arrows sit 30px from the screen edges, and the
   copy is vertically centered in the hero (the slides' dots sit at the bottom, outside the centering) */
/* doubled selectors: beats a theme's own hero padding, which loads later in Additional CSS */
body .page-hero.page-hero .overlay.overlay:has(.hp-style-slides) { display: flex !important; flex-direction: column; justify-content: center; padding: 210px 0 110px !important; min-height: max(620px, calc(100svh - 140px)) !important; height: auto !important; box-sizing: border-box; }
.page-hero .overlay .hero-promo-layout.hp-style-slides { margin: 0 auto !important; }
.hero-promo-layout.hp-style-slides { position: static; width: min(82%, var(--section-width, 1240px)); margin-inline: auto; padding: 0 !important; height: auto; }
.page-hero:has(.hp-style-slides) { position: relative; }
.hp-style-slides .hp-dots { position: absolute; left: 50%; translate: -50% 0; bottom: clamp(24px, 4vh, 44px); width: min(82%, var(--section-width, 1240px)); margin: 0; }
.hp-style-slides .hp-prev { left: 30px; }
.hp-style-slides .hp-next { right: 30px; }
/* a fixed header with its own background still covers the top of the hero: leave room for it, fill the screen below it */
body.page-fixed-header:not(.acf-header-transparent) .page-hero.page-hero .overlay.overlay:has(.hp-style-slides) { padding: 210px 0 110px !important; min-height: max(640px, calc(100svh - 40px)) !important; }

/* every slide centers in the slide area, so a short slide sits in the middle, not at the top */
.page-hero .overlay .hp-stage > .hero-content { align-self: center; }