/* ==========================================================
   Aura Builder — Frontend-only extras
   All shared block/section/column styles live in blocks.css
   which is loaded as a dependency of this file.
   ========================================================== */

/* ── Pages list view ───────────────────────────────────── */
.com-aurabuilder-pages { }
.vb-pages-header { padding: 48px 0 32px; }
.vb-pages-header .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.vb-pages-title  { font-size: 2rem; font-weight: 800; margin: 0; }

.vb-pages-list { padding: 40px 0; }

.vb-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .vb-page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .vb-page-grid { grid-template-columns: 1fr; } }

.vb-page-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.vb-page-card:hover                            { box-shadow: 0 8px 28px rgba(0,0,0,.14); transform: translateY(-2px); }
.vb-page-card-img-link                         { display: block; text-decoration: none; }
.vb-page-card-img-wrap                         { overflow: hidden; aspect-ratio: 16/9; background: #f3f4f6; }
.vb-page-card-img-wrap img                     { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.vb-page-card:hover .vb-page-card-img-wrap img { transform: scale(1.04); }
.vb-page-card-img-placeholder                  { display: flex; align-items: center; justify-content: center; font-size: 36px; color: #d1d5db; }
.vb-page-card-body                             { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.vb-page-card-title                            { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.vb-page-card-title a                          { text-decoration: none; color: inherit; }
.vb-page-card-title a:hover                    { color: #6366f1; }
.vb-page-card-btn                              { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #6366f1; text-decoration: none; margin-top: auto; }
.vb-page-card-btn:hover                        { color: #4f46e5; }
.vb-pages-empty                                { text-align: center; padding: 40px; color: #9ca3af; }
.vb-pagination                                 { display: flex; justify-content: center; margin-top: 32px; }

/* ── Menu block link colours ─────────────────────────────── */
.vb-menu-list a,
.vb-menu-sub  a { color: var(--vb-menu-link, inherit); text-decoration: none; transition: color .2s; }
.vb-menu-list a:hover,
.vb-menu-sub  a:hover { color: var(--vb-menu-link-hover, inherit); }
