/* ==========================================================================
   Learning Hub: the /<lang>/resources/ page (the four sections of the
   Resources menu's Learning Hub group) and the breadcrumb on the articles.
   Built by components/learning-hub/build.mjs, which owns the ?v= of this
   file; loads on top of /resources/site.css (the green .list-hero header).
   ========================================================================== */

/* ---- Breadcrumb: the glossary's, so the trails read the same */
.lh-crumbs ol, .page .lh-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  margin: 0 0 20px; padding: 0; font-size: 13px; line-height: 1.5; color: var(--muted, #475569);
}
.lh-crumbs li, .page .lh-crumbs li { margin: 0; }
.lh-crumbs li + li::before { content: '›'; margin: 0 8px; color: #94a3b8; }
.lh-crumbs a, .page .lh-crumbs a { color: var(--link, #3F7D4E); text-decoration: none; }
.lh-crumbs a:hover { text-decoration: underline; }
.lh-crumbs a[aria-current="page"] { color: inherit; }

.lh-crumbs--hero ol { justify-content: center; margin-bottom: 18px; color: rgba(255,255,255,0.6); }
.lh-crumbs--hero a { color: rgba(255,255,255,0.78); }
.lh-crumbs--hero a[aria-current="page"] { color: #fff; }
.lh-crumbs--hero li + li::before { color: rgba(255,255,255,0.4); }

/* ---- The four sections: 2 × 2, one column on phones */
.lh-wrap { max-width: 1000px; margin: 48px auto 88px; padding: 0 1.5rem; }
.lh-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.lh-cards li { margin: 0; min-width: 0; }
.lh-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 28px; border: 1px solid var(--line, #e2e8f0); border-radius: 16px; background: #fff;
  color: inherit; text-decoration: none;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.lh-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: #cbd5e1; }
.lh-card:focus-visible { outline: 2px solid var(--link, #3F7D4E); outline-offset: 3px; }

/* The icon tile is the menu's (.res-icon in nav.css), a size up. */
.lh-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; margin-bottom: 6px;
  background: #F6F7F2; color: #101828;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.lh-card:hover .lh-icon { background: #dce6d8; color: #3F7D4E; }

.lh-card h2 {
  font: 600 22px/1.2 Poppins, Inter, sans-serif; letter-spacing: -0.015em;
  color: var(--navy, #101828); margin: 0;
}
.lh-card p { font-size: 15px; line-height: 1.6; color: var(--muted, #475569); margin: 0; flex: 1; }

.lh-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line, #e2e8f0);
}
.lh-count { font: 600 13px/1.4 Inter, sans-serif; color: var(--link, #3F7D4E); }
/* The news changes every weekday: the menu's live dot (.res-featured-label). */
.lh-count--live { display: inline-flex; align-items: center; gap: 8px; }
.lh-count--live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #7FD08A; box-shadow: 0 0 0 3px rgba(127,208,138,0.22);
}
.lh-arrow { font: 600 16px/1 Inter, sans-serif; color: var(--link, #3F7D4E); transition: transform .2s; }
.lh-card:hover .lh-arrow { transform: translateX(3px); }

@media (max-width: 767px) {
  .lh-wrap { margin: 32px auto 56px; padding: 0 1.25rem; }
  .lh-cards { grid-template-columns: 1fr; gap: 16px; }
  .lh-card { padding: 22px; }
  .lh-card h2 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-card, .lh-card:hover, .lh-arrow, .lh-card:hover .lh-arrow { transition: none; transform: none; }
}