/* 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;
}

/* An artist's collection puts their picture beside the name rather than in
   the writing: cut round, lifted off the page a little, and sized against
   the title so the two read as one line of a masthead. */
.collection-page-head.has-head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.collection-page-head .collection-head-shot {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  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 10px 24px rgba(0, 0, 0, 0.18);
}

.collection-page-head .collection-page-said {
  min-width: 0;
}

/* the byline sits under the title and the head is already beside it, so the
   gap that separates the head from the writing below is the flex gap */
.collection-page-head.has-head .collection-author {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .collection-page-head.has-head {
    gap: 14px;
  }

  .collection-page-head .collection-head-shot {
    width: 74px;
    height: 74px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  }
}

/* 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;
}

/* ---- a line from the artist --------------------------------------------- */

/* Set larger than the blurb above it and in the writing's own italic, so it
   reads as somebody speaking rather than as more of the page. Written from
   #content down: a blockquote, a figcaption and a cite are bare elements
   that #content already has rules for. */
#content .collection-prose .collection-quote {
    margin: 26px 0 22px;
    padding: 0 0 0 20px;
    border-left: 3px solid #e4e4e8;
}

#content .collection-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #2c2c33;
    font-size: 22px;
    line-height: 1.35;
    font-variation-settings: "wght" 500, "ital" 1;
}

/* in the line with the words rather than pinned to the corner, so they set
   the quote in marks the way a printed page would */
#content .collection-quote .collection-quote-mark {
    display: inline-block;
    padding: 0 2px;
    opacity: 0.3;
    font-variation-settings: "wght" 800, "opsz" 40, "ital" 1;
}

#content .collection-quote figcaption {
    margin: 10px 0 0;
    color: #6e6e76;
    font-size: 15px;
}

/* the dash belongs to the attribution and not to the name, so it is drawn
   here — a <cite> that is copied is the name on its own */
#content .collection-quote figcaption::before {
    content: "— ";
}

/* The site sets every <cite> as its own right-aligned block — that is the
   credit under a picture, which is what a cite is everywhere else here. This
   one is a name on the end of a sentence, so it is put back in the line. */
#content .collection-quote cite {
    display: inline;
    text-align: inherit;
    color: inherit;
    font-size: inherit;
    font-variation-settings: "wght" 600, "ital" 0;
    font-style: normal;
}

@media (max-width: 560px) {
    #content .collection-quote blockquote {
        font-size: 19px;
    }
}

/* ---- the collection's own picture --------------------------------------- */

/* Optional, and under the blurb rather than over it: the stack of interfaces
   at the top of the page is what says which plugins these are, and a second
   picture above the writing would be a second thing to look at before
   reading any of it. Sized to its column, with its own shape kept. */
#content .collection-prose .collection-picture {
  margin: 0 0 22px;
  padding: 0;
}

#content .collection-prose .collection-picture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #f4f4f5;
}

/* 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;
}

/* The cart glyph, as the + used to be. .nav-cart is hidden by default and
   shown by whichever thing is carrying it (style_2024.css), the same way the
   round button on a collection card shows it. */
#content .collection-add-all .nav-cart {
  display: flex;
  margin: 0;
}

#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);
}

/* Two and four go two across instead, so the collection comes out a pair or
   a square. Only here: below this the page is already two across and then
   one, and this would have to be undone twice over to let that happen. */
@media (min-width: 761px) {
  #content .collection-cards.is-pairs {
    grid-template-columns: repeat(2, 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;
}