/*
 * The films page as a grid of cards rather than one full width row per film.
 *
 * Its own file rather than part of app.min.css, which is gulp output: the deploy runs
 * collectstatic but not gulp, so touching the bundle would mean committing a built
 * file. This ships as itself, the same way the licence dashboard's stylesheet does.
 *
 * Every rule is scoped under the page's own body class. That is what lets it beat the
 * single class rules already in the bundle on ordinary specificity, with no
 * !important anywhere, and it keeps all of this off every other page.
 */

.products .products__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.618rem;
  margin-top: 2.427rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 620px) {
  .products .products__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .products .products__list { grid-template-columns: repeat(3, 1fr); }
}

.products .products__item {
  position: relative;
  margin-top: 0;
  width: auto;
}

/* The whole card is the link, so it is one tab stop and the hit area is the card. */
.products .products__anchor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #daf1f0;
  box-shadow: 0 1px 2px rgba(23, 40, 45, .08);
  transition: transform .28s cubic-bezier(.23, 1, .32, 1),
              box-shadow .28s cubic-bezier(.23, 1, .32, 1);
}

.products .products__anchor:hover,
.products .products__anchor:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(23, 40, 45, .18);
}

/* 16:10 because the stills are 6000x3745, so the card crops nothing off them. */
.products .products__image_container {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #0d1416;
}

.products .products__image {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  box-shadow: none;
}

.products .products__details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.347rem 1.347rem 0;
}

/* The bundle gives this margin-bottom:auto, which in a flex column shoves the rest
   of the card to the floor. The summary does that job here instead. */
.products .products__category {
  margin-top: 0;
  margin-bottom: 0;
}

.products .products__heading {
  margin: .674rem 0 0;
  font-size: 1.35rem;
  line-height: 1.24;
}

/* Takes up the slack, so the price and the button line up across a row however long
   the title and the summary run. */
.products .products__summary {
  flex: 1 1 auto;
  margin-top: .539rem;
}

.products .products__price {
  display: block;
  margin-top: 1.078rem;
}

.products .products__call_to_action {
  position: static;
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 1.078rem 1.347rem 1.347rem;
  padding: .539rem 1.078rem;
  background-color: #fff;
}