/* canvaswp.com: the template showcase hub cards. Loaded only by site/templates/. Needs css/tpl.css. */

/* Hub cards */
.tpl-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .tpl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tpl-cards { grid-template-columns: repeat(3, 1fr); } }
.tpl-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.75rem; border: 1px solid var(--site-line); border-radius: var(--r-md); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.tpl-card:hover, .tpl-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tpl-card h2 { font-size: var(--t-lg); font-weight: 700; margin: 0 0 .5rem; }
.tpl-card h2 a { color: var(--site-ink); text-decoration: none; }
.tpl-card h2 a::after { content: ""; position: absolute; inset: 0; }
.tpl-card p { color: var(--site-muted); margin: 0 0 1rem; font-size: var(--t-sm); }
.tpl-card-n { display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start; margin-bottom: .875rem; padding: .125rem .5rem; border-radius: var(--r-pill); background: var(--site-accent-soft); color: var(--site-accent-text); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.tpl-card-list { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; }
.tpl-card-list li { padding: .125rem .5rem; border: 1px solid var(--site-line); border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--site-muted); }