/* The motif archive, layered on landing.css.
 *
 * Same ground, same parchment serif, same square hard-shadowed buttons as the poster and the pricing
 * page. What is here is the two shapes neither of those has: a grid of boards, and one board with
 * its facts beside it.
 *
 * Written by `build_motif_pages.py`, so the markup this styles is generated. Class names are the
 * contract between the two and changing one means changing both. */

/* Documents start at the top and are read downwards, so the poster's vertical centring has to go or
   the first screen is empty space with a heading floating in it. Same fix as `body.pricing-page`,
   and the same reason. */
body.motifs-page {
  justify-content: flex-start;
  padding-top: 28px;
}

/* The board behind the poster is masked to an ellipse over the hero, which on a page that scrolls
   leaves it stranded across the first screen and nowhere else. Pulled up and made fainter so it
   reads as texture the whole way down. */
body.motifs-page::before {
  -webkit-mask-image: radial-gradient(ellipse 90% 46% at 50% 12%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 46% at 50% 12%, #000 10%, transparent 78%);
}

.motifs-hero { width: min(1080px, 100%); }
.motifs-hero .blurb { margin-top: 18px; }

/* Every board on these pages is an inline SVG from python-chess, so it arrives with a `width` and a
   `height` attribute in pixels. Overriding both is what lets one generated size fill whatever column
   it lands in, and `height: auto` is the half that matters: without it the aspect ratio is held by
   the attribute and a scaled board goes oval. */
.motifs-page svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* --- The index: eleven boards ------------------------------------------------------------------ */

/* `auto-fill` rather than a fixed column count, because eleven cards do not divide evenly into
   anything and the last row should be allowed to be short rather than stretched. */
.motif-grid {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  text-align: left;
}

.motif-card a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px;
  border: 1px solid rgba(216, 172, 83, 0.24);
  border-radius: 6px;
  background: rgba(10, 8, 6, 0.55);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.motif-card a:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.card-board { display: block; margin-bottom: 4px; }

.card-name {
  font-size: 15px;
  line-height: 1.3;
  color: var(--parchment);
}

.card-event {
  font-size: 12.5px;
  color: var(--parchment-dim);
}

/* Pushed to the bottom of the card so this line sits on one baseline across a row whose names wrap
   to different heights. */
.card-meta {
  margin-top: auto;
  padding-top: 6px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* --- One motif ---------------------------------------------------------------------------------*/

.motif-detail {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(260px, 1fr);
  gap: 38px;
  align-items: start;
  text-align: left;
}

@media (max-width: 780px) {
  .motif-detail { grid-template-columns: 1fr; gap: 26px; }
}

.motif-board { margin: 0; }

.motif-board figcaption {
  margin-top: 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: center;
}

/* A definition list rather than a table: these are four labelled facts, not rows of anything, and a
   table would have to invent a header for a thing with no columns. */
.fact-list {
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.fact-list div {
  border-left: 2px solid rgba(216, 172, 83, 0.4);
  padding-left: 12px;
}

.fact-list dt {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

.fact-list dd {
  margin: 3px 0 0;
  font-size: 17px;
  color: var(--parchment);
}

.motif-subhead {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--parchment);
}

/* The moves, in the mono face the rest of the site uses for anything that is notation rather than
   prose. `inline-block` on each move is what stops a line wrapping between a move number and its
   move, which reads as a typo. */
.motif-line {
  margin: 0 0 28px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 15px;
  line-height: 1.9;
  color: var(--parchment-dim);
}

.motif-line .mv {
  display: inline-block;
  margin-right: 10px;
  white-space: nowrap;
}

.motif-line b {
  font-weight: 400;
  color: var(--gold-bright);
}

.motif-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- The one bit of selling ------------------------------------------------------------------- */

.motif-pitch {
  margin: 56px auto 0;
  max-width: 62ch;
  padding-top: 22px;
  border-top: 1px solid rgba(216, 172, 83, 0.2);
  font-size: 14px;
  line-height: 1.7;
  color: var(--parchment-dim);
}

.motif-pitch b { color: var(--parchment); font-weight: 400; }
.motif-pitch a { color: var(--gold-ink); }

@media (prefers-reduced-motion: reduce) {
  .motif-card a { transition: none; }
  .motif-card a:hover { transform: none; }
}