/* Página institucional: linha do tempo, galeria e memorial. */

.gm-historia__capa {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4.5vw, 3.25rem);
  background: var(--gm-mata);
  color: var(--gm-milho);
}

.gm-historia__capa-grade {
  display: grid;
  gap: 1.25rem 2rem;
  align-items: center;
}

.gm-historia__capa-grade > * {
  min-width: 0;
}

.gm-historia__capa h1 {
  margin: 0.35rem 0 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* 70% da largura do envoltório, alinhado à esquerda. */
.gm-historia__linha {
  width: 70%;
  max-width: none;
  margin: 0.35rem 0 0;
  color: var(--gm-mata-texto);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .gm-historia__linha {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .gm-historia__capa-grade {
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem);
    grid-template-areas:
      "texto marca"
      "linha linha";
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1.35rem;
  }

  .gm-historia__capa-texto {
    grid-area: texto;
  }

  .gm-historia__capa .gm-galo--historia {
    grid-area: marca;
  }

  .gm-historia__linha {
    grid-area: linha;
    margin-top: 0;
  }

  .gm-historia__capa h1 {
    max-width: none;
    font-size: clamp(2.1rem, 3.4vw, 2.75rem);
  }
}

.gm-canto--historia {
  height: 5rem;
  opacity: 0.85;
}

/*
 * Sem o memorial à direita, o texto ocupa a largura inteira do envoltório.
 * Em telas largas, duas colunas preenchem o buraco; crédito, abertura, títulos
 * e a lenda atravessam as duas, para o olho não perder o fio.
 */
.gm-historia__corpo {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.gm-historia__corpo > * {
  min-width: 0;
}

.gm-prosa--historia {
  width: 100%;
  max-width: none;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gm-tinta);
}

.gm-prosa--historia > * + * {
  margin-top: 1.25rem;
}

.gm-prosa--historia .gm-credito-pesquisa {
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gm-borda);
  color: var(--gm-pena);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* Abertura em destaque, como lead de reportagem. */
.gm-prosa--historia > p:not(.gm-credito-pesquisa):first-of-type {
  margin-bottom: 0.35rem;
  font-family: var(--gm-fonte-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: 1.45;
  color: var(--gm-mata);
  text-wrap: pretty;
}

.gm-prosa--historia h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.15rem;
  padding-top: 0.35rem;
  font-size: clamp(1.45rem, 2.8vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}

.gm-prosa--historia h2 + p {
  margin-top: 0.85rem;
}

.gm-prosa--historia p {
  text-wrap: pretty;
}

/* A lenda ganha um bloco próprio, sem parecer cartão solto. */
.gm-prosa--historia blockquote {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.35rem;
  border: 0;
  border-left: 3px solid var(--gm-canto);
  border-radius: 0 var(--gm-raio) var(--gm-raio) 0;
  background: color-mix(in srgb, var(--gm-milho-carta) 85%, var(--gm-milho));
  color: var(--gm-pena);
  font-family: var(--gm-fonte-corpo);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.65;
}

.gm-prosa--historia blockquote p {
  margin: 0 0 0.9rem;
}

.gm-prosa--historia blockquote p:last-child {
  margin-bottom: 0;
}

/* Figuras e grades vindas do documento da pesquisa. */
.gm-historia-figura {
  margin: 1.5rem 0 0;
}

.gm-historia-figura picture,
.gm-historia-figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gm-raio);
  background: var(--gm-milho-carta);
}

.gm-historia-figura figcaption,
.gm-historia-legenda {
  margin: 0.55rem 0 0;
  color: var(--gm-pena);
  font-family: var(--gm-fonte-util);
  font-size: 0.78rem;
  line-height: 1.4;
}

.gm-historia-figura--faixa {
  margin: 1.75rem 0;
}

.gm-historia-par,
.gm-historia-grade {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0.5rem;
}

