/* --------------------------------------------------------------------------
   Insights index — filter bar and article grid

   Every article is presented alike in one grid. Nothing is promoted into a
   hero block, so the page reads as a library to browse rather than as a
   single article with the rest beneath it.
   -------------------------------------------------------------------------- */

/* ---- the layout ----

   A sidebar of filters beside the grid. Stacked vertically every category
   is readable at once and the counts line up into a column that can be
   compared at a glance — neither of which a scrolling row of chips could
   do. Below 992px the sidebar becomes a drawer opened by a button. */
.blog-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.blog-main { min-width: 0; }

/* The bar above the grid: the count on one side, the sort control on the
   other. Sorting acts on the articles in this column, so it belongs over
   them rather than in the panel that decides which articles appear. */
.grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.results-count {
  margin: 0;
  color: var(--color-silver);
  font-size: 0.88rem;
}

.grid-sort {
  display: flex;
  align-items: center;
  gap: 9px;
}

.grid-sort label {
  color: var(--color-silver);
  font-size: 0.8rem;
  white-space: nowrap;
}

.grid-sort select {
  padding: 7px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.84rem;
  cursor: pointer;
}

.grid-sort select:hover { border-color: var(--color-gold); }
.grid-sort select:focus { outline: none; border-color: var(--color-gold); }

/* The sidebar scrolls with the page until it reaches the header, then
   stays. Its own overflow is capped to the window so a long category list
   can never trap the page scroll. */
.blog-sidebar {
  position: sticky;
  /* Clear the fixed header, plus a little air. Anything less and the panel
     slides under it, because the header is painted above this column. */
  top: calc(var(--header-height, 76px) + 16px);
  /* The header sits at 1030; without a stacking order of its own the
     sticky panel scrolled underneath it rather than stopping below. */
  z-index: 1;
  /* Cap to the space actually left below the header. The earlier value
     ignored the top offset, so the panel was always ~36px taller than its
     slot: it scrolled internally, hid the last categories, and never
     pinned at all. Scrolling here is now a fallback for genuinely long
     lists, not the normal case. */
  max-height: calc(100vh - var(--header-height, 76px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.blog-sidebar::-webkit-scrollbar { width: 5px; }
.blog-sidebar::-webkit-scrollbar-track { background: transparent; }

.blog-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

/* The heading and close button belong to the drawer; on the desktop
   sidebar the panel needs no title of its own. */
.sidebar-head { display: none; }

.sidebar-group { margin-top: 16px; }

.sidebar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--color-silver);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- search ---- */

.sidebar-search {
  position: relative;
  display: block;
}

.sidebar-search > i {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-silver);
  font-size: 0.88rem;
  pointer-events: none;
}

.sidebar-search input {
  width: 100%;
  padding: 10px 14px;
  padding-inline-start: 36px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.sidebar-search input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--gold-tint-strong);
}

.sidebar-search input::placeholder { color: var(--color-silver); }

/* ---- categories ---- */

.sidebar-nav,
.sidebar-subnav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-link,
.sidebar-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md, 10px);
  color: var(--color-silver);
  font-size: 0.87rem;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.sidebar-link:hover,
.sidebar-sublink:hover {
  background: var(--wash-subtle);
  color: var(--color-white);
}

/* The selected category is marked by a gold rule on the leading edge
   rather than a filled pill: at this size a filled row would dominate
   the column it sits in. */
.sidebar-link.is-active {
  background: var(--gold-tint);
  color: var(--color-gold-ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-gold-ink);
}

[dir="rtl"] .sidebar-link.is-active { box-shadow: inset -3px 0 0 var(--color-gold-ink); }

.sidebar-link-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--wash-soft);
  color: inherit;
  font-size: 0.73rem;
  font-weight: 600;
  text-align: center;
}

.sidebar-link.is-active .sidebar-count {
  background: var(--gold-tint-strong);
}

/* ---- the parent → child relationship ----

   The open branch is drawn as one object rather than a pill with a
   detached list beneath it. The parent loses its bottom corners on the
   inner edge, and the children hang from a rail that starts in the
   parent's own gold and fades out down the list — so the eye follows the
   branch from the selected category into what belongs to it.

   The indent is on the list *and* a margin on each link. Padding on the
   <ul> alone left the <li> children full width, so in RTL the rule was
   drawn down the right edge while the text still started at the right —
   the children lined up with their parents and read as more top-level
   categories rather than as children of one. */
.sidebar-nav li:has(> .sidebar-subnav) > .sidebar-link.is-active {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  margin-bottom: 0;
}

/* When a child is selected, the parent is the trail rather than the
   destination. Left at full strength both rows carried the same fill,
   colour and weight, so the child read as a second top-level category
   instead of as something inside the one above it. The parent keeps its
   gold edge and squared seam — enough to show the branch it opens — but
   gives up the fill and the bold. */
