/*
 * Styles for the below-the-fold "What is Quidsmith?" content section on the homepage
 * (the .qs-home block in index.html). Everything is scoped under .qs-home so it never
 * touches the game UI hydrated into #root above it. The palette mirrors the in-game dark
 * theme and the article pages (/articles/article.css) so the section matches the rest of
 * the site. Fonts (Inter, JetBrains Mono) are already loaded by index.html.
 */

/* Hide the learn-more section once a run is underway (see useHideLearnMoreDuringPlay in App.tsx).
   Visible by default so it renders for crawlers, no-JS visitors and on the main menu. */
body.qs-in-game .qs-home { display: none; }

.qs-noscript {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  font-family: "Inter", system-ui, sans-serif;
  color: #b6b0a4;
  line-height: 1.6;
}
.qs-noscript a { color: #e0b23c; }

.qs-home {
  --bg-base: #0f0f0f;
  --bg-panel: #161616;
  --bg-hover: #1e1e1e;
  --text-primary: #e8e4dc;
  --text-secondary: #b6b0a4;
  --text-muted: #86807a;
  --accent-gold: #c69628;
  --accent-gold-bright: #e0b23c;
  --border: #3a3a3a;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.qs-home .qs-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.qs-home .qs-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-gold);
  margin: 0 0 0.75rem;
}

.qs-home .qs-h1 {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.9rem;
}

.qs-home .qs-h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.qs-home p { color: var(--text-secondary); margin: 0 0 1rem; }
.qs-home strong { color: var(--text-primary); font-weight: 600; }
.qs-home a { color: var(--accent-gold-bright); text-decoration: none; }
.qs-home a:hover { text-decoration: underline; }
.qs-home .qs-lead { font-size: 1.08rem; color: var(--text-primary); }

.qs-home .qs-products {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
.qs-home .qs-products li {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding-left: 1rem;
  position: relative;
}
.qs-home .qs-products li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent-gold);
}

/* Screenshots */
.qs-home .qs-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.qs-home .qs-shots figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  padding: 0.6rem;
}
.qs-home .qs-shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: border-color 0.15s;
}
.qs-home .qs-shots img:hover { border-color: var(--accent-gold); }
.qs-home .qs-shots img:focus-visible {
  outline: 2px solid var(--accent-gold-bright);
  outline-offset: 2px;
}

/* Lightbox — a full-screen overlay showing a clicked screenshot at detail size.
   Built and toggled by /home.js; hidden and inert until opened. */
.qs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}
.qs-lightbox.is-open { display: flex; }
.qs-lightbox figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.qs-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.qs-lightbox figcaption {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: #b6b0a4;
  text-align: center;
  max-width: 60ch;
}
.qs-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.4rem;
  line-height: 1;
  color: #e8e4dc;
  background: rgba(22, 22, 22, 0.8);
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
}
.qs-lightbox-close:hover { border-color: #e0b23c; color: #e0b23c; }
body.qs-lightbox-open { overflow: hidden; }
.qs-home .qs-shots figcaption {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  line-height: 1.4;
}

/* Article grid */
.qs-home .qs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.qs-home .qs-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  padding: 1rem 1.1rem;
  transition: border-color 0.15s, background 0.15s;
}
.qs-home .qs-card:hover { border-color: var(--accent-gold); background: var(--bg-hover); text-decoration: none; }
.qs-home .qs-card h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
}
.qs-home .qs-card p { font-size: 0.85rem; margin: 0; color: var(--text-secondary); }
.qs-home .qs-more { margin-top: 1.1rem; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; }

.qs-home .qs-disclaimer {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  background: var(--bg-panel);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin: 2.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.qs-home .qs-disclaimer strong { color: var(--accent-gold-bright); }

.qs-home .qs-footer {
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.qs-home .qs-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.qs-home .qs-footer-links a,
.qs-home .qs-footer-links button {
  color: var(--text-secondary);
  transition: color 0.15s;
}
.qs-home .qs-footer-links a:hover,
.qs-home .qs-footer-links button:hover { color: var(--text-primary); }
/* Reset the two app-action buttons so they read as footer links, not form controls. */
.qs-home .qs-footer-links button {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.qs-home .qs-footer-links .qs-support { color: var(--accent-gold); }
.qs-home .qs-footer-links .qs-support:hover { color: var(--accent-gold-bright); }

.qs-home .qs-footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
}
.qs-home .qs-social { display: flex; align-items: center; gap: 1rem; }
.qs-home .qs-social a { color: var(--text-muted); display: inline-flex; }
.qs-home .qs-social a:hover { color: var(--text-primary); }
.qs-home .qs-copy {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

@media (max-width: 560px) {
  .qs-home .qs-h1 { font-size: 1.5rem; }
  .qs-home .qs-wrap { padding: 2rem 1rem 3rem; }
  .qs-home .qs-products { grid-template-columns: 1fr; }
}