/* ---------------------------------------------------------------------------
   BLP — a faixa (banner) deixa de sair cortada no telemóvel e no tablet
   ---------------------------------------------------------------------------
   O Braga: "versao mobile com banner cortado em todas as paginas".

   Medi a pagina num telemovel de 390px: a faixa ficava com 342 x 170 px e a
   imagem com object-fit:cover. Os banners sao 1920 x 400 (quase 5:1). Metido
   a forca numa caixa de 2:1 e cortado pelos lados, so se via o meio - cerca de
   42% da largura. Dai o "blacklist" aparecer cortado em todas as seccoes.

   A regra que fazia isto esta no CSS do site:
       @media (max-width:1024px){ .section-band{ height:170px !important; ... } }

   Aqui devolve-se a faixa a sua propria proporcao: a altura passa a ser
   consequencia da largura, e nao um numero fixo. Nada fica cortado, em
   nenhuma largura de ecra.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section-band {
    height: auto !important;
    aspect-ratio: 1920 / 400 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .section-band .band-video,
  .section-band img,
  .section-band video,
  .section-band.capa-band .capa-vid,
  .section-band.capa-band img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;   /* a caixa ja tem a proporcao certa: nao corta */
    object-position: 50% 50% !important;
  }
}

/* ecrãs muito estreitos: a faixa ficaria baixa de mais para o que la esta
   escrito, por isso deixa-se crescer um pouco, mas sempre sem cortar */
@media (max-width: 420px) {
  .section-band {
    aspect-ratio: 1920 / 440 !important;
  }
  .section-band .band-video,
  .section-band img,
  .section-band video,
  .section-band.capa-band .capa-vid,
  .section-band.capa-band img {
    object-fit: contain !important;  /* mostra a faixa inteira, sem cortar nada */
    background: #000;
  }
}