/* =========================================================================
   Jebly landing — bridge sheet. TEMPORARY.

   The shared landing layout still loads public/assets/landing/css/main.css on
   this page (it is the stylesheet of all 17 views that extend the layout).
   A handful of its rules outrank the prototype's because they are element-level
   or descendant selectors on the section roots the port deliberately keeps.

   Every rule below neutralises exactly one documented main.css collision
   (PORT_AUDIT.md §5.1) or re-states a prototype value that main.css ties with
   and wins on source order. Nothing here is a new design decision.

   This file is deleted once main.css stops loading on the landing page
   (PORT_AUDIT.md D16), which is only possible after every section is ported.
   Loaded after landing.css, scoped to body.jb, so no other page is touched.
   ========================================================================= */

/* main.css:573  p:last-child { margin-bottom: -7px !important }
   The only !important in the collision set; it shifts every trailing <p>
   (footer bar, newsletter sub, card bodies, stat labels) up by 7px. */
body.jb p:last-child { margin-bottom: 0 !important; }

/* main.css:569  p { margin-top: -9px }
   Loses on specificity to .jb :where(p), but main.css also re-declares p
   margins inside .hero / .footer descendant rules below. Restated once. */
body.jb p { margin-top: 0; }

/* --- main-nav ----------------------------------------------------------
   main.css:4091  .main-nav { position: sticky; background: rgba(255,255,255,.96);
                              box-shadow: 0 10px 30px …; backdrop-filter: blur(16px) }
   Same specificity as landing.css:658 (.main-nav) and main.css loads first,
   so landing.css already wins on order — except backdrop-filter and
   box-shadow, which landing.css only sets in .is-stuck. Clear them at rest. */
body.jb .main-nav:not(.is-stuck) {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* main.css:4101 / :4920 / :4937  .main-nav .container { min-height: 78px; display:flex; gap }
   The new nav uses .jb-container, so this cannot match. No rule needed —
   recorded here so the next reader does not go looking. */

/* --- footer ------------------------------------------------------------
   main.css:4752  .footer { background:#101d17; color: rgba(255,255,255,.78); padding: 0 0 28px }
   Ties with landing.css:1186 (.footer) and loses on order for background and
   color, but its padding shorthand wipes the prototype's padding-block.
   main.css:4848  .footer h5 — the new footer uses h2.footer__coltitle, no hit.
   main.css:4931  @media .footer { … } — same shorthand at <=720px. */
body.jb .footer { padding: var(--jb-sp-48) 0; }

/* The prototype's footer grid is 1.6fr 1fr 1fr 1.2fr for four columns.
   This port renders three (brand, Support, Contact): PORT_AUDIT.md D4 drops
   the "Product" column because its four labels have no translation keys.
   Documented in PORT_REPORT.md §7 as the one selector changed from the spec. */
body.jb .footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; }

@media (max-width: 1024px) {
  body.jb .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body.jb .footer__grid { grid-template-columns: 1fr; }
}

/* main.css:618 / :4980  a { color: …; transition: color/background/border/transform .2s }
   Colour loses to .jb :where(a). The transition survives on plain anchors that
   carry no prototype class (footer contact/list links); it animates the same
   properties the prototype animates, at the same 200ms, so it is left alone
   rather than fought. Recorded, not overridden. */

/* --- no-JS parity with the legacy chrome ---------------------------------
   The legacy nav opened its "Join us" menu on hover with CSS alone
   (main.css:4248 .join-wrap:hover .join-dd), so those links were reachable
   with JavaScript off. landing.js opens the new dropdowns on click, which
   leaves .jb-drop__panel at visibility:hidden when the script never runs.
   landing.js sets .jb-js on <html> as its first act, so gating on its absence
   restores exactly the legacy behaviour and changes nothing once JS loads.
   Same properties, same values and same transition as
   landing.css:723 (.jb-drop[data-open] .jb-drop__panel). */
html:not(.jb-js) .jb-drop:hover .jb-drop__panel,
html:not(.jb-js) .jb-drop:focus-within .jb-drop__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--jb-motion-fast) var(--jb-ease-out),
              transform var(--jb-motion-fast) var(--jb-ease-out), visibility 0s;
}

/* --- hero (Wave A) -------------------------------------------------------
   main.css:5004  .hero { text-align: center; background: radial-gradient(…) }
   Ties with landing.css:778 (.hero) and loses on order only for the
   properties landing.css declares — it declares neither of these two, so both
   leak. The prototype's hero is start-aligned on the page background. */
body.jb .hero { text-align: start; background: none; }

/* main.css:5018  .hero h1 { max-width:900px; margin:0 auto 18px;
                             font-family: var(--heading-fonts), i.e. Lato;
                             font-size: clamp(36px,7vw,78px); font-weight:900;
                             color: var(--landing-text) }
   A descendant selector (0,1,1) that outranks .hero__title (0,1,0) on every
   one of those properties. Values below are landing.css:798 plus the
   .jb :where(h1) reset it relies on. */
body.jb .hero__title {
  max-inline-size: none;
  margin: 0;
  font-family: inherit;
  font-size: var(--jb-fs-display);
  font-weight: var(--jb-fw-bold);
  line-height: var(--jb-lh-display);
  color: var(--jb-text-primary);
}

/* main.css:5054  .hero p { max-width:720px; margin:0 auto 26px;
                            color: var(--landing-muted);
                            font-size: clamp(16px,2vw,20px); line-height:1.7 }
   Same shape as above; values below are landing.css:802. */
body.jb .hero__sub {
  max-inline-size: 46ch;
  margin: var(--jb-sp-20) 0 0;
  color: var(--jb-text-secondary);
  font-size: var(--jb-fs-lead);
  line-height: var(--jb-lh-lead);
}

/* --- marquee (Wave A) ----------------------------------------------------
   landing.js clones the item set once so the -50% keyframe loops seamlessly.
   With the script absent the track holds a single copy and the animation
   would slide it off leaving a gap, so the strip is held static instead —
   the same end state the reduced-motion block produces. */
html:not(.jb-js) .marquee__track { animation: none; }

/* --- Wave B: CMS images in glyph slots -----------------------------------
   The prototype puts a fixed sprite glyph in the module tab and the feature
   card disc. Both are admin-uploaded images here (modules.icon,
   admin_features.image), so the <img> needs the sizing landing.css:574 and
   :413 give the <svg> it replaces — without it the raster renders at its
   natural size (800px) and blows the control out. */
body.jb .jb-seg__tab-icon {
  inline-size: var(--jb-icon-sm);
  block-size: var(--jb-icon-sm);
  object-fit: contain;
  flex: none;
}
body.jb .jb-disc__img {
  inline-size: var(--jb-icon);
  block-size: var(--jb-icon);
  object-fit: contain;
}
body.jb .features__card:first-child:nth-last-child(4) .jb-disc__img {
  inline-size: var(--jb-icon-lg);
  block-size: var(--jb-icon-lg);
}

/* --- section backgrounds (Wave B) ----------------------------------------
   main.css:5127  .services-section, .zones, .special, .cta-manage
                  { background: var(--landing-soft) }
   landing.css gives `special` its own full-bleed tint (:1065) and leaves the
   other three on the page background, so this rule tints three sections that
   should not be tinted — and on `services-section` it flattens the contrast
   between the page and the soft-green module panel. `special` is left to
   landing.css, which declares the same property later and wins on order. */
body.jb .services-section,
body.jb .zones,
body.jb .cta-manage { background: none; }

/* --- earn grid card count (Wave C) ---------------------------------------
   landing.css:1032 fixes .earn__grid at three columns, which is right only
   when all three role cards render. The rider card is behind the RideShare
   addon and the other two are behind their registration toggles, so two or
   one is normal — and the empty third track left the row visibly off-centre
   under a centred section header. Matches the count guards landing.css
   already uses for the features bento (:first-child:nth-last-child(n)). */
body.jb .earn__grid:has(.earn__card:first-child:nth-last-child(2)) {
  grid-template-columns: repeat(2, 1fr);
}
body.jb .earn__grid:has(.earn__card:first-child:nth-last-child(1)) {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}

/* --- testimonial avatar (Wave D) -----------------------------------------
   landing.css:1166 is `.testimonials__avatar img { position: absolute }` and
   nothing else: the prototype's avatar is two initials, so the rule was never
   exercised. The CMS supplies `reviewer_image_full_url`, and an absolutely
   positioned image inside a disc that is not itself positioned escapes to the
   nearest positioned ancestor and paints at its natural size. Completing the
   rule here keeps landing.css byte-identical. */
body.jb .testimonials__avatar { position: relative; }
body.jb .testimonials__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* --- stats band item count (Wave D) --------------------------------------
   landing.css:1080 fixes the band at `repeat(4, 1fr) auto`: four numbers plus
   the note. The rider tile is behind the RideShare addon, which would make
   five numbers and push the note onto a second row. Counted on the first item
   (nth-last-child includes the note element), and only above the 1024px
   breakpoint where landing.css:1305 takes over with its own 2-column grid. */
@media (min-width: 1025px) {
  body.jb .stats__band:has(.stats__item:first-child:nth-last-child(6)) {
    grid-template-columns: repeat(5, 1fr) auto;
  }
  body.jb .stats__band:has(.stats__item:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(3, 1fr) auto;
  }
}