/* Shared template cards: /explore grid + related templates on detail pages.
   One stretched title link -> /templates/<slug>; favourite / Live demo / Buy sit above it. */
.btn-xs{padding:9px 14px;font-size:13px;gap:7px}
.btn-xs svg{width:15px;height:15px}
.xg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 20px}
.xc{--e:cubic-bezier(.2,.8,.2,1);position:relative;isolation:isolate;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;display:flex;flex-direction:column;cursor:pointer;transition:transform .38s var(--e),box-shadow .38s var(--e),border-color .25s ease}
.xc[hidden]{display:none}
@media (hover:hover){.xc:hover{transform:translateY(-6px);border-color:#A6E4E4;box-shadow:0 26px 48px -26px rgba(3,96,102,.5),0 3px 8px -4px rgba(3,96,102,.14)}}
.xc:active{transform:translateY(-2px) scale(.985);transition-duration:.14s}
.xc:has(.tpc-x:active){transform:translateY(-6px)}
.xc:has(.tpc-a:focus-visible){outline:3px solid var(--teal);outline-offset:3px;border-color:#A6E4E4}
.xc:hover .tpc-a{color:var(--teal-d)}
/* image frame: clipped zoom + teal wash */
.ph{border-radius:12px;overflow:hidden;aspect-ratio:1.6;background:#E6F5F5;position:relative;isolation:isolate}
.ph>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--e),opacity .5s ease}
.ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgb(3 165 170/0) 45%,rgb(3 165 170/.2));opacity:0;transition:opacity .35s ease}
@media (hover:hover){.xc:hover .ph>img{transform:scale(1.06)}.xc:hover .ph::after{opacity:1}}
/* favourite */
.fav{position:relative;order:-1;align-self:flex-end;flex:none;margin:-4px 0 -28px;z-index:4;width:32px;height:32px;border-radius:50%;border:1px solid var(--line,#E3EAEE);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink2);box-shadow:none;transition:transform .2s var(--e,ease),color .2s ease,background .2s ease}
.fav svg{width:17px;height:17px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fav:hover{transform:scale(1.08);color:#EC4899}
.fav:active{transform:scale(.9)}
.fav.on{color:#EC4899}
.fav.on svg{fill:currentColor;animation:tp-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes tp-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
/* body */
.xc-b{padding:12px 6px 4px;display:flex;flex-direction:column;flex:1}
.tb{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--violet-d);background:#D9F5F5;border-radius:6px;padding:3px 8px}
.xc h3{font-size:15.5px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin-top:9px}
.by{font-size:13px;color:var(--muted);margin-top:4px}
.by b{color:var(--ink2);font-weight:700}
.ds{display:none;font-size:14px;color:var(--muted);margin-top:8px}
.xc-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;row-gap:8px;margin-top:auto;padding-top:14px}
.pr{font-size:12.5px;font-weight:800;color:var(--ink2);background:#EEF7F7;border-radius:999px;padding:6px 9px;white-space:nowrap;letter-spacing:-.01em}
.pr-b{background:var(--ink);color:#fff;font-size:13.5px}
.pr-soon{background:#FFF4D6;color:#7A5200}
.pr-pw{background:#D9F5F5;color:#0A6C6D}.xc-f .pr-pw{font-size:12px;padding:6px 8px;letter-spacing:-.015em}
.xc-f .btn-xs{padding:9px 11px;gap:6px}
.xc-f .btn-ghost.tpc-x:hover{background:#F0FBFB;border-color:#3DBDC6;color:var(--teal-d)}
/* list view */
.xg.list{grid-template-columns:1fr;gap:14px}
.xg.list .xc{flex-direction:row;gap:18px;align-items:stretch}
.xg.list .ph{width:300px;flex:none;aspect-ratio:1.6;align-self:flex-start}
.xg.list .xc-b{padding:8px 8px 6px 0}
.xg.list .ds{display:block}

/* responsive */
@media (max-width:1280px){.xg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1020px){.xg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.xg{grid-template-columns:1fr;gap:16px}.xg.list .xc{flex-direction:column}.xg.list .ph{width:auto;align-self:stretch}}
@media (prefers-reduced-motion:reduce){
 .xc,.ph>img,.ph::after,.fav,.fav svg{transition:none}
 .xc:hover,.xc:active,.xc:hover .ph>img{transform:none}
 .fav.on svg{animation:none}
}