/*
 * Citações (etapa F6) -- as três da home, um uso só.
 *
 * Transcrito de `main.css:1676-1735` (desktop) e `1736-1770` (celular).
 *
 * **A grade em vez do flex, e a razão é semântica.** O `<figcaption>` tem de ser filho direto
 * do `<figure>` (primeiro ou último, diz a especificação), mas na tela ele fica *acima* do
 * texto e *ao lado* do retrato. Flex não expressa isso sem embrulhar a autoria e o texto num
 * `<div>` -- que é justamente o que tiraria o `<figcaption>` de filho direto. Com
 * `grid-template-areas` o lugar de cada peça é declarado, e a ordem do documento fica livre.
 *
 * E é a mesma grade que dá o lado alternado, sem tocar na ordem do documento -- a decisão da
 * E1 sobre `row-reverse` contra `order`.
 */

.citacoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.citacao {
  display: grid;
  align-items: center;
  /*
   * `gap: 110px` é o das citações de retrato à esquerda. A de retrato à direita usa 42px, e
   * isso **não é moldura de página**: no original o valor está em `.quote.q2`, que é
   * exactamente a única com o retrato do outro lado. Ou seja, o intervalo acompanha a
   * variante, e a variante já tem regra própria -- a fidelidade custa uma linha.
   */
  gap: 0 110px;
  width: 100%;
  max-width: 832px;
  grid-template-columns: auto minmax(0, 451px);
  grid-template-areas:
    'retrato autoria'
    'retrato texto';
}

.citacao--retrato-direita {
  gap: 0 42px;
  grid-template-columns: minmax(0, 451px) auto;
  grid-template-areas:
    'autoria retrato'
    'texto retrato';
}

.citacao__retrato {
  grid-area: retrato;
  max-width: 100%;
  /* `width`/`height` em `auto` junto do `max-width`, como no banner da E1 e na imagem da D4:
   * sem eles o atributo `width` do arquivo disputa com o `max-width` em tela estreita. */
  width: auto;
  height: auto;
}

.citacao__autoria {
  grid-area: autoria;
  margin-bottom: 24px;
}

.citacao__nome {
  font-family: var(--seb-fonte-corpo);
  font-size: 28px;
  font-weight: 700;
  color: var(--seb-azul);
  margin-bottom: 10px;
}

.citacao__cargo {
  font-family: var(--seb-fonte-corpo);
  font-size: 20px;
  font-weight: 400;
  color: var(--seb-azul);
}

/*
 * O `<blockquote>` do navegador vem com recuo próprio, e ele não é do desenho -- o recuo daqui
 * é o das aspas, que ficam fora da caixa do texto.
 */
.citacao__caixa {
  grid-area: texto;
  position: relative;
  margin: 0;
  padding: 0;
}

/*
 * As aspas ficam **fora** da coluna do texto, à esquerda -- é o `left: -93px` do original.
 * `pointer-events: none` porque elas cobrem o espaço entre o retrato e o texto.
 */
.citacao__aspas {
  position: absolute;
  top: 6px;
  left: -93px;
  pointer-events: none;
}

.citacao__texto {
  font-family: var(--seb-fonte-corpo);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--seb-azul);
}

@media (min-width: 768.02px) {
  .citacao--retrato-direita {
    box-sizing: border-box;
    padding-left: max(0px, calc(93px - 16px - max(0px, (100% - 832px) / 2)));
  }
}

@media (max-width: 768px) {
  .citacoes {
    gap: 32px;
  }

  /*
   * Uma coluna, retrato em cima -- nas três, e sem a regra de `column-reverse` que a segunda
   * citação precisava no original. Ela existia porque lá a ordem do documento mudava; aqui não
   * muda.
   *
   * **Um seletor só, e não o par com a variante:** as duas classes têm a mesma
   * especificidade e esta regra vem depois no arquivo, então `.citacao` já vence. O par era
   * redundante.
   */
  .citacao {
    /*
     * **314px, e não os 266 do `.quote`.** A F6 transcreveu o `max-width: 266px`
     * de `.home__quotes .quote` e o `padding: 0 24px 24px` de `.content` como se um contivesse
     * o outro, e no original eles **não** compõem assim: o `.content` é `width: 100%` num site
     * sem `border-box`, então ele mede 314px de fora a fora e transborda 24px de cada lado da
     * caixa de 266. O que se vê na tela é um bloco de 314 com o retrato de 266 no meio e o
     * texto em 266 também.
     *
     * Com 266 aqui o recuo comia a largura do texto, que caía para 218 -- e as três citações
     * saíam 22, 44 e 66px mais altas que as do original (medido a 375px na G12c, montando a
     * home). Com 314 a geometria bate, e sem transbordo nenhum.
     */
    max-width: 314px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'retrato'
      'autoria'
      'texto';
    gap: 16px;
  }

  /* O retrato mantém os 266px dele e fica no meio do bloco, como no original -- sem isto a
   * coluna de 314 o esticaria. */
  .citacao__retrato {
    justify-self: center;
  }

  /*
   * O recuo que o original dá ao `.content` no celular (`padding: 0 24px 24px`). Aquele
   * envelope não existe aqui -- é o `<figcaption>` que não pode ter um `<div>` em volta --,
   * então ele se distribui pelas duas áreas de texto. O retrato fica fora dele, como lá.
   */
  .citacao__autoria,
  .citacao__caixa {
    padding-left: 24px;
    padding-right: 24px;
  }

  .citacao__caixa {
    padding-bottom: 24px;
  }

  .citacao__autoria {
    margin-bottom: 0;
  }

  .citacao__nome {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .citacao__cargo {
    font-size: 18px;
  }

  /*
   * No celular as aspas entram no fluxo, acima do texto: não há espaço à esquerda para elas.
   */
  .citacao__aspas {
    position: static;
    width: 42px;
    height: auto;
    margin-bottom: 10px;
  }

  .citacao__texto {
    font-size: 16px;
    line-height: 22px;
  }
}