/* =========================================================
   COMUNIDADE - PÁGINA INDIVIDUAL
   Identidade visual rosa-bebê
========================================================= */


/* =========================================================
   CABEÇALHO
========================================================= */

.community-detail-header {

    padding: 24px 0 10px;

    background: #fff;
}


.community-back-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #b45f7e;

    font-size: .88rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .2s ease,
        gap .2s ease;
}


.community-back-link:hover {

    gap: 11px;

    color: #8f4964;
}


/* =========================================================
   PÁGINA
========================================================= */

.community-detail-page {

    padding: 25px 0 75px;

    background: #fff;
}


/* =========================================================
   CARD PRINCIPAL
========================================================= */

.community-detail-card {

    overflow: hidden;

    padding: 32px;

    background: #fff;

    border: 1px solid #efdee5;

    border-radius: 22px;

    box-shadow:
        0 8px 30px rgba(88, 67, 77, .07);
}


/* =========================================================
   IMAGEM
========================================================= */

.community-detail-image {

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #fff0f5;

    border-radius: 18px;
}


.community-detail-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}


.community-detail-image:hover img {

    transform: scale(1.025);
}


.community-detail-image-empty {

    display: flex;

    align-items: center;
    justify-content: center;

    color: #c56f8f;

    font-size: 4rem;
}


/* =========================================================
   TÍTULO
========================================================= */

.community-detail-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: #c56f8f;

    font-size: .77rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.community-detail-card h1 {

    margin: 0 0 17px;

    color: #58434d;

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight: 700;

    line-height: 1.15;
}


/* =========================================================
   RESUMO
========================================================= */

.community-detail-summary {

    max-width: 650px;

    margin-bottom: 22px;

    color: #806d76;

    font-size: 1rem;

    line-height: 1.75;
}


/* =========================================================
   BOTÃO MAPS
========================================================= */

.community-map-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 17px;

    background: #e8b8c8;

    border: 1px solid #e8b8c8;

    border-radius: 10px;

    color: #fff;

    font-size: .88rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.community-map-button:hover {

    background: #dca4b8;

    border-color: #dca4b8;

    color: #fff;

    transform: translateY(-1px);
}


.community-map-button .bi-box-arrow-up-right {

    margin-left: 2px;

    font-size: .75rem;

    opacity: .8;
}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.community-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-top: 32px;

    padding-top: 28px;

    border-top: 1px solid #f0e1e7;
}


.community-info-item {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    padding: 14px;

    background: #fff8fa;

    border: 1px solid #f1dfe6;

    border-radius: 13px;
}


.community-info-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 11px;

    background: #f8dce6;

    color: #b45f7e;

    font-size: 1rem;
}


.community-info-item > div:last-child {

    min-width: 0;
}


.community-info-item span {

    display: block;

    margin-bottom: 3px;

    color: #967f89;

    font-size: .72rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .05em;
}


.community-info-item strong {

    display: block;

    overflow: hidden;

    color: #58434d;

    font-size: .9rem;

    line-height: 1.35;

    text-overflow: ellipsis;
}


/* =========================================================
   TEXTO / HISTÓRIA
========================================================= */

.community-text-card {

    margin-top: 30px;

    padding: 34px;

    background: #fff;

    border: 1px solid #efdee5;

    border-radius: 22px;

    box-shadow:
        0 6px 24px rgba(88, 67, 77, .05);
}


.community-text-header {

    margin-bottom: 27px;

    padding-bottom: 20px;

    border-bottom: 1px solid #f0e1e7;
}


.community-text-header .community-detail-eyebrow {

    margin-bottom: 7px;
}


.community-text-header h2 {

    margin: 0;

    color: #58434d;

    font-size: 1.65rem;

    font-weight: 700;
}


/* =========================================================
   CONTEÚDO HTML
========================================================= */

.community-text {

    max-width: 900px;

    color: #65545d;

    font-size: 1rem;

    line-height: 1.85;
}


.community-text p {

    margin: 0 0 18px;
}


.community-text p:last-child {

    margin-bottom: 0;
}


.community-text h2,
.community-text h3,
.community-text h4 {

    margin-top: 30px;

    margin-bottom: 13px;

    color: #58434d;

    font-weight: 700;
}


.community-text h2 {

    font-size: 1.45rem;
}


.community-text h3 {

    font-size: 1.25rem;
}


.community-text h4 {

    font-size: 1.1rem;
}


.community-text strong {

    color: #5f4853;
}


.community-text a {

    color: #b45f7e;

    font-weight: 600;

    text-decoration: underline;

    text-decoration-color: #e8b8c8;

    text-underline-offset: 3px;
}


.community-text a:hover {

    color: #8f4964;
}


.community-text ul,
.community-text ol {

    margin-top: 10px;

    margin-bottom: 20px;

    padding-left: 25px;
}


.community-text li {

    margin-bottom: 7px;
}


.community-text img {

    display: block;

    max-width: 100%;

    height: auto;

    margin: 22px auto;

    border-radius: 12px;
}


.community-text blockquote {

    margin: 25px 0;

    padding: 18px 22px;

    background: #fff8fa;

    border-left: 4px solid #e5b3c5;

    border-radius: 10px;

    color: #725d67;
}


.community-text table {

    width: 100%;

    margin: 22px 0;

    border-collapse: collapse;
}


.community-text th,
.community-text td {

    padding: 10px;

    border: 1px solid #efdee5;
}


.community-text th {

    background: #fff0f5;

    color: #58434d;
}


/* =========================================================
   RODAPÉ DA PÁGINA
========================================================= */

.community-detail-footer {

    display: flex;

    justify-content: center;

    margin-top: 35px;
}


.community-back-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 17px;

    border: 1px solid #e8cbd5;

    border-radius: 10px;

    background: #fff;

    color: #a15572;

    font-size: .87rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.community-back-button:hover {

    background: #fff0f5;

    border-color: #e5b3c5;

    color: #8f4964;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 991.98px) {

    .community-detail-card {

        padding: 25px;
    }


    .community-detail-image {

        aspect-ratio: 16 / 9;
    }


    .community-info-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =========================================================
   TABLET / CELULAR
========================================================= */

@media (max-width: 767.98px) {

    .community-detail-header {

        padding-top: 18px;
    }


    .community-detail-page {

        padding-top: 18px;

        padding-bottom: 55px;
    }


    .community-detail-card {

        padding: 20px;

        border-radius: 18px;
    }


    .community-detail-card h1 {

        font-size: 2rem;
    }


    .community-info-grid {

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 25px;

        padding-top: 22px;
    }


    .community-text-card {

        margin-top: 20px;

        padding: 22px;

        border-radius: 18px;
    }


    .community-text-header {

        margin-bottom: 22px;
    }


    .community-text-header h2 {

        font-size: 1.4rem;
    }

}


/* =========================================================
   CELULAR PEQUENO
========================================================= */

@media (max-width: 430px) {

    .community-detail-card h1 {

        font-size: 1.75rem;
    }


    .community-detail-summary {

        font-size: .92rem;
    }


    .community-text {

        font-size: .94rem;

        line-height: 1.75;
    }


    .community-map-button {

        width: 100%;

        justify-content: center;
    }

}