/* CLASS E — MICROSITE. The only CSS the Astro shell adds around a campaign page.
 *
 * A REAL FILE for the same reason as pages-assets/campaign.css — see the note there: an
 * inline <style is:global> in the layout lands in the shared bundle that all ~2,600 pages
 * link, so it cannot be inline without turning every release into a full one.
 */
/* GROUND AND INK, both, and both load-bearing.
 *
 * These pages carry their own reset and tokens (campaigns/common.css + base.css) and as
 * standalone documents that was the whole cascade. It is not any more:
 * `pages/[...path].astro` imports ALL FIVE layouts in order to dispatch on page class,
 * so Astro bundles every layout's `<style is:global>` — and the site's own base.css —
 * into ONE stylesheet on EVERY page, including this one. That bundle carries
 *
 *     body { color: var(--fg); background: var(--bg) }
 *
 * and Layout.astro's pre-paint script sets `data-theme="light"`, which resolves --fg to
 * near-black. It is injected after the campaign's <link> stylesheets, so at equal
 * specificity it beat `body { color:#fff }` in campaigns/base.css and every inherited
 * string on the page — the city name, the "why" rows, the timeline copy — rendered
 * #16171a on a #0a0a0f card. Present in the DOM, laid out correctly, and invisible.
 *
 * `body.campaign-microsite` is (0,1,1) against that rule's (0,0,1), so this wins on
 * specificity rather than on source order — which is what makes it survive a change in
 * how Astro orders the bundle. The same collision is documented in Transactional.astro,
 * where it was solved by scoping base.css to `.landing`. */
