/* ==========================================================================
   NexaGulf -- Newsroom layout

   A wire-service homepage: dense, scannable, many headlines above the fold,
   almost no decoration. The conventions here are the ones every financial
   news desk uses -- a rates strip, one lead with a stack of secondaries
   beside it, topic-labelled headline lists, a tabbed panel of rankings, and
   section rails that each link out to their own archive.

   It reuses the existing design tokens rather than introducing a second
   palette. The change is density and hierarchy, not colour.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */

.ng-newsroom {
  --nr-gap:        28px;
  --nr-gap-sm:     16px;
  --nr-rule:       1px solid var(--ng-line);
  --nr-rule-heavy: 2px solid var(--ng-ink);
  --nr-label:      11px;
  --nr-track-lbl:  0.08em;
}

.ng-newsroom .ng-wrap-wide {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ============================================================ Rates strip

   Where a market site would run a stock ticker, this runs the numbers this
   publication actually stands behind: the headline VAT and corporate tax
   rate in each of the six states. It is the same "live data at the top of
   the page" gesture, but every figure on it is one this site can source.
   ========================================================================== */

.ng-rates {
  background: var(--ng-ink);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.ng-rates__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ng-rates__inner::-webkit-scrollbar { display: none; }

.ng-rates__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 0;
  margin-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--nr-label);
  font-weight: 700;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
  color: var(--ng-mint);
  white-space: nowrap;
}

.ng-rates__item {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 10px 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.ng-rates__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.ng-rates__cc {
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .58);
}
.ng-rates__val { font-weight: 600; font-variant-numeric: tabular-nums; }
.ng-rates__val--off { color: rgba(255, 255, 255, .5); font-weight: 500; }

/* ================================================================== Labels

   The topic label above a headline is the single most repeated element on
   the page, so it has to be small, high-contrast and never wrap oddly.
   ========================================================================== */

.ng-kicker {
  display: inline-block;
  font-size: var(--nr-label);
  font-weight: 700;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
  color: var(--ng-green);
  text-decoration: none;
  margin-bottom: 5px;
}
.ng-kicker:hover { color: var(--ng-green-600); text-decoration: underline; }

.ng-kicker--muted { color: var(--ng-text-3); }

.ng-nr-time {
  font-size: 12px;
  color: var(--ng-text-3);
  font-variant-numeric: tabular-nums;
}

/* ========================================================= Section heading */

.ng-nr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: var(--nr-rule-heavy);
  padding-top: 10px;
  margin-bottom: 18px;
}

.ng-nr-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
  color: var(--ng-ink);
}

.ng-nr-head a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ng-green);
  text-decoration: none;
  white-space: nowrap;
}
.ng-nr-head a:hover { text-decoration: underline; }

/* ================================================================ Lead row

   One lead story at roughly two-thirds width, a stack of three secondaries
   beside it, and a rail of briefs on the right. Three densities in one row
   is what makes a news homepage read as a news homepage.
   ========================================================================== */

.ng-nr-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--nr-gap);
  padding: 26px 0 30px;
  border-bottom: var(--nr-rule);
}

.ng-nr-lead__main { min-width: 0; }

.ng-nr-figure {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ng-surface-2);
  margin-bottom: 14px;
}
.ng-nr-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ng-nr-figure:hover img { transform: scale(1.02); }

.ng-nr-lead__main h1,
.ng-nr-lead__main h2 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: var(--ng-track-h2);
  font-weight: 750;
}
.ng-nr-lead__main h1 a,
.ng-nr-lead__main h2 a { color: var(--ng-ink); text-decoration: none; }
.ng-nr-lead__main h1 a:hover,
.ng-nr-lead__main h2 a:hover { color: var(--ng-green); }

.ng-nr-stand {
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ng-text-2);
}

/* Secondary stack */

.ng-nr-stack { display: flex; flex-direction: column; min-width: 0; }

