/* =========================================================
   PROPIEDADES-EXTRA.CSS - NEP PROPIEDADES
   Versión limpia, ordenada y cuidada
   Objetivo:
   - Mantener estética actual
   - Evitar reglas duplicadas
   - Alinear botones "Ver información"
   - No romper responsive
   ========================================================= */


/* =========================================================
   1) FILTROS DE PROPIEDADES
   ========================================================= */

.property-filters {
  padding: 0 6% 36px;
  margin-top: -20px;

  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  position: relative;
  z-index: 9;
}

.property-filters a {
  padding: 14px 22px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;

  color: #fff;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(14px);

  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.04),
    0 0 18px rgba(109,92,255,0.16);

  transition: 0.3s ease;
}

.property-filters a:hover,
.property-filters a.active {
  color: #fff;
  background: linear-gradient(90deg, #ff2fbf, #6d5cff);

  box-shadow:
    0 0 24px rgba(255,47,191,0.52),
    0 0 46px rgba(109,92,255,0.32);
}


/* =========================================================
   2) SECCIÓN GALERÍA / LISTADO
   ========================================================= */

.property-gallery {
  padding: 10px 6% 54px;
  position: relative;
  z-index: 8;
}

.gallery-title {
  margin-bottom: 30px;
  max-width: 760px;
}

.gallery-title span {
  color: #ff4fd8;

  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.gallery-title h2 {
  margin-top: 10px;

  font-size: clamp(32px, 4vw, 54px);
  text-transform: uppercase;
  letter-spacing: -2px;
}

.gallery-title p {
  margin-top: 14px;
  color: #e1e3ef;
  line-height: 1.6;
}


/* =========================================================
   3) GRILLA DE CARDS
   ========================================================= */

.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;

  /*
    Clave:
    Las cards se estiran hasta la altura de la card más alta
    de cada fila. Así el botón puede quedar abajo.
  */
  align-items: stretch;
}


/* =========================================================
   4) CARD GENERAL
   ========================================================= */

.property-card {
  overflow: hidden;
  border-radius: 26px;

  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;

  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.13),
      rgba(255,255,255,0.035)
    );

  border: 1px solid rgba(147,95,255,0.55);
  backdrop-filter: blur(18px);

  box-shadow:
    0 0 40px rgba(90,70,255,0.20),
    inset 0 0 34px rgba(255,255,255,0.04);

  transition: 0.35s ease;
}

.property-card:hover {
  transform: translateY(-9px);
  border-color: rgba(255,62,203,0.82);

  box-shadow:
    0 0 52px rgba(255,62,203,0.32),
    0 0 34px rgba(109,92,255,0.26);
}


/* =========================================================
   5) IMAGEN DE CARD
   ========================================================= */

.property-image {
  position: relative;
  display: block;

  width: 100%;
  height: 240px;
  min-height: 240px;

  overflow: hidden;
}

.property-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  transition: 0.45s ease;
}

.property-card:hover .property-image img {
  transform: scale(1.08);
}

.property-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(to top, rgba(0,0,0,0.72), transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(255,47,191,0.22), transparent 42%);
}

