/* ==========================================================================
   Template Gallery page (Batch UI.2)
   ========================================================================== */
.tpl-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-soft);
}
.tpl-filter label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }

.tpl-card {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
    display: flex; flex-direction: column;
}
.tpl-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.tpl-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid; place-items: center;
}
.tpl-card__thumb--green { background: linear-gradient(140deg, var(--brand-green-soft), #fff); }
.tpl-card__thumb--blue { background: linear-gradient(140deg, var(--brand-blue-soft), #fff); }
.tpl-card__thumb--purple { background: linear-gradient(140deg, var(--brand-purple-soft), #fff); }
.tpl-card__thumb--orange { background: linear-gradient(140deg, var(--brand-orange-soft), #fff); }
.tpl-card__thumb--pink { background: linear-gradient(140deg, var(--brand-pink-soft), #fff); }
.tpl-card__glyph { width: 40%; height: 40%; color: var(--brand-primary); opacity: 0.85; }
.tpl-card__thumb--blue .tpl-card__glyph { color: var(--brand-blue); }
.tpl-card__thumb--purple .tpl-card__glyph { color: var(--brand-purple); }
.tpl-card__thumb--pink .tpl-card__glyph { color: var(--brand-pink); }
.tpl-card__thumb--green .tpl-card__glyph { color: var(--brand-green); }
.tpl-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; }
.tpl-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.tpl-card__title { font-size: 1.1rem; margin: 0; }
.tpl-card__meta { font-size: 0.85rem; color: var(--text-secondary); margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tpl-card__body .btn { margin-top: auto; }

.tpl-empty { text-align: center; color: var(--text-secondary); padding: 2rem; }

@media (max-width: 1024px) { .tpl-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tpl-filters { grid-template-columns: 1fr; } }