/* Videos do Instagram — ate cinco publicacoes lado a lado.
   Markup:     patterns/instagram.php
   Par em PHP: inc/instagram.php (cadastro dos links)

   Os embeds sao iframes do proprio Instagram, com loading="lazy": quem nunca
   rolar ate aqui nao baixa nenhum deles. */

.jhonys-ig__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(.9rem, 1.8vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jhonys-ig__item {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--wp--preset--color--branco);
  box-shadow: var(--wp--preset--shadow--cartao);

  /* o embed do Instagram tem proporcao propria e nao se ajusta sozinho;
     a caixa define a altura e o iframe preenche */
  aspect-ratio: 9 / 14;
}

.jhonys-ig__quadro {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.jhonys-ig__acao .wp-block-button__link {
  color: var(--wp--preset--color--verde-escuro);
  border: 2px solid var(--wp--preset--color--verde-escuro);
  background: transparent;
  padding: .75em 1.5em;
  transition: background-color .22s ease, color .22s ease;
}
.jhonys-ig__acao .wp-block-button__link:hover,
.jhonys-ig__acao .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--verde-escuro);
  color: var(--wp--preset--color--branco);
}

@media (prefers-reduced-motion: reduce) {
  .jhonys-ig__acao .wp-block-button__link { transition: none; }
}