/* ============================================================
   BUTTON SYSTEM — the single home for section call-to-action buttons
   (task 3119)
   ============================================================

   Martien, 09-09, in his own words:

     "die knoppen moeten allemaal de hoogte hebben van de explore
      collection knop op de homepage. maar er zijn 3 soorten knoppen:
      als in een sectie zich 1 knop bevindt dan krijgt die de opmaak van
      de explore collection knop op de homepage. als er meerdere knoppen
      op de sectie staan dan hebben die de opmaak van Search the register
      / Ask the AI -- bij meerdere knoppen is er vaak 1 primaire knop, de
      gele, en dan 1 of meer secundaire."

   So: three ROLES, one BOX. The box never changes; only the fill does.

     solo       one button in a section        outline, dark-gold hairline,
                                               white letters, fills gold
                                               on hover
     primary    the lead button of a group     solid gold, dark letters
     secondary  the rest of a group            outline, gold border,
                                               gold letters

   The role is read from the DOM, not hand-assigned per component: a
   button alone in a .bi-cta-group is :only-child and therefore solo, and
   it stops being solo the moment a second button lands beside it. That
   is the rule Martien described, expressed once, so it stays true as
   sections change instead of being re-decided per template.

   WHY THIS FILE EXISTS
   Before this, the same button was sized in four places that disagreed:
   main.css (.8rem 2rem / .58rem / min-height 3rem), its own reg-bar
   override 8000 lines later (1rem 2.4rem / .64rem / 3.4rem),
   brand-home.css twice (16px 36px, once with a 1px gold border and once
   with a 2px dark one -- the first was already dead), and hero-cinema.css
   (0 1.9rem / .68rem / 3.3rem). Which one won came down to selector-
   specificity arithmetic nobody could do at a glance, which is why three
   buttons that should have matched never did. Those declarations are
   removed in this commit. Sizing and fill live here now, on one class,
   and nowhere else.

   HOW IT ATTACHES
   The system is keyed on .bi-cta in the markup, not aliased onto the old
   class names. Aliasing was tried first and abandoned: selectors like
   .bi-curated-closing__actions > a outrank a plain .bi-cta-group > .bi-cta,
   so the roles would have silently lost the cascade in exactly the places
   they matter most. The legacy classes stay on the elements -- they carry
   layout, and JS hooks onto some of them -- they just no longer decide
   what a button looks like.

   SCOPE — section call-to-action buttons only, listed per element in the
   templates rather than caught by a wildcard, because "looks like a
   button" is not a design role. Deliberately NOT in scope, and not
   silently included: icon-only controls (lightbox, slider arrows, header
   icons), pagers, tab strips, filter/status/BCC pills, inline edit
   buttons, the per-slide .bi-slider__explore overlay link, and the .bdb-*
   dashboard toolbar buttons. Those are controls, not calls to action;
   giving them a 52.8px CTA body would break the toolbars and sliders they
   sit in. If they should follow too, that is its own task.

   THE REFERENCE HEIGHT is measured, not invented: the homepage Explore
   Collection button renders at min-height 3.3rem = 52.8px (hero-cinema.css
   set it; brand-home.css overrode its padding and font but never its
   height). That number is --bi-btn-h, and every CTA now inherits it.
   Side effect worth naming: that button was display:inline-block with a
   min-height, so its label sat 16px from the top with the slack below it
   rather than centred. The shared box is inline-flex, so the label is now
   actually centred in the 52.8px.
   ============================================================ */

/* --bi-btn-h / --bi-btn-px / --bi-btn-bw live in tokens.css (3128), with the
   rest of the measurements. The reference height there is this button's own
   rendered height; the horizontal pair is brand-home.css's 16px/36px, the
   vertical half of which --bi-btn-h supplies instead. */

/* ── The box + the solo role ───────────────────────────────────────────
   These are one rule on purpose. A button with no group around it is by
   definition the only one in its section, so the bare .bi-cta IS the solo
   treatment: the 30-08 outline look, the palette's dark-gold hairline
   with white letters rather than gold on gold. */