.sidebar-nav li:has(.sidebar-sublink.is-active) > .sidebar-link.is-active {
  background: var(--gold-tint);
  color: color-mix(in srgb, var(--color-gold-ink) 72%, var(--color-silver));
  font-weight: 500;
}

.sidebar-nav li:has(.sidebar-sublink.is-active) > .sidebar-link.is-active .sidebar-count {
  background: var(--wash-soft);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sidebar-nav li:has(.sidebar-sublink.is-active) > .sidebar-link.is-active {
    color: var(--color-silver);
  }
}

/* A faint wash behind the branch, fading out as it descends, so the group
   reads as one block belonging to the category above it. */
.sidebar-subnav {
  position: relative;
  margin: 0 0 10px;
  margin-inline-start: 15px;
  padding-inline-start: 18px;
  padding-block: 5px;
  background: linear-gradient(
    to bottom,
    var(--gold-tint) 0,
    transparent 85%
  );
  border-end-start-radius: var(--radius-md, 10px);
}

/* A gradient rail, not a flat border: it reads as descending from the
   parent instead of as an unrelated divider sitting alongside. */
.sidebar-subnav::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-gold) 0,
    color-mix(in srgb, var(--color-gold) 35%, transparent) 45%,
    var(--color-border) 100%
  );
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sidebar-subnav::before {
    background: linear-gradient(to bottom, var(--color-gold), var(--color-border));
  }
}

/* Each child gets a short tick joining it to the rail, which is what
   makes the group read as a branch rather than an indented block. */
.sidebar-subnav > li { position: relative; }

/* The border colour is too dark to read at 1px against the panel, so the
   ticks are drawn a step lighter and given a rounded cap. */
.sidebar-subnav > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -18px;
  top: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--wash-strong);
  transition: background var(--speed) var(--ease);
}

.sidebar-subnav > li:hover::before { background: var(--wash-strong); }

.sidebar-sublink {
  font-size: 0.82rem;
  padding: 5px 9px;
}

.sidebar-sublink:hover { background: var(--wash-subtle); }

/* The child owns the selection, so it carries the marker the parent gave
   up: a gold edge of its own, on the same side as the rail it hangs from. */
.sidebar-sublink.is-active {
  background: var(--gold-tint-strong);
  color: var(--color-gold-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-gold-ink);
}

[dir="rtl"] .sidebar-sublink.is-active {
  box-shadow: inset -2px 0 0 var(--color-gold-ink);
}

.sidebar-subnav > li:has(> .is-active)::before {
  background: var(--color-gold-ink);
  width: 12px;
}

/* A category with nothing in it stays legible but recedes, so the counts
   that matter are the ones that catch the eye. Set from the template:
   a count of 0 is not :empty, so CSS alone cannot tell them apart. */
.sidebar-link.is-empty,
.sidebar-sublink.is-empty { opacity: 0.5; }

.sidebar-link.is-empty:hover,
.sidebar-sublink.is-empty:hover { opacity: 0.85; }

/* The overlays above used to be restated here as black for light mode. They
   now come from --wash-*, which each theme defines for itself, so the
   per-rule patches are gone. The rail tick is the one exception: it needs a
   step more contrast than the wash carries. */
[data-theme="light"] .sidebar-subnav > li::before { background: rgba(16, 17, 20, 0.18); }
[data-theme="light"] .sidebar-subnav > li:hover::before { background: rgba(16, 17, 20, 0.32); }

/* ---- applied filters ---- */

.sidebar-applied { border-top: 1px solid var(--color-border); padding-top: 14px; }

.applied-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.clear-all {
  color: var(--color-silver);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clear-all:hover { color: var(--color-gold-ink); }

/* ---- the drawer trigger ----

   Hidden on desktop, where the sidebar is always in view. */
.filters-toggle,
.filters-scrim,
.sidebar-close { display: none; }


/* Topics are a level below the category, and read as such: a quiet label,
   smaller chips, and a rule separating them from the categories above. */
.blog-topics {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.topics-label {
  flex-shrink: 0;
  color: var(--color-silver);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-topics .tag-chip {
  padding: 5px 12px;
  font-size: 0.79rem;
}

.tag-chip.is-active {
  border-color: var(--color-gold-ink);
  color: var(--color-gold-ink);
  background: var(--gold-tint);
}

/* The filters currently applied sit inline at the end of the filter row,
   after a divider, rather than in a row of their own. */
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--gold-tint);
  border: 1px solid var(--gold-outline);
  color: var(--color-gold-ink);
  font-size: 0.82rem;
}

.active-chip i { font-size: 0.78rem; }
.active-chip a { color: inherit; font-size: 1.05rem; line-height: 1; opacity: 0.7; }
.active-chip a:hover { opacity: 1; }

/* ---- the grid ---- */

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px;
  margin-top: 44px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.article-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.article-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface);
}

