/* Landing page at the site root: same terminal palette as bt10x.css, which
   also holds the locale and language-toggle rules. */

#landing {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 20px;
  gap: 20px;
}

#landing-head {
  width: 100%;
  max-width: 1000px;
  text-align: center;
}

#lang {
  margin-bottom: 8px;
}

#landing-head h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.3em;
  color: var(--c-green);
}

#landing-head .tagline {
  margin: 6px 0 0;
  color: var(--c-hint);
  font-style: italic;
}

/* Two labelled groups: the showcase apps, then the workshop tools. */
.group {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-yellow);
}

.group-title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--c-line);
}

.group-sub {
  margin: 0 0 4px;
  color: var(--c-dim);
}

.cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: #111611;
  color: inherit;
  text-decoration: none;
}

.card:hover {
  border-color: var(--c-green);
  background: #131c13;
}

.card:focus-visible {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 2px var(--cb-yellow);
}

.card .preview {
  margin: 0;
  padding: 8px 10px;
  /* Fixed height so the cards' previews line up. */
  height: 9em;
  background: var(--c-bg);
  border: 1px solid #1c251c;
  border-radius: 4px;
  font-family: var(--board-ff);
  line-height: var(--board-lh);
  overflow-x: auto;
}

.card .preview .g {
  color: var(--c-green);
}

.card .preview .d {
  color: var(--c-dim);
}

.card .preview .r {
  color: var(--c-red);
}

.card .preview .y {
  color: var(--c-yellow);
}

.card h2 {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--c-green);
}

.card p {
  margin: 0;
  flex: 1;
}

.card .go {
  align-self: flex-start;
  color: var(--c-yellow);
}

.card:hover .go {
  text-decoration: underline;
}

#coffee {
  margin: 0;
}

/* Image shading in blocks next to the same image in ASCII; two painted layers. */
.card .preview.glyph-art,
.card .preview.paint-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The creator's selected-avatar box, enlarged; same glyphs as avatar.html. */
.card .preview.avatar-art {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  height: calc(9em / 1.3);
  color: var(--c-green);
}

/* Three gallery avatars and their likes; one more line than the creator's box. */
.card .preview.gallery-art {
  font-size: 1.1em;
  /* Six rows plus padding and border; 9em / 1.1 left the last row 2px short,
     which showed a vertical scrollbar. */
  height: calc(6 * var(--board-lh) + 18px);
}

/* Showcase cards stand out a little; workshop cards are more compact. */
.cards-showcase .card {
  border-color: #2d4a2d;
}

.cards-showcase .card h2 {
  font-size: 17px;
}

/* Every workshop preview is as tall as the gallery's six rows at the card's
   font size (plus padding and border), written in each preview's own em so
   the avatar and gallery art fit without an inner scrollbar. */
.cards-workshop .card .preview {
  font-size: 0.9em;
  height: calc(6 * var(--board-lh) / 0.9 + 18px);
}

.cards-workshop .card .preview.avatar-art {
  font-size: 1.15em;
  height: calc(6 * var(--board-lh) / 1.15 + 18px);
}

.cards-workshop .card .preview.gallery-art {
  font-size: 1em;
  height: calc(6 * var(--board-lh) + 18px);
}

.cards-workshop .card p {
  font-size: 0.92em;
}

.card .preview.tui-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder for an empty grid cell; only shown in the two-column layout. */
.card.card-soon {
  display: none;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: none;
  color: var(--c-dim);
  font-style: italic;
}

.card.card-soon:hover {
  border-color: var(--c-line);
  background: none;
}

/* Two columns, and three for the workshop on wide screens. The placeholder
   fills the sixth workshop cell in both; with one column it stays hidden. */
@media (min-width: 640px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .card.card-soon {
    display: flex;
  }
}

@media (min-width: 900px) {
  .cards-workshop {
    grid-template-columns: 1fr 1fr 1fr;
  }
}