/* Páginas del directorio — trufa.pet/directorio/…
 *
 * Fichero aparte y no un añadido a site.css a propósito: site.css se sirve con
 * `?v=` y tocarlo obliga a subir esa versión en cada HTML que lo enlaza,
 * además de que el borde ya tiene guardada la anterior. Un fichero nuevo
 * no tiene ese problema.
 *
 * Usa las variables de site.css (--ink, --page, --line, --coral…), así que el
 * tema claro/oscuro sale gratis. */

.dir {
  padding-block: clamp(1.5rem, 4vw, 3rem);
  max-width: 62rem;
}

/* ------------------------------------------------------------ migas */

.dir__crumbs {
  font-size: .8125rem;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
  /* Se desbordan en un móvil estrecho en cuanto el municipio es
     «Santa Cruz de Tenerife»: mejor que rompan de línea que que empujen. */
  line-height: 1.9;
}

.dir__crumbs a { color: var(--ink-muted); text-decoration: none; }
.dir__crumbs a:hover { color: var(--coral-deep); text-decoration: underline; }

/* ------------------------------------------------------------ cabecera */

.dir__head { margin-bottom: 2rem; }
.dir__head h1 { margin: .35rem 0 .75rem; }

/* ------------------------------------------------------------ la lista */

.dir__list {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.dir__item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem;
  background: var(--surface);
}

.dir__item h3 {
  margin: 0 0 .35rem;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.dir__addr {
  margin: 0 0 .5rem;
  color: var(--ink-muted);
  font-size: .9375rem;
}

.dir__links {
  margin: .6rem 0 0;
  font-size: .9375rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
}

.dir__links a { color: var(--coral-deep); font-weight: 600; text-decoration: none; }
.dir__links a:hover { text-decoration: underline; }

/* La atribución de una ficha concreta de OSM. Pequeña pero presente: el pie
 * atribuye el sitio entero, y esto dice cuál de las dos fuentes es esta fila,
 * que es lo que la ODbL necesita cuando la página mezcla las dos. */
.dir__src {
  display: block;
  margin-top: .55rem;
  font-size: .75rem;
  color: var(--ink-muted);
  opacity: .85;
}

/* ------------------------------------------------------------ horario */

.dir__hours {
  margin: .5rem 0 0;
  font-size: .875rem;
  color: var(--ink-muted);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .75rem;
}

.dir__hours > div { display: contents; }
.dir__hours dt { font-weight: 600; }
.dir__hours dd { margin: 0; }

/* ------------------------------------------------------------ índices */

.dir__index {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .35rem 1.5rem;
}

.dir__index li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.dir__index a { color: var(--ink); text-decoration: none; }
.dir__index a:hover { color: var(--coral-deep); text-decoration: underline; }
.dir__index span { color: var(--ink-muted); font-size: .875rem; }

/* ------------------------------------------------------------ pie de página */

.dir__cta {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  background: var(--alt, var(--surface));
}

.dir__cta h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
.dir__cta p { margin: 0 0 1rem; color: var(--ink-muted); }
.dir__cta p:last-child { margin-bottom: 0; }

/* Los tres botones en fila, y en columna cuando no caben. `flex-wrap` y no
   un ancho fijo: «Abrir Trufa» y «Android» no miden lo mismo y forzarlos a
   la misma anchura deja el texto pegado a los bordes en pantallas estrechas. */
.dir__stores { display: flex; flex-wrap: wrap; gap: .625rem; }

/* Reclamar la ficha le interesa al negocio, no a quien busca veterinario, que
   es quien llega aquí desde Google. Va como nota al pie, no como botón. */
.dir__claim { margin-bottom: 2.5rem; }
.dir__claim h2 { font-size: 1rem; margin: 0 0 .35rem; }
.dir__claim p { margin: 0; color: var(--ink-muted); font-size: .9375rem; }
.dir__claim a { color: var(--coral-deep); font-weight: 600; }

.dir__also { margin-bottom: 2rem; }
.dir__also h2 { font-size: 1rem; margin: 0 0 .5rem; }
.dir__also p { margin: 0; line-height: 2; color: var(--ink-muted); }
.dir__also a { color: var(--ink-muted); }
.dir__also a:hover { color: var(--coral-deep); }