/* ============================================================
   comp-hook.css (Lego Block)
   Homepage "see the gap for yourself" demo — reuses the real
   .nuance-card flip component from page-dictionary.css; this file
   only owns the section-specific intro/grid/punchline around it.
   ============================================================ */
.section:has(.hook-grid) .section-head { text-align: center; margin-left: auto; margin-right: auto; }

.hook-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);
  max-width: 900px; margin: 0 auto;
}
.hook-grid .nuance-card { cursor: pointer; }
.hook-loading { text-align: center; color: var(--text-muted); grid-column: 1 / -1; padding: 20px; }

@media (max-width: 760px) {
  .hook-grid { grid-template-columns: 1fr; max-width: 420px; }
}

.hook-punchline {
  text-align: center; max-width: 620px; margin: 40px auto 0;
  font-size: 1.15rem; font-weight: 600; color: var(--text-primary); line-height: 1.6;
}
.hook-punchline span { color: var(--accent-primary); }