/* sobre.css: o sobre do desenho 04. No telefone, os blocos um embaixo do outro, curtos; no computador, três colunas:
   o que é e quando sai em cima, quem faz, onde ouvir e a pauta embaixo. Depende de: base.css (cartão da pessoa e pauta moram lá). */

/* ------------------------------------------------------------ a página */

.sobre { display: flex; flex-direction: column; gap: 26px; padding-top: 8px; }

/* ------------------------------------------------------------ o que é */

.sobre__oque { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; }
.sobre__capa { width: 88px; height: 88px; transform: rotate(-4deg); filter: drop-shadow(4px 4px 0 var(--preto)); }
.sobre__titulo { font: 30px/1.05 var(--letra-display); }
.sobre__frase { margin: 8px 0 0; font-weight: 800; font-size: 18px; }
.sobre__descricao { grid-column: 1 / -1; margin: 0; font-size: 17px; }
.sobre__oque-texto { display: contents; }
.sobre__titulo, .sobre__frase { grid-column: 2; }
.sobre__capa { grid-row: 1 / span 2; }

/* ------------------------------------------------------------ quando sai, num letreiro amarelo */

.sobre__quando {
  padding: 20px 18px;
  border: var(--contorno); border-radius: 26px;
  background:
    radial-gradient(rgba(23, 19, 14, .09) 1.2px, transparent 1.6px) 0 0 / 11px 11px,
    var(--amarelo);
  box-shadow: 6px 6px 0 var(--preto);
}
.sobre__quando .titulo-secao { margin-bottom: 8px; font-size: 18px; }
.sobre__ritmo { margin: 0; font: 28px/1.1 var(--letra-display); }
.sobre__nota { margin: 10px 0 0; font-weight: 700; }

/* ------------------------------------------------------------ onde ouvir, em coluna */

.ouvir-grade--coluna { grid-template-columns: 1fr 1fr; }

/* ------------------------------------------------------------ a pauta */

.sobre .pauta__titulo { font-size: 28px; }
.sobre .pauta__convite + .pauta__convite { margin-top: -4px; }

/* ------------------------------------------------------------ computador */

@media (min-width: 900px) {
  .sobre {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "oque  oque  quando"
      "quem  ouvir pauta";
    align-items: stretch;
    gap: 34px;
    padding-top: 18px;
  }

  .sobre__oque { grid-area: oque; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 32px; align-items: center; }
  .sobre__capa { width: 170px; height: 170px; grid-row: auto; filter: drop-shadow(6px 6px 0 var(--preto)); }
  .sobre__oque-texto { display: grid; gap: 10px; grid-column: 2; }
  .sobre__oque-texto > * { grid-column: auto; }
  .sobre__titulo { font-size: 46px; }
  .sobre__frase { margin: 0; font-size: 21px; }
  .sobre__descricao { grid-column: auto; font-size: 18px; }

  .sobre__quando { grid-area: quando; display: flex; flex-direction: column; justify-content: center; padding: 28px; }
  .sobre__ritmo { font-size: 34px; }

  .sobre__quem { grid-area: quem; }
  .sobre__ouvir { grid-area: ouvir; }
  .ouvir-grade--coluna { grid-template-columns: 1fr; }

  .sobre .pauta { grid-area: pauta; align-content: start; padding: 28px 26px 34px; }
  .sobre .pauta__titulo { font-size: 30px; padding-right: 0; }
  .sobre .pauta__desenho { width: 112px; height: 112px; top: auto; right: -8px; bottom: -6px; }
}