/* ==========================================================
   WordPressistic theme — tools page layout
   The Tools Hub plugin ships its own result CSS (which inherits
   these same brand tokens). This file styles the page shell +
   the tool index grid around the plugin shortcodes.
   ========================================================== */

.wpistic-tools-page { padding-block: 36px; }
.wpistic-tools-page__head { max-width: 680px; margin-bottom: 28px; }

.wpistic-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.wpistic-tool-card {
	display: flex; flex-direction: column; gap: 10px; padding: 20px;
	background: var(--wpistic-surface); border: 1px solid var(--wpistic-border);
	border-radius: var(--wpistic-radius); box-shadow: var(--wpistic-shadow);
	text-decoration: none; color: var(--wpistic-text);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.wpistic-tool-card:hover { transform: translateY(-3px); box-shadow: var(--wpistic-shadow-lg); border-color: var(--wpistic-accent); color: var(--wpistic-text); }
.wpistic-tool-card__icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: var(--wpistic-accent-soft); }
.wpistic-tool-card__name { font-weight: 700; font-size: 1.02rem; }
.wpistic-tool-card__blurb { font-size: 13px; color: var(--wpistic-muted); margin: 0; }
.wpistic-tool-card__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; }

/* When a plugin renders a single tool widget on a theme page, give it room. */
.wpistic-tools-page .wpistic-tool { background: var(--wpistic-surface); border: 1px solid var(--wpistic-border); border-radius: var(--wpistic-radius); padding: 24px; box-shadow: var(--wpistic-shadow); }