/* Duplas lado a lado: mesma largura e mesma altura de foto. */
.gm-historia-par {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.gm-historia-grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gm-historia-par .gm-historia-figura,
.gm-historia-grade .gm-historia-figura {
  margin: 0;
}

.gm-historia-par .gm-historia-figura {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gm-historia-par .gm-historia-figura picture {
  display: block;
  overflow: hidden;
  border-radius: var(--gm-raio);
  background: var(--gm-milho-carta);
}

.gm-historia-par .gm-historia-figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.gm-prosa--historia h3 {
  margin-top: 2.25rem;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
}

@media (max-width: 640px) {
  .gm-historia-par,
  .gm-historia-grade {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .gm-prosa--historia {
    column-count: 2;
    column-gap: 3rem;
    column-rule: 1px solid var(--gm-borda);
  }

  .gm-prosa--historia .gm-credito-pesquisa,
  .gm-prosa--historia > p:not(.gm-credito-pesquisa):first-of-type,
  .gm-prosa--historia h2,
  .gm-prosa--historia h3,
  .gm-prosa--historia blockquote,
  .gm-historia-figura--faixa,
  .gm-historia-par,
  .gm-historia-grade,
  .gm-historia-legenda {
    column-span: all;
  }

  .gm-historia-grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
  }

  /* Título não fica sozinho no fim da coluna. */
  .gm-prosa--historia h2 {
    break-after: avoid;
    break-inside: avoid;
    margin-top: 2.25rem;
  }

  .gm-prosa--historia p {
    orphans: 3;
    widows: 3;
  }

  /* Corre na largura cheia, atravessando as duas colunas do artigo. */
  .gm-prosa--historia .gm-historia-sem-quebra {
    column-span: all;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

@media (min-width: 1100px) {
  .gm-prosa--historia {
    column-gap: 3.5rem;
    font-size: 1.08rem;
  }
}

/* Linha do tempo: lista numerada virando marcos com filete. */

.gm-linha-tempo {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  border-left: 2px solid var(--gm-canto);
}

.gm-linha-tempo li {
  position: relative;
  margin: 0;
  padding: 0 0 1.5rem 1.5rem;
}

.gm-linha-tempo li::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0.45rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--gm-canto);
}

.gm-linha-tempo li:last-child {
  padding-bottom: 0;
}

.gm-linha-tempo strong {
  display: block;
  font-family: var(--gm-fonte-util);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-pena);
}

/* Memorial: sóbrio, sem moldura preta nem tarja de luto. */

.gm-memorial {
  padding: 1.5rem;
  border: 1px solid var(--gm-borda);
  border-top: 3px solid var(--gm-canto);
  border-radius: var(--gm-raio);
  background: var(--gm-milho-carta);
}

@media (min-width: 960px) {
  .gm-memorial {
    position: sticky;
    top: calc(var(--gm-header) + 1.5rem);
  }
}

/* Retrato no alto do cartão, na largura útil dele. */
.gm-memorial__retrato img {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  margin: 0 0 1rem;
  border-radius: var(--gm-raio);
}

.gm-memorial__olho {
  margin: 0;
  font-family: var(--gm-fonte-util);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-pena);
}

.gm-memorial h2 {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.35rem;
  line-height: 1.15;
}

.gm-memorial__datas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  font-family: var(--gm-fonte-util);
  font-size: 0.78rem;
  color: var(--gm-pena);
}

.gm-memorial__papel {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--gm-tinta);
}

.gm-memorial__frase {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--gm-borda);
  border-bottom: 1px solid var(--gm-borda);
  padding: 0.9rem 0;
}

.gm-memorial__frase p {
  margin: 0;
  font-family: var(--gm-fonte-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--gm-mata);
}

.gm-memorial__nota {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gm-pena);
}

/* Galeria inserida pelo painel. */

.gm-prosa .wp-block-gallery,
.gm-prosa .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 2rem 0;
}

.gm-prosa .gallery-item {
  margin: 0 !important;
  width: auto !important;
}

.gm-prosa .gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0 !important;
  border-radius: var(--gm-raio);
}

.gm-prosa .gallery-caption {
  font-family: var(--gm-fonte-util);
  font-size: 0.75rem;
  color: var(--gm-pena);
}

/* Chamada final */

.gm-historia__chamada {
  padding: 2.25rem 0 3rem;
  border-top: 1px solid var(--gm-borda);
  background: var(--gm-milho-carta);
}

.gm-historia__chamada-grade {
  display: grid;
  gap: 1.25rem;
}

.gm-historia__chamada-grade > * {
  min-width: 0;
}

@media (min-width: 820px) {
  .gm-historia__chamada-grade {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2.5rem;
  }
}

.gm-historia__chamada h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.gm-historia__chamada p {
  margin: 0;
  max-width: 48ch;
  color: var(--gm-pena);
}

.gm-historia__chamada-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}