/* search_cta (templates/components/search_cta.html): the way into search: the selfie's
   button, or without face search the bib number's (the words' field is the gallery's). */

.cta { padding: 16px var(--gutter) 8px; display: flex; flex-direction: column; gap: 10px; }
.cta__hint { margin: 0; font-size: 14px; color: var(--muted); }

/* Pinned to the bottom edge on phones, so the way in is always a thumb away.
   Templates using it leave room at the end of the page (--cta-bar-space). */
.cta--bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 5;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.cta--bar .live { display: none; }

.cta--inline { padding: 0; }

@media (min-width: 900px) {
  /* A 1000px-wide button reads as a banner, not a control: take the natural
     width and bring the live line up beside it. */
  .cta { flex-direction: row; align-items: center; gap: 20px; padding-top: 20px; }
  .cta .cta__button { width: auto; min-width: 300px; padding: 0 28px; }
  .cta--bar { position: static; padding-bottom: 8px; background: none; backdrop-filter: none; border: 0; }
  .cta--bar .live { display: flex; }
}
/* Before the first photo the waiting card is the page's one call (components/waiting.html). */
.cta[hidden] { display: none; }