/* Tư-Trà Newsroom — components. Plugin-rendered parts only; page layout
 * belongs to the Bricks templates. Every value is read through var() with a
 * fallback so a template retunes it without knowing the class structure.
 * No prefers-color-scheme block: the site is light-only. */

.tt-pl-nr-eyebrow,
.tt-pl-nr-dek,
.tt-pl-nr-share,
.tt-pl-nr-docs,
.tt-pl-nr-contact,
.tt-pl-nr-boiler,
.tt-pl-nr-filter {
  --tt-pl-nr-ink: var(--tt-nr-ink, #231f20);
  --tt-pl-nr-muted: var(--tt-nr-muted, rgba(35, 31, 32, 0.62));
  --tt-pl-nr-line: var(--tt-nr-hair, rgba(96, 96, 67, 0.2));
  --tt-pl-nr-surface: var(--tt-nr-paper, #f4f5f0);
  --tt-pl-nr-accent: var(--tt-nr-accent, var(--color-cassonade, #e0ceaa));
  --tt-pl-nr-radius: var(--tt-nr-radius, 0);
  --tt-pl-nr-ease: cubic-bezier(0.32, 0.72, 0, 1);

  color: var(--tt-pl-nr-ink);
  box-sizing: border-box;
}

.tt-pl-nr-eyebrow *, .tt-pl-nr-docs *, .tt-pl-nr-contact *, .tt-pl-nr-filter * { box-sizing: border-box; }

/* Eyebrow */

.tt-pl-nr-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs, 0.5rem);
  font-size: var(--step--2, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tt-pl-nr-eyebrow__cat { color: inherit; text-decoration: none; }
.tt-pl-nr-eyebrow__cat:hover { text-decoration: underline; }
.tt-pl-nr-eyebrow__sep { width: 2px; height: 2px; background: currentColor; opacity: 0.5; }
.tt-pl-nr-eyebrow__date { color: var(--tt-pl-nr-muted); }
.tt-pl-nr-eyebrow__held { border: 1px solid currentColor; padding: 1px 8px; font-size: var(--step--3, 0.64rem); }

/* Dek */

.tt-pl-nr-dek { font-style: italic; font-size: var(--step-0, 1rem); line-height: 1.3; color: var(--tt-pl-nr-muted); margin: 0; max-width: 48ch; }

/* Share */

.tt-pl-nr-share__list { display: flex; align-items: center; gap: var(--space-2xs, 0.5rem); list-style: none; margin: 0; padding: 0; }

.tt-pl-nr-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--tt-pl-nr-radius);
  border: 1px solid var(--tt-pl-nr-line);
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 240ms var(--tt-pl-nr-ease), background-color 240ms var(--tt-pl-nr-ease), color 240ms var(--tt-pl-nr-ease);
}

.tt-pl-nr-share__icon { display: block; width: 17px; height: 17px; }
.tt-pl-nr-share__link:hover { background: var(--tt-pl-nr-ink); color: var(--tt-pl-nr-surface); }
.tt-pl-nr-share__link:active { transform: scale(0.92); }
.tt-pl-nr-share__link.is-copied { background: var(--tt-pl-nr-ink); color: var(--tt-pl-nr-surface); }

/* Docs and downloads */

.tt-pl-nr-docs__title, .tt-pl-nr-contact__title { font-size: var(--step-1, 1.25rem); margin: 0 0 var(--space-xs, 0.875rem); }
.tt-pl-nr-docs__list { list-style: none; margin: 0; padding: 0; border-top: 0.5px solid var(--tt-pl-nr-line); }
.tt-pl-nr-docs__item { border-bottom: 0.5px solid var(--tt-pl-nr-line); }

.tt-pl-nr-docs__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s, 1rem);
  padding: var(--space-xs, 0.875rem) 0;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.tt-pl-nr-docs__label { min-width: 0; flex: 1 1 auto; font-size: var(--step--1, 0.875rem); }
.tt-pl-nr-docs__link:hover .tt-pl-nr-docs__label { text-decoration: underline; }
.tt-pl-nr-docs__meta { flex: 0 0 auto; font-size: var(--step--3, 0.64rem); text-transform: uppercase; letter-spacing: 0.16em; color: var(--tt-pl-nr-muted); font-variant-numeric: tabular-nums; }

/* Press contact */

.tt-pl-nr-contact__card { border: 1px solid var(--tt-pl-nr-line); border-radius: var(--tt-pl-nr-radius); padding: var(--space-s, 1rem) var(--space-m, 1.5rem); }
.tt-pl-nr-contact__name { font-weight: 600; margin: 0 0 var(--space-3xs, 0.25rem); }
.tt-pl-nr-contact__line { margin: 0; font-size: var(--step--1, 0.875rem); }
.tt-pl-nr-contact__line a { color: inherit; }

/* Boilerplate */

.tt-pl-nr-boiler__body { font-size: var(--step--1, 0.875rem); color: var(--tt-pl-nr-muted); line-height: 1.6; }
.tt-pl-nr-boiler__body p { margin: 0 0 var(--space-2xs, 0.5rem); }

/* Filter bar */

.tt-pl-nr-filter__row { display: flex; align-items: center; gap: var(--space-2xs, 0.5rem); flex-wrap: wrap; }
.tt-pl-nr-filter__field, .tt-pl-nr-filter__search { flex: 1 1 160px; min-width: 0; }

.tt-pl-nr-filter select,
.tt-pl-nr-filter input[type="search"] {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--tt-pl-nr-line);
  border-radius: var(--tt-pl-nr-radius);
  padding: 0.6em 1em;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--step--1, 0.875rem);
  appearance: none;
  -webkit-appearance: none;
}

