/*
Theme Name: ListingHive Child
Template: listinghive
Version: 1.0
*/

/* ============================================================
   LISTADOS: ocultar sidebar + full width
   ============================================================ */
.hp-page__sidebar.site-sidebar { display: none !important; }

.hp-page__content,
.hp-page__content.hp-col-sm-8,
.hp-page__content.hp-col-xs-12 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.hp-page__container,
.hp-row { flex-wrap: wrap !important; }

/* ============================================================
   GRID: TODAS LAS CATEGORÍAS (archive tax)
   Desktop 3 / Tablet 2 / Móvil 1
   ============================================================ */
@media (min-width: 1024px){
  body.archive.tax-hp_listing_category .hp-listings.hp-grid .hp-grid__item{
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px){
  body.archive.tax-hp_listing_category .hp-listings.hp-grid .hp-grid__item{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 767px){
  body.archive.tax-hp_listing_category .hp-listings.hp-grid .hp-grid__item{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   LOGOS EN CARDS (TODAS LAS VISTAS “view-block”, INCLUYE RELATED)
   - rectangular
   - sin círculo
   - alto uniforme
   ============================================================ */
.hp-listing--view-block .hp-listing__image{
  height: 90px !important;
  overflow: hidden !important;
}

.hp-listing--view-block .hp-listing__image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;   /* <- NO círculo */
  background: #fff !important;
}

/* ============================================================
   SINGLE LISTING:
   - Descripción arriba
   - Galería abajo
   ============================================================ */
body.single-hp_listing .hp-page__content{
  display: flex !important;
  flex-direction: column !important;
}

body.single-hp_listing .hp-listing__description{ order: 10 !important; }
body.single-hp_listing .hp-listing__images{ order: 20 !important; }

body.single-hp_listing .hp-listing__description{
  margin: 18px 0 10px !important;
}
body.single-hp_listing .hp-listing__images{
  margin: 6px 0 0 !important;
  padding: 0 !important;
}

/* ============================================================
   SINGLE LISTING: arreglar el “VACÍO” del slider (slick)
   El espacio viene del alto de la slide/track, no de margen.
   ============================================================ */

/* Centrar y achicar el área del slide */
body.single-hp_listing .hp-listing__images .slick-track{
  display: flex !important;
  align-items: center !important;
}

body.single-hp_listing .hp-listing__images .slick-slide{
  height: auto !important;
}

body.single-hp_listing .hp-listing__images .slick-slide > div{
  height: auto !important;
}

/* Imagen principal: límite razonable y centrada */
body.single-hp_listing .hp-listing__images img{
  width: 100% !important;
  height: auto !important;
  max-height: 360px !important;   /* <- baja el “bloque enorme” */
  object-fit: contain !important;
  background: #fff !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Pegarlas: miniaturas/dots más cerca de la imagen */
body.single-hp_listing .hp-listing__images .slick-dots,
body.single-hp_listing .hp-listing__images .slick-thumbs{
  margin-top: 10px !important;
}

/* Por si el wrapper mete padding/alto mínimo */
body.single-hp_listing .hp-listing__images,
body.single-hp_listing .hp-listing__images .slick-list{
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

/* SINGLE LISTING: ocultar tira de miniaturas (galería inferior) y dejar solo la imagen principal */
body.single-hp_listing .hp-listing__images .slick-dots,
body.single-hp_listing .hp-listing__images ul.slick-dots,
body.single-hp_listing .hp-listing__images .slick-arrow,
body.single-hp_listing .hp-listing__images .slick-thumbs,
body.single-hp_listing .hp-listing__images .slick-thumbnails,
body.single-hp_listing .hp-listing__images .hp-listing__thumbnails,
body.single-hp_listing .hp-listing__images .hp-carousel__nav,
body.single-hp_listing .hp-listing__images .hp-slider__nav {
  display: none !important;
}









/* SINGLE LISTING: ocultar barra de miniaturas bajo la imagen (HivePress carousel) */
body.single-hp_listing .hp-listing__images [class*="thumbn"],
body.single-hp_listing .hp-listing__images [class*="thumbs"],
body.single-hp_listing .hp-listing__images [class*="nav"],
body.single-hp_listing .hp-listing__images [class*="dots"],
body.single-hp_listing .hp-listing__images [class*="pager"]{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}








/* Evitar “flash” (FOUC): no mostrar el bloque hasta que tenga layout correcto */
body.single-hp_listing .hp-listing__images{
  overflow:hidden !important;
  max-height: 520px;           /* desktop */
}
@media (max-width: 767px){
  body.single-hp_listing .hp-listing__images{
    max-height: 320px;         /* mobile */
  }
}

/* Asegurar que las imágenes no “revienten” el alto mientras carga */
body.single-hp_listing .hp-listing__images img{
  max-height: 520px;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
@media (max-width: 767px){
  body.single-hp_listing .hp-listing__images img{
    max-height: 320px;
  }
}










/* SINGLE LISTING: bajar el alto del bloque de imágenes y eliminar el “vacío” */
body.single-hp_listing .hp-listing__images{
  max-height: 260px !important;   /* desktop */
  margin: 10px 0 20px !important; /* menos aire */
}

body.single-hp_listing .hp-listing__images img{
  max-height: 260px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display:block !important;
}

@media (max-width: 767px){
  body.single-hp_listing .hp-listing__images{
    max-height: 180px !important; /* mobile */
    margin: 10px 0 15px !important;
  }
  body.single-hp_listing .hp-listing__images img{
    max-height: 180px !important;
  }
}














/* ================================
   SINGLE LISTING: HERO + "VER IMÁGENES"
   - Muestra SOLO la 1ª imagen (hero)
   - Oculta la tira/miniaturas
   - Agrega texto "VER IMÁGENES" sobre la imagen
   - Reduce el “salto”/espacio raro del carrusel
================================== */

/* Contenedor del carrusel en la ficha */
.hp-listing--view-page .hp-listing__images{
  position: relative !important;
  margin-top: 14px !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Si el theme mete wrappers tipo slick, evitamos alturas gigantes */
.hp-listing--view-page .hp-listing__images .slick-list,
.hp-listing--view-page .hp-listing__images .slick-track{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* MOSTRAR SOLO LA PRIMERA IMAGEN */
.hp-listing--view-page .hp-listing__images img{
  display: none !important;
}
.hp-listing--view-page .hp-listing__images img:first-of-type{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 420px !important;   /* ajustá a gusto */
  object-fit: contain !important;
  background: #fff !important;
  cursor: zoom-in !important;     /* sugiere que abre visor */
}


/* Etiqueta "VER IMÁGENES" centrada (el click real es sobre la imagen) */
.hp-listing--view-page .hp-listing__images::after{
  content: "VER IMÁGENES" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.65) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  font-size: 13px !important;

  pointer-events: none !important; /* no bloquea el click */
  z-index: 50 !important;
}



/* Mobile: hero un poco más bajo */
@media (max-width: 767px){
  .hp-listing--view-page .hp-listing__images img:first-of-type{
    max-height: 260px !important;
  }
}













/* === RESTAURAR "COLUMNA DERECHA" PERO ABAJO (single listing) === */
body.single-hp_listing .hp-page__sidebar.site-sidebar{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  order:30 !important;         /* debajo de imagen/descripcion */
  margin:18px 0 0 !important;
}

body.single-hp_listing .hp-page__content{
  order:10 !important;
}

/* Related (footer) queda después */
body.single-hp_listing .hp-page__footer{
  order:40 !important;
}


/* Tamaño del mapa en la ficha */
body.single-hp_listing .hp-listing__map{
  height: 320px !important;   /* cambiá este valor */
  max-height: 320px !important;
  margin-top: 12px !important;
}

/* Mobile */
@media (max-width: 767px){
  body.single-hp_listing .hp-listing__map{
    height: 240px !important;
    max-height: 240px !important;
  }
}













/* ============================================================
   SINGLE LISTING: BOTONES (Sitio web / WhatsApp / Contactar / etc.)
   - más angostos
   - menos alto
   - no full width
   ============================================================ */

body.single-hp_listing .hp-listing__actions .hp-button,
body.single-hp_listing .hp-listing__actions a.hp-button,
body.single-hp_listing .hp-listing__sidebar .hp-button,
body.single-hp_listing .hp-listing__sidebar a.hp-button {
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 14px !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Que no queden pegados si van uno debajo del otro */
body.single-hp_listing .hp-listing__actions .hp-button + .hp-button,
body.single-hp_listing .hp-listing__sidebar .hp-button + .hp-button{
  margin-top: 8px !important;
}





/* Opcional: 2 columnas para botones */
body.single-hp_listing .hp-listing__actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body.single-hp_listing .hp-listing__actions .hp-button{
  width: 100% !important; /* 100% dentro de cada celda (pero ya no full width de la página) */
}










/* =========================================
   FICHA: botones más angostos (no full width)
   ========================================= */

body.single-hp_listing .hp-listing__details .hp-button{
  width: auto !important;
  min-width: unset !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 1.1 !important;
}

/* Espacio entre botones */
body.single-hp_listing .hp-listing__details .hp-button + .hp-button{
  margin-top: 8px !important;
}




body.single-hp_listing .hp-listing__details{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body.single-hp_listing .hp-listing__details .hp-button{
  width: 100% !important;
}









/* ================================
   BOTONES DE CONTACTO – COMPACTOS
   ================================ */

body.single-hp_listing .hp-field--button a{
  width: auto !important;
  display: inline-flex !important;
  padding: 8px 16px !important;
  min-width: unset !important;
  line-height: 1.2 !important;
}

/* Centrar el bloque y que no estiren */
body.single-hp_listing .hp-field--button{
  text-align: center !important;
}

/* ================================
   FICHA: botones de contacto angostos
   (WhatsApp / Sitio web / Contactar / LinkedIn)
================================ */

/* El bloque donde aparecen los botones */
body.single-hp_listing .hp-listing__content a{
  width: auto !important;
}

/* Sólo los links que se ven como “botón” (bloques de color) */
body.single-hp_listing .hp-listing__content a[role="button"],
body.single-hp_listing .hp-listing__content a[class*="button"],
body.single-hp_listing .hp-listing__content a[class*="hp-button"]{
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 16px !important;
  line-height: 1.15 !important;
}

/* Centrar el grupo (para que no quede raro al achicar) */
body.single-hp_listing .hp-listing__content{
  text-align: center !important;
}




/* ================================
   Botones angostos (no full-width)
   WhatsApp / Sitio web / Contactar / LinkedIn
================================ */

/* Wrapper: que el contenido quede centrado */
.hp-listing__attributes--primary{
  text-align: center !important;
}

/* Links-botón */
.hp-whatsapp-btn,
.hp-web-btn,
.hp-linkedin-btn{
  display: inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 10px 16px !important;
  line-height: 1.15 !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Botón "Contactar" (es <button>) */
#hpContactWrap{
  text-align: center !important;
}
#hpContactWrap .hp-contact-open-btn{
  display: inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 10px 16px !important;
  line-height: 1.15 !important;
  justify-content: center !important;
  align-items: center !important;
}

/* (Opcional) si también querés angosto el botón grande de acciones */
.hp-listing__actions--primary .hp-listing__action{
  display: inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
}



/* Toque final: misma altura, separación y “pill” */
.hp-whatsapp-btn,
.hp-web-btn,
#hpContactWrap .hp-contact-open-btn,
.hp-linkedin-btn{
  border-radius: 999px !important;
  min-height: 36px !important;
  gap: 8px !important;
  margin: 6px auto !important;   /* separa y centra */
}

/* Evita que el contenedor los estire */
.hp-listing__attributes--primary .hp-listing__attribute{
  justify-content: center !important;
}


/* Ocultar el botón amarillo "Contactar" (HivePress message button) */
button.hp-listing__action--message,
.hp-listing__actions button.hp-listing__action--message{
  display: none !important;
}











.hp-listing__actions,
.hp-listing__action--message,
.hp-listing__message,
.hp-listing__footer .hp-icon-chat,
.hp-listing__footer .hp-button--message {
    display: none !important;
}


/* Centrar logo / imagen destacada en las cards */
.hp-listing__image,
.hp-listing__image img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

.hp-listing__image img {
    object-fit: contain;
}


/* Marco (área del logo) más grande */
.hp-listing__thumbnail,
.hp-listing__image{
  height: 220px !important;     /* SUBÍ/BAJÁ esto */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Logo grande SIN deformar */
.hp-listing__thumbnail img,
.hp-listing__image img{
  width: auto !important;
  height: auto !important;
  max-height: 180px !important; /* SUBÍ/BAJÁ esto */
  max-width: 90% !important;
  object-fit: contain !important;
}





/* Centrar verticalmente el bloque del logo */
.hp-listing__image,
.hp-listing__thumbnail {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



























/* AGRANDAR EL BLOQUE DEL LOGO COMPLETO (marco + imagen) */
.hp-listing__image{
  transform: scale(2.5) !important;   /* probá 1.4, 1.6, 2.0 */
  transform-origin: top center !important;
}




/* Quitar la máscara redondeada que dibuja ListingHive sobre la imagen */
.hp-listing__image::before,
.hp-listing__image::after,
.hp-listing__thumbnail::before,
.hp-listing__thumbnail::after {
    border-radius: 0 !important;
    content: none !important;
    display: none !important;
}

/* Forzar contenedores y imagen a esquinas rectas */
.hp-listing__image,
.hp-listing__thumbnail,
.hp-listing__image > a,
.hp-listing__image img {
    border-radius: 0 !important;
    overflow: visible !important;
}