/* Showcase: the brand mark and the "How it works" card. Tokens only. */

/* ---- Brand ---- */

.sprite { position: absolute; }

.site-brand-icon {
  width: 1.65rem;
  height: 2rem;
  flex: none;
  transition: transform var(--duration-base);
}

.site-brand:hover .site-brand-icon { transform: rotate(-8deg) scale(1.08); }

.site-brand-text { font-weight: 600; }


/* ---- "How it works": heading + CTA beside a divided steps list ---- */
/* Same recipe as jwt.io / openidconnect.net feature cards: one flat bordered surface,
   text on one side, a single element on the other. No decoration. */

/* ---- How it works: one card, themed exactly like the hero ----
   Copy on the left (heading, one line, three one-line steps, a pill button); the illustration on the
   right. The surface and panel are the hero's own tokens, so the two always agree: in dark the card is
   the brand-gradient surface and the art sits straight on it (the panel token is `none`); in light the
   card is flat grey and the art stands on the dark gradient panel, flush with the edge and rounded at
   its bottom-left (jwt.io's "Get Started" block). Side by side from 992px; below that the panel drops under the copy, full width. */

.how {
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow_glass);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin-bottom: var(--space-7);
  overflow: hidden;
  border: 1px solid var(--color_border_default);
  border-radius: var(--radius-xl);
  background: var(--color_bg_feature);
}

.how-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* the art column sets the card height; centre the copy against it */
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-7);
}

.how-intro h1 { margin: 0; color: var(--color_fg_hero); line-height: 1.15; }   /* the page title: size comes from the global h1 (--text-3xl); the gap below is the flex gap alone */
.how-intro > p { margin: 0; color: var(--color_fg_feature_muted); }

.how .btn-secondary { border-color: color-mix(in oklab, var(--color_fg_hero) 28%, transparent); color: var(--color_fg_hero); }
.how .btn-secondary:hover { background: color-mix(in oklab, var(--color_fg_hero) 10%, transparent); }

.how-art {
  display: grid;
  place-items: center;
  /* The curve bites the lower-left corner in light, so the visible area leans right: extra left
     padding centres the artwork optically. Applied in both themes (dark has no curve) so the art
     never shifts when the theme is switched. */
  padding: var(--space-5) var(--space-5) var(--space-5) 3.25rem;
  border-bottom-left-radius: 12rem;
  background: var(--color_bg_hero_panel);
}

.how-art img {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
}

.how-art img.art-dark { display: var(--art_dark_display); }
.how-art img.art-light { display: var(--art_light_display); }

@media (max-width: 991px) {
  .how { grid-template-columns: minmax(0, 1fr); }
  .how-intro { padding: var(--space-6); }
  .how-art { padding: var(--space-4); border-bottom-left-radius: 0; }
  .how-art img { max-width: 34rem; }
}

@media (max-width: 575px) {
  .how-intro { padding: var(--space-5) var(--space-4); }
}

/* ---- Step cards: eyebrow, title, one line, and a screenshot of the step itself. The screenshots are generated by
   utils/generate-how-it-works-images.mjs; one per theme, swapped with the same tokens as the hero art. ---- */

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;   /* the page's bottom padding already spaces it from the footer */
  padding: 0;
  list-style: none;
}

/* One card per row until there is room for all three, so a tablet never shows an orphan third card (same 992px as the hero). */
@media (min-width: 992px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.feature-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color_bg_tile);
  color: var(--color_fg_default);
}

.feature-eyebrow {
  color: var(--color_fg_link);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-tile h2 {
  margin: 0;
  color: var(--color_fg_bold);
  font-family: var(--font-secondary);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.feature-tile p { margin: 0; color: var(--color_fg_muted); font-size: var(--text-sm); }

/* The screenshot pins to the bottom of the card, so the three line up even when the titles wrap differently. */
.feature-shot { margin-top: auto; padding-top: var(--space-3); }

.feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 250;   /* reserves the space before the image loads, so nothing jumps */
  border: 1px solid var(--color_border_default);
  border-radius: var(--radius-lg);
}

.feature-shot img.art-dark { display: var(--art_dark_display); }
.feature-shot img.art-light { display: var(--art_light_display); }