/*
  home.css
  Inicio: hero (eyebrow + titular + "Conoce mi perfil →", sin texto adicional), Proyectos
  (2 tarjetas grandes + 3 pequeñas), Otros proyectos (masonry + CTA) y formulario de
  contacto compacto — siguiendo wireframes/png/01-inicio.png.
*/

.hero {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-s) var(--space-l);
}

.hero__headline {
  max-width: 46rem;
}

.hero__cta {
  display: inline-block;
  margin-top: var(--space-m);
  font-weight: 500;
}

.section-intro {
  color: var(--color-text-muted);
  max-width: var(--measure-max-width);
  margin: 0 0 var(--space-m);
}

.section-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-top: var(--space-l);
}

.project-grid {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-m);
}

.project-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--space-xl);
}

.project-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 60rem) {
  .project-grid--2,
  .project-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .project-grid--2,
  .project-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Esta vista previa siempre tiene 4 piezas (no 8+ como el listado completo de
   /otros-proyectos/): con 4 columnas de ancho completo y una pieza "tall" mucho más alta
   que el resto, sobraba un hueco muerto grande a la derecha. 3 columnas empaqueta las 4
   piezas de forma mucho más ajustada. */
.masonry--home-archive {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px;
}

/* Solo 4 piezas: con apenas 2 columnas seguía viéndose apretado/desordenado, así que esta
   variante pasa directo de 3 columnas a 1 sola (sin paso intermedio de 2), a diferencia del
   resto de grillas masonry del sitio que sí bajan a 2 antes de llegar a 1 (ver base.css). */
@media (max-width: 60rem) {
  .masonry--home-archive {
    grid-template-columns: 1fr;
  }

  /* Con una sola columna, una pieza que todavía pidiera 2 (--wide) desbordaría la grilla:
     mismo problema ya corregido para el resto del sitio en base.css a partir de 30rem. */
  .masonry--home-archive .masonry__item--wide {
    grid-column: span 1;
  }
}

/* La pieza ancha (Ministerio) más una pieza simple (BDE o Punto Caramelo) apiladas deben
   sumar exactamente la altura de la pieza alta (Gracie) para que la base de las 3 quede al
   mismo nivel, sin ningún hueco: 16 + 18 = 34. */
.masonry--home-archive .masonry__item {
  grid-row-end: span 18;
}

.masonry--home-archive .masonry__item--wide {
  grid-row-end: span 16;
}

.masonry--home-archive .masonry__item--tall {
  grid-row-end: span 34;
}

/* Piezas reales de la vista previa de "Otros proyectos" (enlazan a /otros-proyectos/, nunca
   reproducen video acá — ver renderHomeArchiveTile en build.mjs). El radio y el recorte
   viven en .home-archive-tile__media (no en el .masonry__item/<a> que lo contiene), mismo
   criterio que el resto del sitio para no afectar el flujo de la grilla. */
.home-archive-tile {
  display: block;
  height: 100%;
  text-decoration: none;
  color: #ffffff;
}

.home-archive-tile__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  border-radius: var(--radius-l);
  overflow: hidden;
}

.home-archive-tile__media .media-real {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-archive-tile__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}

.home-archive-tile__label {
  position: absolute;
  left: var(--space-m);
  right: var(--space-m);
  bottom: var(--space-m);
  z-index: 1;
  font-size: var(--font-size-small);
  font-weight: 600;
}

/* El bloque de Contacto (fondo, grilla, formulario) vive en contact.css: lo comparten
   Inicio (versión compacta) y /contacto/ (versión completa), y /contacto/ no carga home.css. */