/* ============================================================
   TEMPLATE GALLERY — page-scoped additions
   ============================================================
   Search-with-suggestions styles and the compact card pass.
   Loaded only by templates.html, after style.css.
   ============================================================ */

/* ---- search ---- */
/* own z-index: the reveal transform would otherwise trap the dropdown
   under the sticky filter rail that comes later in the DOM */
.tpl-search{position:relative; z-index:40; margin-top:26px; max-width:560px;}
.tpl-search-ico{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--ink-dim); pointer-events:none;}
#tplSearchInput{
  width:100%; min-height:52px; padding:14px 48px; border-radius:999px;
  background:var(--navy1); border:1px solid rgba(155,176,201,0.3); color:var(--ink);
  font-family:var(--body); font-size:16px; transition:border-color .2s, box-shadow .2s;
}
#tplSearchInput::placeholder{color:var(--ink-dim);}
#tplSearchInput:focus{outline:none; border-color:rgba(255,195,0,0.55); box-shadow:0 0 0 3px rgba(255,195,0,0.12);}
.tpl-search-clear{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  border-radius:999px; border:0; background:transparent; color:var(--ink-dim); font-size:20px; cursor:pointer;
  display:grid; place-items:center;
}
.tpl-search-clear:hover{color:var(--ink); background:rgba(155,176,201,0.15);}
.tpl-suggest{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:41;
  background:var(--navy1); border:1px solid rgba(155,176,201,0.28); border-radius:16px;
  padding:10px; box-shadow:0 24px 60px -16px rgba(0,8,20,0.95); max-height:330px; overflow:auto;
}
.tpl-suggest[hidden]{display:none;}
.tpl-suggest-head{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--ink-dim); padding:6px 12px 10px; border-bottom:1px solid rgba(155,176,201,0.15); margin-bottom:6px;
}
.tpl-suggest-opt{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:transparent; border:0; color:var(--ink); font-family:var(--body); font-size:14.5px;
  padding:12px; min-height:44px; border-radius:10px; cursor:pointer; text-align:left;
}
.tpl-suggest-opt:hover, .tpl-suggest-opt.is-active{background:var(--navy2);}

/* ---- compact cards: 3-up on desktop, the cover leads, the name steps back ---- */
.tpl-grid{margin-top:26px; gap:34px 22px;}
@media (min-width:1100px){
  .tpl-grid{grid-template-columns:repeat(3, 1fr);}
}
/* .section h2 outguns the bare .tpl-name class from style.css — this
   selector outguns them both, so the cover is the hero, not the name */
.tpl-grid .tpl-card .tpl-name{
  font-size:clamp(17px, 1.2vw, 20px); line-height:1.25; overflow-wrap:break-word; min-width:0;
}
.tpl-tagline{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tpl-body{padding-top:14px;}
/* attributed client quote — only rendered when templates-data.js carries one */
.tpl-quote{margin-top:11px; font-size:13px; line-height:1.55; color:var(--ink); font-style:italic;}
.tpl-quote cite{display:block; margin-top:4px; font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; color:var(--ink-dim);}
.tpl-stats{margin-top:10px;}