/*styles.css*/


.yt-showcase-container {
    display: flex;
    gap: 10px;
	justify-content:center;
	margin:1vw 1vw 1vw 1vw;
	
}

.yt-showcase-container img{
    width: 98%;
    max-width: 100%;
    filter:brightness(90%);
    aspect-ratio: 16/9;
}

.yt-showcase-column {
    display: flex;
    flex-direction: column;
}

.yt-showcase-column-left .yt-showcase-box-large {
    width: 54vw;
    height: 31vw;
}

.yt-showcase-column-right {
    justify-content: space-between;
}

.yt-showcase-column-right .yt-showcase-box-small {
    width: 15vw;
    height: 8vw;
    /*     background-color: #2ecc71;
 */    display: flex;
    gap: 10px;
}

.yt-showcase-inner-box {
    width: 100%;
    height: 100%;
/*     background-color: #e74c3c;
 */}


.video-details-date{
    font-size:10px;
	color:#333;
	text-decoration:underline;
}
.video-details-title{
    font-weight:bold;
    color: gray;
    font-size:10px;
    text-transform:uppercase;
    overflow: hidden;
}
.video-details-description{
    font-size:10px; 
    overflow: hidden;
}
#yt-showcase-main-container{
    visibility:hidden;
	display:flex;
}

@media only screen and (max-width: 1021px) {
.yt-showcase-column-right{
    display:none;
}
.yt-showcase-column-left .yt-showcase-box-large {
    width: 95vw;
    height: 53vw;
}
}
@media only screen and (max-width: 1100px) {
	
.yt-showcase-container {
    display: flex;
    gap: 10px;
	justify-content:center;
	margin:2px 5px 20px 5px;
}

.video-details-description{
    display:none;
}
}

#yt-showcase-title-container {
	padding-left:0px;
}

#yt-showcase-title-container h2 {
    font-weight:600;
}

#yt-showcase-title-container hr {
    border-top:1px solid gray;
}

.mktv-cta-container{
    display:flex;
	justify-content:center;
}
#videos-cta-button{
	border-radius: 0;
	background:rgb(179, 0, 0);
    color: white;
    padding: 6px 28px;
    font-weight: bold;
    border: 2px solid white;
	text-transform:uppercase;
	margin-bottom:5px;
}

.videos-cta-div{
	text-align:center;
}




.videos-home{
	margin-top:30px;
}
/*
 * Folha de estilos para a vitrine de vídeos do YouTube.
 * Define o layout, a aparência do modal, os botões de play e as regras de responsividade.
 */

/* Garante que o iframe do vídeo preencha 100% da altura do seu container. */
iframe#yt-video{
    height:100%!important;
}

/* Estilo para o ícone de "play" sobreposto. */
.play-button {
    position: absolute; /* Posicionamento relativo ao container pai. */
    top: 50%; /* Centralização vertical. */
    transform: translate(-50%, -50%); /* Ajuste fino para centralização precisa. */
    color: white;
    font-size: 2em;
    opacity: 0.8;
    pointer-events: none; /* Garante que o clique passe para a imagem abaixo. */
}

/* Define os containers das thumbnails como referência de posicionamento para o botão "play". */
.yt-showcase-box-large, .yt-showcase-box-small {
    position: relative; 
}

/* Garante que as imagens preencham o seu container. */
.yt-showcase-box-large img,
.yt-showcase-box-small img {
    display: block;
}

/* Estilo para o fundo do botão "play" para melhorar a visibilidade. */
.yt-showcase-box-large .play-button,
.yt-showcase-box-small .play-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 50%; /* Torna o fundo circular. */
}
/* Tamanho e posição específicos do botão "play" para o vídeo em destaque. */
.yt-showcase-box-large .play-button {
    width: 10%;
    height: 10%;
    left: 50%;
}

/* Tamanho e posição específicos do botão "play" para os vídeos secundários. */
.yt-showcase-box-small .play-button {
    width: 7%;
    height: 5%;
    left: 25%;
}

/* Estilos para o modal (fundo overlay). */
.mktv_modal {
    display: none; /* Inicialmente oculto. */
    position: fixed; /* Fica fixo na tela durante a rolagem. */
    z-index: 999999; /* Garante que fique acima de todos os outros conteúdos. */
    left: 0;
    top: 0;
    width: 100vw; /* Largura total da viewport. */
    height: 100vh; /* Altura total da viewport. */
    padding-top:50px;
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto; /* Permite rolagem se o conteúdo for maior que a tela. */
    background-color: rgba(0, 0, 0, 0.90); /* Fundo preto semitransparente. */
}

/* Estilos para o container do conteúdo do modal. */
.mktv-modal-content {
    position: relative;
    margin: auto; /* Centraliza horizontalmente. */
    padding: 0;
    background-color:rgb(0,0,0,0);
    width: 70%;
    animation-name: modalopen; /* Aplica a animação de entrada. */
    animation-duration: 0.4s;
}

