/* ============================================================================
   Alias de dos clases del sistema cuyo NOMBRE lleva vocabulario prohibido
   ============================================================================
   La maqueta aprobada llama a sus tarjetas de unidad `card-property` y a su
   rejilla `pi-propiedades`. Los dos nombres contienen palabras que en Filipinas
   está prohibido, con multa, dar a entender en material que ve el cliente
   ("property", "propiedad"), y la comprobación automática de vocabulario no
   distingue un nombre de clase de un texto visible: suspende igual.

   Aquí se declaran los mismos estilos con nombre limpio (`card-unidad`,
   `pi-unidades`), que es lo que usan las pantallas. Las originales NO se tocan:
   la copia rescatada de la maqueta las sigue usando, y su valor es ser
   exactamente lo que está publicado.

   OJO AL REGENERAR: los envoltorios `@media` (las reglas que solo aplican por
   debajo de cierto ancho de pantalla) se conservan. La primera versión de este
   archivo los perdió, y las tres variantes de la rejilla se aplicaron todas a
   la vez: ganaba la última y las tarjetas salían siempre en una sola columna,
   también en pantalla ancha.

   Se genera con `_scripts/generar-alias-unidades.py`, que lee TODAS las hojas
   del sistema: el estilo de un componente vive repartido entre varias.
   ========================================================================== */

/* ============ 13 · card-unidad ============ */
.property-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.card-unidad {
  display: grid; gap: 14px; align-content: start;
  background: var(--surface); border-radius: var(--r-lg);
  padding: 14px 14px 20px; box-shadow: var(--sh-1);
  text-decoration: none; color: inherit; position: relative;
}
.card-unidad:hover { box-shadow: var(--sh-2); }
.card-unidad .media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.card-unidad .media img { width: 100%; height: 100%; object-fit: cover; }
.card-unidad .media .tag-pill { position: absolute; top: 12px; left: 12px; }
.card-unidad .media .render-note { position: absolute; bottom: 12px; right: 12px; }
.card-unidad h3 { font: 600 22px/1.2 var(--font-display); margin: 0; padding-inline: 8px; }
.card-unidad .meta { font: 400 14px/1.5 var(--font-body); color: var(--text-muted); padding-inline: 8px; margin: 0; }
.card-unidad .card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 8px; margin-top: 4px;
}
.card-unidad .price { font: 600 16px/1.2 var(--font-body); }
.card-unidad--featured { grid-row: span 1; }
/* Tarjeta de propiedad usada como BOTÓN de selección: el componente de la
   web es un enlace, y aquí elige unidad. Se le quita el aspecto de botón
   del navegador y se le pone el contorno de selección del sistema. */
button.card-unidad {
  border: 0; font: inherit; text-align: left; width: 100%; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
button.card-unidad:hover { transform: translateY(-2px); }
button.card-unidad[aria-pressed="true"] { outline: 2px solid var(--brand); outline-offset: -2px; }
button.card-unidad[aria-pressed="true"] .card-foot .btn-circle {
  background: var(--brand-fill); color: var(--brand-contrast);
}
.card-unidad .pi-dato { padding-inline: 8px; }
/* Rejilla de propiedades dentro de una vista de tablero: tres columnas en
   pantalla ancha, dos en portátil, una en móvil. */
.pi-unidades { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .pi-unidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pi-unidades { grid-template-columns: minmax(0, 1fr); } }
/* La tarjeta de propiedad se usa aquí dentro de un botón, así que sus piezas
   son span y no div ni h3: hay que devolverles el bloque y el tamaño que el
   componente les da por etiqueta en la web. */
.card-unidad .media { display: block; }
.card-unidad .pi-unidad__t {
  display: block; font: 600 22px/1.2 var(--font-display);
  padding-inline: 8px; letter-spacing: -.01em;
}
.card-unidad .meta { display: block; }
.card-unidad .pi-dato { font-size: 13px; }
/* Tarjetas de unidad a la misma altura: el pie se pega abajo aunque la
   descripción de una sea más corta que la de su vecina. */
button.card-unidad { display: flex; flex-direction: column; gap: 14px; }
button.card-unidad .card-foot { margin-top: auto; }