/* ═══════════════════════════════════════════════════════════════
   SUN ARQUITECTOS — publicaciones.css
   Página "Publicaciones digitales": prensa / medios donde se
   difundieron los proyectos. Hero a pantalla completa (gris + puntos)
   y grilla masonry de 3 columnas con las portadas a tamaño natural
   (sin recorte). Depende de styles.css.
   ═══════════════════════════════════════════════════════════════ */
.publicaciones {
  background: var(--c-bg);
  padding-inline: var(--gutter);
}

/* ─── Hero a pantalla completa (gris + retícula de puntos) ───── */
.pub__head {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32svh;
  /* full-bleed: el panel gris + puntos cubren todo el ancho del hero */
  margin-inline: calc(var(--gutter) * -1);
  padding-top: var(--nav-h);
  padding-bottom: clamp(2rem, 3vh, 2.5rem);
  padding-inline: var(--gutter);
  background-color: var(--c-surface);
}

.pub__head-inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
}

.pub__head-top {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3.5vw, 3rem);
}

.pub__label {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: var(--c-salmon);
  text-transform: uppercase;
}

/* Título del hero: fuente ISOCP en negrita (ISOCP tiene un solo peso;
   el grosor se logra con text-shadow, ver nota abajo). */
.pub__title {
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--c-text);
  /* Negrita SIN puntas: -webkit-text-stroke genera picos en las uniones
     de N/A/M (miter join). En vez de eso, engrosamos con text-shadow en 16
     direcciones y radio chico (0.85px): al ser ISOCP una fuente de trazo
     fino, las copias se solapan → relleno SÓLIDO (sin fantasma) y esquinas
     redondeadas (sin picos). */
  text-shadow:
    0.85px 0 0 var(--c-text), 0.79px 0.33px 0 var(--c-text),
    0.60px 0.60px 0 var(--c-text), 0.33px 0.79px 0 var(--c-text),
    0 0.85px 0 var(--c-text), -0.33px 0.79px 0 var(--c-text),
    -0.60px 0.60px 0 var(--c-text), -0.79px 0.33px 0 var(--c-text),
    -0.85px 0 0 var(--c-text), -0.79px -0.33px 0 var(--c-text),
    -0.60px -0.60px 0 var(--c-text), -0.33px -0.79px 0 var(--c-text),
    0 -0.85px 0 var(--c-text), 0.33px -0.79px 0 var(--c-text),
    0.60px -0.60px 0 var(--c-text), 0.79px -0.33px 0 var(--c-text);
}

/* Texto del hero: alineado a la derecha, abajo, en blanco */
.pub__intro {
  align-self: flex-end;
  margin-top: auto;
  margin-bottom: clamp(6rem, 20vh, 13rem);
  text-align: right;
  max-width: 49ch;
  font-family: var(--f-body);
  font-weight: var(--fw-reg);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.7;
  color: var(--c-text);
}

/* ─── Grilla de publicaciones — 3 columnas simétricas ────────── */
/* Celdas cuadradas idénticas (1:1 = mediana de las proporciones de
   las 40 portadas). La portada se muestra COMPLETA, sin recorte
   (object-fit: contain); el resto de la celda se rellena con BLANCO,
   que da continuidad al fondo blanco que tiene la mayoría de las
   portadas. Gap simétrico en ambos ejes, más amplio que el masonry
   anterior → portadas algo más chicas. */
.pub__grid {
  max-width: var(--max-w);
  margin-inline: auto;
  list-style: none;
  padding: clamp(2rem, 4.5vh, 3rem) 0 clamp(4rem, 10vh, 7rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.25rem, 4vw, 3.5rem);
}

.pub__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pub__figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  line-height: 0;
  background: #fff;
}

/* Portada: entera, centrada, sin recorte */
.pub__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a.pub__item:hover .pub__figure img { transform: scale(1.03); }

/* ─── Pie de cada item ──────────────────────────────────────── */
.pub__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.85rem;
}

.pub__source {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--f-body);
  font-weight: var(--fw-reg);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.04em;
  color: var(--c-text);
  line-height: 1.35;
}

/* Flecha "abre externo" en items enlazados */
a.pub__item .pub__source::after {
  content: "↗";
  font-size: 0.85em;
  color: var(--c-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
a.pub__item:hover .pub__source::after {
  color: var(--c-salmon);
  transform: translate(1px, -1px);
}

.pub__proj {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
  letter-spacing: 0.03em;
  color: var(--c-muted);
  line-height: 1.4;
}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pub__head {
    padding-top: calc(var(--nav-h) + clamp(0.5rem, 2vh, 1rem));
    padding-bottom: clamp(1.25rem, 3vh, 2rem);
  }
}

@media (max-width: 900px) {
  .pub__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .pub__grid { grid-template-columns: 1fr; }
}