body.campaign-microsite { margin: 0; background: #0a0a0f; color: #fff; }
/* The root is a pass-through: the campaign's own <nav>, sections and <footer> are its
   children and every one of them is positioned by the campaign stylesheet. A wrapper
   that established a stacking context or a containing block here would break the
   hero's fixed glow and the sticky progress bar. */
.campaign-microsite-root { display: contents; }

/* ── the campaign designs' element selectors, undone inside the site footer ───────────
 *
 * These pages carry a standalone prototype's stylesheet, and it styles ELEMENTS and
 * generic utilities, not scoped classes. Five of its rules reach into the horizon footer
 * that Microsite.astro renders after the campaign body. The full list, audited across
 * campaigns/common.css and every campaigns/<name>/*.css:
 *
 *   nav        { position:fixed; top:0; z-index:90 }        campaigns/common.css, v1-verdict.css
 *   footer     { border-top; padding:30px 0; font-size:12px; color:… }   every base.css
 *   footer .wrap { display:flex; justify-content:space-between; gap:15px }   every base.css
 *   .wrap      { max-width:1100px }                         every base.css   → handled by
 *                                                           microsite-footer.css's
 *                                                           `.site-footer .wrap` (0,2,0)
 *   .btn       { display:inline-flex; … }                   → handled the same way
 *
 * The first three are undone below. They are reset HERE rather than edited out of the
 * campaign stylesheets, because those files are a byte-for-byte copy of what shipped in
 * ting-ad/public/ and each rule is still doing its real job on the campaign design above:
 * `nav` styles the fixed top bar, `footer .wrap` laid out the prototype's one-line close.
 *
 * SPECIFICITY IS MATCHED, NOT BEATEN. Each reset is written to the exact specificity of
 * the rule it undoes, so it wins on source order (this file loads after the campaign CSS)
 * and stays BELOW everything above it. That matters: `footer .wrap` is (0,1,1), and a
 * heavier reset like `.campaign-microsite footer.site-footer .wrap` (0,3,1) would also
 * out-rank `.footer-bottom .wrap` (0,2,0) and `.site-footer--hz .footer-grid` (0,2,0) —
 * flattening the legal row and the link grid that are supposed to layer on top. */

/* `footer { … }` is (0,0,1); `.campaign-microsite footer.site-footer` is heavier, but this
 * one may be, because nothing else styles the footer ELEMENT itself. */
.campaign-microsite footer.site-footer {
  border-top: 0;
  padding: 0;
  font-size: initial;
  color: inherit;
  display: block;
  gap: normal;
}

/* `.f-close` ONLY — never `.wrap` generally, and that distinction cost a release.
 *
 * The campaign CSS has `footer .wrap { display:flex; justify-content:space-between;
 * gap:15px }` at (0,1,1), written for the prototype's one-line close. Three elements in
 * this footer carry `.wrap`:
 *
 *   .wrap.f-close          wants display:block, centred      ← the only one that needs
 *                                                              the campaign rule undone
 *   .wrap.footer-grid      wants display:grid + a 36px gap   ← microsite-footer.css
 *   .footer-bottom > .wrap wants display:flex + a 16px gap   ← microsite-footer.css
 *
 * Resetting `.wrap` as a whole hit all three: at (0,1,1) it out-ranked the base grid's
 * (0,1,1)-and-earlier rule, so `.footer-grid` computed `display:block; gap:normal` and
 * the brand and links collapsed back into one column — undoing the previous fix while
 * appearing to fix this one. The base layer is now scoped `footer:where(.site-footer)`
 * so it holds its own against the campaign rule, and this reset is narrowed to the one
 * element that genuinely has nothing else styling its display.
 *
 * Reference (/fr/paris/… at 980px): .f-close is display:block, text-align:center, CTA
 * centred BELOW the tagline; .footer-grid is display:grid with a 36px gap. */
footer:where(.site-footer) .f-close {
  display: block;
  justify-content: normal;
  flex-wrap: nowrap;
  gap: normal;
}

/* `nav` is (0,0,1) and pins the campaign's top bar. The footer's explore column is a
 * <nav class="f-col f-col--explore"> — semantically right, and the reason the whole link
 * list was torn out of the page and fixed across the top of the hero, over the match card,
 * unreachable and unscrollable. */
.campaign-microsite footer.site-footer nav {
  position: static;
  top: auto; left: auto; right: auto;
  z-index: auto;
  display: block;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: none;
  border-bottom: 0;
}

/* The close's fine print — "Personalised · No credit card · Every city on Earth".
 *
 * It comes from the campaign's removed closing section, where it was
 * `<p class="dim" style="font-size:12px;margin-top:15px">`. Those values are reproduced
 * here against the horizon palette rather than the campaign's, because the element now
 * lives in the site footer: --hz-blanc is footer-horizon.css's own ink token, declared on
 * .site-footer--hz, so the note sits at the same weight as the rest of the close instead
 * of at the campaign design's.
 *
 * Scoped to --hz because only the horizon close renders it; the default footer never
 * receives a ctaNote. The explicit margin also re-states what the campaign's bare
 * `p { margin:0 }` would otherwise take away. */
.site-footer--hz .f-cta-note {
  margin: 15px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(var(--hz-blanc), .55);
}

/* ── the campaign's own <nav>: transparent over the hero, solid once the page moves ───
 *
 * campaigns/common.css ships it opaque from the first pixel:
 *
 *     nav { position:fixed; …; backdrop-filter:blur(20px);
 *           background:rgba(0,0,0,.55); border-bottom:1px solid rgba(255,255,255,.06) }
 *
 * A dark glass bar sitting on top of a dark hero at rest reads as a seam across the design
 * rather than as chrome floating on it. Cleared at rest and restored on `.is-scrolled`
 * (pages-assets/header-scroll.js), which is the same behaviour the CAMPAIGN class gets.
 *
 * THE SCROLLED VALUES ARE THE ORIGINAL ONES, character for character — this changes WHEN
 * the bar has a ground, never what that ground looks like.
 *
 * Specificity: the shipped rule is a bare `nav` at (0,0,1); these are (0,1,1) and (0,2,1),
 * so both take, and neither can reach the horizon footer's own <nav> (the explore column),
 * which is reset separately above. */
.campaign-microsite nav {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .28s linear, border-color .28s linear, backdrop-filter .28s linear;
}
.campaign-microsite nav.is-scrolled {
  background: rgba(0, 0, 0, .55);
  border-bottom-color: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@media (prefers-reduced-motion: reduce) {
  .campaign-microsite nav { transition: none; }
}

/* ── the SITE's own utilities, undone inside the campaign body ───────────────────────
 *
 * The mirror image of the block above, and it was missed until the rent design landed.
 * That block stops the campaign's element selectors reaching DOWN into the site footer.
 * This one stops the site's stylesheet reaching UP into the campaign design.
 *
 * `pages/[...path].astro` imports all five layouts to dispatch on page class, so Astro
 * bundles src/styles/base.css onto every page including this one — the same collision the
 * ground-and-ink note above describes, only these are class utilities rather than `body`.
 * Audited empirically rather than by grep: of the 486 bundled rules, exactly seven match
 * anything inside the campaign root, and four of those are agreed defaults the campaign
 * stylesheet sets identically (`*{box-sizing}`, `img{max-width}`, `a{color:inherit}`, the
 * reduced-motion guard) or are ours by construction (`.btn .cta-ico`). These are the two
 * that genuinely disagree, plus one inherited value:
 *
 *   .wrap  1120px / 0 48px   vs the prototype's 1100px / 0 20px   ← every gallery base.css
 *   .btn   9px 17px, pill    vs the prototype's 0 20px, 15px      ← campaigns/common.css
 *   body   line-height 1.65  vs the prototype's `normal`          ← inherited, not matched
 *
 * All three are (0,1,0) or weaker and lost on SOURCE ORDER, not specificity — Astro's
 * bundle is injected after the campaign's <link>s. So the fix is specificity, as before:
 * (0,2,0) here beats (0,1,0) there whatever the eventual link order turns out to be, in
 * dev and in the build alike.
 *
 * SCOPED TO THE TWO ROOTS, never to the body class. `.campaign-microsite` is on <body>
 * and would take the footer with it — `.footer-grid` and `.footer-bottom > .wrap` both
 * carry `.wrap`, and a blanket reset flattening them is exactly the regression the
 * `.f-close` note above was written about. Both roots close before <Footer> renders:
 * Campaign.astro's `.campaign-design-root` is a real element, Microsite.astro's
 * `.campaign-microsite-root` is `display:contents`, and neither contains the footer.
 *
 * The values are the prototypes' own, and they are uniform: `.wrap` is
 * `max-width:1100px; padding:0 20px` in all nine gallery base.css files AND in
 * v1-verdict.css, which is the one design that loads no base.css at all. */
.campaign-design-root,
.campaign-microsite-root { line-height: normal; }

.campaign-design-root .wrap,
.campaign-microsite-root .wrap { max-width: 1100px; padding: 0 20px; }

/* `.btn` is restored to campaigns/common.css's own geometry. Colour is NOT restated: the
   site's `.btn` sets no background, so `background:var(--ys)` and the `.ghost`/`.dark`
   variants already survive untouched — only the box changed. */
.campaign-design-root .btn,
.campaign-microsite-root .btn {
  padding: 0 20px;
  border-radius: 15px;
  font-size: 16px;
  transition: background .15s;
}
/* `.btn.nav` is (0,2,0) in common.css and would otherwise TIE with the reset above and
   lose on source order, silently resizing every header CTA from 45px to 50px. The three
   campaign components use `.btn`, `.btn.nav` and `.btn.ghost` and nothing else; `.ghost`
   changes only colour, so `.nav` is the one variant that has to be re-stated. */
.campaign-design-root .btn.nav,
.campaign-microsite-root .btn.nav {
  padding: 0 18px;
  font-size: 14px;
}

/* ── the estimation odometer's currency, on the French side of the number ─────────────
 *
 * `estimation-variants/v1-number` writes the estimate as `AED 2,140,000` — currency first,
 * which is right for English and wrong for French, where it is `2 140 000 €`. The design
 * therefore renders `.cur` on whichever side the locale asks for (see
 * data/campaigns/estimation-number.ts), and only the MARGIN has to follow it:
 *
 *     .odo .cur { margin: 6px 8px 0 0 }        v1-number.css — a gap on the RIGHT
 *
 * Left where it is, a trailing `€` would sit flush against the last digit with 8px of air
 * on its far side. Mirrored here rather than edited there, because the gallery files are a
 * byte-for-byte copy of what shipped in ting-ad/public/ and that rule is still correct for
 * the English page it was written for.
 *
 * Only ever matches when the component asks for it — `.cur--after` exists on no other
 * page — and is scoped to the design root, so it cannot reach the footer. (0,3,0) against
 * the prototype's (0,2,0). */
.campaign-design-root .odo .cur--after { margin: 6px 0 0 8px; }