/* ForgeOS — the public gallery of kinds (/kinds).
 *
 * Loaded after forgeos-site.css on that page only. The cards are the site's
 * own `.caps`/`.cap` grid; this adds what a gallery card has that an outcome
 * card does not: a retained first screen with its layout space reserved, a
 * label line, and an ask you can press. Nothing here is inline, because the
 * page's policy drops inline styles.
 */

/* ── Groups ─────────────────────────────────────────────────────────────── */
.kinds-gallery { padding-block: 8px 48px; }
.kind-group { padding-block: 28px 8px; }
.kind-group .head { display: flex; align-items: center; gap: 14px; max-width: none; }
.kind-group .head .h2 { margin-top: 0; font-size: clamp(22px, 2.6vw, 30px); }
.kind-group .caps { margin-top: 22px; }
.kinds-key, .kinds-try-note { margin-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 76ch; }
.kinds-try-note b { font-weight: 650; color: var(--ink); }

/* ── A card ─────────────────────────────────────────────────────────────── */
.kind-card { min-height: 0; gap: 8px; }
.kind-card h3 { font-size: 19px; }
.kind-card .kind-avail { margin: 0; }
.kind-card .kind-what { color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }

/* The retained first screen: width and height attributes reserve its space
   before it arrives, and the picture is cut, never stretched, to the card. */
.kind-shot { margin: -22px -22px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.kind-shot img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }
.kind-shot figcaption { padding: 8px 14px 10px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* The ask you can press. `.btn` refuses to wrap, which is right for "Start
   free" and wrong for a sentence on a 320px phone. */
.kind-try { margin-top: 10px; }
.kind-try .btn { white-space: normal; text-align: left; height: auto; min-height: var(--h); padding: 9px 14px; gap: 10px; align-items: baseline; line-height: 1.35; font-weight: 500; }
.kind-try .btn:hover { border-color: var(--tint-200); background: var(--tint-050); }
.kind-try-h { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); }
.kind-try q { quotes: "\201C" "\201D"; color: var(--ink); }

/* ── The showcase: sites their owners chose to show ─────────────────────── */
.showcase-rule, .showcase-state { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 76ch; }
.showcase-rule b { font-weight: 650; color: var(--ink); }
.showcase-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.showcase-list:empty { display: none; }
.showcase-list li { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.showcase-title { font-weight: 650; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.showcase-address { font-family: var(--mono); font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.showcase-badge { justify-self: start; font-size: 12.5px; color: var(--tint-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .showcase-list { grid-template-columns: 1fr 1fr; } }

@media (max-width: 640px) {
  .showcase-list { grid-template-columns: 1fr; }
  .kind-group .head { gap: 10px; }
  /* One card a row. The site's phone rule puts outcome cards two abreast and
     hides their example; a gallery card is its example, so it gets the width. */
  .kinds-gallery .caps { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .kind-card { gap: 6px; }
  .kind-shot { margin: -16px -16px 6px; }
}