/* ============================================================
   ANVIL · Projects — ADS v2 OPERATIVO (registro de activos).
   Layout de documento técnico: title-block + KPIs + filtros +
   fichas (plates) + ledger + CTA. Componentes reutilizables en
   v2-components.css (clases v2-*); aquí solo el layout de página.
   ============================================================ */

/* Cuerpo operativo (registro de activos) bajo el hero cinemático (div-hero) */
.pjx {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-9);
}

/* Galería horizontal de fichas (recuperada de la versión online; pin GSAP vía data-hscroll,
   fallback a scroll horizontal nativo). Colores adaptados a roles v2. */
.gallery { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery.is-pinned { overflow: hidden; height: 100vh; display: flex; align-items: center; }
.gallery-track { display: flex; gap: 28px; padding: 0 64px; width: max-content; will-change: transform; }
.gallery-track .asset-card { width: 440px; flex: 0 0 auto; grid-column: auto; }
.gallery-intro { flex: 0 0 auto; width: 360px; align-self: center; padding-right: 16px; }
.gallery-intro .gi-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-lo); margin-bottom: 18px; }
.gallery-intro .gi-title { font-size: clamp(28px, 3.6vw, 48px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink-hi); }
.gallery-intro .gi-sub { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--ink-mid); }
.gallery-intro .gi-hint { margin-top: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-info); }

/* Foto real de la ficha (proyecto con imagen): cubre el placeholder, queda bajo el
   overlay (tag/coord) y las esquinas; scrim sutil para legibilidad sobre la foto. */
.asset-card.has-photo .ac-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 1; display: block;
}
.asset-card.has-photo .ac-image::before,
.asset-card.has-photo .ac-image::after { display: none; }
.asset-card.has-photo .ac-corner { z-index: 2; }
.asset-card.has-photo .ac-overlay {
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0.42), transparent 26%, transparent 64%, rgba(0,0,0,0.5));
}

/* Coordenada clicable → Google Maps (solo proyectos con ubicación real) */
a.ac-coord-link { cursor: pointer; text-decoration: none; transition: color var(--motion-ui); }
a.ac-coord-link:hover { color: var(--signal); }
a.ac-coord-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ac-coord-ext { font-size: 0.9em; opacity: 0.65; }
a.ac-coord-link:hover .ac-coord-ext { opacity: 1; }

/* Foto de la ficha en blanco y negro; recupera color al pasar el cursor sobre la
   imagen (solo dispositivos con hover; en táctil se ve siempre a color). */
@media (hover: hover) and (pointer: fine) {
  .asset-card.has-photo .ac-photo { filter: grayscale(1) contrast(1.03); transition: filter 520ms var(--ease-out); }
  .asset-card.has-photo .ac-image:hover .ac-photo { filter: grayscale(0) contrast(1); }
}

/* Instrumentación */
.pjx-kpis { margin-bottom: var(--space-5); }

@media (max-width: 900px) {
  .gallery.is-pinned { height: auto; overflow-x: auto; display: block; }
  .gallery-track { padding: 0 32px; }
  .gallery-track .asset-card { width: 300px; }
  .gallery-intro { width: 240px; }
}

/* Filtros */
.pjx-filters { margin-bottom: var(--space-6); gap: var(--space-2); }
.pjx-count { font-size: 10px; letter-spacing: 0.12em; }

/* Fichas técnicas */
.pjx-plates { margin-bottom: var(--space-7); align-items: stretch; }
.pjx-plates .v2-plate { display: flex; flex-direction: column; }
.pjx-plates .pbd { display: flex; flex-direction: column; flex: 1; }
.pjx-coord { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.pjx-pname { font-size: 20px; letter-spacing: -0.01em; color: var(--ink-hi); margin: 8px 0 0; }
.pjx-blurb {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 400;
  line-height: 1.6; color: var(--ink-lo); margin-top: 8px;
}
.pjx-pfoot { margin-top: auto; padding-top: var(--space-4); }

/* Ledger */
.pjx-ledger { margin: var(--space-7) 0; }
.pjx-tbl-wrap { overflow-x: auto; }
.pjx-scope {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-lo); white-space: nowrap;
}

/* CTA */
.pjx-cta { margin-top: var(--space-6); }
.pjx-cta-bd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.pjx-cta-lead { font-size: 9.5px; letter-spacing: 0.14em; }
.pjx-cta-title {
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 300;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-hi); margin-top: 10px; max-width: 24ch;
}
.pjx-cta-actions { gap: var(--space-3); }

@media (max-width: 760px) {
  .pjx { padding: 96px var(--space-4) var(--space-8); }
  .pjx-cta-bd { flex-direction: column; align-items: flex-start; }
}