/**
 * The "Cẩm nang học tập và luyện thi miễn phí" band, away from the front page.
 *
 * MB R2 #10 asked for this band under the teachers on /giao-vien/. Its markup
 * moved into template-parts/section-library.php so both pages could draw it —
 * but its rules live in home.css, and class-mona-enqueue.php loads home.css OR
 * page.css, never both. On /giao-vien/ the band arrived with no layout: the
 * featured article's cover ran the full width of the column, which is what the
 * client reported as "mất style".
 *
 * What follows is a verbatim copy of home.css lines 246-287. Copied rather than
 * moved: home.css is the approved design as delivered and stays byte-for-byte
 * comparable, so the front page keeps using its own copy and this file is loaded
 * only on the pages that show the band without it.
 *
 * If the band ever changes, both copies have to change. That is the price of
 * leaving the approved sheet alone, and it is written here so the next person
 * knows to look.
 */
/* ===== 8. Cẩm nang (thư viện) — lưới 3 cột theo hệ thẻ chung (15/09) =====
   Hàng 1: bài mới nhất nằm ngang (2 cột) + thẻ vàng nền đặc dẫn tới /tai-lieu/.
   Hàng 2: 3 thẻ bài viết trắng viền đen, ảnh lọt lòng. Hover lấp màu lấy từ theme.css. */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.lib-grid .card__media { aspect-ratio: 16 / 9; }
.lib-grid .article-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--gray-soft); }
.lib-grid .cat { color: var(--gray); font-weight: 700; }
.lib-card h3 { font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.35; text-wrap: pretty; }

.lib-feat { grid-column: span 2; flex-direction: row; }
/* Ảnh bìa có chữ in sẵn nên giữ đúng 16:9, không cắt theo chiều cao thẻ */
.lib-feat { align-items: center; }
.lib-feat .card__media { flex: 0 0 56%; aspect-ratio: 16 / 9; }
/* .lib-grid tăng specificity: theme.css (nạp sau) đặt padding 8px cho .article-card .card__body làm chữ dính sát ảnh */
.lib-grid .lib-feat .card__body { justify-content: center; gap: 12px; padding: 20px clamp(20px, 2.5vw, 36px) 20px clamp(32px, 3.5vw, 52px); }
.lib-feat h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.25; text-wrap: balance; }
.lib-feat p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-feat .link-arrow { margin-top: 6px; width: fit-content; }
.lib-feat__tag { width: fit-content; padding: 5px 12px; border-radius: 999px; background: var(--red-700); color: var(--white); font-size: .78rem; font-weight: 700; }

.lib-dl { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1.5px solid transparent; border-radius: var(--r); background: var(--yellow); color: var(--on-yellow); }
.lib-dl__ic { width: 52px; height: 52px; }
.lib-dl use[href] { --ic-1: var(--black); --ic-2: var(--red); --ic-3: rgba(9, 11, 12, .13); }
/* Icon trong nút theo màu chữ nút, không lấy cặp đen/đỏ của thẻ vàng */
.lib-dl .btn use[href] { --ic-1: currentColor; --ic-2: currentColor; --ic-3: transparent; }
.lib-dl__count { margin-top: 6px; font-size: .9rem; font-weight: 700; color: var(--black); }
.lib-dl h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.25; color: var(--black); }
.lib-dl p { font-size: .95rem; }
.lib-dl__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 2px 0 0; }
.lib-dl__tags li { padding: 4px 12px; border: 1.5px solid var(--black); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--black); }
.lib-dl__btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1024px) {
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .lib-grid { grid-template-columns: 1fr; gap: 18px; }
  .lib-feat { grid-column: auto; flex-direction: column; }
  .lib-feat { align-items: stretch; }
  .lib-feat .card__media { flex: none; }
  .lib-grid .lib-feat .card__body { padding: 18px 8px 8px; }
}