/* Learn hub "Featured guides" as regular cards (owner 03.10, recipe learn.js): the cards are the "Latest guides" cards
   of this page (picture on top, topic and level, title, excerpt); this file only lays them out — three in a row, on
   tablets the first card across the row (picture left, text right) over the other two, one column on phones — and
   draws the author line under each card. Colours are the page's own tokens (dark / light). */
main .wc-lf-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
main .wc-lf-card {
  height: 100%;
}
main .wc-lf-by {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
main .wc-lf-by > span:nth-of-type(1) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--tLgByEz);
}
main .wc-lf-av {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-right: 2px;
  border-radius: 50%;
  object-fit: cover;
}
/* "Show all N … guides →" under "Browse by level": the design's button look, now a link to the level's page */
main .wc-lv-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
@media (width < 1100px) {
  main .wc-lf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main .wc-lf-grid > .wc-lf-card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  main .wc-lf-grid > .wc-lf-card:first-child > :first-child {
    flex: 0 0 50%;
    aspect-ratio: auto;
    min-height: 100%;
  }
  main .wc-lf-grid > .wc-lf-card:first-child > :last-child {
    justify-content: center;
    padding: 24px 28px;
  }
}
@media (width < 700px) {
  main .wc-lf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  main .wc-lf-grid > .wc-lf-card:first-child {
    flex-direction: column;
  }
  main .wc-lf-grid > .wc-lf-card:first-child > :first-child {
    flex: none;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  main .wc-lf-grid > .wc-lf-card:first-child > :last-child {
    justify-content: flex-start;
    padding: 18px 20px 22px;
  }
}
/* Topic tiles under the hero (owner 03.10 audit): every topic in full rows on wide screens — up to 8 in one row, more
   in two equal rows (--wc-tc from the recipe: 12 topics = 2 × 6, not 8 + a half-empty row of 4). The tiles keep the
   design's size: the grid is as wide as --wc-tc tiles of the 8-column layout and centred under the hero. */
@media (width >= 1200px) {
  main nav[aria-label="Topics"][style*="--wc-tc"] {
    grid-template-columns: repeat(var(--wc-tc, 8), minmax(0, 1fr));
    max-width: calc(var(--wc-tc, 8) * 176px);
    margin-inline: auto;
  }
}
/* "Browse by level": a level without guides has no tab, so the tab grid and its sliding highlight follow the number
   of tabs (--wc-n from the recipe); the counts in the tabs at full contrast (the design's 0.6 opacity gave 2.1:1) */
main [role="tablist"][aria-label="Guide level"][style*="--wc-n"] {
  grid-template-columns: repeat(var(--wc-n, 3), minmax(0, 1fr));
}
main [role="tablist"][aria-label="Guide level"][style*="--wc-n"] > span[aria-hidden="true"] {
  width: calc((100% - 6px) / var(--wc-n, 3));
}
main [role="tablist"][aria-label="Guide level"] [role="tab"] > span + span {
  opacity: 1;
}
/* "Latest guides" arrows (assets/js/p/learn.js): a disabled arrow takes no hover or press */
main [data-wc-arrows] button[disabled] {
  pointer-events: none;
}