.bi-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  /* Auto width, never the width of the container. PR #1376 fixed exactly
     this on the chassis page's Download Dossier button; it is a property
     of the system now, not a per-button patch. */
  width: auto;
  min-height: var(--bi-btn-h, 3.3rem);
  padding: 0 var(--bi-btn-px, 36px);
  border: var(--bi-btn-bw, 2px) solid var(--line);
  border-radius: var(--bi-radius, 0);
  background: transparent;
  color: var(--fg);
  font-family: var(--f-label);
  font-weight: 700;
  font-size: var(--bi-size-button, 11px);
  letter-spacing: var(--bi-ls-button, 1px);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  /* "Download Dossier €9.95" is one button, not two lines. */
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

/* ── Role: secondary ───────────────────────────────────────────────────
   Any button in a group that is not the lead one. Gold letters on a gold
   outline: 869etqyp2's testing-failed round settled that the border must
   match the text colour rather than stay on the toned-down line colour. */
.bi-cta-group > .bi-cta {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
}

/* ── Role: primary ─────────────────────────────────────────────────────
   The one gold button of a group. Marked explicitly in the markup: which
   action leads is an editorial decision, not "whichever comes first".
   Same specificity as the secondary rule above, so it has to come after
   it -- deliberate, not incidental. */
.bi-cta-group > .bi-cta--primary {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
}

/* A lone button in a group is solo even when it is marked primary: with
   nothing to be primary over, gold-on-gold is just loud. The :only-child
   makes this outrank both role rules above, so the DOM decides. */
.bi-cta-group > .bi-cta:only-child {
  border-color: var(--line);
  background: transparent;
  color: var(--fg);
}

/* ── Hover: one language ───────────────────────────────────────────────
   Everything that is outline fills gold, which is what the reference
   button has always done. The primary is already gold, so it deepens
   instead. No lift anywhere: the reference button does not move, and the
   reg-bar's translateY(-2px) was the only thing in the set that did. */
/* (3124) :focus-visible removed from both hover rules below. It made a
   keyboard-focused button pixel-identical to a hovered one, so tabbing
   through a group said nothing the pointer had not already said, and on a
   page where the mouse happened to be resting on a button you could not
   tell which one the keyboard was actually on. Hover means "your pointer
   is here"; focus means "your next Enter lands here". Different facts.
   Focus is a gold ring outside the box now, and it deliberately does not
   fill — see focus.css. */
.bi-cta:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
  transform: none;
}