.ng-nr-item {
  padding: 14px 0;
  border-bottom: var(--nr-rule);
}
.ng-nr-item:first-child { padding-top: 0; }
.ng-nr-item:last-child { border-bottom: 0; }

.ng-nr-item h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -.011em;
}
.ng-nr-item h3 a { color: var(--ng-ink); text-decoration: none; }
.ng-nr-item h3 a:hover { color: var(--ng-green); }

.ng-nr-item--media {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ng-nr-item--media .ng-nr-figure { margin-bottom: 0; aspect-ratio: 4 / 3; }

/* Right rail */

.ng-nr-rail {
  min-width: 0;
  border-left: var(--nr-rule);
  padding-left: var(--nr-gap);
}

.ng-nr-rail h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
  color: var(--ng-ink);
  padding-bottom: 8px;
  border-bottom: var(--nr-rule-heavy);
}

.ng-nr-brief {
  padding: 11px 0;
  border-bottom: var(--nr-rule);
}
.ng-nr-brief:last-child { border-bottom: 0; }

.ng-nr-brief a {
  display: block;
  font-size: 14.5px;
  line-height: 1.34;
  font-weight: 550;
  color: var(--ng-ink);
  text-decoration: none;
}
.ng-nr-brief a:hover { color: var(--ng-green); }

/* Numbered variant, for a "most read" style list */
.ng-nr-brief--num {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.ng-nr-brief__n {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ng-line-2);
  font-variant-numeric: tabular-nums;
}

/* ================================================================== Tabs */

.ng-nr-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--nr-rule-heavy);
  margin-bottom: 4px;
}

.ng-nr-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 8px 14px 8px 0;
  margin-right: 18px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
  color: var(--ng-text-3);
  cursor: pointer;
}
.ng-nr-tab[aria-selected="true"] { color: var(--ng-ink); border-bottom-color: var(--ng-green); }
.ng-nr-tab:hover { color: var(--ng-ink); }
.ng-nr-tab:focus-visible { outline: 2px solid var(--ng-green); outline-offset: 2px; }

.ng-nr-panel[hidden] { display: none; }

/* ============================================================ Column grid

   Below the lead, coverage runs as equal columns with a rule between them --
   the classic broadsheet split. Each column is one topic or one country, so
   the grid doubles as navigation.
   ========================================================================== */

.ng-nr-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 30px 0;
  border-bottom: var(--nr-rule);
}

.ng-nr-col {
  min-width: 0;
  padding-inline: var(--nr-gap-sm);
  border-left: var(--nr-rule);
}
.ng-nr-col:first-child { border-left: 0; padding-left: 0; }
.ng-nr-col:last-child { padding-right: 0; }

.ng-nr-col > h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: var(--nr-rule-heavy);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
}
.ng-nr-col > h2 a { color: var(--ng-ink); text-decoration: none; }
.ng-nr-col > h2 a:hover { color: var(--ng-green); }

/* ======================================================== Two-up band */

.ng-nr-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--nr-gap);
  padding: 30px 0;
  border-bottom: var(--nr-rule);
}

