/* Templates gallery (/templates/): extras on top of /styles.css and /tp/tp.css.
   Generated pages: scripts/build-templates.mjs. Light theme only. Two cards per row at most, one on phones. */

.tpl-head { padding: var(--s-6) 0 var(--s-2); max-width: 760px; }

/* Hero (landing page): headline, then Pick, Build, Live. */
.tpl-hero { display: grid; gap: var(--s-5); }
.tpl-hero .tpl-head { padding: 0; margin: 0; } /* the shared .page-head does the hero */
.tpl-how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.tpl-how li { display: flex; gap: var(--s-3); align-items: flex-start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.tpl-how li > div { min-width: 0; }
.tpl-how-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--field); border: 2px solid var(--line-strong); font: 700 15px/1 var(--body); color: var(--ink); }
.tpl-how h2 { margin: 2px 0 4px; font: 600 var(--fs-h3)/1.3 var(--body); letter-spacing: 0; }
.tpl-how p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.tpl-how strong { color: var(--ink); font-weight: 600; }
.tpl-how .ask { margin-top: 10px; background: var(--bg); border: 1.5px solid var(--line-strong); box-shadow: var(--pop); color: var(--ink); }
@media (min-width: 720px) { .tpl-how { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tpl-head p { font-size: var(--fs-lede); color: var(--muted); margin: 0; max-width: 60ch; }
.tpl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tabs (owner 2026-10-13 round 6): Featured, All (A to Z) and 7 categories. Each tab is a link to its panel's
   anchor, so they work without JS: the panel that is :target (or holds the :target card, /templates/#sorrel)
   shows, and Featured shows when nothing is targeted. gallery.js marks the current tab (aria-current).
   The tabs wrap on wider screens and scroll sideways on phones (style reused from the earlier tab row). */
.tpl-browse { margin: var(--s-7) 0 0; }
.tpl-tabs-scroll { border-bottom: 1px solid var(--line); }
.tpl-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.tpl-tab {
  display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 10px; margin-bottom: -1px;
  border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none;
  font: 500 var(--fs-sm)/1.2 var(--body); color: var(--muted);
}
.tpl-tab:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.tpl-tab[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.tpl-tab:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tpl-panel { display: none; padding-top: var(--s-6); scroll-margin-top: 64px; }
.tpl-panel:target, .tpl-panel:has(:target), .tpl-panels:not(:has(.tpl-panel:target, .tpl-panel :target)) > .tpl-panel:first-child { display: block; }
.tpl-panel-h { margin: 0 0 var(--s-5); font: 600 var(--fs-h3)/1.3 var(--body); letter-spacing: 0; color: var(--ink); }
/* With JS the shown panel follows .is-on (set by gallery.js), so a tab click never jumps the page. */
.tpl-panels.is-js > .tpl-panel { display: none !important; }
.tpl-panels.is-js > .tpl-panel.is-on { display: block !important; }
@media (min-width: 760px) { .tpl-panel { scroll-margin-top: 140px; } }
@media (max-width: 719px) {
  .tpl-tabs-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .tpl-tabs-scroll::-webkit-scrollbar { display: none; }
  .tpl-tabs { flex-wrap: nowrap; width: max-content; }
}

/* Grid: 1 column on phones, 2 from 720 px. Never more. */
.tpl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7) var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tpl-card { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 120px; }
/* Deep link (/templates/#sorrel): a short yellow ring around the picked card. */
.tpl-card.is-flash .tpl-shot { animation: tpl-flash 3s ease-out; }
@keyframes tpl-flash {
  0%, 65% { box-shadow: 0 0 0 5px var(--field), 0 0 0 7px var(--line-strong); }
  100% { box-shadow: 0 0 0 5px transparent, 0 0 0 7px transparent; }
}
.tpl-shot {
  display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  aspect-ratio: 16 / 10;
  transition: transform var(--ease), box-shadow var(--ease);
}
.tpl-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tpl-shot:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(35, 34, 29, 0.14); }
.tpl-shot:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.tpl-name { margin: var(--s-4) 0 2px; font: 600 var(--fs-h3)/1.3 var(--body); color: var(--ink); letter-spacing: 0; }
.tpl-line { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.tpl-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; }

@media (prefers-reduced-motion: reduce) { .tpl-shot { transition: none; } .tpl-shot:hover { transform: none; } }