/* Shared template gallery: landing page, in-app editor, new-event modal.
 *
 * Extracted from the landing page's inline styles so the three pickers cannot
 * drift apart. Everything is class-scoped under .tg-root rather than hung off
 * ids, because the same gallery is now mounted more than once per session
 * (the editor's Design tab and the new-event modal) and ids would collide.
 *
 * The comments below record why specific values are what they are. They were
 * each arrived at by fixing something.
 */

.tg-root { --tg-cols: 4; }

.tg-search-wrap { text-align: center; margin-bottom: 14px; }
.tg-search {
  width: 100%; max-width: 460px; padding: 12px 16px;
  border: 1px solid #d6cfbe; border-radius: 999px; font-size: 15px; background: #fff;
}
.tg-root.tg-left .tg-search-wrap { text-align: left; }

.tg-groups, .tg-cats, .tg-styles, .tg-colors {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.tg-groups { margin-bottom: 10px; }
.tg-cats, .tg-styles { gap: 6px; margin-bottom: 10px; }
.tg-colors { gap: 6px; margin-bottom: 20px; }
.tg-root.tg-left .tg-groups,
.tg-root.tg-left .tg-cats,
.tg-root.tg-left .tg-styles,
.tg-root.tg-left .tg-colors { justify-content: flex-start; }

.tg-grp-chip {
  border: 1px solid #d6cfbe; background: #fff; color: #4b4234; border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tg-grp-chip.on { background: #0369A1; border-color: #0369A1; color: #fff; }
.tg-cat-chip {
  border: 1px solid #e6e0d0; background: #faf7ef; color: #6b6152; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.tg-cat-chip.on { background: #0C4A6E; border-color: #0C4A6E; color: #fff; }

/* Style and colour read as a different axis from the category tiers, so they
   get their own accent rather than a third shade of blue. */
.tg-style-chip, .tg-color-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #e6e0d0; background: #faf7ef; color: #6b6152; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.tg-style-chip.on { background: #7C3AED; border-color: #7C3AED; color: #fff; }
.tg-color-chip.on { background: #334155; border-color: #334155; color: #fff; }

/* The swatch is the point of a colour filter: the word "neutral" tells you far
   less than the colour itself does. */
.tg-sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.22); flex: none; }
.tg-facet-lbl { align-self: center; font-size: 12px; color: #8a8172; margin-right: 2px; }

/* Dimming the counts with opacity dropped them below contrast minimums on
   every unselected chip. Inheriting the chip's own colour keeps them visually
   secondary (smaller, lighter weight) without fading them. */
.tg-grp-chip .n, .tg-cat-chip .cnt, .tg-style-chip .cnt, .tg-color-chip .cnt {
  opacity: 1; color: inherit; font-weight: 400; font-size: 12px; margin-left: 5px;
}

/* Four across on desktop so each design is big enough to actually judge.
   Stepping down rather than auto-fill keeps the count predictable at every
   width. Hosts mounting in a narrow panel can lower --tg-cols. */
.tg-grid { display: grid; grid-template-columns: repeat(var(--tg-cols), 1fr); gap: 22px; }
@media (max-width: 900px) { .tg-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 620px) { .tg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.tg-tile {
  display: block; width: 100%; text-align: left; padding: 0; font: inherit;
  text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden;
  border: 1px solid #e6e0d0; background: #fff; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tg-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30,30,60,.14); }
.tg-tile:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }
.tg-tile img { width: 100%; aspect-ratio: 5/7; object-fit: cover; display: block; background: #faf7ef; }
.tg-tile .tt-name { font-weight: 600; font-size: 15px; padding: 10px 12px 2px; }

/* #8a8172 was 3.84:1 on white, under the 4.5:1 minimum, and it was the single
   biggest accessibility failure on the page because it repeats once per tile
   (1,117 violations across the full gallery). #776e60 is 5.02:1 and still
   reads as secondary text. */
.tg-tile .tt-cat { font-size: 12.5px; color: #776e60; padding: 0 12px 12px; }

/* The selected design has to be obvious in the editor, where the gallery is a
   picker rather than a shop window. */
.tg-tile.sel { border-color: #0EA5E9; box-shadow: 0 0 0 2px #0EA5E9 inset; }
.tg-tile.sel .tt-name::after { content: ' ✓'; color: #0369A1; }

.tg-none { text-align: center; margin: 22px 0; }
.tg-count { margin: 0 0 8px; }

/* ---- mobile ----------------------------------------------------------
 * On a 390px screen the four filter tiers wrap into roughly 12 stacked rows
 * and fill the entire viewport, so the first design sat below the fold and
 * the gallery read as a wall of buttons. Each tier becomes a single-line
 * horizontal scroll strip instead, which is the pattern people already know
 * from every mobile store front, and puts designs on screen immediately.
 */
@media (max-width: 620px) {
  .tg-groups, .tg-cats, .tg-styles, .tg-colors {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    /* Room for the chip's focus ring, which a plain overflow would clip. */
    padding: 3px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Fades the right edge so it is visible that the row continues. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .tg-groups::-webkit-scrollbar, .tg-cats::-webkit-scrollbar,
  .tg-styles::-webkit-scrollbar, .tg-colors::-webkit-scrollbar { display: none; }

  /* Without this, flex shrinks every chip to fit and the labels wrap to two
     lines instead of the row scrolling. */
  .tg-grp-chip, .tg-cat-chip, .tg-style-chip, .tg-color-chip, .tg-facet-lbl { flex: none; }
  .tg-grp-chip, .tg-cat-chip, .tg-style-chip, .tg-color-chip { white-space: nowrap; }

  /* The active chip is what tells you where you are in a scrolled strip, so
     it has to be legible after the mask fades the edge. */
  .tg-groups { margin-bottom: 8px; }
  .tg-styles, .tg-cats { margin-bottom: 8px; }
  .tg-colors { margin-bottom: 14px; }

  .tg-grp-chip { padding: 8px 14px; font-size: 13.5px; }
  .tg-cat-chip, .tg-style-chip, .tg-color-chip { padding: 6px 11px; font-size: 12.5px; }
  /* 44px is the touch minimum. These were 38px and 42px, close enough to look
     right and small enough to miss. */
  .tg-grp-chip { min-height: 44px; }
  .tg-cat-chip, .tg-style-chip, .tg-color-chip { min-height: 44px; }
  .tg-search { min-height: 44px; }

  .tg-search { max-width: none; padding: 11px 14px; font-size: 16px; }
  .tg-search-wrap { margin-bottom: 10px; }

  .tg-grid { gap: 10px; }
  .tg-tile .tt-name { font-size: 14px; padding: 8px 10px 2px; }
  .tg-tile .tt-cat { font-size: 12px; padding: 0 10px 10px; }
  /* Hover lift is meaningless on touch and leaves tiles stuck in the raised
     state after a tap. */
  .tg-tile:hover { transform: none; box-shadow: none; }
}

/* A 16px input is what stops iOS Safari zooming the whole page when the
   search field takes focus. Applied at every width because the zoom happens
   on any touch device, not only narrow ones. */
@supports (-webkit-touch-callout: none) {
  .tg-search { font-size: 16px; }
}