/* ==========================================================================
   Barari Gold — homepage (FE-06)
   --------------------------------------------------------------------------
   Design source: screen 1 in _handoff/barari-gold-website.html — `.hero`
   (:54-69), `.lady` (:88-94), `.trust` (:95-98) and the one breakpoint at
   :228-233. The rate strip above the hero is FE-05 and lives in the header;
   the weight ladder between the hero and the Lady section is FE-07 and is not
   referenced here.

   No build step: this file is served verbatim and linked from the
   `barari_css` stack in layouts/front-end/app.blade.php, which renders after
   the shared barari layer so a screen sheet can win against it.

   RTL: logical properties throughout, per the convention at the head of
   barari.css. Two things logical properties cannot express are paired in the
   [dir="rtl"] block at the foot — the ray fan's off-centre origin and its
   conic sweep, both of which are physical by definition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   Brown ground, full-bleed. The ray fan is decorative and is hidden from
   assistive technology by being a background on an empty element.
   -------------------------------------------------------------------------- */

.barari-hero {
  position:relative;
  background:var(--barari-brown);
  color:var(--barari-ink-on-dark);
  padding-block:var(--barari-space-10) 74px;
  padding-inline:var(--barari-gutter);
  overflow:hidden;
}

/* Light thrown from behind the bar. inset is physical, so the whole rule is
   mirrored in the [dir="rtl"] block rather than patched per side. */
.barari-rays {
  position:absolute;
  inset:-45% -10% auto 36%;
  height:190%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
              rgba(241,241,237,.085) 0deg .34deg,
              transparent .34deg 3.1deg);
  pointer-events:none;
}

.barari-hero__in {
  position:relative;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:50px;
  align-items:center;
  max-width:var(--barari-measure);
  margin-inline:auto;
}

.barari-hero__title {
  font-family:var(--barari-font-display);
  font-size:var(--barari-text-hero);
  line-height:1;
  font-weight:400;
  margin:0;
}

/* The second line is a separate key, not a wrapped clause — it carries its
   own colour and italic, and Arabic breaks it at a different word. */
.barari-hero__title em {
  display:block;
  font-style:italic;
  color:var(--barari-gold);
}

.barari-hero__lede {
  margin-block-start:var(--barari-space-5);
  font-size:var(--barari-text-body);
  line-height:1.75;
  color:var(--barari-ink-on-dark-72);
  max-width:44ch;
}

.barari-hero__cta {
  display:flex;
  gap:var(--barari-space-3);
  margin-block-start:28px;
  flex-wrap:wrap;
}

.barari-hero__card {
  display:block;
  width:268px;
  max-width:100%;
  margin-inline:auto;
  border-radius:var(--barari-radius-panel);
  box-shadow:var(--barari-shadow-lift);
}

.barari-hero__caption {
  text-align:center;
  margin-block-start:var(--barari-space-4);
  font-size:var(--barari-text-meta);
  color:var(--barari-ink-on-dark-56);
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   The Lady of Barari
   The portrait sits on the baseline of the brown band, so the band has no
   block padding of its own — the text column supplies it.
   -------------------------------------------------------------------------- */

.barari-lady {
  background:var(--barari-brown);
  color:var(--barari-ink-on-dark);
  padding-inline:var(--barari-gutter);
  overflow:hidden;
}

.barari-lady__in {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:50px;
  align-items:end;
  max-width:var(--barari-measure);
  margin-inline:auto;
}

.barari-lady__copy { padding-block:58px 62px; }

.barari-lady__title {
  font-family:var(--barari-font-display);
  font-size:37px;
  font-weight:400;
  line-height:1.05;
  margin:0;
}

.barari-lady__body {
  margin-block-start:15px;
  font-size:14.5px;
  line-height:var(--barari-leading-loose);
  color:rgba(241,241,237,.74);
  max-width:46ch;
}

.barari-lady__note {
  font-size:var(--barari-text-meta);
  color:var(--barari-ink-on-dark-50);
}

.barari-lady__cta { margin-block-start:var(--barari-space-6); }

.barari-lady__portrait {
  width:300px;
  max-width:100%;
  display:block;
  align-self:end;
}

/* --------------------------------------------------------------------------
   Trust row
   Four cells hairlined by the grid gap showing the rule colour through.
   -------------------------------------------------------------------------- */

.barari-trust {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--barari-rule);
  border-block-start:1px solid var(--barari-rule);
}

.barari-trust__item {
  background:var(--barari-surface);
  padding-block:26px;
  padding-inline:var(--barari-space-6);
}

.barari-trust__term {
  display:block;
  font-size:var(--barari-text-ui);
  font-weight:700;
  margin-block-end:6px;
}

.barari-trust__body {
  font-size:var(--barari-text-meta);
  line-height:1.6;
  color:rgba(42,26,18,.62);
  margin:0;
}

/* --------------------------------------------------------------------------
   RTL pairs
   Only what logical properties cannot express, per barari.css.
   -------------------------------------------------------------------------- */

/* `inset` is physical. The fan is anchored 36% from the inline start and
   bleeds 10% past the inline end, so in Arabic both values swap sides and the
   light stays behind the bar, which the grid has moved to the other column.

   The gradient itself needs no pair: a repeating-conic sweep centred at
   50% 50% is symmetric about the vertical axis, so mirroring it is a no-op.
   Only its position is direction-dependent. */
[dir="rtl"] .barari-rays { inset:-45% 36% auto -10%; }

/* --------------------------------------------------------------------------
   Breakpoint
   One stop, at the mockup's 980px. Both two-column bands collapse, the
   headline steps down, the trust row halves, and the portrait is dropped
   rather than stretched — it is a fixed-width illustration.
   -------------------------------------------------------------------------- */

@media (max-width:980px) {
  .barari-hero__in,
  .barari-lady__in { grid-template-columns:1fr; }
  .barari-hero__title { font-size:var(--barari-text-title); }
  .barari-lady__portrait { display:none; }
  .barari-trust { grid-template-columns:1fr 1fr; }
}

@media (max-width:560px) {
  .barari-hero { padding-block:48px 52px; padding-inline:var(--barari-space-6); }
  .barari-lady { padding-inline:var(--barari-space-6); }
  .barari-lady__copy { padding-block:44px 48px; }
  .barari-trust { grid-template-columns:1fr; }
}