/**
 * VMT Reading Guide module — STRUCTURAL skeleton only.
 *
 * This file contains only the layout scaffolding needed so the module renders
 * coherently (not broken) even without the theme's visual layer: grid/flex
 * structure, the fixed-height object-fit:contain cover/logo framing mechanism,
 * the two-column responsive book layout, the stacked+centered equal-width
 * buy-button mechanism, list resets, and a minimal horizontal gutter so content
 * never touches the viewport edge.
 *
 * ALL visual/brand styling — the warm palette, tokens, typography, the green bar
 * colour, cover-box matte/borders/shadows/radius, card look, badges, buttons,
 * hover states, decorative spacing — lives in the theme and can be restyled there
 * WITHOUT touching this plugin: web/app/themes/divi-child/reading-guide.css
 * (enqueued after this file, so it cleanly overrides). Deliberately NO var(--rg-*)
 * references here: the skeleton must stand on its own.
 *
 * Admin/community inline <style> blocks are intentionally not part of this split.
 */

/* Content-width centering + a minimal gutter (theme owns the fuller padding). */
.vmt-rg-topbar__inner { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.vmt-rg-wrap { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* ---- Card grid (equal-height skeleton) ---- */
.vmt-rg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 26px;
	align-items: stretch;
	grid-auto-rows: 1fr;
	list-style: none;
	padding: 0;
}
.vmt-rg-card { height: 100%; list-style: none; }
.vmt-rg-card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: inherit; }
.vmt-rg-card__cover { display: flex; align-items: center; justify-content: center; height: 152px; }
.vmt-rg-card__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.vmt-rg-card__fallback b { display: block; }
.vmt-rg-card__body { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }
.vmt-rg-card__pull { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vmt-rg-card__part { margin-top: auto; }

/* Resource wordmark / logo boxes — fixed-height contain framing. */
.vmt-rg-card__wordmark { display: flex; align-items: center; justify-content: center; height: 152px; }
.vmt-rg-card__tag { display: inline-block; align-self: flex-start; }
.vmt-rg-card__logo { display: flex; align-items: center; justify-content: center; height: 152px; }
.vmt-rg-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.vmt-rg-book__logo { aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; }
.vmt-rg-book__logo img { max-width: 100%; max-height: 60%; width: auto; height: auto; object-fit: contain; display: block; }

.vmt-rg-badge { display: inline-block; }

/* ---- Book detail — two-column responsive layout ---- */
.vmt-rg-book { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 48px; align-items: start; }
@media (max-width: 782px) { .vmt-rg-book { grid-template-columns: 1fr; gap: 26px; } }
.vmt-rg-book__cover { overflow: hidden; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; }
.vmt-rg-book__cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.vmt-rg-book__wordmark { aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; }
.vmt-rg-btn { display: inline-block; }

/* Buy buttons (single book page): stacked, centered, equal-width mechanism. */
.vmt-rg-buys { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vmt-rg-buybtn { display: block; line-height: 0; }
.vmt-rg-buybtn__img { display: block; width: 176px; max-width: 100%; height: auto; }
.vmt-rg-buys .vmt-rg-btn { margin-top: 0; }

.vmt-rg-tag { display: inline-block; }

/* ---- Library landing tiles grid ---- */
.vmt-rg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 22px; }
.vmt-rg-tile { display: block; }