/* Sobre o robo garcom — texto e foto lado a lado.
   Markup: patterns/robo-garcom.php */

.jhonys-robo h2 { color: var(--wp--preset--color--verde-escuro); }
.jhonys-robo p  { color: var(--wp--preset--color--carvao); }

.jhonys-robo__chapeu {
  margin: 0;
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  /* laranja sobre o creme da 2.19:1, e em 14px nao ha saida de "texto grande".
     O verde da marca resolve com 5.82:1 e continua se distinguindo do titulo,
     que e verde-escuro. */
  color: var(--wp--preset--color--verde) !important;
}

.jhonys-robo__foto img,
.jhonys-robo__video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: var(--wp--preset--shadow--cartao);
  background: var(--wp--preset--color--carvao);
}

/* O video e vertical (9:16). Sem limite de altura ele domina a secao inteira. */
.jhonys-robo__video {
  margin: 0;
  max-width: 320px;
  margin-inline: auto;
}
.jhonys-robo__video video {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  max-height: 520px;
}

/* Sem midia enviada, a coluna nao deve abrir um vao: o texto ocupa tudo. */
.jhonys-robo__foto:not(:has(img)) { display: none; }
.jhonys-robo__colunas:not(:has(.jhonys-robo__midia)) .jhonys-robo__texto,
.jhonys-robo__colunas:not(:has(.jhonys-robo__foto img, .jhonys-robo__video video)) .jhonys-robo__texto {
  flex-basis: 100% !important;
  max-width: 46rem;
}