/* =========================================
   SAMRAMBA COMMUNITY PAGE
   RC2 VISUAL SYSTEM
========================================= */


/* =========================================
   PAGE
========================================= */

.rc2-community-hero,
.rc2-community-explorer,
.rc2-community-closing {

    width: 100%;

    box-sizing: border-box;

}


.rc2-community-hero {

    padding:
        120px 20px 32px;

    background:
        linear-gradient(
            135deg,
            #F7FBF9 0%,
            #EEF7F2 50%,
            #F8FAFC 100%
        );

}


.rc2-community-hero-inner,
.rc2-community-inner,
.rc2-community-closing-inner {

    width: 100%;

    max-width: 1180px;

    margin:
        0 auto;

    box-sizing: border-box;

}


/* =========================================
   HERO
========================================= */

.rc2-community-hero-inner {

    text-align: center;

}


.rc2-community-eyebrow {

    display: inline-block;

    margin-bottom: 9px;

    font-family:
        "Inter",
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    color:
        #17804B;

}


.rc2-community-hero h1 {

    margin:
        0 auto;

    max-width:
        1100px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
          clamp(2.2rem, 4vw, 3.35rem);

    line-height:
        1.05;

    letter-spacing:
        -.03em;

    color:
        #102A22;

}


.rc2-community-hero h1 span {

    display:
        inline;

    color:
        #17804B;

}


.rc2-community-hero p {

    max-width:
        680px;

     margin: 10px auto 0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(0.78rem, 1.1vw, 0.90rem);

    line-height:
        1.5;

    color:
        #64748B;

}


/* =========================================
   EXPLORER
========================================= */

.rc2-community-explorer {

    padding:
        28px 20px 90px;

    background:
        #FFFFFF;

}


/* =========================================
   COMMUNITY FILTERS
========================================= */

.rc2-community-filters {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        28px;

}


/* =========================================
   FILTER BUTTON
========================================= */

.rc2-community-filter {

    appearance:
        none;

    border:
        1px solid #DCE5E1;

    background:
        #FFFFFF;

    color:
        #52635C;

    padding:
        7px 18px;

    border-radius:
        9px;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .85rem;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;

}


/* =========================================
   DESKTOP HOVER
========================================= */

@media (hover: hover) and (pointer: fine) {

    .rc2-community-filter:hover {

        transform:
            translateY(-1px);

        border-color:
            #AFCDBD;

        box-shadow:
            0 5px 14px rgba(15, 23, 42, .06);

    }

}


/* =========================================
   ACTIVE FILTER
========================================= */

.rc2-community-filter.active {

    background:
        #17804B;

    color:
        #FFFFFF;

    border-color:
        #17804B;

    box-shadow:
        0 6px 16px rgba(23, 128, 75, .18);

}


/* =========================================
   TOUCH FEEDBACK
========================================= */

.rc2-community-filter:active {

    transform:
        scale(.97);

}


/* =========================================
   COMMUNITY GRID
========================================= */

.rc2-community-grid {

    display:
        grid;

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

    gap: 20px;
        
    margin-inline: auto;

}


/* =========================================
   COMMUNITY CARD
========================================= */

.rc2-community-card {

    overflow:
        hidden;

    background:
        #FFFFFF;

    border:
        1px solid #E5ECE8;

    border-radius:
        22px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

        animation:
    rc2CommunityCardIn .35s ease both;

}

@keyframes rc2CommunityCardIn {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}

/* =========================================
   DESKTOP HOVER
========================================= */

@media (hover: hover) and (pointer: fine) {

    .rc2-community-card:hover {

        transform:
            translateY(-5px);

        box-shadow:
            0 20px 42px rgba(15, 23, 42, .12);

    }

}


/* =========================================
   PHOTO
========================================= */

.rc2-community-image-wrap {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #F1F5F3;

}


.rc2-community-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .45s ease;

}


/* =========================================
   DESKTOP IMAGE HOVER
========================================= */

@media (hover: hover) and (pointer: fine) {

    .rc2-community-card:hover
    .rc2-community-image {

        transform:
            scale(1.025);

    }

}

/* =========================================
   BADGE
========================================= */

