/* =========================================================
   MANUAL — PORTADAS DE PRESENTACIÓN
   Las secciones que presentan su recorrido con etapas y tarjetas:
   `En busca del belén bíblico`, `Escenografía belenista`,
   `Bibliografías del belenismo` y la investigación de indumentaria.
   Se carga después de `v4-manual.css`.
   ========================================================= */


/* =========================================================
   01) MARCO DE LA PRESENTACIÓN
   El contexto propio de estas portadas y su introducción.
   ========================================================= */

.manual-presentation-card > h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.manual-presentation-overview .manual-article-context {
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.manual-presentation-introduction {
  display: grid;
  justify-items: center;
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
  text-align: center;
}

.manual-presentation-introduction-copy {
  width: min(100%, 52rem);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}

.manual-presentation-introduction-copy p {
  margin-bottom: 1.35rem;
}

.manual-presentation-start {
  margin: 1.2rem 0 0;
}


/* =========================================================
   02) CABECERA DEL RECORRIDO
   El rótulo de recuento, el título del recorrido y su descripción.
   ========================================================= */

.manual-presentation-route {
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.manual-presentation-route-header {
  width: min(100%, 48rem);
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  text-align: center;
}

.manual-presentation-kicker,
.manual-presentation-stage-meta,
.manual-presentation-card-threshold-label {
  font-family: var(--v4-font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.manual-presentation-kicker {
  margin-bottom: 1rem;
  color: var(--v4-ochre);
}

.manual-presentation-route-header h2,
.manual-presentation-stage-header h2 {
  max-width: none;
}

.manual-presentation-route-header h2 {
  margin-bottom: 1.2rem;
}


/* =========================================================
   03) ETAPAS
   Cada grupo de artículos, con su número, su intervalo y su filete.
   ========================================================= */

.manual-presentation-stage {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid var(--v4-petrol-border);
}

.manual-presentation-stage + .manual-presentation-stage {
  margin-top: clamp(4.5rem, 9vw, 7rem);
}

.manual-presentation-stage-header {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1.2fr);
  gap: 0.65rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* El número y el intervalo ocupan la primera columna a lo alto de las dos filas del encabezado de etapa. */
.manual-presentation-stage-meta {
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  color: var(--v4-ochre);
}

.manual-presentation-stage-meta span {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--v4-petrol-hover);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

.manual-presentation-stage-header h2 {
  margin: 0;
  color: #9a958a;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
}

.manual-presentation-stage-header > p:last-child {
  max-width: 42rem;
  margin: 0;
}


/* =========================================================
   04) TARJETAS DE ARTÍCULO
   La cuadrícula, la imagen o su marcador, la frase-guía y el acceso.
   ========================================================= */

.manual-presentation-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* La altura mínima iguala las tarjetas de una misma etapa aunque sus textos difieran. El margen interior se guarda en una variable porque la imagen tiene que anularlo. */
.manual-presentation-card {
  --v4-manual-card-padding: clamp(1.5rem, 3.5vw, 2.25rem);
  display: flex;
  min-height: 25rem;
  padding: var(--v4-manual-card-padding);
  border: 1px solid transparent;
  border-top-color: var(--v4-petrol);
  background: var(--v4-bg-raised);
  flex-direction: column;
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.manual-presentation-card:hover,
.manual-presentation-card:focus-within {
  border-color: var(--v4-petrol);
  background: #252523;
}

/* La imagen sale del margen interior con un margen negativo del mismo valor, y así llega a los tres bordes de la tarjeta. */
.manual-presentation-card-media,
.manual-presentation-card-media-placeholder {
  width: calc(100% + (var(--v4-manual-card-padding) * 2));
  aspect-ratio: 16 / 9;
  margin:
    calc(var(--v4-manual-card-padding) * -1)
    calc(var(--v4-manual-card-padding) * -1)
    clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--v4-petrol-border);
}

/* max-width: none deja que la imagen supere el 100 % que fija la regla general de img; sin él, el margen negativo la dejaría corta. */
.manual-presentation-card-media {
  display: block;
  height: auto;
  max-width: none;
}

.manual-presentation-card-media-placeholder {
  display: grid;
  color: var(--v4-text-tertiary);
  background:
    linear-gradient(135deg, transparent 49.8%, rgb(63 102 115 / 18%) 50%, transparent 50.2%),
    linear-gradient(45deg, transparent 49.8%, rgb(63 102 115 / 12%) 50%, transparent 50.2%),
    #1d1d1c;
  font-family: var(--v4-font-heading);
  place-content: center;
  text-align: center;
}

.manual-presentation-card-media-placeholder span,
.manual-presentation-card-media-placeholder small {
  display: block;
}

.manual-presentation-card-media-placeholder span {
  padding-inline: 1.25rem;
  font-size: 0.9rem;
}

.manual-presentation-card-media-placeholder strong {
  color: var(--v4-petrol-hover);
}

.manual-presentation-card-media-placeholder small {
  margin-top: 0.35rem;
  color: var(--v4-ochre);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manual-presentation-card-guide {
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--v4-text-secondary);
  font-family: var(--v4-font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  font-weight: 700;
}

.manual-presentation-card h3 {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  color: var(--v4-petrol-link);
  font-family: var(--v4-font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.manual-presentation-card-action {
  margin: auto 0 0;
  padding-top: 2rem;
  text-align: center;
}


/* =========================================================
   05) UMBRALES
   Las tarjetas que señalan un cambio de escala en el recorrido.
   ========================================================= */

.manual-presentation-card-threshold {
  border-top-color: var(--v4-ochre-muted);
}

.manual-presentation-card-threshold-label {
  margin: auto 0 0;
  padding-top: 1.5rem;
  color: var(--v4-ochre);
}

.manual-presentation-card-threshold .manual-presentation-card-action {
  margin-top: 0;
}


/* =========================================================
   06) ADAPTACIONES
   Movimiento reducido y pantallas estrechas.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .manual-presentation-card {
    transition: none;
  }

}

@media (max-width: 38rem) {

  .manual-presentation-overview .manual-article-context {
    margin-bottom: 2.5rem;
  }

  .manual-presentation-introduction {
    padding-bottom: 4.5rem;
    text-align: left;
  }

  .manual-presentation-introduction-copy {
    font-size: 1.05rem;
  }

  .manual-presentation-start {
    justify-self: stretch;
    width: 100%;
  }

  .manual-presentation-start .button {
    width: 100%;
    justify-content: center;
  }

  .manual-presentation-route-header {
    margin-bottom: 3.5rem;
    text-align: left;
  }

  .manual-presentation-stage {
    padding-top: 3rem;
  }

  .manual-presentation-stage + .manual-presentation-stage {
    margin-top: 4.5rem;
  }

  .manual-presentation-stage-header {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .manual-presentation-stage-meta {
    grid-row: auto;
  }

  .manual-presentation-stage-meta span {
    display: inline-block;
    margin: 0 0.75rem 0 0;
    font-size: 2rem;
    vertical-align: middle;
  }

  .manual-presentation-card-grid {
    grid-template-columns: 1fr;
  }

  .manual-presentation-card {
    --v4-manual-card-padding: 24px;
    min-height: 22rem;
  }

}