/* Extracted from public/templates.php during CSP style-src tightening (slice 7h-6a). */
.templates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }
        .template-card {
            background: var(--cream);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,.07);
            display: flex;
            flex-direction: column;
            transition: transform .2s, box-shadow .2s;
        }
        .template-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
        .template-card__preview {
            aspect-ratio: 4/3;
            background: var(--cream-dk);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .template-card__preview img { width: 100%; height: 100%; object-fit: cover; }
        .template-card__preview-placeholder {
            display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--ash);
        }
        .template-card__preview-placeholder svg { width: 48px; height: 48px; opacity: .35; }
        .template-card__preview-placeholder span { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }
        .template-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
        .template-card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
        .template-card__badge {
            font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
            background: var(--clay); color: #fff; padding: .15rem .45rem; border-radius: 3px;
        }
        .template-card__badge--count { background: var(--ink); }
        .template-card__category { font-size: .75rem; color: var(--ash); }
        .template-card__title { font-family: 'Playfair Display', serif; font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
        .template-card__desc { font-size: .85rem; color: var(--ash); line-height: 1.5; flex: 1; }
        .template-card__files { border-top: 1px solid var(--cream-dk); }
        .template-file-row {
            display: flex; align-items: center; gap: .65rem;
            padding: .65rem 1.25rem; border-bottom: 1px solid var(--cream-dk);
        }
        .template-file-row:last-child { border-bottom: none; }
        .template-file-row__icon svg { width: 16px; height: 16px; color: var(--ash); display: block; flex-shrink: 0; }
        .template-file-row__info { flex: 1; min-width: 0; }
        .template-file-row__label { font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .template-file-row__name { font-size: .72rem; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .template-file-row__ext { font-size: .62rem; font-weight: 700; text-transform: uppercase; color: var(--clay); flex-shrink: 0; }
        .template-file-row__dl {
            display: inline-flex; align-items: center; gap: .3rem;
            background: var(--clay); color: #fff; text-decoration: none;
            padding: .35rem .75rem; border-radius: 4px; font-size: .78rem; font-weight: 600;
            transition: background .2s; flex-shrink: 0;
        }
        .template-file-row__dl:hover { background: var(--clay-dk, #b5652a); color: #fff; }
        .template-file-row__dl svg { width: 13px; height: 13px; }
        .template-card__footer { padding: .75rem 1.25rem; border-top: 1px solid var(--cream-dk); }
        .template-card__downloads { font-size: .72rem; color: var(--ash); }
        .templates-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
        .templates-filters a {
            padding: .35rem .85rem; border-radius: 20px; font-size: .8rem; font-weight: 600;
            border: 1.5px solid var(--clay); color: var(--clay); text-decoration: none;
            transition: background .15s, color .15s;
        }
        .templates-filters a.active,
        .templates-filters a:hover { background: var(--clay); color: #fff; }
        .templates-empty { text-align: center; padding: 4rem 0; color: var(--ash); }
        .templates-empty svg { width: 56px; height: 56px; opacity: .3; margin-bottom: 1rem; display: block; margin-left: auto; margin-right: auto; }