.rc2-community-card-badge {
    position: absolute;

    left: 12px;
    top: 88%;

    transform: translateY(-50%);

    padding: 5px 10px;

    border-radius: 9px;

    background: #102A22;
    color: #FFFFFF;
     

    font-family: "Inter", sans-serif;
    font-size: .48rem;
    font-weight: 400;

    letter-spacing: .05em;
    text-transform: uppercase;

    text-align: left;

    backdrop-filter: blur(8px);

    z-index: 2;

    box-sizing: border-box;

    max-width: calc(100% - 20px);
}


/* =========================================
   CARD CONTENT
========================================= */

.rc2-community-card-content {

    padding:
        22px 22px 24px;

     display: none;
}


.rc2-community-card-content h3 {

    margin:
        0 0 9px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        1.15rem;

    line-height:
        1.35;

    color:
        #102A22;

}


.rc2-community-card-content p {

    margin:
        0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .9rem;

    line-height:
        1.65;

    color:
        #64748B;

}

/* =========================================
   COMMUNITY CAROUSEL VISIBILITY
========================================= */

.rc2-community-card-hidden {

    display:
        none;

}

/* =========================================
   COMMUNITY CAROUSEL CONTROLS
========================================= */

.rc2-community-carousel {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

}


.rc2-community-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    border:
        1px solid #DCE5E1;

    border-radius:
        50%;

    background:
        #FFFFFF;

    color:
        #17804B;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, .08);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.rc2-community-arrow:hover {

    transform:
        translateY(-2px);

    background:
        #F1F8F4;

    box-shadow:
        0 12px 25px rgba(15, 23, 42, .12);

}


.rc2-community-arrow svg {

    width:
        19px;

    height:
        19px;

}


.rc2-community-prev {

    margin-right:
        18px;

}


.rc2-community-next {

    margin-left:
        18px;

}


.rc2-community-grid {

    flex:
        1;

    max-width:
        850px;

}

/* =========================================
   EMPTY STATE
========================================= */

.rc2-community-empty {

    text-align:
        center;

    max-width:
        560px;

    margin:
        50px auto 0;

    padding:
        55px 25px;

    border:
        1px dashed #CBD8D2;

    border-radius:
        22px;

}


.rc2-community-empty[hidden] {

    display:
        none;

}


.rc2-community-empty svg {

    width:
        38px;

    height:
        38px;

    margin-bottom:
        15px;

    color:
        #17804B;

}


.rc2-community-empty h2 {

    margin:
        0 0 10px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        1.3rem;

    color:
        #102A22;

}


.rc2-community-empty p {

    margin:
        0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .9rem;

    line-height:
        1.6;

    color:
        #64748B;

}


/* =========================================
   FOOTER
========================================= */

.rc2-community-footer {

    padding:
        22px 20px;

    text-align:
        center;

    background:
        #0B211A;

}


