/* UniHouse — the list of the points of interest (/punti-di-interesse/, /points-of-interest/), made by
   strumenti/punti_interesse.py. Its <style> lived inside the page with its own sizes (13.6 to 17.6 px) and colours;
   strumenti/correzioni.php takes it out and this file gives the same layout with the values of token.css (2026-10-18):
   text 16, notes and small pills 14, uppercase labels 12, category names on the heading scale.
   Phone: categories that open and close (<details>); computer: two columns of open cards, as asked on 2026-10-07. */

.uhd-avviso { margin: 0; padding: .6rem 1rem; border-radius: 10px; background: var(--oro-chiaro); color: var(--verde-scuro); font-weight: 600; }
.uhd-nota-piede { margin: 0; font-size: var(--t-piccolo); color: var(--muto); }

.uhd-barra { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin: 0 0 .8rem; }
.uhd-barra button {
  font: 600 var(--t-testo)/1.2 var(--testo); color: var(--verde-scuro); background: #fff; border: 2px solid var(--verde-scuro);
  border-radius: 999px; padding: .4rem 1rem; cursor: pointer; min-height: 44px;
}
.uhd-barra button:hover, .uhd-barra button:focus-visible { background: var(--verde-scuro); color: #fff; }
.uhd details { background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); margin: 0 0 .7rem; }
.uhd summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; min-height: 52px; }
.uhd summary::-webkit-details-marker { display: none; }
.uhd summary::after {
  content: ""; flex: 0 0 auto; width: .6rem; height: .6rem; margin-left: auto;
  border-right: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) { .uhd summary::after { transition: transform .15s; } }
.uhd details[open] > summary::after { transform: rotate(-135deg); }
.uhd-cat > summary { font: 800 var(--t-h4)/1.2 var(--titoli); color: var(--verde-scuro); }
.uhd-cat > summary img { flex: 0 0 auto; }
.uhd-tit { display: flex; flex-direction: column; gap: 2px; }
.uhd-meta { display: none; font: 400 var(--t-piccolo)/1.4 var(--testo); color: var(--muto); }
.uhd-conta {
  font: 600 var(--t-etichetta)/1.4 var(--testo); color: var(--verde); background: var(--verde-chiaro);
  border-radius: 999px; padding: 2px 9px; vertical-align: middle;
}
.uhd-cat > .uhd-dentro { padding: 0 .8rem .8rem; }
.uhd-sub { box-shadow: none !important; border: 1px solid var(--riga); border-radius: 10px !important; margin: 0 0 .5rem !important; }
.uhd-sub > summary { font-weight: 600; color: var(--verde); padding: .7rem .9rem; min-height: 46px; }
.uhd ul { list-style: none; margin: 0; padding: 0 .9rem .3rem; }
.uhd li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--riga); }
.uhd li b { grid-column: 1; grid-row: 1; color: var(--verde-scuro); font-weight: 600; line-height: 1.3; }
.uhd-nota { grid-column: 1; grid-row: 2; font-size: var(--t-piccolo); color: var(--muto); line-height: 1.4; }
.uhd-km {
  grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--t-piccolo); font-weight: 600; color: var(--verde);
  background: var(--verde-chiaro); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.uhd-vai {
  grid-column: 2; grid-row: 2; justify-self: end; display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-piccolo); font-weight: 600; color: var(--verde-scuro) !important; background: var(--oro);
  border-radius: 999px; padding: .35rem .8rem; text-decoration: none !important; white-space: nowrap; line-height: 1.2; min-height: 36px;
}
.uhd-vai:hover, .uhd-vai:focus-visible { background: var(--verde-scuro); color: #fff !important; }
.uhd-vai svg { width: 16px; height: 16px; flex: none; }

@media (min-width: 960px) {
  .uhd-barra { display: none; }
  .uhd-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
  .uhd details { margin: 0; }
  .uhd summary { cursor: default; pointer-events: none; }
  .uhd summary::after { display: none; }
  .uhd-cat > summary { padding: 1.2rem 1.4rem .4rem; align-items: flex-start; }
  .uhd-cat > summary img { margin-top: 2px; }
  .uhd-meta { display: block; }
  .uhd-cat > .uhd-dentro { padding: 0 .6rem 1rem; }
  .uhd-sub { border: 0 !important; margin: 0 !important; }
  .uhd-sub > summary { min-height: 0; padding: .8rem .8rem .2rem; font-size: var(--t-etichetta); letter-spacing: .12em; text-transform: uppercase; }
  .uhd ul { padding: 0 .8rem; }
  .uhd li { grid-template-columns: 1fr auto auto; gap: .15rem .6rem; padding: .55rem 0; }
  .uhd-km { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .uhd-vai { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 640px) {
  .uhd-barra button { flex: 1; }
  .uhd summary { padding: .8rem .9rem; }
  .uhd-cat > .uhd-dentro { padding: 0 .5rem .6rem; }
  .uhd ul { padding: 0 .7rem .2rem; }
  .uhd li b, .uhd-nota { grid-column: 1 / -1; }
  .uhd-km { grid-column: 1; grid-row: 3; justify-self: start; }
  .uhd-vai { grid-row: 3; }
}