/*
 * Base layer — document defaults, layout primitives, and the work needed to make
 * Astra's wrappers get out of the way.
 */

/* -------------------------------------------------------------------------
 * Document
 * ---------------------------------------------------------------------- */

body.lb-chrome {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  /* Bangla-first: the Bangla face leads, and Latin runs opt back in via .lb-num
     and the utilities below. */
  font-family: var(--font-bangla), var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--lh-bangla);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.lb-chrome *,
.lb-chrome *::before,
.lb-chrome *::after {
  box-sizing: border-box;
}

.lb-chrome a {
  color: var(--text-link);
  text-decoration: none;
}

.lb-chrome a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/*
 * Focus is a 2px Deep Green ring, never a browser outline.
 *
 * No border-radius here. Setting one made the ring's own corners consistent and the
 * element's inconsistent: a focused status pill snapped from 999px to 4px and a
 * focused card from 12px, so tabbing through the page changed the shape of what you
 * landed on. box-shadow already follows the element's radius.
 */
.lb-chrome :focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.lb-chrome ::selection {
  background: var(--amber-tint-12);
}

.lb-chrome img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------------
 * Astra neutralisation
 *
 * Astra wraps content in #content > .ast-container and constrains it. Our sections
 * run edge to edge and carry their own inner container, so the parent wrappers are
 * flattened here rather than fought section by section.
 * ---------------------------------------------------------------------- */

.lb-chrome #content > .ast-container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.lb-chrome #primary,
.lb-chrome .site-main,
.lb-chrome .ast-container > .site-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.lb-chrome .entry-content > *,
.lb-chrome .ast-article-single {
  max-width: none;
}

.lb-chrome .ast-separate-container .ast-article-single {
  padding: 0;
  border: 0;
  background: transparent;
}

/* -------------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------------- */

.lb-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(var(--gutter-mobile), 4vw, var(--gutter-desktop));
}

/* Sections breathe at 72px in the page designs; the token's 80px is the outer bound. */
.lb-section {
  padding-block: 72px;
}

.lb-section--tight {
  padding-block: 40px;
}

.lb-section--flush-top {
  padding-block-start: 0;
}

.lb-section--flush-bottom {
  padding-block-end: 0;
}

/* 1px Line borders do the separating work — no shadows between bands. */
.lb-section--ruled {
  border-top: var(--border-width) solid var(--border-default);
}

.lb-section--quiet {
  background: var(--surface-quiet);
}

.lb-section--dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

.lb-section--darker {
  background: var(--surface-darker);
  color: var(--text-on-dark);
}

/* Auto-fitting grid. Set --lb-min per instance to control the wrap point. */
.lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--lb-min, 280px)), 1fr));
  gap: var(--lb-gap, var(--space-5));
}

/* Cards in a row normally match heights. Where two panels carry unrelated content —
   the address card beside its rules, the tracking form beside the example timeline —
   the design sizes each to its own content instead. */
.lb-grid--top {
  align-items: start;
}

.lb-stack {
  display: grid;
  gap: var(--lb-gap, var(--space-4));
  align-content: start;
}

.lb-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-gap, var(--space-3));
  align-items: center;
}

/* Wide content never makes the page scroll sideways. Positioned, because a visually
   hidden label inside it (a table's "Actions" heading) is absolutely placed, and an
   unpositioned scroll box does not clip those — the page scrolled sideways by exactly
   the distance to the last column. */
.lb-scroll-x {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------------
 * Typography utilities
 * ---------------------------------------------------------------------- */

/* Latin runs inside Bangla text: numerals, money, units, dates, tracking IDs.
   Tabular figures so columns of them line up. */
.lb-num {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/*
 * Overline — and the one place the tracking rule had been quietly breaking.
 *
 * The design system allows letter-spacing on exactly one role, the uppercase Latin
 * overline, and forbids it on Bangla, where tracking pulls apart the matra and breaks
 * conjuncts. But this class had the tracking baked into its base, and six of the ten
 * overlines on the site are Bangla — the hero eyebrow among them. So the rule was being
 * broken by the component that defines it.
 *
 * The default is now the Bangla-safe one and the Latin treatment is opted into by
 * `lang="en"`, which is the honest way round: the document is bn-BD, so a Latin run
 * inside it is the exception and WCAG 3.1.2 wants it marked anyway. Marking the
 * language and getting the right typography are now the same action.
 */
.lb-overline {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-overline);
  line-height: var(--lh-overline);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.lb-overline:lang(en) {
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

.lb-display,
.lb-h1 {
  margin: 0;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  text-wrap: balance;
}

.lb-display {
  font-size: clamp(32px, 5vw, 52px);
  /* Tighter than the old 1.35 because the step is bigger: at 52px that leading opened
     a gap the two halves of the tagline read across rather than as one lockup. 1.25 is
     as tight as Bangla goes here — the matra line and the ি/ে vowel signs need the room,
     and this is the display exception to the 1.7 body rhythm, not a licence to crush it. */
  line-height: 1.25;
}

.lb-h1 {
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.3;
}

.lb-h2 {
  margin: 0;
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  text-wrap: balance;
}

.lb-h3 {
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.4;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.lb-lede {
  margin: 0;
  font-size: var(--text-lede);
  line-height: var(--lh-bangla);
  color: var(--text-body);
  max-width: 62ch;
  text-wrap: pretty;
}

.lb-meta {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-muted);
}

.lb-caption {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

/* On dark bands, text steps down through white rather than switching hue. */
.lb-section--dark .lb-h2,
.lb-section--darker .lb-h2,
.lb-section--dark .lb-h3,
.lb-section--darker .lb-h3 {
  color: var(--text-on-dark);
}

.lb-section--dark .lb-lede,
.lb-section--darker .lb-lede,
.lb-section--dark .lb-meta,
.lb-section--darker .lb-meta {
  color: var(--text-on-dark-2);
}

/* -------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------- */

.lb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lb-chrome .skip-link:focus {
  z-index: 100;
  background: var(--deep-green);
  color: var(--white);
}

/*
 * Reduced motion, stated rather than obliterated.
 *
 * The blanket `.01ms !important` this replaces was a blunt instrument: it swept every
 * transition on the site into nothing, including the ones a reduced-motion user still
 * benefits from, and it made the three targeted blocks in chrome.css, portal.css and
 * landing.css redundant without saying so.
 *
 * What actually needs stopping is the looping animation - the tracking timeline's
 * pulse. It is stopped here, and the current step stays legible without it because its
 * dot is also amber, ringed, and larger than the others. State-change feedback keeps a
 * short duration so a hover or a focus ring still reads as a response.
 */
@media (prefers-reduced-motion: reduce) {
  .lb-chrome *,
  .lb-chrome *::before,
  .lb-chrome *::after {
    animation-iteration-count: 1 !important;
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .lb-chrome *,
  .lb-chrome *::before,
  .lb-chrome *::after {
    transition-duration: var(--dur-fast) !important;
  }
}