/* Animação para a abertura do modal (desliza de cima para baixo). */
@keyframes modalopen {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

/* Estilo para o botão de fechar (X). */
.close {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-left:5px;
}

.close:hover,
.close:focus {
    color: #555;
    text-decoration: none;
    cursor: pointer;
}

/* Container responsivo para manter a proporção 16:9. */
.embed-responsive-16by9 {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 (9 / 16 = 0.5625). */
    height: 0;
    overflow: hidden;
}

/* Estilos para o iframe dentro do container responsivo. */
.embed-responsive-16by9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Estilo geral para as caixas de vídeo, tornando o cursor um ponteiro. */
.yt-showcase-box {
    cursor: pointer;
    padding: 5px 5px;
    display: inline-block;
    border-radius: 4px;
}

/* Media query para ecrãs pequenos (ex: telemóveis). */
@media only screen and (max-width: 600px) {
    /* Ajusta a largura do conteúdo do modal para 100% em telas pequenas. */
    .mktv-modal-content {
        width:100%;
    }
}


/* 
 * Estilos para dispositivos móveis: Empilha as colunas e ajusta os tamanhos para uma melhor visualização.
 * Ativado para larguras de ecrã de até 765px.
 */
@media (max-width: 765px) {
  /* Empilha as colunas verticalmente. */
  .yt-showcase-container {
    flex-direction: column;
    align-items: center;
    gap:150px;
  }

  /* Faz com que cada coluna ocupe a largura total. */
  .yt-showcase-column {
    width: 100%;
    max-width: 100%;
  }

  .yt-showcase-column-left {
    width: 100%;
    display: block;
  }

  /* Ajusta o tamanho do vídeo em destaque para ser consistente com os outros vídeos. */
  .yt-showcase-column-left .yt-showcase-box-large {
    width: 100% !important;
    height: 250px !important;
    
  }

  /* Garante que a imagem do vídeo em destaque se ajuste corretamente. */
  #featured-thumbnail {
    width: 100% !important;
    /*height: 250px !important;*/
    aspect-ratio: 16/9;
    object-fit: cover; /* Mantém a proporção da imagem e preenche o espaço. */
  }

  /* Exibe a coluna da direita e organiza seus itens verticalmente. */
  .yt-showcase-column-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Aumenta o tamanho das caixas de vídeo secundárias para ocupar a largura total. */
  .yt-showcase-column-right .yt-showcase-box-small {
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
    margin-bottom: 15px;
    display: flex !important;
    gap: 10px;
  }

  /* Força as imagens das thumbnails a terem a mesma altura fixa. */
  #thumbnail-1,
  #thumbnail-2,
  #thumbnail-3 {
    width: 100% !important;
    /*height: 250px !important;*/
    aspect-ratio: 16/9;
    object-fit: cover;
  }

  /* Garante que o container interno das thumbnails também tenha a altura correta. */
  .yt-showcase-box-small .yt-showcase-inner-box {
    width: 100% !important;
    height: 250px !important;
    position: relative;
  }

  /* Ajusta o tamanho e a posição dos botões "play" nos vídeos secundários para o novo layout. */
  .yt-showcase-box-small .play-button {
    width: 60px;
    height: 60px;
    left: 50%;
    font-size: 1.5em;
  }

  /* Estiliza o container do CTA para dispositivos móveis. */
  .videos-cta-div {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  /* Estilos específicos para o botão CTA em mobile (alvos de toque maiores). */
  #videos-cta-button {
    padding: 12px 24px;
    font-size: 16px;
  }

  /* Define um tamanho fixo para o botão "play" do vídeo em destaque. */
  .yt-showcase-box-large .play-button {
    width: 60px;
    height: 60px;
    left: 50%;
    font-size: 1.5em;
  }
  
  /* Garante que a imagem em destaque se ajuste à largura, mantendo a proporção. */
  #featured-thumbnail {
    width: 100%;
    height: auto;
  }

  /* Oculta o container do CTA duplicado em dispositivos móveis para evitar redundância. */
  .col-md-12.mktv-cta-container {
      display: none;
  }
}

/* Garante que o container principal seja visível e use Flexbox para o layout. */
#yt-showcase-main-container {
    visibility: visible;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Define as colunas como itens flex com direção vertical. 
O gap visa a ajustar a distancia devido ao height auto, necessário devido à implementação 
de aspect ratio arbitrário*/
.yt-showcase-column {
    display: flex;
    flex-direction: column;
    gap:135px;
}

/* style.css ou Custom CSS do Astra */

/* Desktop (largura mínima de 1024px) */
@media (min-width: 1024px) {
    .yt-showcase-column {
        gap: 5px;
    }
}