/*
 * Related guides, tools and profiles added by RelatedContent.php on profiles, guides, tools and hubs. Colours use the
 * profile tokens (--aq-*) where a page has them and the theme tokens (--ug-*) elsewhere, so both light and dark work.
 * Tiles keep one width: the column count divides the list evenly (aq-cols-N), so no row ends with a stretched tile.
 */
.aq-related-guides,
.aq-related-tools,
.aq-guide-profiles {
  --rc-surface: var(--aq-surface, var(--mero-surface, #fff));
  --rc-line: var(--aq-border, var(--mero-border, #cad8d2));
  --rc-ink: var(--aq-heading, var(--mero-ink, #14201e));
  --rc-muted: var(--aq-text-muted, var(--mero-muted, #52645f));
  --rc-accent: var(--aq-accent, var(--mero-brand-hover, #087861));
  --rc-focus: var(--aq-focus, var(--ug-focus-ring, #087861));
  margin: 2.5rem 0;
}
.aq-related-guides__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin: 0 0 1rem;
}
.aq-related-guides__head h2,
.aq-related-tools h2 {
  margin: 0;
}
.aq-related-tools h2 {
  margin-bottom: 1rem;
}
.aq-related-guides__head .aq-eyebrow {
  margin: 0 0 .25rem;
}
.aq-related-guides__more {
  color: var(--rc-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.aq-related-guides__list,
.aq-related-tools__list {
  display: grid;
  grid-template-columns: repeat(var(--rc-cols, 3), minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aq-related-guides__list > li,
.aq-related-tools__list > li {
  margin: 0;
  padding: 0;
}
.aq-cols-1 { --rc-cols: 1; }
.aq-cols-2 { --rc-cols: 2; }
.aq-cols-3 { --rc-cols: 3; }
.aq-cols-4 { --rc-cols: 4; }
.aq-related-guides__card,
.aq-related-tools__card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  height: 100%;
  box-sizing: border-box;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rc-line);
  border-radius: 12px;
  background: var(--rc-surface);
  color: var(--rc-ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.aq-related-guides__card:hover,
.aq-related-tools__card:hover {
  border-color: var(--rc-accent);
  transform: translateY(-2px);
}
.aq-related-guides__card:focus-visible,
.aq-related-tools__card:focus-visible {
  outline: 3px solid var(--rc-focus);
  outline-offset: 2px;
}
.aq-related-guides__cat {
  color: var(--rc-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.aq-related-guides__title,
.aq-related-tools__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.aq-related-guides__desc,
.aq-related-tools__desc {
  color: var(--rc-muted);
  font-size: .92rem;
  line-height: 1.45;
}
.aq-guide-profiles .aq-related-profiles__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
/* Small labels above headings, styled the same on theme pages as on profile pages. */
.aq-related-guides .aq-eyebrow,
.aq-guide-profiles .aq-eyebrow {
  margin: 0 0 .3rem;
  color: var(--rc-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Guide text gives h2 a large top margin; these blocks space themselves instead. */
.mero-single-post__content .aq-related-guides__head h2,
.mero-single-post__content .aq-related-tools h2 {
  margin-top: 0;
}
.mero-single-post__content .aq-related-guides,
.mero-single-post__content .aq-related-tools,
.mero-single-post__content .aq-guide-profiles {
  margin-top: 3.5rem;
}
.mero-single-post__content .aq-related-guides__card,
.mero-single-post__content .aq-related-tools__card,
.mero-single-post__content .aq-related-guides__more {
  text-decoration: none;
}
.mero-single-post__content .aq-related-guides__more { text-decoration: underline; }
/* Guide pages: the blocks sit in the text column, which is narrower than a profile page. */
.mero-single-post__content .aq-cols-4 { --rc-cols: 2; }
.mero-single-post__content .aq-guide-profiles .aq-related-profiles__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) {
  .mero-single-post__content .aq-cols-4 { --rc-cols: 4; }
  .mero-single-post__content .aq-guide-profiles .aq-related-profiles__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .aq-cols-3, .aq-cols-4 { --rc-cols: 2; }
  .aq-guide-profiles .aq-related-profiles__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .aq-related-guides__list,
  .aq-related-tools__list,
  .aq-guide-profiles .aq-related-profiles__row,
  .mero-single-post__content .aq-guide-profiles .aq-related-profiles__row { grid-template-columns: 1fr; }
}

/* Guide category row on /guides/ and category pages. */
.aq-guide-categories {
  margin: 0 0 2rem;
}
.aq-guide-categories h2 {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
}
.aq-guide-categories__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aq-guide-categories__list > li { margin: 0; }
.aq-guide-categories__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  height: 100%;
  box-sizing: border-box;
  padding: .65rem .85rem;
  border: 1px solid var(--mero-border, #cad8d2);
  border-radius: 10px;
  background: var(--mero-surface, #fff);
  color: var(--mero-ink, #14201e);
  font-weight: 600;
  text-decoration: none;
}
.aq-guide-categories__list a:hover { border-color: var(--ug-link, #087861); }
.aq-guide-categories__list a[aria-current="page"] { border-color: var(--ug-link, #087861); box-shadow: inset 0 0 0 1px var(--ug-link, #087861); }
.aq-guide-categories__count { color: var(--mero-muted, #52645f); font-size: .85rem; font-weight: 500; }
@media (max-width: 1279px) { .aq-guide-categories__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .aq-guide-categories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }