/* Design-system tokens this stylesheet (and the hub block below) reads. The site's own CSS does not define them, so they are
 * scoped to the wrapper; values are the prototype's vendored tg-website-system tokens. */
.tm-page-templates {
  --bg-brand: #EFF8FF; --bg-brand-ring: #D1E9FF; --bg-brand-solid: #1570EF; --bg-primary: #FFFFFF; --bg-secondary: #FAFAFA; --bg-tertiary: #F5F5F5;
  --border-brand: #1570EF; --border-primary: #D5D7DA; --border-secondary: #E9EAEB; --brand-600: #1570EF; --gray-900: #181D27;
  --radius-full: 9999px; --shadow-xs: 0 1px 2px 0 rgb(10 13 18 / 0.05);
  --shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
  --size-text-sm: 14px; --lh-text-sm: 20px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --weight-medium: 500;
  --text-brand: #1570EF; --text-brand-secondary: #175CD3; --text-brand-strong: #175CD3; --text-primary: #181D27; --text-secondary: #414651; --text-tertiary: #535862; --text-white: #FFFFFF;
}

/* Ticket Templates category page (docs/TEMPLATES-SPEC.md §7): the compact hero and the category chips. Scoped under
 * .tm-page-templates so it cannot touch the Ticket Maker pages. The grid itself is styled in embed/ticket-templates.css. */

/* compact hero (§7.2): H1, paragraph, Get Started, then straight into the chips and the grid */
.tm-page-templates .tm-tt-hero .tm-hero-sub { margin-bottom: 24px; }

/* ── Category chips (§7.3): one row that scrolls sideways; edge fades where more chips hide; arrows on desktop ── */
.tm-page-templates .tm-cats {
  position: relative;
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 0 32px;               /* = #tg-ticket-maker, so chips and grid share edges */
  --tm-cats-fade-l: 0px;
  --tm-cats-fade-r: 0px;
}
.tm-page-templates .tm-cats:not([data-at-start]) { --tm-cats-fade-l: 72px; }
.tm-page-templates .tm-cats:not([data-at-end]) { --tm-cats-fade-r: 72px; }
.tm-page-templates .tm-cats__list {
  display: flex;
  gap: var(--space-2);
  margin: 0 -4px;
  padding: 4px;                  /* room for the focus ring inside the scroller */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: 72px;   /* a chip focused by keyboard clears the arrow and the fade */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tm-cats-fade-l), #000 calc(100% - var(--tm-cats-fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--tm-cats-fade-l), #000 calc(100% - var(--tm-cats-fade-r)), transparent);
}
.tm-page-templates .tm-cats__list::-webkit-scrollbar { display: none; }
.tm-page-templates .tm-cats__list > li { flex: none; }
/* chip: the live page's chip (rounded-full, border, px-4 py-2, text-sm medium); current = filled brand blue */
.tm-page-templates .tm-cats__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--size-text-sm);
  line-height: var(--lh-text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out;
}
.tm-page-templates .tm-cats__chip:hover { background: var(--bg-secondary); }
.tm-page-templates .tm-cats__chip[aria-current="page"] { border-color: var(--bg-brand-solid); background: var(--bg-brand-solid); color: var(--text-white); }
.tm-page-templates .tm-cats__chip:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; }
.tm-page-templates .tm-cats__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-primary);
  border-radius: 50%;
  background: var(--bg-primary);
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transform: translateY(-50%);
}
.tm-page-templates .tm-cats__arrow:hover { background: var(--bg-secondary); }
.tm-page-templates .tm-cats__arrow:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; }
.tm-page-templates .tm-cats__arrow--prev { left: 32px; }
.tm-page-templates .tm-cats__arrow--next { right: 32px; }
.tm-page-templates .tm-cats__arrow[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tm-page-templates .tm-cats__chip { transition: none; }
}
/* tablet and mobile: the same row, swiped; no arrows (padding = #tg-ticket-maker's below 1024) */
@media (max-width: 1023px) {
  .tm-page-templates .tm-cats { margin-top: 24px; padding: 0 16px; }
  .tm-page-templates .tm-cats__arrow { display: none; }
  .tm-page-templates .tm-cats:not([data-at-start]) { --tm-cats-fade-l: 32px; }
  .tm-page-templates .tm-cats:not([data-at-end]) { --tm-cats-fade-r: 32px; }
  .tm-page-templates .tm-cats__list { scroll-padding-inline: 32px; }
}

/* hero CTA: Get Started + Book a Demo with the homepage footnote */
.tm-page-templates .tm-tt-hero-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

.tm-page-templates .tm-hero-head { position: relative; }
.tm-page-templates .tm-hero-anim { position: absolute; z-index: -1; inset: calc(-64px - var(--tm-nav-clearance, 76px)) 0 -32px; overflow: hidden; pointer-events: none; }
.tm-page-templates .tm-hero-anim span { position: absolute; top: calc(var(--tm-nav-clearance, 76px) + 8px); left: 20%; width: 180px; height: 78%; transform-origin: top; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(color-mix(in srgb, var(--brand-600) 22%, #0000), #0000 80%); animation: tm-sweep 9s ease-in-out infinite alternate; }
.tm-page-templates .tm-hero-anim span + span { left: 58%; background: linear-gradient(#9e77ed38, #0000 80%); animation-duration: 11s; }
.tm-page-templates .tm-hero-anim div { position: absolute; inset: auto 0 0; height: 32px; display: flex; justify-content: center; align-items: end; gap: 6px; opacity: .22; -webkit-mask: linear-gradient(90deg, #0000, #000 18%, #000 82%, #0000); mask: linear-gradient(90deg, #0000, #000 18%, #000 82%, #0000); }
.tm-page-templates .tm-hero-anim i { flex: 1; max-width: 22px; border-radius: 3px 3px 0 0; background: var(--brand-600); transform-origin: bottom; animation: tm-eq 1.2s ease-in-out infinite alternate; }
@keyframes tm-sweep { from { rotate: -18deg; } to { rotate: 18deg; } }
@keyframes tm-eq { from { scale: 1 .15; } }
@media (max-width: 1023px) {
  .tm-page-templates .tm-hero-anim { inset: calc(-40px - var(--tm-nav-clearance, 76px)) 0 -24px; }
  .tm-page-templates .tm-hero-anim div { height: 24px; }
  .tm-page-templates [data-anim="concert"] .tm-hero-anim i:nth-child(2n) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tm-page-templates .tm-hero-anim span, .tm-page-templates .tm-hero-anim i { animation: none; } }

/* §9 Christmas hero: snowfall (flakes are static <i>s with inline size, left, duration and delay) */
.tm-page-templates [data-anim="christmas"] .tm-hero-anim i { position: absolute; top: 0; flex: none; max-width: none; aspect-ratio: 1; background: color-mix(in srgb, var(--brand-600) 55%, #fff); -webkit-mask: var(--tm-flake) center / contain no-repeat; mask: var(--tm-flake) center / contain no-repeat; opacity: 0; animation: tm-snow 12s linear infinite; }
.tm-page-templates [data-anim="christmas"] .tm-hero-anim { --tm-flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cg transform='rotate(0)'%3E%3Cpath d='M0 0V-11M0-6.5l-3-3M0-6.5l3-3'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cpath d='M0 0V-11M0-6.5l-3-3M0-6.5l3-3'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cpath d='M0 0V-11M0-6.5l-3-3M0-6.5l3-3'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cpath d='M0 0V-11M0-6.5l-3-3M0-6.5l3-3'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cpath d='M0 0V-11M0-6.5l-3-3M0-6.5l3-3'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cpath d='M0 0V-11M0-6.5l-3-3M0-6.5l3-3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* six-armed snowflake, tinted by the background colour */
.tm-page-templates [data-anim="christmas"] .tm-hero-anim i:nth-child(odd) { background: color-mix(in srgb, var(--brand-600) 30%, #fff); }
@keyframes tm-snow { 0% { translate: 0 -8px; rotate: 0deg; opacity: 0; } 10%, 70% { opacity: .5; } 100% { translate: 28px 440px; rotate: 200deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tm-page-templates [data-anim="christmas"] .tm-hero-anim i { animation: none; } }

/* §10 Movie hero: a soft projector beam from the top-left corner (conic cone, radial fade) with a slow, irregular, small
 * flicker (::before), and a faint film strip gliding sideways along the bottom edge (::after; one sprocket period wider
 * than the box, so the loop is seamless) */
.tm-page-templates [data-anim="movie"] .tm-hero-anim::before { content: ""; position: absolute; top: var(--tm-nav-clearance, 76px); left: 0; width: 70%; height: 100%; background: conic-gradient(from 128deg at 0 0, #0000, color-mix(in srgb, var(--brand-600) 16%, #0000) 9deg 20deg, #0000 30deg); -webkit-mask: radial-gradient(farthest-corner at 0 0, #000 20%, #0000 75%); mask: radial-gradient(farthest-corner at 0 0, #000 20%, #0000 75%); animation: tm-flicker 9s ease-in-out infinite; }
.tm-page-templates [data-anim="movie"] .tm-hero-anim::after { content: ""; position: absolute; bottom: 4px; left: 0; width: calc(100% + 16px); height: 22px; opacity: .25; background: repeating-linear-gradient(90deg, #fff 0 8px, #0000 0 16px) 0 3px / 100% 5px no-repeat, repeating-linear-gradient(90deg, #fff 0 8px, #0000 0 16px) 0 14px / 100% 5px no-repeat, var(--gray-900); -webkit-mask: linear-gradient(90deg, #0000, #000 15%, #000 85%, #0000); mask: linear-gradient(90deg, #0000, #000 15%, #000 85%, #0000); animation: tm-film 2s linear infinite; }
@keyframes tm-flicker { 0%, 100% { opacity: 1; } 12% { opacity: .8; } 27% { opacity: .95; } 39% { opacity: .78; } 55% { opacity: 1; } 68% { opacity: .85; } 83% { opacity: .96; } }
@keyframes tm-film { to { translate: -16px; } }
@media (prefers-reduced-motion: reduce) { .tm-page-templates [data-anim="movie"] .tm-hero-anim::before, .tm-page-templates [data-anim="movie"] .tm-hero-anim::after { animation: none; } }


/* ---- Hub (/event-ticket-template): numbered steps and the per-category preview blocks (inline <style> in the prototype hub page) ---- */
/* §12 hub: numbered steps under the H1, then one block per category (H2 + View More, a row of 4 previews) */
    .tm-hub-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; max-width: 960px; margin: 20px auto 28px; padding: 0; list-style: none; }
    .tm-hub-steps li { display: flex; align-items: center; gap: 12px; max-width: 272px; text-wrap: balance; text-align: left; font-size: 16px; line-height: 24px; color: var(--text-tertiary, #535862); }
    .tm-hub-steps__n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-brand, #EFF8FF); box-shadow: inset 0 0 0 4px var(--bg-brand-ring, #D1E9FF); color: var(--text-brand, #1570EF); font-size: 14px; font-weight: 600; }
    .tm-hub { max-width: 1280px; margin: 0 auto; padding: 48px 32px 32px; display: flex; flex-direction: column; gap: 64px; font-family: var(--font-body, 'Inter', sans-serif); }
    .tm-hub__cat { min-width: 0; }
    .tm-hub__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .tm-hub__title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 600; color: var(--text-primary, #181D27); }
    .tm-hub__more { flex: none; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-brand-strong, #175CD3); text-decoration: none; }
    .tm-hub__more:hover { text-decoration: underline; }
    .tm-hub__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
    .tm-hub__row > li { min-width: 0; }
    /* tiles as the category grid's cards: grey stage, lift on hover/focus */
    .tm-hub__card { display: block; border-radius: 12px; color: var(--text-primary, #181D27); text-decoration: none; }
    .tm-hub__tile { display: grid; place-items: center; box-sizing: border-box; aspect-ratio: 2 / 1; padding: 16px; border-radius: 12px; background: var(--bg-tertiary, #F5F5F5); transition: transform 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out; }
    /* a hub card draws the template's one stored image (text-free art) + its sample text with HubTicket (same rules as the editor, ticket-templates.css §3): the ticket is w·4 × h·4 px, CSS-scaled to the frame */
    .tm-hub__frame { position: relative; display: block; width: 100%; max-height: 100%; overflow: hidden; border-radius: 8px; filter: drop-shadow(0 1px 2px rgb(10 13 18 / 0.1)); }
    .tm-hub__ticket { position: absolute; top: 0; left: 0; display: block; overflow: hidden; transform-origin: 0 0; background: center / 100% 100% no-repeat; }
    .tm-hub__slot { position: absolute; display: block; box-sizing: border-box; margin: 0; padding: 0; overflow: hidden; white-space: pre; transform-origin: 0 0; font-style: normal; font-kerning: normal; text-decoration: none; }
    .tm-hub__slot--wrap { white-space: pre-line; overflow-wrap: break-word; }
    .tm-hub__brand { position: absolute; display: block; height: auto; max-width: none; }
    .tm-hub__card--wide .tm-hub__tile { aspect-ratio: auto; padding: 32px 24px; font-size: 18px; line-height: 28px; font-weight: 600; text-align: center; }
    .tm-hub__card:is(:hover, :focus-visible) .tm-hub__tile { background: var(--border-secondary, #E9EAEB); box-shadow: var(--shadow-lg, 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03)); transform: translateY(-4px); }
    .tm-hub__card:focus-visible { outline: none; }
    .tm-hub__card:focus-visible .tm-hub__tile { outline: 2px solid var(--border-brand, #1570EF); outline-offset: 2px; }
    .tm-hub-faq-more { margin-top: 64px; text-align: center; }
    .tm-hub-faq-more__title { margin: 0 0 24px; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--text-primary, #181D27); }
    /* every category as wrapped chips (tablet and up); phones keep the swipe row */
    @media (min-width: 768px) {
      .tm-page-templates .tm-cats--all .tm-cats__list { flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
      .tm-page-templates .tm-cats--all .tm-cats__arrow { display: none; }
    }
    .tm-hub__ext { display: inline-flex; align-items: center; gap: 8px; }
    .tm-hub__ext-ic { flex: none; color: var(--text-brand-secondary, #175CD3); transition: transform 200ms ease-out; }
    .tm-hub__card:is(:hover, :focus-visible) .tm-hub__ext-ic { transform: translate(2px, -2px); }
    @media (prefers-reduced-motion: reduce) {
      .tm-hub__tile { transition: none; }
      .tm-hub__card:is(:hover, :focus-visible) .tm-hub__tile, .tm-hub__card:is(:hover, :focus-visible) .tm-hub__ext-ic { transform: none; }
    }
    @media (max-width: 1023px) {
      .tm-hub { padding: 40px 16px 24px; gap: 48px; }
      .tm-hub__title { font-size: 24px; line-height: 32px; }
      .tm-hub__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 767px) {
      .tm-hub-steps { flex-direction: column; align-items: flex-start; width: fit-content; }
      /* one swipeable row; the tiles peek past the edge so the row reads as scrollable */
      .tm-hub__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: -8px -16px 0; padding: 8px 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none; }
      .tm-hub__row::-webkit-scrollbar { display: none; }
      .tm-hub__row > li { scroll-snap-align: start; }
    }