/* itbuilder/insights-article-grid */

{#
  No outer section-level background/padding here deliberately — this
  module is always nested inside a template-level .pillar-section wrapper
  (see page-insights.html), which already supplies the off-white band and
  vertical padding. Giving this module its own on top would double the
  gap, the same class of bug documented against capability-grid/
  outcome-proof-cards/engagement-options on the Pillar template.
#}

.insights-article-grid__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 24px);
}

.insights-article-grid__heading {
  text-align: center;
}

/* Sept 2026: filters stacked in a column deliberately — the tag chips can
   wrap onto more than one row of their own depending on how many topics
   exist, so the author dropdown needs to always sit on its own row below
   them rather than as a flex sibling that might end up alongside the
   chips on a wide viewport. */

.insights-article-grid__filters {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 16px);
}

.insights-article-grid__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  justify-content: center;
}

/* Chip buttons are built by module.js — see that file. Colour-coded to the
   matching pillar via the --theme-*-color custom properties published at
   :root in theme-overrides.css (these are plain CSS custom properties, so
   module.css can read them even though it has no theme.* HubL access).

   Sept 2026 fix: these are real <button> elements, which also match the
   sitewide button/.button/.hs-button rule in theme-overrides.css — on
   equal-or-lower specificity that rule was winning the cascade and
   stripping the chip's own background/border/radius down to whatever the
   theme's button style resolves to (the flat, chrome-less look James
   flagged). Re-qualified every chip rule under .insights-article-grid__
   chips so it always outranks that sitewide rule regardless of stylesheet
   order, and squared the corners off (border-radius: 0) to match the
   theme's own no-radius button convention (blog-post-grid.module's CTA,
   insights-article-grid__cta below, etc.) rather than the pill shape. */

.insights-article-grid__chips .insights-article-grid__chip {
  background: #fff;
  border: 1px solid rgba(25, 39, 50, 0.15);
  border-radius: 0;
  color: var(--theme-primary-color, #192732);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  text-transform: none;
  transition: background var(--duration-fast, 150ms) var(--ease-standard, ease),
    color var(--duration-fast, 150ms) var(--ease-standard, ease),
    border-color var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.insights-article-grid__chips .insights-article-grid__chip:hover,
.insights-article-grid__chips .insights-article-grid__chip:focus-visible {
  background: rgba(25, 39, 50, 0.06);
}

.insights-article-grid__chips .insights-article-grid__chip.is-active {
  background: var(--chip-color, var(--theme-accent-color));
  border-color: var(--chip-color, var(--theme-accent-color));
  color: #fff;
}

.insights-article-grid__chip--visibility { --chip-color: var(--theme-visibility-color); }
.insights-article-grid__chip--security { --chip-color: var(--theme-security-color); }
.insights-article-grid__chip--productivity { --chip-color: var(--theme-productivity-color); }
.insights-article-grid__chip--modernisation { --chip-color: var(--theme-modernisation-color); }
.insights-article-grid__chip--resilience { --chip-color: var(--theme-resilience-color); }

.insights-article-grid__author-select {
  background: #fff;
  border: 1px solid rgba(25, 39, 50, 0.15);
  border-radius: 0;
  color: var(--theme-primary-color, #192732);
  font-size: 14px;
  padding: 8px 12px;
}

.insights-article-grid__grid {
  display: grid;
  gap: var(--space-5, 32px);
  grid-template-columns: 1fr;
  margin-top: var(--space-6, 48px);
}

@media (min-width: 768px) {
  .insights-article-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.insights-article-grid__card[hidden] {
  display: none;
}

/* Card visuals reuse blog-post-grid.module's proven card style exactly
   (plain white card, photo on top, left-aligned copy, squared corners). */

.insights-article-grid__card {
  background: #fff;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.insights-article-grid__image {
  aspect-ratio: 3 / 2;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.insights-article-grid__body {
  padding: var(--space-4, 24px);
}

.insights-article-grid__title {
  color: var(--theme-accent-color, #2fa8cd);
  display: block;
  font-weight: 700;
  text-decoration: none;
}

/* Sept 2026 fix: was relying on the sitewide a:hover rule for its colour
   change (theme-overrides.css), which forced this bold teal title to the
   theme's generic blue Links colour and dropped its bold weight on hover —
   see that rule's own header comment. Now scoped out of that rule, this
   restates the same filter: brightness(0.85) darkening every other card/
   button link in the theme already uses on hover, so the title darkens
   towards its own teal instead of flashing blue, and font-weight (never
   touched here) simply stays at its own 700 the whole time. */

.insights-article-grid__title:hover,
.insights-article-grid__title:focus-visible {
  filter: brightness(0.85);
  text-decoration: underline;
}

.insights-article-grid__byline {
  color: var(--theme-primary-color, #192732);
  font-size: 14px;
  margin-top: var(--space-1, 4px);
}

.insights-article-grid__summary {
  color: var(--theme-primary-color, #192732);
  margin-top: var(--space-2, 8px);
}

.insights-article-grid__cta {
  background-color: var(--theme-accent-color, #2fa8cd);
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  margin-top: var(--space-3, 16px);
  padding: 10px 20px;
  text-decoration: none;
  transition: filter var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.insights-article-grid__cta:hover,
.insights-article-grid__cta:focus-visible {
  filter: brightness(0.85);
}

/* Sept 2026: evened up with capability-grid.module's "How X shows up"
   arrow-nudge treatment for consistency across every arrow-suffixed CTA
   in the theme (see that module's own comment).

   Sept 2026 fix: needed display: inline-block on the arrow itself —
   transform is a no-op on a plain inline element; capability-grid's own
   arrow only nudges because its parent (.capability-grid__title) is a
   flex container, which blockifies it automatically. This arrow's
   parent isn't flex, so it needed its own blockifying display value. */

.insights-article-grid__arrow {
  display: inline-block;
  transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.insights-article-grid__cta:hover .insights-article-grid__arrow,
.insights-article-grid__cta:focus-visible .insights-article-grid__arrow {
  transform: translateX(3px);
}

.insights-article-grid__empty {
  margin-top: var(--space-6, 48px);
  text-align: center;
}