/* ==========================================================================
   Barari Gold — weight ladder (FE-07)
   --------------------------------------------------------------------------
   Design source: `.ladder`, `.sec-h`, `.rungs` and `.rung` in
   _handoff/barari-gold-website.html:77-86.

   Served verbatim — no build step. Linked from the `barari_css` stack by
   web-views/partials/_weight-ladder.blade.php itself, wrapped in @once, so
   the sheet travels with the partial rather than with the one screen that
   currently includes it.

   The section has one idea: the bars stand on a shared baseline so the sizes
   can be read against each other. That baseline is `align-items:flex-end` on
   the rung row — structural, not decorative, and the one rule here that
   cannot be dropped. The hairline below closes the section under the labels,
   as in the mockup; it is not the baseline itself.

   Bar dimensions are inline, computed per tier in the partial from the
   admin's ladder. Nothing about scale lives in this file.

   RTL: logical properties throughout, per the convention at the head of
   barari.css. Nothing here needs a [dir="rtl"] pair — see the note at the
   foot.
   ========================================================================== */

.barari-ladder {
  background:var(--barari-surface);
  padding-block:50px 54px;
  padding-inline:var(--barari-gutter);
}

/* Centred on the shared measure, like .barari-hero__in, .barari-lady__in and
   the shell. The deck was drawn in a 1200px frame, where start-aligned and
   centred look the same; on a wide screen a start-aligned block leaves the
   right third of every section empty. */
.barari-ladder__in { max-width:var(--barari-measure); margin-inline:auto; }

.barari-ladder__head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--barari-space-6);
  flex-wrap:wrap;
  margin-block-end:26px;
}

.barari-ladder__title {
  font-family:var(--barari-font-display);
  font-size:var(--barari-text-section);
  font-weight:400;
  line-height:var(--barari-leading-tight);
  margin:0;
}

.barari-ladder__lede {
  margin:0;
  font-size:var(--barari-text-ui);
  line-height:1.6;
  color:var(--barari-ink-60);
  max-width:42ch;
}

/* --------------------------------------------------------------------------
   The rungs
   A list, because it is one: an ordered set of the weights on sale. The
   marker is removed rather than the semantics.
   -------------------------------------------------------------------------- */

.barari-ladder__rungs {
  display:flex;
  align-items:flex-end;
  gap:var(--barari-space-3);
  list-style:none;
  margin:0;
  padding:0;
  padding-block-end:var(--barari-space-5);
  border-block-end:1px solid var(--barari-rule);
}

.barari-ladder__item { flex:1; min-width:0; }

.barari-ladder__rung {
  display:block;
  text-align:center;
  text-decoration:none;
  color:inherit;
  font-family:var(--barari-font-body);
}

.barari-ladder__bar {
  display:block;
  margin-inline:auto;
  margin-block-end:9px;
  background:var(--barari-gradient-metal);
  border-radius:var(--barari-radius-sharp);
  transition:transform var(--barari-duration) var(--barari-ease);
}

/* translateY is the one transform that is direction-independent, so this
   stays out of the [dir="rtl"] block that barari.css reserves for transforms.
   --barari-duration collapses to .01ms under prefers-reduced-motion, so the
   lift is handled there and needs no media query of its own. */
.barari-ladder__rung:hover .barari-ladder__bar,
.barari-ladder__rung:focus-visible .barari-ladder__bar { transform:translateY(-3px); }

.barari-ladder__weight {
  display:block;
  font-size:var(--barari-text-meta);
  font-weight:500;
}

.barari-ladder__premium {
  display:block;
  margin-block-start:2px;
  font-size:var(--barari-text-fine);
  color:var(--barari-ink-52);
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */

/* No [dir="rtl"] pair is needed in this file. The two direction-dependent
   things it touches are both already handled: --barari-gradient-metal is
   flipped once in barari.css's [dir="rtl"] block, and the hover lift is
   vertical. The rung order reverses on its own — a flex row follows the
   document direction — which is correct: the ladder reads lightest-first from
   the inline start in both languages.

   The figures are isolated in <bdi> in the markup, not here. A leading `+` is
   a neutral character and would otherwise be reordered to the end of the run
   in Arabic (the trap FE-25 hit on the maintenance phone number). It must be
   <bdi> and not a dir attribute: per FE-05, a dir on a styled element
   redefines that element's own inline start. */

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* The mockup has no mobile treatment for this section. Stacking the rungs
   would destroy the only thing they are for — a 1 g bar is legible only
   beside a 1 kg one — so below 700px the row scrolls sideways instead,
   keeping the shared baseline and the relative heights intact. Rungs stop
   flexing and take a 44px floor so each stays a usable touch target. */
@media (max-width:700px) {
  .barari-ladder__rungs {
    overflow-x:auto;
    gap:var(--barari-space-4);
    padding-block-end:var(--barari-space-6);
  }

  .barari-ladder__item { flex:0 0 auto; min-width:44px; }
}

@media (max-width:560px) {
  .barari-ladder {
    padding-block:var(--barari-space-8) 44px;
    padding-inline:var(--barari-space-6);
  }

  .barari-ladder__head { margin-block-end:var(--barari-space-5); }
  .barari-ladder__title { font-size:26px; }
}