.rc2-community-footer p {

    margin:
        0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .78rem;

    color:
        #94A8A0;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       COMMUNITY HERO
    ----------------------------------------- */

    .rc2-community-hero {

        padding:
            80px 20px 32px;

    }


    .rc2-community-eyebrow {

        margin-bottom:
            8px;

        font-size:
            9px;

        letter-spacing:
            .11em;

    }


    .rc2-community-hero h1 {

        font-size:
            1.85rem;

        line-height:
            1.08;

        max-width:
            620px;

    }


    .rc2-community-hero p {

        max-width:
            520px;

        margin:
            13px auto 0;

        font-size:
            clamp(10px, 3.2vw, 12px);

        line-height:
            1.45;

    }


    /* -----------------------------------------
       COMMUNITY EXPLORER
    ----------------------------------------- */

    .rc2-community-explorer {

        padding:
            12px 12px 36px;

    }


    /* -----------------------------------------
       FILTERS
    ----------------------------------------- */

    .rc2-community-filters {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding:
            1px 1px 3px;

        margin-bottom:
            12px;

        gap:
            7px;

        scrollbar-width:
            none;

    }


    .rc2-community-filters::-webkit-scrollbar {

        display:
            none;

    }


   .rc2-community-filter {

    flex: 0 0 auto;
    height: 28px;
    min-height: 0 !important;
    padding: 0 11px !important;
    line-height: 1 !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: .68rem;
    border-radius: 8px;
}


    /* -----------------------------------------
       COMMUNITY GRID
       TWO CARDS PER ROW
    ----------------------------------------- */

    .rc2-community-grid {

        width:
            100%;

        max-width:
            none;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-flow:
            row;

        gap:
            14px 10px;

    }


    /* -----------------------------------------
       COMMUNITY CARD
    ----------------------------------------- */

    .rc2-community-card {

        border-radius:
            14px;

    }        

    .rc2-community-card-badge {

    left: 7px;
    
    top: 88%;

    padding: 5px 7px;

    border-radius: 8px;

    font-size: clamp(6px, 2.2vw, 7px);

    max-width: calc(100% - 14px);

    }


    /* -----------------------------------------
       COMMUNITY IMAGE
    ----------------------------------------- */

    .rc2-community-image-wrap {

        aspect-ratio:
            1 / 1;

    }

    .rc2-community-image {

    object-fit:
        cover;

    }

    /* -----------------------------------------
       CARD CONTENT
    ----------------------------------------- */

    .rc2-community-card-content {

        padding:
            11px 11px 13px;

        display: none;    

    }


    .rc2-community-card-content h3 {

        margin:
            0 0 5px;

        font-size:
            .88rem;

        line-height:
            1.3;

    }


    .rc2-community-card-content p {

        font-size:
            .72rem;

        line-height:
            1.45;

    }

    .rc2-community-footer {

        padding:
            14px 12px;

    }

    .rc2-community-footer p {

        font-size:
            .58rem;

        line-height:
            1.45;

    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 420px) {

    /* -----------------------------------------
       COMMUNITY HERO
    ----------------------------------------- */

    .rc2-community-hero {

        padding:
            68px 12px 28px;

    }


    .rc2-community-eyebrow {

        margin-bottom:
            7px;

        font-size:
            8px;

    }


    .rc2-community-hero h1 {

        font-size:
            1.62rem;

        line-height:
            1.08;

    }


    .rc2-community-hero p {

        margin-top:
            9px;

        font-size:
            clamp(10px, 2.8vw, 12px);

        line-height:
            1.4;

        max-width:
            340px;

    }


    /* -----------------------------------------
       EXPLORER
    ----------------------------------------- */

    .rc2-community-explorer {

        padding:
            13px 10px 42px;

    }


    /* -----------------------------------------
       FILTERS
    ----------------------------------------- */

    .rc2-community-filters {

        gap:
            7px;

        margin-bottom:
            15px;

        padding:
            2px 1px 5px;

    }


    .rc2-community-filter {

        padding: 0 11px !important;
            
        font-size:
            clamp(10px, 2.6vw, 11px);

        border-radius: 8px;

    }


    /* -----------------------------------------
       TWO-COLUMN COMMUNITY GRID
    ----------------------------------------- */

    .rc2-community-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-flow:
            row;

        gap:
            12px 8px;

    }


    /* -----------------------------------------
       COMMUNITY CARD
    ----------------------------------------- */

    .rc2-community-card {

        border-radius:
            12px;

    }

    .rc2-community-card-badge {

    left: 7px;

    top: 88%;

    padding: 3px 7px;

    border-radius: 8px;

    font-size: clamp(5px, 1.8vw, 6px);

    max-width: calc(100% - 14px);
}


    /* -----------------------------------------
       IMAGE
    ----------------------------------------- */

    .rc2-community-image-wrap {

        aspect-ratio:
            1 / 1;

    }


    /* -----------------------------------------
       CARD CONTENT
    ----------------------------------------- */

    .rc2-community-card-content {

        padding:
            9px 9px 11px;

         display: none;
    }


    .rc2-community-card-content h3 {

        margin-bottom:
            4px;

        font-size:
            .78rem;

        line-height:
            1.25;

    }


    .rc2-community-card-content p {

        font-size:
            .65rem;

        line-height:
            1.4;

    }

    .rc2-community-footer {

        padding:
            12px 10px;

    }

    .rc2-community-footer p {

        font-size:
            .58rem;

        line-height:
            1.4;

    }

}