@import url("variables.css");

/* ===================================== */
/*      LAYOUT GENERALE PAGINA RICERCA   */
/* ===================================== */

.ricerca-page {
  max-width: 1100px;
  margin: 120px auto 40px auto; /* un po' sotto l'header fisso */
  padding: 0 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: #222;
}

.ricerca-header {
  margin-bottom: 12px;
  border-bottom: 2px solid var(--blu-t);
  padding-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.ricerca-header h1 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  color: var(--blu);
}

.ricerca-query {
  font-size: 0.9rem;
  color: #555;
}

.ricerca-query strong {
  color: var(--oro);
}

/* messaggi di stato: “nessun risultato”, ecc. */
.ricerca-status {
  margin: 8px 0 16px;
  font-size: 0.95rem;
  color: #555;
}

/* ===================================== */
/*         SEZIONI DI RISULTATO          */
/* ===================================== */

.ricerca-section {
  margin-bottom: 18px;
}

.ricerca-section:last-of-type {
  margin-bottom: 0;
}

.ricerca-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.ricerca-section-header h2 {
  font-size: 1.05rem;
  margin: 0;
  color: var(--blu);
}

.ricerca-section-header .material-symbols-outlined {
  font-size: 20px;
  color: var(--oro);
}

/* testo piccolo “Nessun servizio trovato”, ecc. */
.ricerca-section-empty {
  font-size: 0.9rem;
  color: #777;
  margin: 0 0 4px;
}

/* ===================================== */
/*           LISTA RISULTATI             */
/* ===================================== */

.ricerca-risultati {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* card generica per risultato */
.risultato-card {
  position: relative;
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.risultato-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* link titolo servizio */
.risultato-titolo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--blu);
}

.risultato-titolo:hover {
  text-decoration: underline;
}

.risultato-titolo .material-symbols-outlined {
  font-size: 18px;
}

/* testo descrizione / snippet */
.risultato-snippet {
  font-size: 0.85rem;
  color: #555;
  margin-top: 2px;
}

/* piccola metainformazione: tipo, slug, ecc. */
.risultato-meta {
  margin-top: 3px;
  font-size: 0.8rem;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risultato-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ===================================== */
/*           TAG / FILTRI VELOCI         */
/* ===================================== */

.ricerca-taglist-inline {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* tag cliccabili (etichetta/partecipante/pubblico) */
.ricerca-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: var(--blu-t);
  color: var(--blu);
  white-space: nowrap;
}

.ricerca-tag .material-symbols-outlined {
  font-size: 16px;
}

.ricerca-tag:hover {
  background-color: var(--oro-t);
  color: var(--blu);
}

/* Variante per tag “scuro” (es. tipologia pubblico con coloreScuro) */
.ricerca-tag--scuro {
  color: #fff;
}

/* ===================================== */
/*         MESSAGGI DI “NESSUNO”         */
/* ===================================== */

.ricerca-no-results-global {
  margin-top: 24px;
  padding: 16px 12px;
  border-radius: 8px;
  background: #fff8e1;
  border: 1px solid #ffecb3;
  font-size: 0.95rem;
  color: #5f4b00;
}

.risultato-card-link {
  display: block; /* Assicura che il link occupi tutto lo spazio della card */
}

.risultato-card--strong {
  background-color: var(--blu);
}

.risultato-card--strong .risultato-titolo {
  text-decoration: none; /* Rimuove la sottolineatura del link */

  color: var(--oro);
}

.risultato-card--strong .risultato-snippet {
  text-decoration: none; /* Rimuove la sottolineatura del link */

  color: var(--oro);
}

.risultato-card:hover {
  background-color: var(--oro);
}

.risultato-card--strong:hover .risultato-titolo {
  text-decoration: none; /* Rimuove la sottolineatura del link */
  color: var(--blu);
}

.risultato-card--strong:hover .risultato-snippet {
  text-decoration: none; /* Rimuove la sottolineatura del link */
  color: var(--blu);
}

.risultato-card--weak {
  background-color: var(--blu-light-25);
}

.risultato-card--weak .risultato-titolo {
  text-decoration: none; /* Rimuove la sottolineatura del link */

  color: var(--bianco);
}

.risultato-card--weak .risultato-snippet {
  text-decoration: none; /* Rimuove la sottolineatura del link */

  color: var(--bianco);
}

.risultato-card--weak:hover .risultato-titolo {
  text-decoration: none; /* Rimuove la sottolineatura del link */
  color: var(--blu);
}

.risultato-card--weak:hover .risultato-snippet {
  text-decoration: none; /* Rimuove la sottolineatura del link */
  color: var(--blu);
}

.risultato-card--weak .ricerca-taglist-inline {
  color: var(--bianco);
}

.risultato-card--strong .ricerca-taglist-inline {
  color: var(--oro);
}

.risultato-card--weak:hover .ricerca-taglist-inline {
  color: var(--blu);
}

.risultato-card--strong:hover .ricerca-taglist-inline {
  color: var(--blu);
}

/* ===================================== */
/*           RESPONSIVE LAYOUT           */
/* ===================================== */

@media (min-width: 768px) {
  .ricerca-risultati {
    grid-template-columns: 1fr 1fr; /* due colonne su tablet+ */
    gap: 10px;
  }
}

@media (min-width: 992px) {
  .ricerca-risultati {
    grid-template-columns: 1fr 1fr 1fr; /* tre colonne su desktop largo */
  }
}