/* BIF — Article Library. Inner content only. Tokens from clever-design-tokens. */
.bif-library { container-type: inline-size; font-family: var(--clvr-font, "Poppins", sans-serif); color: var(--clvr-text, #22293b); background: var(--clvr-bg, #fff); padding: var(--clvr-sp-14, 56px) var(--clvr-sp-4, 16px) var(--clvr-sp-16, 64px); }
.bif-library *, .bif-library *::before, .bif-library *::after { box-sizing: border-box; }
.bif-library__wrap { max-width: var(--clvr-wide-width, 1144px); margin: 0 auto; }

.bif-library__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: var(--clvr-sp-6, 24px); }
.bif-library__eyebrow { flex-basis: 100%; font-size: 0.6875rem; font-weight: var(--clvr-weight-bold, 700); letter-spacing: 0.1em; text-transform: uppercase; color: var(--clvr-orange-dark, #C3862A); }
.bif-library__h2 { font-family: var(--clvr-font-heading, "Poppins", sans-serif); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: var(--clvr-weight-bold, 700); color: var(--clvr-blue, #14244A); margin: 0; letter-spacing: -0.02em; }
.bif-library__count { font-size: 0.85rem; color: var(--clvr-text-secondary, #4b698b); }

.bif-library__search { display: block; margin: -8px 0 var(--clvr-sp-5, 20px); }
.bif-library__search input { width: 100%; max-width: 520px; font: inherit; font-size: 0.95rem; padding: 12px 16px 12px 42px; border: 1.5px solid var(--clvr-border-light, #e2e8f0); border-radius: 9999px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b698b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") 14px center / 18px no-repeat; color: var(--clvr-text, #22293b); }
.bif-library .bif-library__search input { color: var(--clvr-text, #22293b); -webkit-text-fill-color: var(--clvr-text, #22293b); font-size: 0.95rem; opacity: 1; }
.bif-library .bif-library__search input::placeholder { color: var(--clvr-text-muted, #707b94); -webkit-text-fill-color: var(--clvr-text-muted, #707b94); opacity: 1; }
.bif-library__search input:focus { outline: none; border-color: var(--clvr-blue, #14244A); box-shadow: 0 0 0 3px rgba(20, 36, 74, 0.12); }
.bif-library__card[hidden] { display: none; }
.bif-library__none { color: var(--clvr-text-secondary, #4b698b); }
.bif-library__grid { display: grid; grid-template-columns: 1fr; gap: var(--clvr-sp-4, 16px); }
@container (min-width: 600px) { .bif-library__grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 960px) { .bif-library__grid { grid-template-columns: repeat(3, 1fr); } }

.bif-library__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--clvr-border-light, #e2e8f0); border-radius: var(--clvr-radius, 8px); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--clvr-transition, 200ms ease), transform var(--clvr-transition, 200ms ease); }
.bif-library__card:hover { box-shadow: var(--clvr-shadow, 0 10px 30px rgba(20, 36, 74, 0.10)); transform: translateY(-2px); }
.bif-library__card { border-top: 4px solid var(--clvr-orange, #DBA450); }
.bif-library__top { display: flex; align-items: flex-start; gap: 12px; }
.bif-library__thumb { flex: none; width: 48px; height: 48px; border-radius: var(--clvr-radius-sm, 6px); object-fit: contain; background: var(--clvr-bg-subtle, #f5f8fc); padding: 4px; border: 1px solid var(--clvr-border-light, #e2e8f0); }
.bif-library__date { font-size: 0.75rem; color: var(--clvr-text-muted, #86a5c6); }
.bif-library__body { display: flex; flex-direction: column; gap: 8px; padding: var(--clvr-sp-4, 16px) var(--clvr-sp-5, 20px) var(--clvr-sp-5, 20px); }
.bif-library__body b { font-size: 1rem; line-height: 1.35; color: var(--clvr-blue, #14244A); font-weight: var(--clvr-weight-semibold, 600); }
.bif-library__ex { font-size: 0.875rem; line-height: 1.55; color: var(--clvr-text-secondary, #4b698b); }
.bif-library__more { margin-top: auto; padding-top: 6px; font-size: 0.85rem; font-weight: var(--clvr-weight-semibold, 600); color: var(--clvr-orange-dark, #C3862A); }
.bif-library__empty { color: var(--clvr-text-secondary, #4b698b); }

@media (prefers-reduced-motion: reduce) { .bif-library__card { transition: none; } }