/* Estrutura geral do container */
.single-obra-template {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.divisor-obra{
    border-block-start-color:rgb(0, 115, 170);
    border-block-start-style:solid;
    border-block-start-width:3px;
    box-sizing:border-box;
    color:rgb(51, 51, 51);
    direction:ltr;
    display:flex;
    font-family:Roboto, sans-serif;
    font-size:16px;
    font-weight:400;
    height:3px;
    line-height:24px;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right:0px;
    margin-top: 0px !important;
    text-size-adjust:100%;
    width: 84px;
    gap: 0px;
}

/* Container principal das colunas */
.obra-detalhe-container {
    display: flex;
    flex-direction: column; /* Colunas empilhadas em telas menores */
    gap: 40px; /* Espaço entre as colunas */
    margin-top: 9px;
}

/* Coluna da esquerda (título e detalhes) */
.obra-detalhe-coluna-esquerda {
    flex: 1; /* Ocupa o espaço disponível */
    /* padding: 20px; */
    /* border: 1px solid #eee; */
    /* border-radius: 8px; */
    background-color: #fff;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
}

.obra-detalhe-coluna-esquerda h1 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 2.5em;
    line-height: 1.2;
}

.obra-detalhe-coluna-esquerda p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #555;
    margin-top: 13px;
}

.obra-detalhe-coluna-esquerda strong {
    color: #333;
}

/* Coluna da direita (galeria de imagens) */
.obra-detalhe-coluna-direita {
    flex: 1.5; /* Ocupa mais espaço que a esquerda em telas grandes */
    /* padding: 20px; */
    /* border: 1px solid #eee; */
    /* border-radius: 8px; */
    background-color: #fff;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
}

.obra-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Colunas flexíveis, mínimo de 100px */
    gap: 15px; /* Espaço entre as miniaturas */
}

.obra-galeria-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.obra-galeria-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.obra-galeria-miniatura {
    width: 100%;
    height: 145px; /* Altura fixa para as miniaturas */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    display: block;
}

/* Media Query para telas maiores (tablets e desktops) */
@media (min-width: 768px) {
    .obra-detalhe-container {
        flex-direction: row; /* Colunas lado a lado */
    }

    .obra-galeria {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas para miniaturas */
    }
}

/* Media Query para telas muito grandes */
@media (min-width: 1024px) {
    .obra-detalhe-coluna-esquerda {
        flex: 1; /* Mantém 1 parte */
    }
    .obra-detalhe-coluna-direita {
        flex: 2; /* Aumenta a proporção da coluna da direita para 2 partes */
    }
}