/* Curated collections: the cards the empty cart offers, and the whole list at
   /collections. Loaded by both pages, with collections.js to split
   each card's logos into even rows. */

.collections {
  margin-top: 32px;
  padding-top: 16px;
  text-align: center;
}

#content .collections-sub {
  margin: 0 0 2px;
  color: #777;
  font-variation-settings: "wght" 450, "ital" 1;
}

/* #content h2:not(:first-child) adds 60px above any h2 in the page, and that
   :not() counts toward specificity, so the element has to be named here to
   beat it */
#content h2.collections-title {
  margin: 10px 0 24px;
  font-size: 26px;
}

#content .collection-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (max-width: 700px) {
  #content .collection-list {
    grid-template-columns: 1fr;
  }
}

/* A card takes after the ones on /plugins: the collection's interfaces
   stacked across a tinted stage, and the rest underneath */
#content .collection {
  display: flex;
  flex-direction: column;
  /* a grid column will not shrink below what is inside it, so without this the
     collections holding more logos grow wider than the rest of the row */
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

#content .collection:hover {
  border-color: #d6d6d6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* the stage: a wash from the first plugin's colour to the last's */
.collection-stage {
  position: relative;
  /* its own stacking context: the windows inside are stacked one over the
     other, and without this they would also outrank the link over the card */
  z-index: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  /* ruled in fine squares over the wash, the same paper the front page's
     featured band and a collection's own page stand their windows on */
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(135deg, var(--tint-from), var(--tint-to));
}

/* placed by the server (store/curated.py, cascade), so they keep their
   sizes relative to one another */
.collection-shot {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.14));
  transition: transform 0.35s ease-out;
}

/* on hover the stack spreads a little, each window further than the one
   behind it */
#content .collection:hover .collection-shot {
  transform: translate(calc(var(--i) * 3px), calc(var(--i) * 2px));
}

@media (prefers-reduced-motion: reduce) {
  #content .collection,
  .collection-shot {
    transition: none;
  }
}

/* everything under the stage */
.collection-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.collection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* the eyebrow and the name are one block, so the arrow stays at the end of
   the row and the head, where there is one, stays at the start of it */
.collection-head-words {
  min-width: 0;
  flex: 1 1 auto;
}

/* what kind of collection this is, over the name, as its own page says it */
#content .collection-card-eyebrow {
  margin: 0 0 3px;
  color: #9a9aa2;
  font-size: 10px;
  line-height: 1.2;
  font-variation-settings: "wght" 700, "ital" 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* an artist's picture beside their name, the card's smaller reading of the
   round head their page wears */
.collection-head.has-head {
  align-items: center;
}

#content .collection-head .collection-card-head {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* a photograph of somebody is rarely square and must not be squeezed into
     one; the crop takes the middle, which is where a face usually is */
  object-fit: cover;
  background: #f0f0f3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* on the cart page the whole card adds its collection (checkout.js) */
#content #collection-list .collection {
  cursor: pointer;
}

#content #collection-list .collection:hover {
  border-color: seagreen;
}

/* a card that is itself a link: the cover sits over the whole of it, and
   everything that leads somewhere else rides above the cover */
#content .collection.is-linked {
  position: relative;
  cursor: pointer;
}

.collection-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#content .collection.is-linked .collection-name a,
#content .collection.is-linked .collection-about a,
#content .collection.is-linked .collection-plugins a,
#content .collection.is-linked .collection-add {
  position: relative;
  z-index: 2;
}

/* the title leads to the collection's own page */
#content .collection-name a {
  color: inherit;
  text-decoration: none;
}

#content .collection-name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#content .collection-name {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.15;
  font-variation-settings: "wght" 780, "opsz" 24;
}


/* the green + that puts a collection in the cart: a button on the cart page, a
   link into it everywhere else */
#content .collection-add {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid seagreen;
  border-radius: 100%;
  background: seagreen;
  color: white;
  font-family: var(--text-font);
  font-size: 20px;
  font-variation-settings: "wght" 750, "ital" 0;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

#content .collection-add:hover {
  filter: brightness(1.15);
}

/* the glyph, whichever it is, sits in the middle of the circle */
#content .collection-add .nav-cart {
  display: flex;
  margin: 0;
}

/* on the overview the button leads to the collection's own page */
#content .collection-add.collection-go {
  font-size: 17px;
  font-variation-settings: "wght" 700, "ital" 0;
}

#content .collection-add:disabled {
  opacity: 0.5;
  cursor: default;
}

#content .collection-about {
  margin: 0;
  font-size: 14px;
  line-height: 145%;
  color: #555;
}

#content .collection-about a {
  color: royalblue;
  text-decoration: underline;
  text-decoration-color: rgba(46, 139, 87, 0.35);
  text-underline-offset: 2px;
}

#content .collection-about a:hover {
  text-decoration-color: seagreen;
}

/* small, since the stage already shows the plugins; the columns are set by
   collections.js, which splits them into rows as even as it can */
#content .collection-plugins {
  display: grid;
  grid-template-columns: repeat(auto-fit, 32px);
  gap: 6px;
  margin: 2px 0 12px;
  padding: 0;
  list-style: none;
}

#content .collection-plugins li {
  width: 32px;
  margin: 0;
  padding: 0;
  background: none;
}

.collection-plugins img {
  display: block;
  width: 100%;
  height: auto;
}

/* under the handful the cart offers, the way to the rest */
#content .collections-more {
  margin: 22px 0 0;
  text-align: center;
  font-size: 15px;
}

#content .collections-more a {
  color: seagreen;
  font-variation-settings: "wght" 650, "ital" 0;
}

#content .collections-more a:hover {
  color: #1e6b41;
}

/* -------------------------------------------------------- /collections */

.curated-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 36px 20px 90px;
}

/* the page's own heading, where the cart has a section heading */
.curated-page .collections {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#content h1.collections-title {
  margin: 10px 0 28px;
}

/* the cards' names are h2 here, under the page's h1; the site adds space
   above every h2 after the first, which the cards do not want */
#content h2.collection-name {
  margin: 0;
}

#content .collections-none {
  grid-column: 1 / -1;
  padding: 24px;
  color: #666;
  text-align: center;
}

/* what the collection saves as a bundle: at the foot of the card, so the lines
   line up across a row whatever length the blurbs above them run to */
#content .collection-saving {
  margin: auto 0 0;
  padding-top: 12px;
  color: seagreen;
  font-size: 15px;
  font-variation-settings: "wght" 500, "ital" 1;
}

/* weight comes from the variation axis here; font-weight alone is overridden */
#content .collection-saving strong {
  font-variation-settings: "wght" 750, "ital" 1;
}

/* more room between the cards when they have the page to themselves */
.curated-page .collection-list {
  gap: 28px;
}

.collections-view {
  margin: -8px 0 28px;
}

/* dark screenshots want a dark stage, still shaded with the plugins' colours */
/* the same paper, ruled in light on the dark ground under it */
.curated-page.is-dark .collection-stage {
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%, 100% 100%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(135deg, var(--tint-from), var(--tint-to)),
    linear-gradient(#1c1c1e, #1c1c1e);
}

/* a screenshot that would not load (see collections.js) */
.collection-shot.missing {
  display: none;
}