/* Ajuste para a largura ficar menos estreita, páginas elementor */
@media only screen and (max-width: 767px) {
    .content_wrapper .section_wrapper, .container, .four.columns .widget-area .custom-header-three {
   padding-left: 13px !important;
    padding-right: 13px !important;
}
    }

/* on mobile */
@media (max-width: 768px) {
    .custom-header-three {
        font-size: 32px !important;
        padding: 5px !important;
    }
}

/* O CSS esconde qualquer elemento com ng-cloak até que o Angular remova a classe */
[ng-cloak] {
    display: none !important;
}

.custom-full-width {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.center-content {

    /**
    * Esta característica está impedindo ficar 2 colunas
    * no clero, na galeria e nas paróquias, por isso, removi
    * max-width: 60%;
    */
    margin-left: auto !important;
    margin-right: auto !important;
}

#curiaonline-diocese {
    overflow: hidden;

    .svgld {
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .svgld svg {
        z-index: 1 !important;
        left: 50% !important;
        top: 50% !important;
        margin-left: -50px !important;
        margin-top: -50px !important;
    }

    .svgld img {
        position: relative !important;
        z-index: 2 !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
    }

    .blcs {
        display: table !important;
        width: 100% !important;
    }

    .blcs > div {
        width: 180px !important;
        height: 340px !important;
        text-align: center !important;
        float: left !important;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
    }

    .blcs > div .img {
        width: 180px !important;
        height: 220px !important;
        display: block !important;
        border-radius: 10% !important;
    }

    .blcs > div .img:after {
        opacity: 0 !important;
        content: 'Ver detalhes' !important;
        color: #fff !important;
        text-align: center !important;
        padding-top: 100px !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 3 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
    }

    .blcs > div .img:hover:after {
        opacity: 1 !important;
    }

    .curia-table {
        width: 100%;
        text-align: center;
    }

    .curia-table th,
    td {
        padding: 10px;
        border: 1px solid black;
        border-radius: 5px;
    }

    .ui-accordion-header {
        background: rgb(255, 246, 170);
        background: linear-gradient(225deg, rgba(255, 246, 170, 1) 0%, rgba(223, 199, 0, 1) 38%, rgba(153, 138, 10, 1) 100%);
        color: #fff; /* Change text color if needed */
    }

    .ui-accordion-content {
        height: auto !important; /* Altura automática */
        overflow: hidden; /* Garante que a altura automática funcione corretamente */
    }

    .curia-card {
        width: auto;
        background-color: #fff;
        border-radius: 15px;
        -webkit-box-shadow: -2px 6px 5px 1px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: -2px 6px 5px 1px rgba(0, 0, 0, 0.3);
        box-shadow: -2px 6px 5px 1px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        margin: 20px;
    }

    .curia-card img {
        width: 80%;
        height: auto;
    }

    .curia-card-content {
        padding: 20px;
    }

    .curia-card h5 {
        line-height: 5px;
        color: #333;
    }

    .curia-card h6 {
        line-height: 5px;
        color: #333;
    }

    .curia-card p {
        color: #555;
    }

    .card-responsive {
        margin: 0 auto;
        padding: 0.5rem;
        height: auto;
        text-align: center;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        border-radius: 10px;
        max-width: 13.5rem;
    }

    .card-responsive img {
        border-radius: 7px;
        height: 230px;
        width: 180px;
    }

    .card-responsive:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .cards-responsive {
        padding: 5px;
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        gap: 1rem;
        align-content: flex-start;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .card-box {
        margin-top: 0.5rem;
        padding: 3px;
        max-height: 6rem;
        height: 6rem;
        overflow: hidden;
    }

    .card-icon-info {
        margin-top: 0.5rem;
    }

    .name-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card-name {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.1;
        -webkit-line-clamp: 3; /* Limita a duas linhas */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.1em * 3);/* Altura máxima para duas linhas */
        height: calc(1.1em * 3) !important;
    }

    @media (max-width: 768px) {
        .cards-responsive {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centraliza os cards no contêiner */
        }

        .card-responsive {
            width: 80%; /* Define uma largura ajustada para o mobile */
            max-width: 300px; /* Limita a largura máxima do card */
            margin-bottom: 10px; /* Espaçamento entre os cards */
            margin-left: auto !important;
        }
    }

    .clero-single-img {
        border-radius: 7px;
        height: 350px;
        width: 250px;
    }

    .paroquia-single-img {
        border-radius: 15px;
        width: 55%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        object-fit: cover;
    }

    .accordion-content {
        display: grid; /* Usa grid para controle de layout */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Define colunas responsivas */
        gap: 10px; /* Espaçamento entre os itens */
        overflow: hidden;
        padding: 10px;
        max-height: 0; /* Inicialmente escondido */
        opacity: 0; /* Totalmente transparente inicialmente */
        transition: opacity 0.5s, max-height 0.5s ease-in-out; /* Suaviza a transição de opacidade e altura */
    }

    .accordion-content.active {
        max-height: 100%; /* Ajuste conforme o conteúdo máximo esperado */
        opacity: 1; /* Torna visível */
    }

    .ui-accordion .ui-accordion-content {
        padding: 1px; /* Remove o padding padrão do jQuery UI Accordion */
    }

    .btn-copia-cola {
        background-color: #4CAF50; /* Cor de fundo verde */
        border: none; /* Remove a borda padrão */
        color: white; /* Cor do texto */
        padding: 15px 32px; /* Espaçamento interno */
        text-align: center; /* Centraliza o texto */
        text-decoration: none; /* Remove sublinhado */
        display: inline-block; /* Deixa o botão inline */
        font-size: 16px; /* Tamanho do texto */
        margin: 10px 2px; /* Espaçamento externo */
        cursor: pointer; /* Muda o cursor para pointer */
        border-radius: 12px; /* Borda arredondada */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        transition: background-color 0.3s ease; /* Transição suave */
    }

    .btn-copia-cola:hover {
        background-color: #45a049; /* Muda a cor do fundo ao passar o mouse */
    }

    .btn-copia-cola:active {
        background-color: #3e8e41; /* Cor quando o botão é pressionado */
        box-shadow: 0 5px #666; /* Sombra ao pressionar */
        transform: translateY(4px); /* Muda a posição ao pressionar */
    }

    .mais-info {
        font-size: 1.15rem;
    }

    .btn-whatsapp {
        background-color: #25d366; /* Cor de fundo verde */
        border: none; /* Remove a borda padrão */
        color: white; /* Cor do texto */
        padding: 10px 22px; /* Espaçamento interno */
        text-align: center; /* Centraliza o texto */
        text-decoration: none; /* Remove sublinhado */
        display: inline-block; /* Deixa o botão inline */
        font-size: 16px; /* Tamanho do texto */
        margin: 8px 2px; /* Espaçamento externo */
        cursor: pointer; /* Muda o cursor para pointer */
        border-radius: 12px; /* Borda arredondada */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        transition: background-color 0.3s ease; /* Transição suave */
    }

    .nav-tab-wrapper {
        margin-bottom: 1em;
    }

    .tab-content {
        border: 1px solid #ddd;
        padding: 15px;
    }

    .section-child {
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
    }
}