/* itbuilder/blog-authors-grid */

{#
  Self-contained full-bleed section — owns its own background and
  vertical padding (same convention as blog-post-grid.module), so this
  module is called directly in the template with no .pillar-section
  wrapper around it.

  Sept 2026 client feedback: flipped from a dark section with near-
  invisible light cards to an off-white section with solid dark navy
  cards — matches ITBuilder_Insights_D01.pdf's own "dark navy heading on
  a light section, dark cards" treatment more closely than the original
  reading. All the card-internal text colours below were already tuned
  for white-on-dark (the cards themselves are dark now, not the section),
  so only the section background/heading colour and the card background
  actually changed.
#}

.blog-authors-grid {
  background-color: var(--theme-secondary-color, #f8fafc);
  padding: var(--space-8, 80px) 0;
}

.blog-authors-grid__heading {
  color: var(--theme-primary-color, #192732);
  text-align: center;
}

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

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

/* Sept 2026 fix: squared off (border-radius: 0), matching the sitewide
   flat/squared-corner treatment used elsewhere in this theme. Left the
   circular avatar below as-is — "square off the author cards" reads as
   the card container, not the headshot photo; flag if you want that
   squared too. */

.blog-authors-grid__card {
  background: var(--theme-primary-color, #192732);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  padding: var(--space-5, 32px);
  text-align: center;
}

.blog-authors-grid__avatar {
  border-radius: var(--radius-pill, 999px);
  display: block;
  height: 96px;
  margin: 0 auto;
  object-fit: cover;
  width: 96px;
}

.blog-authors-grid__name {
  color: var(--theme-modernisation-color, #7c5cff);
  font-weight: 700;
  margin-top: var(--space-3, 16px);
}

.blog-authors-grid__title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-top: var(--space-1, 4px);
}

.blog-authors-grid__bio {
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-3, 16px);
}

.blog-authors-grid__articles-label {
  color: var(--theme-modernisation-color, #7c5cff);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: var(--space-4, 24px);
  text-transform: uppercase;
}

.blog-authors-grid__articles {
  margin-top: var(--space-2, 8px);
  text-align: left;
}

.blog-authors-grid__article + .blog-authors-grid__article {
  margin-top: var(--space-2, 8px);
}

.blog-authors-grid__article a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

/* Sept 2026 fix: same sitewide a:hover bug as the other card links in this
   theme (see theme-overrides.css's a:hover header comment). */

/* Oct 2026 fix: hover/focus/active links were flipping to the sitewide
   dark-blue a:hover colour (invisible on these navy cards) because this
   rule only set a filter, never a colour. Pinning the colour to white in
   every state so the only hover change is the underline. filter removed:
   brightness(0.85) just dimmed the white text, which isn't wanted either. */

.blog-authors-grid__article a:hover,
.blog-authors-grid__article a:focus,
.blog-authors-grid__article a:focus-visible,
.blog-authors-grid__article a:active {
  color: #fff;
  text-decoration: underline;
}