.article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.article-card:hover .article-thumb img { transform: scale(1.05); }

.article-thumb-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-border);
  font-size: 2rem;
}

.article-chip {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  /* The chip carries its own dark pill in both themes so it stays readable
     over any thumbnail. Its ground is therefore always dark, which means it
     keeps the bright brand gold rather than the darkened ink the light theme
     uses for gold on a light surface. */
  background: rgba(8, 8, 8, 0.76);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 169, 0, 0.4);
  color: var(--color-gold);
  font-size: 0.74rem;
  font-weight: 600;
}

.article-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 21px 18px;
}

.article-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  line-height: 1.45;
  margin: 0 0 10px;
}

.article-title a { color: var(--color-text); }
.article-card:hover .article-title a { color: var(--color-gold-ink); }

.article-excerpt {
  flex: 1;
  margin: 0 0 16px;
  color: var(--color-silver);
  font-size: 0.9rem;
  line-height: 1.7;
}

.article-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  color: var(--color-silver);
  font-size: 0.79rem;
}

.article-foot span { display: inline-flex; align-items: center; gap: 6px; }
.article-foot i { font-size: 0.8rem; opacity: 0.75; }

.article-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 24px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
}

.article-empty i { font-size: 2.6rem; color: var(--color-border); }
.article-empty h3 { margin: 18px 0 8px; font-size: 1.2rem; }
.article-empty p { max-width: 420px; margin: 0 auto; }

/* ---- newsletter band ---- */

.blog-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 60px;
  padding: 30px 34px;
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.blog-newsletter h3 { margin: 0 0 6px; font-size: 1.18rem; }
.blog-newsletter p { margin: 0; color: var(--color-silver); font-size: 0.9rem; max-width: 46ch; }

.blog-newsletter form {
  position: relative;
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 280px;
  max-width: 440px;
}

.blog-newsletter input { flex: 1; min-width: 0; border-radius: var(--radius-pill); }
.blog-newsletter .btn { flex-shrink: 0; }

.blog-newsletter [data-newsletter-feedback] {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  font-size: 0.82rem;
}

.pagination-eh .ellipsis { border: 0; background: none; }

/* ---- narrow screens ----

   Below 992px there is no room for a column beside the grid, so the
   sidebar becomes a drawer: the same markup, moved off-canvas and opened
   by a button above the articles. */
@media (max-width: 992px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: relative;
    align-self: start;
    margin-bottom: 18px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
  }

  .filters-toggle:hover { border-color: var(--color-gold); color: var(--color-gold-ink); }

  /* A dot rather than a number: it says filters are applied without
     asking the button to grow every time one is added. */
  .filters-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gold);
  }

  /* Off-canvas until opened.
     translateX is in physical pixels, but the panel is anchored with the
     logical inset-inline-start — which is the right edge in RTL. Writing
     one signed translate for both directions pushed the RTL panel the
     wrong way and left it sitting half on screen. Each direction gets its
     own sign, and neither is allowed to inherit the other's. */
  .blog-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1050;
    width: min(320px, 86vw);
    max-height: none;
    padding: 20px;
    border-radius: 0;
    border-width: 0;
    border-inline-end: 1px solid var(--color-border);
    transform: translateX(-102%);
    transition: transform var(--speed) var(--ease);
    overflow-y: auto;
  }

  [dir="rtl"] .blog-sidebar {
    border-inline-end: 0;
    border-inline-start: 1px solid var(--color-border);
    transform: translateX(102%);
  }

  .blog-sidebar.is-open,
  [dir="rtl"] .blog-sidebar.is-open { transform: translateX(0); }

  .filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--speed) var(--ease);
  }

  .filters-scrim.is-open { opacity: 1; }

  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
  }

  .sidebar-title { margin: 0; font-size: 1.05rem; }

  .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
  }

  .sidebar-close:hover { border-color: var(--color-gold); color: var(--color-gold-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-sidebar, .filters-scrim { transition: none; }
}

@media (max-width: 600px) {
  .article-grid { grid-template-columns: 1fr; gap: 20px; }
  .blog-newsletter { padding: 24px; }
  .blog-newsletter form { max-width: none; }
}

/* ---- results being fetched ----

   Filtering replaces only this column, so the swap needs a signal of its
   own: without one the page looks inert between the click and the new
   cards arriving. Kept to a fade rather than a spinner — the request is
   usually short enough that a spinner would only flash. */
.blog-main.is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .blog-main.is-loading { transition: none; }
}