/* Seu arquivo CSS (ex: public/css/app.css ou styles.css) ou dentro de <style> */

.imagem-destaque {
    border-radius: 24px; /* Valor para o arredondamento das bordas */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra */
    /*
      Explicação do box-shadow:
      0px (offset-x): Deslocamento horizontal da sombra
      8px (offset-y): Deslocamento vertical da sombra
      16px (blur-radius): Raio do desfoque da sombra
      rgba(0, 0, 0, 0.2): Cor da sombra (preto com 20% de opacidade)
    */

    /* Opcional: Para garantir que a imagem não saia da borda arredondada se for maior */
    overflow: hidden;
    /* Se a imagem for muito grande e não se ajustar ao container */
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
}

.meu-carousel-alto {
    /*min-height:500px;*/
    min-height: 80vh;
    border-radius: 24px;
}

@media screen and (max-width: 600px) { /* Breakpoint 'small' do Materialize */
    .meu-carrossel-alto {
        min-height: 350px; /* Exemplo: altura menor para telas de celular */
    }
}

/* No seu arquivo CSS (ex: public/css/app.css ou um CSS customizado) */
/* Garante que a imagem sempre preencha o espaço da sua coluna sem distorcer */
.carousel-item img {
    max-width: 100%; /* Garante responsividade */
    height: auto;
    object-fit: cover; /* Recorta a imagem para preencher o espaço mantendo a proporção */
    display: block; /* Remove o espaço extra abaixo da imagem */
    margin: 0 auto; /* Centraliza a imagem se ela for menor que a largura da coluna */
}

/* --- CORREÇÃO: Gerenciamento da Linha (row) Responsiva --- */
.carousel-item .row.carousel-row-responsive {
    height: 100%; /* Garante que a linha ocupe toda a altura do item do carrossel */
    margin-bottom: 0; /* Remove a margem padrão do Materialize para .row */
}

/* ATIVA FLEXBOX APENAS NA LINHA (row) PARA TELAS MÉDIAS E GRANDES */
@media screen and (min-width: 601px) { /* Breakpoint 'medium' do Materialize */
    .carousel-item .row.carousel-row-responsive {
        display: flex;
        align-items: center; /* Alinha as colunas (.col) verticalmente no centro */
        /* justify-content: center; /* Opcional: Se as colunas não preencherem 100% e você quiser centralizá-las */
    }
}

/* Alinhamento para o conteúdo dentro das colunas */
.carousel-content-wrapper {
    display: flex;
    flex-direction: column; /* Em telas pequenas, itens ficam em coluna */
    justify-content: center; /* Alinha verticalmente no centro */
    align-items: center; /* Alinha horizontalmente no centro (para o item empilhado) */
    text-align: center; /* Garante que o texto fique centralizado */
    height: 100%; /* Garante que o wrapper ocupe a altura da coluna */
}

/* Ajustes específicos para o alinhamento do texto/botão em telas grandes */
@media screen and (min-width: 601px) {
    /* Alinha o conteúdo do wrapper de texto/botão à esquerda em telas médias/grandes */
    /* A coluna do texto é a segunda .col.m6 dentro da .row (por isso nth-child(2)) */
    .carousel-item .col.m6:nth-child(2) .carousel-content-wrapper {
        text-align: left; /* Alinha o texto à esquerda */
        align-items: flex-start; /* Alinha itens flexíveis (botão) ao início */
    }
}

/* Ajustes para o texto e botão */
.carousel-content-wrapper h4,
.carousel-content-wrapper h6,
.carousel-content-wrapper a.btn-small {
    margin-bottom: 15px; /* Adiciona espaço entre os elementos */
    margin-left: 0 !important; /* Remove qualquer margem esquerda que o Materialize possa adicionar */
    margin-right: 0 !important; /* Remove qualquer margem direita */
    width: auto; /* Garante que elementos inline/inline-block não se estiquem */
}

.carousel-content-wrapper a.btn-small:last-child {
    margin-bottom: 0; /* O último elemento não precisa de margem inferior */
}

/* Estilo padrão para telas médias e grandes */
/* Mantém o h4 como h4 (ou com o tamanho desejado) */
.carousel-content-wrapper h4.header {
    font-size: 2.28rem; /* Tamanho padrão de um <h3> no Materialize, ou defina um valor específico */
    /* Você usou bold no HTML, mas é bom reforçar aqui se for padrão */
    font-weight: bold;
    line-height: 110%; /* Linha padrão do Materialize */
    margin: 1.14rem 0 0.912rem 0; /* Margens padrão do Materialize para h3 */
}

/* Regra para telas pequenas (smartphones) */
/* O Materialize define o breakpoint 'small' até 600px */
@media screen and (max-width: 600px) {
    .carousel-content-wrapper h4.header {
        font-size: 1.64rem; /* Tamanho padrão de um <h5> no Materialize, ou defina seu valor desejado */
        /* Margens ajustadas para telas menores */
        margin: 0.82rem 0 0.656rem 0;
    }
}