.tt-pl-nr-filter__submit {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--tt-pl-nr-radius);
  padding: 0.6em 1.4em;
  background: var(--tt-pl-nr-ink);
  color: var(--tt-pl-nr-surface);
  font: inherit;
  font-size: var(--step--1, 0.875rem);
  cursor: pointer;
  transition: transform 220ms var(--tt-pl-nr-ease);
}

.tt-pl-nr-filter__submit:active { transform: scale(0.96); }
.tt-pl-nr-filter.is-auto .tt-pl-nr-filter__submit { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tt-pl-nr-share__link, .tt-pl-nr-filter__submit { transition: none; }
}


/* ── Newsroom page corrections ─────────────────────────────────────────
 * These live here rather than in the template JSON so they apply without a
 * re-import. Scoped to body.tt-nr, which the plugin adds only on newsroom
 * routes, so nothing leaks to the rest of the site.
 * ─────────────────────────────────────────────────────────────────── */

body.tt-nr {
  --tt-nr-paper: #f4f5f0;
  --tt-nr-ink: #231f20;
  --tt-nr-band: var(--color-the, #62704d);

  /* Restored deliberately.
   *
   * v1.0.3 removed the body background along with the dark-scheme block
   * that was making body text invisible. The dark block was the bug; the
   * background was not, and without it the page shows whatever is behind
   * the sections — the green — instead of paper. */
  background-color: var(--tt-nr-paper);
}

body.tt-nr #brx-content { background-color: var(--tt-nr-paper); }

/* Head band: clear the fixed header, and keep following its shrink.
 *
 * The nav element defines
 *     .tt-el-nv-offset, .tt-body-offset-padding { padding-top: var(--tt-el-nv-header-h, 0px); }
 * and publishes --tt-el-nv-header-h live through the shrink animation.
 *
 * The band's own padding-top comes from a Bricks padding control, which
 * emits id-scoped CSS and therefore BEATS that class rule outright rather
 * than adding to it — which is why the title sat under the logo. The two
 * have to be combined explicitly, so the band keeps its breathing room and
 * still tracks the live header height.
 *
 * v1.2.1 used a clamp() floor against a guessed variable name. The real one
 * is --tt-el-nv-header-h. */
body.tt-nr .tt-nr-band {
  padding-top: calc(var(--tt-el-nv-header-h, 0px) + var(--space-xl, 3rem));
}

/* Local nav: two items should sit together in the middle, not at the
 * extremes. The loop block takes full width by default in Bricks, which
 * pushed the Archive link to the edge and clipped it. */
body.tt-nr .tt-nr-localnav__list {
  width: auto;
  flex: 0 1 auto;
}

body.tt-nr .tt-nr-localnav__list + * { margin-left: var(--space-m, 1.5rem); }

/* Display headlines: uppercase Cormorant at 0.82–0.9 line-height clips its
 * own descenders and diacritics inside a tight box. Vietnamese needs the
 * room — Ư, À and Ộ all sit outside the cap box. */
body.tt-nr .tt-nr-tile__headline,
body.tt-nr .tt-nr-archrow__title {
  overflow: visible;
  padding-block: 0.08em;
}

/* Horizontal gutter.
 *
 * The section heads were running edge to edge — "Latest" flush against the
 * left, "All stories" clipped off the right — because the elements inside
 * these sections span the container and the container carries no inline
 * padding at this width. The centred hero hid it; a space-between row
 * cannot. */

body.tt-nr {
  --tt-nr-gutter: clamp(1.125rem, 5vw, 3.5rem);
}

body.tt-nr .tt-nr-sechead,
body.tt-nr .tt-nr-grid,
body.tt-nr .tt-nr-archlist,
body.tt-nr .tt-nr-kit,
body.tt-nr .tt-nr-localnav__list,
body.tt-nr .tt-nr-filterbar {
  padding-inline: var(--tt-nr-gutter);
}

/* A tile with no featured image collapses its aspect-ratio box to a sliver
 * — those few stray pixels at the left edge. Until artwork exists, no box. */

body.tt-nr .tt-nr-tile__media:empty,
body.tt-nr .tt-nr-tile__media:not(:has(img)) {
  display: none;
}