/* Small additions on top of Bootstrap. Keep this file short; prefer Bootstrap classes. */

.hero {
  padding: 3rem 0;
}

.hero .lead {
  max-width: 40rem;
}

/* A member's name with their colour; the colour comes in as --member-color. */
.member_chip {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 1rem;
  border-left: 0.6rem solid var(--member-color, var(--bs-secondary));
  background: var(--bs-tertiary-bg);
  white-space: nowrap;
}

/* The bell logo (wwwroot/img/logo_120.jpg): a square image with its own background, so rounded. */
.site_logo {
  border-radius: 22%;
  object-fit: cover;
  flex-shrink: 0;
}

.qr_code svg {
  display: block;
  width: 220px;
  height: 220px;
}

/* The homepage's HTML illustration of the tablet. */
.mock_tablet {
  background: #11151c;
}

/* ---- tablet (/kiosk) ---------------------------------------------------------------- */

.kiosk_body {
  min-height: 100vh;
  background: #11151c;
}

.kiosk_header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kiosk_clock,
.kiosk_countdown,
.kiosk_event_time {
  font-variant-numeric: tabular-nums;
}

.kiosk_cards {
  margin-top: 1.5rem;
}

/* More than 3 cards: the stack scrolls instead of pushing the events off screen. */
.kiosk_cards_scroll {
  max-height: 65vh;
  overflow-y: auto;
}

.kiosk_card {
  border: 0;
  border-left: 0.75rem solid var(--bs-primary);
  background: #1d2430;
}

.kiosk_card_title {
  font-size: 2.25rem;
  font-weight: 600;
}

/* The event's description under the time: its own line breaks, at most 3 lines. */
.kiosk_card_description {
  color: rgba(255, 255, 255, 0.75);
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.kiosk_countdown {
  font-size: 2.5rem;
  font-weight: 600;
  min-width: 9rem;
  text-align: right;
}

/* "Connection lost" pop-up. Bootstrap's .modal is display:none; kiosk.js adds .d-block.
   The dimmed background stands in for Bootstrap's backdrop (no Bootstrap JS here). */
.kiosk_connection_lost {
  background: rgba(10, 13, 18, 0.85);
}

/* Countdown bar under each card: thick enough to read from across the room. The width
   changes once a second, so a 1s linear transition makes it drain smoothly. */
.kiosk_progress {
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.12);
}

.kiosk_progress_bar {
  transition: width 1s linear;
}

.kiosk_got_it {
  font-size: 1.75rem;
  padding: 1rem 2rem;
}

.kiosk_chip {
  font-size: 1.25rem;
}

.kiosk_event_card {
  border: 0;
  background: #1a2029;
}

/* Bottom banner when the browser blocks sound. It doesn't cover the cards: any tap unlocks sound. */
.kiosk_sound_banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1050;
  font-size: 1.5rem;
  text-align: center;
}

.kiosk_connect_text {
  max-width: 40rem;
}