/* Holguin Collection — slider "Architectural Details" de Construction Management.
   Reemplaza el modulo Builder Slider Pro del tema: ese dependia de una cadena de
   3-4 archivos JS de terceros cargados de forma asincrona vía un evento lazy
   ("builder_load_module_partial") que en el sitio real nunca termina de dispararse
   con fiabilidad — resultado: los 23 slides quedaban todos visibles a la vez,
   superpuestos (visible tanto en produccion como en esta copia antes del arreglo).
   Este slider es vanilla JS propio, sin dependencias externas, se inicializa de
   forma sincrona al cargar la pagina. */

/* La grilla del tema (.row_inner{grid-template-columns:repeat(auto-fit,minmax(1%,1fr))})
   colapsa la fila y su .module_column al ancho minimo (~1%, unos 60px) cuando
   la fila no trae una regla especifica de esa pagina que fije el numero de
   columnas (eso pasaba en las paginas originales via CSS generado por fila,
   que no existe para las filas que reemplazamos). Forzamos ambos niveles. */
.row_inner:has(> .module_column > .hc-slider-module) {
  grid-template-columns: 1fr !important;
}
.module_column:has(> .hc-slider-module) {
  width: 100% !important;
}
.hc-slider-module {
  display: block;
  width: 100%;
}
.hc-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1a1a;
}
.hc-slider .hc-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 1;
}
.hc-slider .hc-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hc-slider .hc-slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 56px 40px;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
  color: #fff;
  text-align: left;
}
/* Tipografia identica a la del sitio original, verificada por CSSOM contra
   holguincollection.com (no aproximada): el h3 hereda font-size:1.7em y
   line-height/letter-spacing/margin de la regla generica "h1,h2,h3,h4,h5,h6"
   del tema, pero font-family "Open Sans" y font-weight 300 de una regla
   especifica de esta instancia del slider. El parrafo usa el body text del
   sitio (Montserrat 400 16px/1.75em) sin ningun override propio. */
.hc-slider .hc-slide-caption h3 {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.7em;        /* 27.2px con raiz de 16px, igual que el original */
  line-height: 1.4em;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: #fff;   /* la regla generica "h1,h2,h3{color:#000}" del tema gana sobre la
                    herencia si no se fija aqui explicitamente */
}
.hc-slider .hc-slide-caption p {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75em;
  margin: 0 0 1.3em;
  max-width: 480px;
}

.hc-slider .hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20,20,20,.45);
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.hc-slider .hc-arrow:hover { background: rgba(20,20,20,.65); }
.hc-slider .hc-arrow-prev { left: 18px; }
.hc-slider .hc-arrow-next { right: 18px; }

.hc-slider .hc-dots {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 60px;
}
.hc-slider .hc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.hc-slider .hc-dot:hover { background: rgba(255,255,255,.75); }
.hc-slider .hc-dot.is-active { background: #fff; transform: scale(1.25); }

@media (max-width: 680px) {
  /* mismo breakpoint y mismo valor que "h3{font-size:1.35em}" en el sitio original */
  .hc-slider .hc-slide-caption h3 { font-size: 1.35em; }
  .hc-slider .hc-slide-caption { padding: 28px 24px 24px; }
  .hc-slider .hc-arrow { width: 38px; height: 38px; font-size: 16px; }
  .hc-slider .hc-arrow-prev { left: 10px; }
  .hc-slider .hc-arrow-next { right: 10px; }
  .hc-slider .hc-dots { padding: 0 44px; bottom: 10px; }
}

/* Lightbox: se abre al click sobre un slide cuando trae data-full.
   Standalone, un solo overlay compartido por pagina. */
.hc-slider-zoomable .hc-slide { cursor: zoom-in; }

.hc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 10, 10, .94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-lightbox[hidden] { display: none; }
body.hc-lightbox-open { overflow: hidden; }

.hc-lightbox-figure {
  margin: 0;
  max-width: min(900px, 78vw);
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hc-lightbox-img {
  max-width: min(900px, 78vw);
  max-height: 62vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.hc-lightbox-caption {
  display: none;
}

.hc-lightbox-counter {
  position: absolute;
  top: 22px;
  left: 28px;
  color: #ddd;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
}

.hc-lightbox-close {
  position: absolute;
  top: 14px;
  right: 22px;
  background: none;
  border: 0;
  color: #eee;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  transition: color .2s;
}
.hc-lightbox-close:hover { color: #fff; }

.hc-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #ddd;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 10px 16px;
  transition: color .2s;
}
.hc-lightbox-arrow:hover { color: #fff; }
.hc-lightbox-prev { left: 8px; }
.hc-lightbox-next { right: 8px; }

.hc-lightbox-share {
  position: absolute;
  right: 24px;
  bottom: 20px;
  display: flex;
  gap: 14px;
}
.hc-lightbox-share-btn {
  width: 18px;
  height: 18px;
  color: #bbb;
  opacity: .85;
  transition: color .2s, opacity .2s;
}
.hc-lightbox-share-btn svg { width: 100%; height: 100%; fill: currentColor; }
.hc-lightbox-share-btn:hover { color: #fff; opacity: 1; }

/* Miniaturas fuera de un .hc-slider (ej. tile del modulo Purple Label) que
   abren el lightbox directamente en vez de navegar a otra pagina. */
.hc-lightbox-trigger.hc-lightbox-zoomable {
  cursor: zoom-in;
}

@media (max-width: 680px) {
  .hc-lightbox-counter { top: 14px; left: 16px; font-size: 12px; }
  .hc-lightbox-close { top: 6px; right: 10px; font-size: 28px; }
  .hc-lightbox-arrow { font-size: 30px; padding: 8px 10px; }
  .hc-lightbox-img { max-height: 68vh; }
  .hc-lightbox-share { right: 14px; bottom: 12px; gap: 10px; }
  .hc-lightbox-share-btn { width: 16px; height: 16px; }
}