/* Container principal do card horizontal */
.course-block-new-layout {
    display: flex; /* Para colocar a imagem e o conteúdo lado a lado */
    background-color: #fff; /* Fundo branco para o card */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px; /* Espaçamento entre os cards */
    overflow: hidden; /* Garante que o border-radius funcione com a imagem */
}

/* Wrapper da imagem principal */
.course-image-wrapper {
    flex: 0 0 350px; /* Largura da imagem, ajuste se necessário */
    max-width: 350px;
    height: 250px; /* Altura fixa para as imagens, ajuste conforme necessário */
    overflow: hidden;
}

.course-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 	 /* Garante que a imagem cubra a área sem distorcer */
    display: block;
    border-radius: 8px 0 0 8px; /* Arredonda apenas os cantos da imagem */
}

/* Overlay para a foto do professor e data */
.professor-image-overlay {
    position: absolute;
    bottom: 15px; /* Ajuste a posição vertical */
    right: 15px; /* Ajuste a posição horizontal */
    display: flex;
    align-items: center;
    gap: 10px; /* Espaçamento entre a foto e a data, se houver */
    /* background-color: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente, se desejar */
    /* padding: 5px 10px; */
    /* border-radius: 5px; */
}

.professor-avatar {
    width: 60px; /* Tamanho da foto do professor */
    height: 60px;
    border-radius: 50%; /* Torna a imagem circular */
    border: 3px solid #fff; /* Borda branca ao redor da foto */
    object-fit: cover;
}

.date-circle {
    background-color: #7242d4; /* Cor de fundo do círculo, ajuste para a cor do seu tema */
    color: #fff;
    width: 50px; /* Tamanho do círculo */
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
    position: absolute; /* Posicionamento para o círculo */
    top: 15px; /* Distância do topo da imagem */
    right: 15px; /* Distância da direita da imagem */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Wrapper do conteúdo (título, descrição, botão) */
.course-content-wrapper {
    flex: 1; /* Ocupa o restante do espaço */
    padding: 25px; /* Espaçamento interno */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-content-wrapper .start-date {
    color: #888;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-weight: 500;
}

.course-content-wrapper h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em; /* Ajuste o tamanho do título */
    color: #333;
}

.course-content-wrapper p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Responsividade básica para o layout */
@media (max-width: 768px) {
    .course-block-new-layout {
        flex-direction: column; /* Em telas menores, a imagem e o conteúdo ficam um sobre o outro */
    }

    .course-image-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        height: 200px; /* Ajuste a altura para telas menores */
        border-radius: 8px 8px 0 0; /* Arredonda os cantos superiores */
    }

    .course-main-image {
        border-radius: 8px 8px 0 0;
    }

    .professor-image-overlay {
        bottom: 10px;
        right: 10px;
    }

    .course-content-wrapper {
        padding: 20px;
    }
}