/* Portada de actividad: la misma pieza 4:5 en la agenda y en la vista previa del panel.
   Todo se mide en "cqi" (centésimas del ancho de la portada), así que se ve igual a cualquier tamaño. */

.portada {
  display: block;
  container-type: inline-size;
  color: var(--tinta);
  text-decoration: none;
}

.portada[hidden] {
  display: none;
}

.portada__lienzo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0.8cqi;
  aspect-ratio: 4 / 5;
  /* Colores del tipo: los cambia cada tono de abajo. */
  --fondo: var(--marino);
  --texto: var(--blanco);
}

.portada--madera .portada__lienzo { --fondo: var(--madera); --texto: var(--tinta); }
.portada--pino .portada__lienzo { --fondo: var(--pino); --texto: var(--tinta); }
.portada--tinta .portada__lienzo { --fondo: var(--tinta); --texto: var(--blanco); }

/* Foto: las tres primeras filas. */
.portada__foto {
  position: relative;
  grid-area: 1 / 1 / 4 / 5;
  overflow: hidden;
  background: var(--cal);
}

.portada__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-lento) var(--curva);
}

a.portada:hover .portada__foto img {
  transform: scale(1.04);
}

/* Sin foto: el símbolo de La Tesela, en el color del tipo. */
.portada__simbolo {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 13cqi);
  gap: 5cqi;
  place-content: center;
  color: var(--fondo);
}

.portada__simbolo .sello {
  width: 13cqi;
  height: 13cqi;
}

.portada__foto img:not([hidden]) ~ .portada__simbolo {
  display: none;
}

/* El tipo, en una pieza maciza encima de la foto (nada de texto sobre la foto). */
.portada__tipo,
.portada__estado {
  position: absolute;
  top: 4cqi;
  display: inline-flex;
  align-items: center;
  gap: 2cqi;
  padding: 2.2cqi 3cqi;
  font-family: var(--fuente-dato);
  font-size: 3cqi;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portada__tipo {
  left: 4cqi;
  background: var(--fondo);
  color: var(--texto);
}

.portada__tipo .sello {
  width: 2.4cqi;
  height: 2.4cqi;
}

.portada__estado {
  right: 4cqi;
  background: var(--blanco);
  color: var(--tinta);
}

/* Título: la cuarta fila entera, en el color del tipo. */
.portada__titulo {
  grid-area: 4 / 1 / 5 / 5;
  display: -webkit-box;
  margin: 0;
  padding: 3.4cqi 4cqi;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-voz);
  font-size: 5.8cqi;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-wrap: balance;
}

.portada--largo .portada__titulo {
  font-size: 4.6cqi;
  -webkit-line-clamp: 4;
}

/* Fecha: la tesela de abajo a la izquierda, en negro. */
.portada__fecha {
  grid-area: 5 / 1 / 6 / 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 3cqi;
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--fuente-dato);
  font-size: 3cqi;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portada__dia {
  font-size: 11cqi;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* Cuándo, dónde y plazas. */
.portada__datos {
  grid-area: 5 / 2 / 6 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  margin: 0;
  padding: 3cqi 3.4cqi;
  background: var(--cal);
  font-family: var(--fuente-dato);
  font-size: 3.1cqi;
  line-height: 1.2;
}

.portada__datos span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portada__datos span:first-child {
  font-weight: 700;
}

.portada--pasado .portada__datos {
  color: var(--piedra);
}

/* Galería de portadas (agenda y archivo). */
.galeria-portadas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--e-6) var(--e-4);
}

/* Vista previa en la ficha de actividad del panel. */
.vista-portada {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-4) var(--e-5);
}

.vista-portada .portada {
  flex: 0 1 320px;
}

.vista-portada .ayuda {
  flex: 1 1 200px;
  max-width: 40ch;
}