@media (max-width: 900px) {
  .ng-nr-band { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================== Country matrix

   An editorial table, not cards. Six rows, the numbers aligned so they can
   be compared down the column -- which is the only reason to put six
   countries on one screen.
   ========================================================================== */

.ng-nr-matrix { width: 100%; border-collapse: collapse; font-size: 14px; }

.ng-nr-matrix th {
  text-align: left;
  font-size: var(--nr-label);
  font-weight: 700;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
  color: var(--ng-text-3);
  padding: 0 12px 8px 0;
  border-bottom: var(--nr-rule-heavy);
  white-space: nowrap;
}
.ng-nr-matrix th:last-child, .ng-nr-matrix td:last-child { padding-right: 0; }

.ng-nr-matrix td {
  padding: 13px 12px 13px 0;
  border-bottom: var(--nr-rule);
  vertical-align: top;
}

.ng-nr-matrix tbody tr:hover { background: var(--ng-surface); }

.ng-nr-matrix__name { font-weight: 650; }
.ng-nr-matrix__name a { color: var(--ng-ink); text-decoration: none; }
.ng-nr-matrix__name a:hover { color: var(--ng-green); }
.ng-nr-matrix__name span { display: block; font-size: 12px; font-weight: 400; color: var(--ng-text-3); margin-top: 2px; }

.ng-nr-matrix__num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ng-nr-matrix__num--off { color: var(--ng-text-3); font-weight: 400; }

.ng-nr-matrix__latest a { font-size: 13.5px; color: var(--ng-text); text-decoration: none; line-height: 1.35; display: block; }
.ng-nr-matrix__latest a:hover { color: var(--ng-green); }

/* ============================================================ Tools row */

.ng-nr-tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--ng-line);
  border: var(--nr-rule);
  margin: 30px 0;
}

.ng-nr-tool {
  background: var(--ng-bg);
  padding: 18px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .15s ease;
}
.ng-nr-tool:hover { background: var(--ng-green-50); }

.ng-nr-tool__tag {
  font-size: var(--nr-label);
  font-weight: 800;
  letter-spacing: var(--nr-track-lbl);
  text-transform: uppercase;
  color: var(--ng-green);
}
.ng-nr-tool__name { font-size: 15px; font-weight: 650; color: var(--ng-ink); line-height: 1.25; }
.ng-nr-tool__desc { font-size: 12.5px; color: var(--ng-text-2); line-height: 1.4; }

/* ============================================================= Responsive */

@media (max-width: 1180px) {
  .ng-nr-lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .ng-nr-rail {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    border-top: var(--nr-rule);
    padding-top: 20px;
  }
  .ng-nr-rail .ng-nr-brief-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--nr-gap);
  }
  .ng-nr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .ng-nr-col:nth-child(3) { border-left: 0; padding-left: 0; }
  .ng-nr-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .ng-nr-lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 20px 0 24px;
  }
  .ng-nr-lead__main h1,
  .ng-nr-lead__main h2 { font-size: 26px; }
  .ng-nr-stand { font-size: 15.5px; }
  .ng-nr-rail .ng-nr-brief-list { grid-template-columns: minmax(0, 1fr); }
  .ng-nr-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ng-nr-col { border-left: 0; padding-left: 0; padding-right: 0; padding-block: 20px; border-top: var(--nr-rule); }
  .ng-nr-col:first-child { border-top: 0; padding-top: 0; }
  .ng-nr-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-rates__label { padding-left: 0; }

  /* The matrix collapses to stacked rows -- a six-column table on a phone is
     a horizontal scroll nobody performs. */
  .ng-nr-matrix thead { display: none; }
  .ng-nr-matrix tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px 14px;
    padding: 14px 0;
    border-bottom: var(--nr-rule);
  }
  .ng-nr-matrix td { border: 0; padding: 0; }
  .ng-nr-matrix__latest { grid-column: 1 / -1; margin-top: 4px; }
}

