/* Automa Page Generator — Pagina indice del servizio
   Stili minimi per il template templates/archive-index.php (radice del CPT generato).

   HTML atteso:
   <main class="automa-index automa-index--{slug}">
     <div class="automa-index__inner">
       <header class="automa-index__header"><h1 class="automa-index__title">...</h1></header>
       <div class="automa-index__content">...</div>
       <section class="automa-index__zone">
         <h2 class="automa-index__zone-title">...</h2>
         <ul class="automa-index__province|automa-index__comuni">...</ul>
       </section>
     </div>
   </main>
*/

.automa-index {
  --automa-index-gap: 16px;
  --automa-index-radius: 8px;
  --automa-index-border: #e3e6ea;
}

.automa-index__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.automa-index__header {
  margin-bottom: 1.5rem;
}

.automa-index__content {
  margin-bottom: 2.5rem;
}

.automa-index__zone-title {
  margin-bottom: 1rem;
}

.automa-index__province,
.automa-index__comuni {
  display: grid;
  gap: var(--automa-index-gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.automa-index__provincia,
.automa-index__comune {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--automa-index-border);
  border-radius: var(--automa-index-radius);
}

.automa-index__provincia a,
.automa-index__comune a {
  text-decoration: none;
  font-weight: 600;
}

.automa-index__targa {
  font-weight: 400;
  opacity: .7;
}

/* Quando la categoria e' cliccabile la targa diventa un link: resta comunque un
   elemento secondario, altrimenti competerebbe col nome della zona (che e' il link
   principale della voce). */
.automa-index__comune a.automa-index__targa {
  font-weight: 400;
  color: inherit;
  border-bottom: 1px dotted currentColor;
}

.automa-index__comune a.automa-index__targa:hover,
.automa-index__comune a.automa-index__targa:focus {
  opacity: 1;
}

.automa-index__count {
  font-size: .85em;
  opacity: .6;
}

/* --- Ricerca e filtri (index-zone.js) ------------------------------------- */

/* `display: grid|inline-block` batterebbe il `display: none` dell'attributo hidden:
   senza questa regola gli elenchi "nascosti" da JS resterebbero visibili. */
.automa-index [hidden] {
  display: none !important;
}

.automa-index__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.automa-index__field {
  display: flex;
  flex: 1 1 220px;
  min-width: 0;
}

.automa-index__field input,
.automa-index__field select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--automa-index-border);
  border-radius: var(--automa-index-radius);
}

/* Con JavaScript attivo i filtri sono istantanei: il submit resta solo come fallback. */
.automa-index--js .automa-index__submit {
  display: none;
}

.automa-index__az {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 1rem;
}

.automa-index__az-item {
  padding: 4px 9px;
  border: 1px solid var(--automa-index-border);
  border-radius: var(--automa-index-radius);
  font-size: .9em;
  text-decoration: none;
}

.automa-index__az-item.is-active {
  border-color: currentColor;
  font-weight: 700;
}

.automa-index__counter {
  margin: 0 0 1rem;
  font-size: .9em;
  opacity: .75;
}

.automa-index__results {
  display: grid;
  gap: var(--automa-index-gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.automa-index__more {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 10px 18px;
  border: 1px solid var(--automa-index-border);
  border-radius: var(--automa-index-radius);
  background: transparent;
  cursor: pointer;
}

.automa-index__note {
  margin-top: 1rem;
  font-size: .85em;
  opacity: .7;
}

/* Le voci oltre la soglia restano nel markup (link crawlabili) ma non vengono
   renderizzate: senza questo, un elenco da migliaia di comuni affossa l'LCP. */
.automa-index__comune {
  content-visibility: auto;
  contain-intrinsic-size: auto 46px;
}

.automa-index__comune.is-hidden {
  display: none;
}

@media (max-width: 640px) {
  .automa-index__province,
  .automa-index__comuni,
  .automa-index__results {
    grid-template-columns: 1fr;
  }
}