.property-image span {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;

  padding: 8px 14px;
  border-radius: 999px;

  background: linear-gradient(90deg, #6d5cff, #ff2fbf);
  color: #fff;

  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1px;

  box-shadow: 0 0 18px rgba(255,47,191,0.45);
}


/* =========================================================
   6) CINTA VENDIDO / RESERVADO
   ========================================================= */

.property-ribbon {
  position: absolute;

  top: 24px;
  left: -52px;

  width: 200px;
  padding: 12px 0;

  transform: rotate(-35deg);

  text-align: center;

  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;

  z-index: 20;

  box-shadow:
    0 8px 20px rgba(0,0,0,.35);
}

.property-ribbon.vendido {
  background:
    linear-gradient(
      90deg,
      #dc2626,
      #ef4444
    );
}

.property-ribbon.reservado {
  background:
    linear-gradient(
      90deg,
      #d97706,
      #f59e0b
    );
}


/* =========================================================
   7) CONTENIDO DE CARD
   ========================================================= */

.property-info {
  padding: 24px;

  display: flex;
  flex-direction: column;
  flex: 1;

  gap: 12px;
}

/*
  Orden interno:
  1 - Precio
  2 - Título
  3 - Ubicación
  4 - Datos
  5 - Botón

  Así, aunque falten datos, no se desordena visualmente.
*/

.property-info strong,
.property-price {
  order: 1;

  display: block;
  min-height: 34px;
  margin: 0;

  color: #fff;
  font-size: 20px;
  font-weight: 950;

  text-shadow: 0 0 16px rgba(255,47,191,0.40);
}

/*
  Si una propiedad NO tiene precio y el PHP no imprime <strong>,
  este espacio fantasma mantiene alineadas las demás cards.
  Funciona en Chrome, Edge y Safari actuales.
*/
.property-info:not(:has(> strong))::before {
  content: "";
  order: 1;
  display: block;
  min-height: 34px;
}

.property-info h3 {
  order: 2;

  min-height: 58px;
  max-height: 58px;
  margin: 0;

  color: #fff;
  font-size: 23px;
  line-height: 1.1;
  text-transform: uppercase;

  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.property-info p {
  margin: 0;
  color: #dfe2f0;
}

.property-info p i {
  color: #ff4fd8;
  margin-right: 6px;
}


/* =========================================================
   8) UBICACIÓN / GOOGLE MAPS
   ========================================================= */

.property-location {
  order: 3;

  min-height: 52px;
  margin: 0;

  display: flex;
  align-items: center;
}

/*
  Si una propiedad NO tiene ubicación, reserva el espacio.
  Así no salta la fila de características.
*/
.property-info:not(:has(.property-location))::after {
  content: "";
  order: 3;
  display: block;
  min-height: 52px;
}

.google-maps-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: #ea4335;

  text-decoration: none;
  font-size: 20px;

  box-shadow: 0 4px 10px rgba(0,0,0,.10);

  transition: .2s;
}

.google-maps-icon:hover {
  transform: scale(1.08);
}


/* =========================================================
   9) DATOS / BADGES
   ========================================================= */

.property-data {
  order: 4;

  min-height: 86px;
  max-height: 86px;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 9px;

  overflow: hidden;
}

.property-data span {
  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.11);

  color: #f0f1f8;
  font-size: 12px;
  font-weight: 850;
}

.property-data i {
  color: #ff4fd8;
  margin-right: 4px;
}


/* =========================================================
   10) BOTÓN VER INFORMACIÓN
   ========================================================= */

.property-info .btn {
  order: 5;

  width: 100%;
  margin-top: auto;

  align-self: stretch;
}


/* =========================================================
   11) SIN PROPIEDADES
   ========================================================= */

.empty-properties {
  grid-column: 1 / -1;

  padding: 40px;
  border-radius: 24px;

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(16px);
}

.empty-properties h3 {
  margin-bottom: 10px;

  font-size: 26px;
  text-transform: uppercase;
}

.empty-properties p {
  color: #dfe2f0;
}


/* =========================================================
   12) RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .properties-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-image {
    height: 220px;
    min-height: 220px;
  }
}


/* =========================================================
   13) RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .property-filters {
    padding: 0 4% 28px;
    margin-top: -10px;
  }

  .property-gallery {
    padding: 10px 4% 42px;
  }

  .properties-grid {
    grid-template-columns: 1fr;
  }

  .property-image {
    height: 220px;
    min-height: 220px;
  }

  .property-info {
    padding: 22px;
  }

 
  .property-data {
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  .property-info:not(:has(> strong))::before {
    min-height: 0;
  }

  .property-info:not(:has(.property-location))::after {
    min-height: 0;
  }
}


/* =========================================================
   14) ACCESIBILIDAD / TÁCTILES
   ========================================================= */

@media (hover: none) {
  .property-card:hover {
    transform: none;
  }

  .property-card:hover .property-image img {
    transform: none;
  }
}
/* =========================================================
   BOTÓN PEGADO ABAJO DE LA CARD
   ========================================================= */

.property-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.property-info{
  display:flex;
  flex-direction:column;
  flex:1;
}

.property-info .btn{
  margin-top:auto;
  width:100%;
}
/* =========================================================
   TODAS LAS CARDS MISMA ALTURA
   ========================================================= */

.properties-grid{
  align-items:stretch;
}

.property-card{

  display:flex;

  flex-direction:column;

  height:100%;

  min-height:720px;
}

/* contenido interno */
.property-info{

  display:flex;

  flex-direction:column;

  flex:1;
}

/* botón abajo */
.property-info .btn{

  margin-top:auto;
}