/* La página de memorial nativa. Su marcado lo emite `@starter/memorial`
   (`render.ts`), y `apps/web/tests/unit/memorial-page-css.test.ts` comprueba
   que esta hoja conoce cada clase que ese renderizador pinta.

   Los colores y tipografías salen de las variables que ya pone `SiteShell`
   con los tokens del sitio: esta hoja no fija ninguna paleta propia. */

.memorial-page {
  max-width: var(--memorial-max-width, 720px);
  margin: 0 auto;
  padding: 48px 20px;
  color: var(--color-text, #1a1a1a);
  font-family: var(--font-body, sans-serif);
}

.memorial-page--align-center {
  text-align: center;
}

.memorial-page--align-left {
  text-align: left;
}

.memorial-page--photo-above {
  /* La foto va encima: no necesita estilos especiales aquí. */
}

.memorial-page__body {
  /* Contenedor para el nombre, fechas, tributo y galería. */
}

.memorial-page__media {
  margin: 0 0 24px;
}

.memorial-page__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 8px);
}

/* Tamaño, peso y altura de línea explícitos: una clase con estos tres datos
   gana siempre a un reset por elemento (`h1 { font-size: inherit }`, el que
   trae `memorial-preflight.css`), sea cual sea el orden en que las hojas se
   enlacen — el mismo motivo por el que `template-blog.css` fija
   `.blog-article-title` en vez de confiar en el `<h1>` a secas. Sin esto el
   nombre salía al tamaño del cuerpo, indistinguible de las fechas. */
.memorial-page__name {
  margin: 0 0 8px;
  font-family: var(--font-heading, sans-serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.memorial-page__dates {
  margin: 0 0 24px;
  color: var(--color-text-muted, #6b7280);
  font-size: 1.05rem;
}

/* El tributo se alinea a la izquierda aunque el encabezado vaya centrado:
   un párrafo largo centrado no hay quien lo lea. */
.memorial-page__tribute {
  text-align: left;
  line-height: 1.7;
}

/* Mismo motivo que `.memorial-page__name`: sin un margen explícito por
   párrafo, el reset de `memorial-preflight.css` (`p { margin: 0 }`) o el de
   un sitio passthrough colapsan un tributo de varios párrafos en un solo
   bloque. El vocabulario del tributo es solo `<p>` y `<br>` (ver
   `tribute-schema.ts`), así que basta cubrir el primero. */
.memorial-page__tribute p {
  margin: 0 0 1em;
}

.memorial-page__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.memorial-page__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius, 8px);
}

/* Foto al lado: dos columnas por encima de 720px, apiladas por debajo — una
   foto y un tributo en dos columnas estrechas no se leen en un móvil. */
@media (min-width: 721px) {
  .memorial-page--photo-left,
  .memorial-page--photo-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    text-align: left;
  }

  .memorial-page--photo-left .memorial-page__media {
    margin: 0;
  }

  .memorial-page--photo-right .memorial-page__media {
    order: 2;
    margin: 0;
  }
}