/* ============================================================
   Argency — Archivo de Casos (portfolio)
   Tema oscuro como el home / casos. Hereda tokens, fuentes, nav,
   menú y footer de styles.css; usa .pj-figure (mask reveal) de project.css.
   Layout editorial escalonado; las imágenes se revelan con máscara al hacer
   scroll (project.js → [data-mask]).
   ============================================================ */

.cases { padding-bottom: var(--space-160); }

/* ---- Cabecera ---------------------------------------------- */
.cases-head {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 28ch);
  align-items: end;
  gap: var(--space-64);
  padding-top: calc(var(--space-120) + var(--space-48));
}
.cases-head__eyebrow { display: block; margin-bottom: var(--space-20); }
.cases-head__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -2px;
  margin: 0;
}
.cases-head__lead {
  color: var(--light-64);
  font-size: 16px;
  line-height: 1.5;
  max-width: 30ch;
}
.cases-divider {
  height: 1px;
  background: var(--light-16);
  margin-top: var(--space-48);
  margin-bottom: var(--space-100);
  transform-origin: left center;
}

/* ---- Grilla escalonada (12 columnas) ----------------------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-64) var(--space-40);
  align-items: start;
}

.case { display: block; color: inherit; text-decoration: none; }
.case .pj-figure {
  width: 100%;
  transition: transform 0.55s var(--ease-signature), box-shadow 0.55s var(--ease-signature);
  will-change: transform;
}
.case .pj-figure img { transition: filter 0.5s var(--ease-signature); }
/* Rollover: SOLO la imagen se eleva levemente y proyecta una sombra sutil
   (la etiqueta queda fija). El script limpia el clip-path del reveal para que
   la sombra no quede recortada. */
.case:hover .pj-figure {
  transform: translateY(-8px);
  box-shadow: 0 26px 46px -12px rgba(0, 0, 0, 0.6);
}
.case:hover .case__name { color: var(--brand-teal); }
.case:hover .pj-figure img { filter: brightness(1.06); }

.case__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: var(--space-16);
}
.case__name {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: -0.3px;
  line-height: 1.1;
  transition: color 0.35s var(--ease-signature);
}
.case__tag {
  font-family: var(--font--ui);
  font-weight: var(--font-weight--normal);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--light-48);
  text-align: right;
  flex-shrink: 0;
}

/* ---- Colocación + proporción por caso (look art-directed) --- */
/* Fila 1: izquierda rectangular (más chica) / derecha cuadrada (más grande, más baja).
   Deja una columna vacía (col 5) entre ambas, igual que la fila 2, para que la
   separación entre imágenes sea la misma. */
.case--a { grid-column: 1 / 5; }
.case--a .pj-figure { aspect-ratio: 4 / 5; }
.case--b { grid-column: 6 / 13; margin-top: var(--space-100); }
.case--b .pj-figure { aspect-ratio: 1 / 1; }
/* Fila 2: izquierda cuadrada (más grande) / derecha rectangular (más chica, más baja) */
.case--c { grid-column: 1 / 8; margin-top: var(--space-64); }
.case--c .pj-figure { aspect-ratio: 1 / 1; }
.case--d { grid-column: 9 / 13; margin-top: var(--space-160); }
.case--d .pj-figure { aspect-ratio: 4 / 3; }
/* Fila 3: izquierda grande / derecha alta */
.case--e { grid-column: 1 / 7; margin-top: var(--space-160); }
.case--e .pj-figure { aspect-ratio: 3 / 2; }
.case--f { grid-column: 8 / 13; margin-top: calc(-1 * var(--space-40)); }
.case--f .pj-figure { aspect-ratio: 4 / 5; }

/* ---- Tile CTA de cierre (sin imagen) ----------------------- */
.case--cta .case__cta {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--light-16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-40);
  transition: border-color 0.4s var(--ease-signature), background-color 0.4s var(--ease-signature);
}
.case--cta:hover .case__cta { border-color: var(--brand-teal); background: var(--light-4); }
.case__cta-title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.case__cta-arrow {
  align-self: flex-end;
  font-family: var(--font--ui);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--text-small);
  color: var(--light-64);
  display: inline-flex;
  gap: var(--space-8);
  transition: gap 0.4s var(--ease-signature), color 0.3s;
}
.case--cta:hover .case__cta-arrow { gap: var(--space-16); color: var(--brand-teal); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .cases-grid { gap: var(--space-48) var(--space-32); }
  /* dos columnas simples, sin offsets extremos */
  .case--a { grid-column: 1 / 7; }
  .case--b { grid-column: 7 / 13; margin-top: var(--space-64); }
  .case--c { grid-column: 1 / 7; margin-top: 0; }
  .case--d { grid-column: 7 / 13; margin-top: var(--space-64); }
  .case--e { grid-column: 1 / 7; }
  .case--f { grid-column: 7 / 13; margin-top: 0; }
}
@media (max-width: 680px) {
  .cases-head { grid-template-columns: 1fr; gap: var(--space-24); align-items: start; }
  .cases-divider { margin-bottom: var(--space-64); }
  .cases-grid { grid-template-columns: 1fr; gap: var(--space-48); }
  .case[class*="case--"] { grid-column: 1 / -1; margin-top: 0; }
  /* una sola columna: proporción uniforme y cómoda */
  .case .pj-figure { aspect-ratio: 4 / 5; }
}