/* ==========================================================================
   HelpGent — "Templates" template styles (loaded after common.css)
   Section order: template library · bottom call to action.
   Shared from common.css: the page hero + product preview, section head (.fhead),
   template cards (.stpl) and tile illustrations (.tpl__tile), the closing card (.closer).
   ========================================================================== */

.ssec{scroll-margin-top:84px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 2 · template library ── */
/* category filter — a centred row of pills; the count sits in a soft chip */
.ttpl__filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
.ttpl__filter[hidden]{display:none}
.ttpl__pill{display:inline-flex;align-items:center;gap:8px;padding:9px 10px 9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-family:var(--font);font-size:15px;font-weight:500;line-height:1.2;color:var(--text-2);transition:background var(--t-ui),border-color var(--t-ui),color var(--t-ui)}
.ttpl__pill:hover{color:var(--text);border-color:var(--line-2)}
.ttpl__pill[aria-pressed="true"]{color:var(--text);font-weight:600;background:var(--accent-soft);border-color:var(--line-accent)}
.ttpl__pill:focus-visible{border-radius:999px}
.ttpl__num{min-width:24px;padding:2px 7px;border-radius:999px;background:var(--tint);font-size:13px;font-weight:600;color:var(--text-3);text-align:center}
.ttpl__pill[aria-pressed="true"] .ttpl__num{background:#fff;color:var(--accent)}

/* grid: the shared .stpl cards, laid out as a column so the link sits at the foot of every card */
.ttpl{margin-top:36px}
.ttpl .stpl__card{display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.ttpl .stpl__card[hidden]{display:none}
.ttpl .stpl__card:not([hidden]){animation:up .35s ease}
.ttpl .stpl__card:has(.ttpl__link):hover{transform:translateY(-3px);border-color:var(--line-accent);box-shadow:var(--shadow-raise)}
.ttpl .stpl__card h3{margin-top:8px}

/* own image instead of the illustration: fills the pale frame */
.stpl__art--img{padding-top:0}
.stpl__art--img .hg-art-img{display:block;width:100%;height:100%;object-fit:cover}

.ttpl__badge{position:absolute;top:26px;right:26px;padding:4px 10px;border-radius:999px;background:#fff;box-shadow:var(--shadow-card);
  font-size:13px;font-weight:600;line-height:1.3;color:var(--accent)}
.stpl__card .ttpl__cats{margin-top:20px;font-size:14px;font-weight:600;line-height:1.4;color:var(--accent)}
.ttpl__link{margin:auto 12px 0;padding-top:18px;font-size:15px;font-weight:600;color:var(--text);text-decoration:none;transition:color .25s}
.ttpl__link::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* stretch the link over the card */
.ttpl__link span[aria-hidden]{display:inline-block;transition:transform .25s}
.stpl__card:hover .ttpl__link{color:var(--accent);text-decoration:none}
.stpl__card:hover .ttpl__link span[aria-hidden]{transform:translateX(4px)}
.ttpl__link:focus-visible{box-shadow:none}
.ttpl__link:focus-visible::after{box-shadow:var(--ring)}

.ttpl__more{display:none}   /* phones only (see below) */
.ttpl__more[hidden]{display:none}
.ttpl__empty{margin-top:40px;text-align:center;color:var(--text-2)}

/* ── 3 · bottom call to action — the closing card with buttons in place of the email form ── */
.closer__btns{justify-content:flex-end}
.closer__ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.closer__ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ── responsive ── */
@media (max-width:1100px){
  .closer__btns{justify-content:flex-start}
  /* filter: one line that scrolls sideways (centred while it still fits) instead of wrapping a lone pill */
  .ttpl__filter{flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ttpl__filter::-webkit-scrollbar{display:none}
  .ttpl__pill{flex:none;white-space:nowrap}
}
@media (max-width:640px){
  .ttpl__filter{justify-content:flex-start}
  /* long library on phones: the first six, then "Show all" (assets/js/templates.js) */
  .ttpl.is-capped .stpl__card.is-extra{display:none}
  .ttpl__more{display:flex;width:100%;margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .ttpl .stpl__card{transition:none;animation:none}
}