/* One collection's own page: /collection/<slug>/ (content/views.py,
   collection_detail). The cards' own styles come from collections.css; this
   is the page they lead to. */

.collection-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 90px;
}

/* the plugins stacked across a tinted stage, the width of the window as a
   plugin page's own hero is; the stack is worked out for this shape
   (content/views.py asks store/curated.py cascade for a wide stage), so
   nothing is cut off at the bottom */
.collection-page .collection-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw) 30px;
  /* the windows, and under them but still on their ground, the switch that
     changes which look they are shown in */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  /* the same ruled paper the cards and the front page's band stand 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));
}

/* The fan is laid out in percentages of this box, so the box has to keep the
   shape the stack was worked out for (store/curated.py asks for 100x42) and
   has to stop growing where the first plugin hits its own 2x cap — past that
   the images stand still while their slots keep widening, and the fan pulls
   apart. curated.py works that width out per collection (--stage-px). The
   band takes its height from this, and its wash runs on to both edges. */
.collection-hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 42;
  max-width: var(--stage-px, 1200px);
  margin: 0 auto;
}

/* The same ground in its dark look, for the same reason the cards have one:
   what changes is how the interfaces are shown, not how the page is dressed,
   so the writing and the cards below stay as they were. */
.collection-page.is-dark .collection-hero {
  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);
}

/* The switch is made of the light on the ground it sits on (view-switches.css),
   and in the dark look that ground is dark — so the same wash is struck in
   white at low strength here, and the words with it, rather than in black. */
#content .collection-page.is-dark .collection-hero-modes {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
}

#content .collection-page.is-dark .collection-hero-modes .directory-mode {
  color: rgba(255, 255, 255, 0.62);
}

#content .collection-page.is-dark .collection-hero-modes .directory-mode:hover {
  color: rgba(255, 255, 255, 0.95);
}

#content .collection-page.is-dark .collection-hero-modes .directory-mode[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.22);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

/* each window tilted by the degree or two the cascade gave it */
.collection-hero .collection-shot {
  transform: rotate(var(--turn, 0deg));
}

.collection-page-head {
  text-align: left;
  margin-bottom: 30px;
}

/* what this page is, over the name of it */
#content .collection-page-head .collection-eyebrow {
  margin: 0 0 6px;
  color: #999;
  font-size: 12px;
  font-variation-settings: "wght" 700, "ital" 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* the site dresses every <header> as the masthead; this is a div for that
   reason, and the page's own top margin comes from the hero */
.collection-page {
  padding-top: 0;
}

#content .collection-page-head h1 {
  margin: 0 0 6px;
  font-size: 2.6em;
}

#content .collection-page-head .collection-author {
  margin: 0 0 22px;
  text-align: left;
  color: #666;
  font-size: 16px;
  font-variation-settings: "wght" 400, "ital" 1;
}

#content .collection-page-head .collection-author a {
  color: royalblue;
  font-variation-settings: "wght" 600, "ital" 1;
}

/* the writing, with the ways into the cart beside it */
.collection-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
  align-items: start;
  margin-bottom: 56px;
}

@media (max-width: 760px) {
  .collection-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

#content .collection-prose > p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.55;
}

#content .collection-prose a {
  color: royalblue;
}

/* the plugins themselves, under the count, in the sidebar */
#content .collection-page-logos {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 32px);
  gap: 6px;
  margin: 8px 0 14px;
}

#content .collection-page-logos li {
  width: 32px;
}

/* the sidebar */
/* alongside the name and the writing, from the title down */
.collection-buy {
  position: sticky;
  top: 20px;
  margin-top: 6px;
  padding: 18px;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: center;
}

#content .collection-buy-count {
  margin: 0 0 4px;
  color: #777;
  font-size: 13px;
  font-variation-settings: "wght" 600, "ital" 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#content .collection-buy-saving {
  margin: 0 0 14px;
  color: seagreen;
  font-size: 14px;
  font-variation-settings: "wght" 500, "ital" 0;
}

#content .collection-buy-saving strong {
  font-variation-settings: "wght" 750, "ital" 0;
}

#content .collection-buy-now,
#content .collection-add-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  border-radius: 100px;
  font-size: 16px;
  text-decoration: none;
}

/* the one to press */
#content .collection-buy-now {
  margin-bottom: 8px;
  border: 1px solid seagreen;
  background: seagreen;
  color: white;
  font-variation-settings: "wght" 700, "ital" 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.18);
  transition: filter 0.15s ease-out;
}

#content .collection-buy-now:hover {
  filter: brightness(1.12);
}

/* and the quieter one, for a cart already being built */
#content .collection-add-all {
  border: 1px solid #ddd;
  background: white;
  color: #333;
  font-variation-settings: "wght" 600, "ital" 0;
}

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

.collection-add-plus {
  font-size: 18px;
  font-variation-settings: "wght" 750, "ital" 0;
  line-height: 1;
}

#content .collection-buy-note {
  margin: 12px 0 0;
  color: #888;
  font-size: 13px;
  line-height: 1.4;
}

/* The plugins, as /plugins wears them. Everything that dresses a card lives in
   plugin_directory.css; what belongs here is the shape of the grid. That page
   fills its 1180px by asking for columns of at least 320px, which in this
   page's narrower 980px column would only ever fit two — so the three are
   asked for outright. */
#content .collection-cards {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 760px) {
  #content .collection-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* dark screenshots want a dark stage, as they get on /plugins; there the
   switch sets is-dark on #plugin-directory, here on the page itself */
.collection-page.is-dark .plugin-card-stage {
  background: linear-gradient(var(--tint), var(--tint)), #1c1c1e;
}

/* The empty places in the last row: the outline of a card and nothing in it,
   so a collection of four ends on a row of one and two held-open slots rather
   than on a gap. Hidden by default and shown by the layouts that have a place
   for them — one column never has any. */
#content .plugin-slot {
  display: none;
  border: 1px dashed #e4e4e4;
  border-radius: 10px;
  background: #fafafa;
}

@media (min-width: 761px) {
  #content .plugin-slot.for-three {
    display: block;
  }
}

@media (min-width: 481px) and (max-width: 760px) {
  #content .plugin-slot.for-two {
    display: block;
  }
}

/* The dark look only changes the interfaces, not the page they sit on, and a
   card keeps its white foot there — so a slot stays as pale as it is in the
   light, and goes on reading as a place nothing is in. */

#content .collection-page-back {
  margin: 40px 0 0;
  text-align: center;
}

#content .collection-page-back a {
  color: royalblue;
  font-variation-settings: "wght" 600, "ital" 0;
  text-decoration: none;
}

#content .collection-page-back a:hover {
  text-decoration: underline;
}