@media (max-width: 480px) {
  .ng-nr-tools { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ Motion */

@media (prefers-reduced-motion: reduce) {
  .ng-nr-figure img { transition: none; }
  .ng-nr-figure:hover img { transform: none; }
}

/* =============================================================== Print */

@media print {
  .ng-rates, .ng-nr-tabs, .ng-nr-tools { display: none; }
  .ng-nr-lead, .ng-nr-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Section bar (mega nav)

   A second nav row whose items open a full-width panel instead of a dropdown.
   A publication with six countries and seven topics has more useful landing
   pages than a one-column dropdown can show, so the panel shows them grouped
   and all at once.
   ========================================================================== */

.ng-mega { min-width: 0; margin-right: auto; }

/* Inline in the header row: no frame of its own, and the panel anchors to the
   header so it still spans the full width rather than the width of the bar. */
.ng-mega--inline { position: static; }
.ng-has-section-bar .ng-header { position: relative; }

.ng-mega__bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.ng-mega__bar::-webkit-scrollbar { display: none; }

.ng-mega__item { position: static; flex: 0 0 auto; }

.ng-mega__link {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ng-text-2);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}
.ng-mega__bar { align-items: center; }
.ng-mega__link:hover { color: var(--ng-ink); }
.ng-mega__link[aria-expanded="true"] { color: var(--ng-ink); border-bottom-color: var(--ng-green); }
.ng-mega__link:focus-visible { outline: 2px solid var(--ng-green); outline-offset: -2px; }

.ng-mega__caret { width: 11px; height: 11px; transition: transform .18s ease; }
.ng-mega__link[aria-expanded="true"] .ng-mega__caret { transform: rotate(180deg); }

/* Panel */

.ng-mega__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ng-bg);
  border-top: 1px solid var(--ng-line);
  border-bottom: 3px solid var(--ng-ink);
  box-shadow: 0 18px 36px -20px rgba(11, 15, 20, .28);
}
.ng-mega__panel[hidden] { display: none; }

.ng-mega__panel-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 22px 20px 26px;
}

.ng-mega__panel-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ng-line); }
.ng-mega__panel-head a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ng-green);
  text-decoration: none;
}
.ng-mega__panel-head a:hover { text-decoration: underline; }

.ng-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ng-mega__grid a {
  display: block;
  padding: 9px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--ng-line);
}
.ng-mega__grid a:hover .ng-mega__child { color: var(--ng-green); }

.ng-mega__child {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ng-ink);
  line-height: 1.3;
  transition: color .15s ease;
}
.ng-mega__meta {
  display: block;
  font-size: 11.5px;
  color: var(--ng-text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================ Ranked panel */

.ng-nr-ranked { padding: 30px 0; border-bottom: var(--nr-rule); }

.ng-nr-ranked__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
}
.ng-nr-ranked__list > li { border-bottom: var(--nr-rule); }
.ng-nr-ranked__list .ng-nr-brief { border-bottom: 0; }

@media (max-width: 900px) {
  .ng-nr-ranked__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ng-nr-ranked__list { grid-template-columns: minmax(0, 1fr); }
  .ng-mega__panel-inner { padding-block: 16px 20px; }
  .ng-mega__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ng-mega__caret, .ng-mega__child { transition: none; }
}

@media print { .ng-mega { display: none; } }

/* ==========================================================================
   Section bar owns navigation

   With the primary menu suppressed, the header row is brand on the left and
   actions on the right, so the brand takes over the spacer job the nav used
   to do. Below 1100px the burger takes over and the section bar stands down --
   two navigations at one breakpoint is the problem this replaced.
   ========================================================================== */

.ng-has-section-bar .ng-header__inner { gap: var(--ng-s5); }
.ng-has-section-bar .ng-header__brand { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .ng-mega { display: none; }
}

/* Utility line: About / Contact sit beside the date, not in the section bar --
   they are not sections of the publication and nobody browses them. */

.ng-utility__links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 18px;
}
.ng-utility__links a { color: inherit; text-decoration: none; opacity: .82; }
.ng-utility__links a:hover { opacity: 1; text-decoration: underline; }
.ng-utility__links span { opacity: .4; }

@media (max-width: 640px) {
  .ng-utility__links { display: none; }
}

/* The bar is the widest thing in the header row, so it is what gives way first
   on a narrow desktop window -- tightening before the burger breakpoint rather
   than wrapping the wordmark onto its own line. */

@media (max-width: 1320px) {
  .ng-mega__link { padding: 10px 10px; font-size: 12px; letter-spacing: .05em; }
}
@media (max-width: 1180px) {
  .ng-mega__link { padding: 10px 8px; font-size: 11.5px; }
  .ng-has-section-bar .ng-header__cta { display: none; }
}