/* Templates on the public site (KBM-0006): an introduction and the gallery's catalogue. Marketing only — a card
   is an image, a title, a summary and a link into the app. */

.tpl-lead { max-width: 46rem; font-size: 1.05rem; }
.tpl-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.tpl-point h2 { font-family: 'DM Serif Display', serif; font-size: 1.35rem; color: var(--ink); margin-bottom: .4rem; }
.tpl-point p { color: var(--g2); line-height: 1.6; }
.tpl-cta { display: flex; gap: .8rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 3rem; }
.tpl-cta .btn:not(.btn-primary) { border-color: var(--ink); color: var(--ink); }

.tpl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1.5rem; }
.tpl-chip {
    padding: .35rem .85rem; border-radius: 100px; border: 1px solid var(--line); background: var(--white);
    color: var(--g2); font-size: .85rem; text-decoration: none;
}
.tpl-chip.on { background: var(--ink); color: var(--gold-l); border-color: var(--ink); }
.tpl-sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .3rem; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; padding-bottom: 3rem; }
.tpl-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tpl-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cream-2); }
.tpl-card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.tpl-card-kind { font-size: .75rem; color: var(--g4); text-transform: uppercase; letter-spacing: .04em; }
.tpl-source { display: inline-block; padding: .05rem .5rem; margin-right: .35rem; border-radius: 100px; background: var(--cream-2); color: var(--g3); }
.tpl-source.kibo { background: var(--ink); color: var(--gold-l); }
.tpl-card-title { font-family: 'DM Serif Display', serif; font-size: 1.25rem; color: var(--ink); }
.tpl-card-summary { color: var(--g2); font-size: .92rem; line-height: 1.55; flex: 1; }
.tpl-card-use { align-self: flex-start; font-weight: 600; color: var(--g3); text-decoration: none; }
.tpl-card-use:hover { color: var(--gold-d); }

@media (max-width: 1023px) {
    .tpl-points { grid-template-columns: 1fr; }
    .tpl-grid { grid-template-columns: 1fr; }
}