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

/* The collection page: the name, a TMDb collection's overview and the three buttons at the head, the member cards in the same
   grid the See all shelf uses. Its Sort By and Go To stand in the side column (css/components/side-column.css),
   or under the buttons where no column is drawn. */

#collectionPage {
  display: flex;
  flex-direction: column;
}
#collectionScroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 24px 48px;
  overflow-y: auto;
}

#collectionPage .collection-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
#collectionPage .collection-head > * + * {
  margin-top: 12px;
}

#collectionPage .collection-name {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--text);
}

#collectionPage .collection-overview {
  margin: 0;
  max-width: 72ch;
  font-size: var(--type-body);
  color: var(--muted);
}

/* The buttons and the cards wrap, so each carries its spacing on its right and bottom and the row
   takes the last of each straight back. */
#collectionPage .collection-buttons {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-bottom: -12px;
}
#collectionPage .collection-buttons > * {
  margin-right: 12px;
  margin-bottom: 12px;
}

#collectionPage .collection-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: -12px;
  margin-bottom: -12px;
}
#collectionPage .collection-tools > * {
  margin-right: 12px;
  margin-bottom: 12px;
}

#collectionPage .collection-jumps {
  display: flex;
  flex-wrap: wrap;
  margin-right: -6px;
  margin-bottom: -6px;
}
#collectionPage .collection-jumps > * {
  margin-right: 6px;
  margin-bottom: 6px;
}

#collectionPage .collection-jump {
  min-width: 44px;
}

#collectionPage .collection-btn {
  min-height: var(--control-min-height);
  padding: 8px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
}

#collectionPage .collection-members {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-right: calc(-1 * var(--od-card-gap));
  margin-bottom: calc(-1 * var(--od-card-gap));
}
#collectionPage .collection-members > * {
  margin-right: var(--od-card-gap);
  margin-bottom: var(--od-card-gap);
}

/* A whole-set title absent from the library keeps the shared card and its normal focus ring, words,
   Not In Library chip and Get This Title press. Only its picture is quieted, so the status and title
   retain their normal contrast while held titles lead the page. */
#collectionPage .collection-missing-card .card-art > .poster,
#collectionPage .collection-missing-card .card-art > .art-missing {
  filter: grayscale(0.75) brightness(0.55);
}

/* Sort By's choices, one to a line, the one standing in the accent's words. */
#collectionPage .collection-sort-choice {
  display: flex;
  width: 100%;
  margin-bottom: 4px;
}
#collectionPage .collection-sort-choice[aria-pressed="true"] {
  color: var(--accent-text);
}