/* Copyright Ayers Electronics Inc. All rights reserved. */

/* The network's own page in Networks: what it offers on demand, one row of posters per kind under
   the kind's name and its count. The row runs off the right edge as the cue that there is more, and
   scrolls sideways to the poster the remote steps to, with room on every side for its ring. */
.offer-kind {
  margin: 10px 0 6px;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}

.offer-count {
  margin-left: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.offer-row {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--focus-ring-width);
  margin: 0 calc(-1 * var(--focus-ring-width));
  scroll-padding: 0 var(--focus-ring-width);
}
.offer-row > * + * {
  margin-left: 10px;
}

.offer-card {
  flex: 0 0 96px;
  display: grid;
  gap: 2px;
}

.offer-art {
  position: relative;
  display: block;
  height: 144px;
  overflow: hidden;
  background: var(--elevated);
  border-radius: var(--radius-card);
}

.offer-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-card .name,
.offer-card .sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--type-label);
}

.offer-card .sub {
  color: var(--muted);
}

/* Each poster is a stop the remote reaches, a button that draws as the card. */
.offer-card-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}