.bi-cta-group > .bi-cta--primary:hover {
  /* Fallback first, for anything without color-mix. */
  background: var(--gold);
  background: color-mix(in srgb, var(--gold) 86%, #000);
  border-color: var(--gold);
  color: var(--bg);
}

/* ── Groups ────────────────────────────────────────────────────────────
   The wrapper only handles arrangement; it never decides how a button
   looks. Alignment is left to the section that owns it. */
.bi-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ── Disabled ──────────────────────────────────────────────────────────
   .bi-propose__submit is the one CTA in the set that is a form submit and
   can genuinely be disabled. */
.bi-cta[disabled],
.bi-cta[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Narrow screens ────────────────────────────────────────────────────
   Rows everywhere on phones, two buttons per row. 3200 opened the row up
   for the reg-bar pair only and kept every other group stacked; Joe's
   iOS feedback (meeting TYMTCH, 2026-09-11, ~12:42) closed the question
   for the rest: "the register and the AI buttons, basically everywhere,
   need to be displayed in row, two per row" — the one thing he flagged.
   So the column default and the reg-bar exception both go: one row rule
   for every group.
   flex-basis half-the-row makes a pair split the width evenly; the
   default min-width:auto still floors each button at its nowrap label,
   so an overlong label (the chassis trio's "Download Dossier €9.95")
   takes the width it needs and the odd button wraps — never clipped
   text. That basis is a deliberate mobile exception to PR #1376's
   auto-width rule: two-per-row IS a width claim, and it comes from the
   same reviewer channel that asked for auto width in the first place.
   The height stays 52.8px, comfortably past the 44px tap minimum.
   Padding is 1rem (was 1.6rem) because that is what lets the pair
   "Search the register" + "Ask the AI" share one 360px row without the
   nowrap labels overflowing: measured, the pair needs 225.6px of label +
   the borders, so 4×16px padding + the 1rem gap lands at ~306px — inside
   the 324px a 360px viewport leaves at the current 18px gutter, and still
   inside the 316px the in-flight 22px gutter (3191/3193) will leave.
   Deliberately NOT touching --bi-btn-px: that token sizes every CTA
   sitewide, and only the phone row needs the slimmer horizontal air.
   width: 100% on the group (task 3272 review, PR #1424 follow-up) — the
   flex-basis: 50% split above only resolves against a real number. Every
   real .bi-cta-group instance (reg-bar, footer, hero search, the chassis
   trio) sits inside an ancestor that sizes it by content — align-items:
   center on a column flex parent, or flex: 0 0 auto next to a search
   field — so without an explicit width the group has no definite main
   size, its children's 50% falls back to auto, and both buttons render
   at their own nowrap width. Verified live on test.bugattiinsights.com:
   PR #1424 shipped with the group stuck at a fixed ~272px in every one
   of those three contexts regardless of viewport (320-414px all
   measured stacked) — the row rule above never actually took effect, so
   Joe's pair kept stacking exactly as before. width: 100% gives the
   group the real available row width so 50% means something; gap drops
   from 1rem to .5rem (verified live) because "Search the register" (its
   own nowrap floor is ~159px) plus "Ask the AI" plus the gap must fit
   inside that width, and 1rem of gap was the last few px standing
   between this pair and 375px-and-up iPhones (SE/mini through Pro Max —
   Joe's own report is iOS). 320/360px (Android-only widths, no current
   iPhone uses them) can still wrap this specific pair; closing that too
   would need shorter labels or smaller type, out of scope here.
   justify-content: flex-start (3277) — this block said center, which was
   invisible in the case it was written for (a full two-per-row line has no
   leftover width to distribute) and visible in exactly the case 3200's
   review flagged as residual risk: the moment a nowrap label overflows its
   50% basis the group wraps, and every not-full row was centered instead
   of starting on the gutter. That is the homepage search pair at 390px
   (second row indented mid-air) and the chassis trio's centered stack —
   both sections otherwise left-aligned. flex-start moves only those
   wrapped rows onto the container's own content edge; it needs no offset
   of its own because the padded ancestor already provides the 22px gutter.
   Stated explicitly rather than deleted, because deleting would hand the
   footer pair back to .bi-curated-closing__actions' desktop centring
   (main.css, equal specificity, earlier sheet) — wrong under the footer
   band's left-aligned mobile column. The contexts that are MEANT to be
   centered keep their look without any list being maintained here, each
   through a rule that already outranks this one: the reg-bar band via
   brand-home's body.bi-brand-skin .bi-reg-bar .bi-curated-closing__actions
   (higher specificity, centered section by design), the propose-success
   card via .bdb-propose-success__actions (equal specificity but
   bugatti-dashboard.css prints after this sheet — templates enqueue it at
   priority 15), and the guest-chat pair via its inline style. */
@media (max-width: 640px) {
  .bi-cta-group {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    gap: .5rem;
  }

  .bi-cta {
    width: auto;
    padding: 0 1rem;
  }

  /* The width claim only exists where there is a row to share: grouped
     buttons split it, a solo button keeps its natural width (the solo
     role everywhere else in this file is also :only-child-decided). */
  .bi-cta-group > .bi-cta {
    flex: 0 1 calc(50% - .25rem);
  }
  .bi-cta-group > .bi-cta:only-child {
    flex-basis: auto;
  }
}