/**
 * Community Library archive (/library/) — STRUCTURAL skeleton only.
 *
 * Layout scaffolding so the archive renders coherently even without the theme's
 * visual layer: content-width centering + minimal gutter, the card grid, card
 * flex structure, the filter bar layout, and the JS-filter hide utility.
 * Deliberately NO design tokens or colours here — all brand/visual styling lives
 * in the theme and can be restyled without touching the plugin:
 *   web/app/themes/divi-child/library.css  (enqueued after this file).
 *
 * Namespaced .vmt-rl-lib-* — independent of the Reading Guide (.vmt-rg-*) module.
 */

.vmt-rl-lib__topbar-inner { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.vmt-rl-lib__wrap { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* Filter bar */
.vmt-rl-lib__filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vmt-rl-lib__search { flex: 1 1 240px; min-width: 0; }

/* Card grid (equal height) */
.vmt-rl-lib__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
	align-items: stretch;
	grid-auto-rows: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vmt-rl-lib__card { height: 100%; list-style: none; }
.vmt-rl-lib__card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.vmt-rl-lib__badge { align-self: flex-start; }
.vmt-rl-lib__card-title { display: block; }
.vmt-rl-lib__card-desc { display: block; }
.vmt-rl-lib__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.vmt-rl-lib__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vmt-rl-lib__tag { display: inline-block; }

/* JS-filter hide: cards/results the client filter removes. Wins over grid/flex. */
.vmt-rl-lib__card[hidden],
.vmt-rl-lib__noresults[hidden] { display: none !important; }

/* ---- Single resource page (structural) ---- */
.vmt-rl-lib__single { max-width: 760px; margin: 0 auto; }
/* Rating widget layout only — class names + the inline <script> that toggles
   .is-filled / [hidden] are owned by the template and must not change. */
.vmt-rl-lib__single .vmt-rl-rating-block { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vmt-rl-lib__single .vmt-rl-stars { display: inline-flex; gap: 2px; }
.vmt-rl-lib__single .vmt-rl-star { background: none; border: none; padding: 0 2px; line-height: 1; cursor: pointer; }
.vmt-rl-lib__single .vmt-rl-rating-prompt[hidden] { display: none !important; }
.vmt-rl-lib__single .vmt-rl-action a { display: inline-block; }