/******************************************
/* 3D Collection (models.php), on top of searchpage.css: the site's slim white header, as on the other pages, and a
/* thin full-width band of the search page's parchment texture with the title.
/*******************************************/

header {
  height: 144px;
}

section.collectionBanner {
  padding: 46px 24px 40px;
  text-align: center;
  /* a light veil, so the small text reads on the texture */
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    url("../img/searchtexture.jpg") center / cover;
}

section.collectionBanner h2 {
  margin: 0;
  font-size: 4.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgb(41, 41, 41);
}

/* The cards: wider than the search page's, about four to a row, each with its Sketchfab thumbnail (16:9) across its
   whole width, so long objects keep their shape at a good size, as in museums' and Sketchfab's 3D galleries. */
section.mainBody section.displayResultsWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin: 36px 80px 60px;
}

section.mainBody section.displayResultsWrapper a {
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
}

/* The collections' tabs, clear of the banner: the search page's white pills, the one shown in its sand colour. */
section.mainBody nav#collectionTabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 36px 80px 0;
}

section.mainBody nav#collectionTabs button {
  height: 56px;
  padding: 0 36px;
  border: none;
  border-radius: 28px;
  background-color: white;
  color: black;
  font-size: 1.7rem;
  cursor: pointer;
}

section.mainBody nav#collectionTabs button span {
  color: rgb(150, 150, 150);
}

section.mainBody nav#collectionTabs button[aria-pressed="true"],
section.mainBody nav#collectionTabs button[aria-pressed="true"] span {
  background-color: rgb(234, 193, 136);
  color: white;
}

/* The filters' row: the search page's pills, of one width, with room between them, and its "Clear all", narrower so
   the pills are wide enough for their lists (which open as floating cards, as on the search page: searchpage.css). */
section.mainBody div#modelFilters {
  margin-top: 28px;
  margin-bottom: 24px;
  gap: 32px;
}

section.mainBody div#modelFilters > section {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

section.mainBody div#modelFilters > section#clearSearch {
  flex: 0 0 120px;
}

section.mainBody div#modelFilters .searchOptionWrapper {
  padding: 0 12px; /* (18px on the search page: the longest sites, "Tell el-Far'ah (South)", then fit) */
}

section.mainBody section.displayResultsWrapper a[hidden] {
  display: none;
}

section.mainBody section.displayResultsWrapper .thumbnailWrapper {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* The model to turn, over the thumbnail of a hovered card (the script at the end of models.php) */
section.mainBody section.displayResultsWrapper .thumbnailWrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

section.mainBody section.displayResultsWrapper .thumbnailWrapper iframe.shown {
  opacity: 1;
}

section.mainBody section.displayResultsWrapper .thumbnailWrapper img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}

section.mainBody section.displayResultsWrapper h4 {
  margin: 14px 12px 6px;
}

section.mainBody section.displayResultsWrapper .spanSpacer {
  flex-wrap: wrap;
  padding: 0 12px 16px;
}

@media only screen and (max-width: 900px) {
  section.mainBody section.displayResultsWrapper {
    margin: 24px 16px 40px;
    gap: 16px;
  }
}