/* "After hours": compact card for the personal game project (Sudan Slug).
   Light card in the site theme; the gameplay clip is the hero, framed as a small game window. */

.afterhours { padding: 1em 2em 5em; }
.afterhours p, .afterhours li { font-family: var(--read); text-transform: none; letter-spacing: 0; }

.ah-card {
  max-width: 1000px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.75em; align-items: center; padding: .75em 1.75em .75em .75em;
  border-radius: 1.25em; background: var(--surface, #fff); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.ah-card::after { /* a faint electric-blue wash behind the text */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 100% 0%, rgba(37, 99, 235, .07), transparent 70%);
}

/* the game window */
.ah-window {
  position: relative; z-index: 1; border-radius: .85em; overflow: hidden; background: var(--fg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 30px rgba(11, 27, 51, .22);
}
.ah-bar {
  display: flex; align-items: center; gap: .45em; height: 2em; padding: 0 .75em;
  background: linear-gradient(#13284B, #0E1F3D); border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: supply-mono, ui-monospace, monospace; font-size: .64rem; color: #8597B3;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1;
}
.ah-bar > i { width: .62em; height: .62em; border-radius: 50%; background: #2A4373; flex: none; }
.ah-bar > i:first-child { background: #F87171; } .ah-bar > i:nth-child(2) { background: #FBBF24; } .ah-bar > i:nth-child(3) { background: #34D399; }
.ah-bar span { margin-left: .5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.ah-live { margin-left: auto !important; display: inline-flex; align-items: center; gap: .45em; color: #C3CFE0; flex: none; }
.ah-live b { width: .5em; height: .5em; border-radius: 50%; background: #F87171; animation: ah-blink 1.4s steps(1) infinite; }

.ah-video { position: relative; aspect-ratio: 16 / 9; background: #0E1D38; }
.ah-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* text */
.ah-body { position: relative; z-index: 1; padding: .75em 0; }
.afterhours p.ah-kicker {
  font-family: supply-mono, ui-monospace, monospace; text-transform: uppercase; color: var(--accent1);
  font-size: .7rem; letter-spacing: .12em; font-weight: 600; margin: 0;
}
.ah-body h3 {
  color: var(--fg); font-size: 1.55rem; line-height: 1.15; margin: .3em 0 .55em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .5em;
}
.ah-body h3 span { font-family: "IBM Plex Sans Arabic", var(--read); font-size: 1.05rem; font-weight: 600; color: var(--accent1); }
.afterhours p.ah-lede { color: var(--ink-2, #3A4A63); font-size: .92rem; line-height: 1.6; margin: 0; }

.afterhours p.ah-stack { margin: .95em 0 0; font-size: .74rem; color: var(--ink-3, #5B6B84); }

@keyframes ah-blink { 50% { opacity: .25; } }

@media (max-width: 760px) {
  .afterhours { padding: 1em 1em 4em; }
  .ah-card { grid-template-columns: 1fr; gap: .5em; padding: .6em; }
  .ah-body { padding: .5em .5em .6em; }
  .ah-body h3 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .ah-live b { animation: none; } }