/* Uvod podla zameru navstevnika, "Prekvapte ma" a prakticke filtre vyrokov */

/* ---------- uvod: co dnes hladate ---------- */
.intent { margin: 8px 0 34px; }
.intent h2 { font-size: 22px; margin: 0 0 14px; }
.intent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.intent-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.intent-card:hover { transform: translateY(-2px); border-color: var(--sun); }
.intent-card-emoji { flex: 0 0 auto; font-size: 28px; line-height: 1; }
.intent-card strong { display: block; font-family: var(--display); font-size: 17px; line-height: 1.25; }
.intent-card small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
button.intent-card--surprise { border-style: dashed; border-color: var(--sun); background: #fff8f0; }
.intent-card[disabled] { opacity: .6; cursor: progress; }

/* ---------- prekvapte ma ---------- */
.surprise-result { margin-top: 14px; }
.surprise-result[hidden] { display: none; }
.surprise-card {
  padding: 22px 24px;
  border: 2px solid var(--sun);
  border-radius: 18px;
  background: var(--card);
}
.surprise-text { margin: 0 0 14px; font-family: var(--display); font-size: 22px; line-height: 1.4; }
.surprise-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.surprise-author { color: var(--sun); font-weight: 800; }
.surprise-actions { display: flex; align-items: center; gap: 14px; }
.surprise-error { margin: 0; color: var(--danger); font-weight: 700; }

/* ---------- prakticke filtre vo zozname vyrokov ---------- */
.practical-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.practical-filters-label { color: var(--ink-soft); font-size: 13px; font-weight: 800; }
.practical-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.practical-chip:hover { border-color: var(--sun); }
.practical-chip.is-active { border-color: var(--sun); background: var(--sun); color: #fff; }
.practical-chip--ghost { border-style: dashed; color: var(--ink-soft); }
.practical-separator { width: 1px; height: 22px; margin: 0 4px; background: var(--line); }

@media (max-width: 800px) {
  .intent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .intent-grid { grid-template-columns: 1fr; }
  .surprise-text { font-size: 19px; }
}