:root{
    --red:#e51d2a;
    --red-dark:#b80f1c;
    --green:#1f6f25;
    --green-dark:#153f1c;
    --cream:#f8f6f1;
    --ink:#18201a;
    --muted:#667067;
    --line:#e4e8e3;
    --white:#fff;
    --shadow:0 18px 55px rgba(20,50,25,.09)
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    font-family:'Noto Sans Bengali',sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.65
}

a{
    color:inherit;
    text-decoration:none
}

img{
    max-width:100%
}

.container{
    width:min(1180px,calc(100% - 40px));
    margin:auto
}

.narrow{
    width:min(820px,calc(100% - 40px));
    margin:auto
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px)
}

.nav-wrap{
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.brand{
    display:flex;
    align-items:center;
    gap:12px
}

.brand img{
    width:58px;
    height:58px;
    object-fit:contain;
    border-radius:0;
    box-shadow:none;
    filter:drop-shadow(0 3px 7px #0002)
}

.brand strong{
    display:block;
    font-size:20px
}

.brand small{
    color:var(--green);
    font-weight:600
}

.nav-links{
    display:flex;
    align-items:center;
    gap:26px;
    font-weight:600
}

.nav-links a:hover{
    color:var(--red)
}

.menu-button{
    display:none;
    border:0;
    background:none;
    font-size:27px
}


/* =========================================================
   BUTTONS
========================================================= */

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    background:var(--red);
    color:#fff!important;
    padding:12px 20px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(229,29,42,.2)
}

.button:hover{
    background:var(--red-dark)
}

.button.small{
    padding:8px 14px
}

.button.wide{
    width:100%
}

.button.ghost{
    background:transparent;
    color:var(--green)!important;
    border:1px solid var(--green);
    box-shadow:none
}

.button.danger{
    background:#9c1521
}


/* =========================================================
   GENERAL
========================================================= */

.hero{
    background:
        radial-gradient(circle at 80% 20%,rgba(229,29,42,.12),transparent 34%),
        linear-gradient(135deg,#fff 0%,#f5f8f2 100%);
    padding:82px 0
}

.hero-grid{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:70px;
    align-items:center
}

.eyebrow{
    color:var(--red);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
    font-size:14px
}

.hero h1,
.page-hero h1{
    font-size:clamp(38px,6vw,72px);
    line-height:1.14;
    margin:12px 0 22px
}

.hero h1 em{
    font-style:normal;
    color:var(--green)
}

.hero p{
    font-size:19px;
    color:var(--muted);
    max-width:650px
}

.actions{
    display:flex;
    gap:14px;
    margin:30px 0
}

.stats{
    display:flex;
    gap:45px;
    margin-top:38px
}

.stats strong{
    display:block;
    font-size:25px;
    color:var(--green)
}

.stats span{
    color:var(--muted);
    font-size:14px
}

.section{
    padding:76px 0
}

.section.tinted{
    background:var(--cream)
}

.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin-bottom:30px;
    gap:20px
}

.section-head h2{
    font-size:36px;
    margin:4px 0
}

.section-head>a{
    color:var(--red);
    font-weight:700;
    white-space:nowrap
}

.tag,
.status{
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    background:#feecef;
    color:var(--red-dark);
    font-size:12px;
    font-weight:800
}

.tag.green,
.status.approved,
.status.published{
    background:#e4f4e6;
    color:var(--green)
}

.status.pending{
    background:#fff3d2;
    color:#8a5e00
}

.status.rejected,
.status.suspended{
    background:#feecef;
    color:#a40f20
}

.status.draft{
    background:#eceff1;
    color:#48545c
}

.text-link{
    display:inline-flex;
    color:var(--green);
    font-weight:800
}

.text-link:hover{
    color:var(--red)
}


/* =========================================================
   FORMS / SHARED
========================================================= */

.form-card,
.success-card,
.status-card,
.profile-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:34px;
    box-shadow:var(--shadow)
}

.form-section{
    border-bottom:1px solid var(--line);
    padding-bottom:26px;
    margin-bottom:28px
}

.form-section h2{
    font-size:22px;
    color:var(--green)
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.full{
    grid-column:1/-1
}

label{
    display:block;
    font-weight:600;
    margin-bottom:14px
}

input,
select,
textarea{
    width:100%;
    border:1px solid #ccd4cc;
    border-radius:9px;
    padding:12px 13px;
    margin-top:6px;
    background:#fff;
    font:inherit;
    color:var(--ink)
}

input:focus,
select:focus,
textarea:focus{
    outline:3px solid rgba(31,111,37,.12);
    border-color:var(--green)
}

textarea{
    min-height:100px;
    resize:vertical
}

.editor{
    min-height:330px
}

.check{
    display:flex;
    align-items:flex-start;
    gap:10px
}

.check input{
    width:auto;
    margin-top:7px
}

.alert{
    padding:14px 18px;
    border-radius:10px;
    margin:18px 0
}

.alert.success{
    background:#e7f6e9;
    color:#16551c
}

.alert.error{
    background:#fff0f1;
    color:#941320
}


/* =========================================================
   MEMBER
========================================================= */

.member-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.member-card{
    display:flex;
    gap:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff
}

.member-card img{
    width:88px;
    height:100px;
    object-fit:cover;
    border-radius:11px
}

.member-card h3{
    margin:8px 0 0
}

.member-card p{
    margin:4px 0;
    color:var(--muted)
}

.member-card span{
    font-size:12px;
    color:var(--green);
    font-weight:700
}

.profile-top{
    display:flex;
    gap:25px;
    align-items:center;
    margin-bottom:28px
}

.profile-top img{
    width:140px;
    height:155px;
    object-fit:cover;
    border-radius:16px
}

.verified{
    color:var(--green);
    font-weight:700
}

.profile-top h1{
    margin:6px 0
}

.profile-card dl,
.detail-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

.profile-card dl>div,
.detail-list>div{
    background:var(--cream);
    padding:14px;
    border-radius:10px
}

.profile-card dt,
.detail-list dt{
    color:var(--muted);
    font-size:13px
}

.profile-card dd,
.detail-list dd{
    margin:2px 0;
    font-weight:600
}


/* =========================================================
   ADMIN
========================================================= */

.admin-body{
    background:#f2f5f2;
    display:flex;
    min-height:100vh
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:250px;
    background:#123b1a;
    color:#fff;
    padding:24px;
    display:flex;
    flex-direction:column;
    overflow-y:auto
}

.admin-brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:20px;
    font-weight:700
}

.admin-brand img{
    width:55px;
    height:55px;
    object-fit:contain
}

.admin-brand small{
    font-size:13px;
    color:#b8d8bc
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:28px
}

.sidebar nav a,
.sidebar button{
    padding:12px;
    border-radius:8px;
    color:#fff;
    background:transparent;
    border:0;
    font:inherit;
    text-align:left
}

.sidebar nav a:hover{
    background:#ffffff16
}

.sidebar form{
    margin-top:auto
}

.admin-main{
    margin-left:250px;
    width:calc(100% - 250px)
}

.admin-main>header{
    height:72px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px
}

.admin-content{
    padding:30px
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:26px
}

.metric{
    padding:24px;
    border-radius:16px;
    background:#fff;
    border-top:4px solid
}

.metric span{
    display:block;
    color:var(--muted)
}

.metric strong{
    font-size:38px
}

.metric.amber{border-color:#d49b12}
.metric.green{border-color:var(--green)}
.metric.red{border-color:var(--red)}
.metric.blue{border-color:#2373b9}

.panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px;
    margin-bottom:20px
}

.panel-head,
.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px
}

.table-wrap{
    overflow:auto
}

table{
    width:100%;
    border-collapse:collapse
}

th,
td{
    padding:13px;
    text-align:left;
    border-bottom:1px solid var(--line)
}

th{
    color:var(--muted);
    font-size:13px
}

.admin-grid{
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:22px
}


/* =========================================================
   HOMEPAGE HEADER OVERRIDES
========================================================= */

.site-header .container{
    width:min(1320px,calc(100% - 40px))
}

.site-header .nav-wrap{
    min-height:78px
}

.site-header .brand img{
    width:54px;
    height:54px
}

.site-header .brand strong{
    font-size:18px
}

.site-header .nav-links{
    gap:18px;
    font-size:15px
}


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

.home-hero{
    padding:54px 0 48px;
    background:
        radial-gradient(
            circle at 6% 20%,
            rgba(31,111,37,.09),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fff,
            #fbfdfb
        )
}

.home-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);
    gap:64px;
    align-items:center
}

.home-hero-copy h1{
    max-width:720px;
    margin:14px 0 20px;
    font-size:clamp(46px,5.1vw,68px);
    line-height:1.13;
    letter-spacing:-.035em
}

.home-hero-copy h1 em{
    color:var(--red);
    font-style:normal
}

.home-hero-copy>p{
    max-width:650px;
    color:var(--muted);
    font-size:18px
}

.home-hero-copy .actions{
    margin:28px 0 24px
}

.home-trust{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:14px
}

.home-trust-dots{
    display:flex
}

.home-trust-dots i{
    display:block;
    width:30px;
    height:30px;
    margin-left:-8px;
    border:3px solid #fff;
    border-radius:50%;
    background:linear-gradient(145deg,#3e8a49,#174b20)
}

.home-trust-dots i:first-child{
    margin-left:0;
    background:linear-gradient(145deg,#ec5360,#b80f1c)
}


/* =========================================================
   FEATURED EVENT
========================================================= */

.featured-event-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 22px 60px rgba(18,61,28,.13)
}

.featured-event-image,
.event-card-image{
    position:relative;
    display:block;
    overflow:hidden;
    background:#edf5ee
}

.featured-event-image{
    height:265px
}

.featured-event-image>img,
.event-card-image>img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease
}

.featured-event-card:hover .featured-event-image>img,
.event-card:hover .event-card-image>img{
    transform:scale(1.03)
}

.event-image-fallback{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    min-height:180px;
    background:
        radial-gradient(
            circle,
            #fff 0%,
            #eef6ef 68%,
            #e5f0e7 100%
        )
}

.event-image-fallback img{
    width:130px;
    height:130px;
    object-fit:contain;
    opacity:.9
}

.featured-event-body{
    padding:25px 28px 28px
}

.featured-event-body h2{
    margin:10px 0 12px;
    font-size:27px;
    line-height:1.3
}

.featured-event-body p{
    margin:6px 0;
    color:var(--muted);
    font-size:14px
}

.featured-event-body .text-link{
    margin-top:14px
}

.event-date-badge{
    position:absolute;
    left:16px;
    bottom:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:58px;
    padding:7px 10px;
    background:#fff;
    border-radius:10px;
    color:var(--red);
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    box-shadow:0 8px 24px #0003
}

.event-date-badge strong{
    font-size:25px
}

.featured-event-empty .event-image-fallback{
    height:235px
}


/* =========================================================
   STATS
========================================================= */

.home-stats{
    padding:0 0 12px;
    background:#fbfdfb
}

.home-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:20px 12px;
    background:#edf6ee;
    border:1px solid #dfebdf;
    border-radius:16px
}

.home-stats-grid>div{
    display:grid;
    grid-template-columns:44px auto;
    grid-template-rows:auto auto;
    align-items:center;
    padding:5px 24px;
    border-right:1px solid #cddfce
}

.home-stats-grid>div:last-child{
    border:0
}

.home-stats-grid .stat-icon{
    grid-row:1/3;
    display:grid;
    place-items:center;
    width:37px;
    height:37px;
    border-radius:50%;
    background:#fff;
    color:var(--green);
    font-size:22px
}

.home-stats-grid .stat-icon.blood{
    color:var(--red)
}

.home-stats-grid strong{
    font-size:24px;
    color:var(--green);
    line-height:1.1
}

.home-stats-grid small{
    color:var(--muted);
    font-size:13px
}


/* =========================================================
   HOMEPAGE GENERAL
========================================================= */

.home-section{
    padding:66px 0
}

.home-section .section-head h2{
    margin:2px 0;
    font-size:36px
}

.section-head.centered{
    justify-content:center;
    text-align:center
}

.section-head.centered p{
    margin:8px 0 0;
    color:var(--muted)
}

.section-head.compact{
    margin-bottom:20px
}

.section-head.compact h2{
    font-size:30px
}


/* =========================================================
   EVENTS
========================================================= */

.event-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.event-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 30px rgba(20,50,25,.06)
}

.event-card-image{
    height:205px
}

.event-card>div:last-child{
    padding:20px
}

.event-card h3{
    margin:10px 0;
    font-size:21px;
    line-height:1.35
}

.event-card p{
    margin:5px 0;
    color:var(--muted);
    font-size:14px
}

.event-card .text-link{
    margin-top:12px
}


/* =========================================================
   PROGRAMS
========================================================= */

.programs-section{
    background:#f7faf7
}

.program-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.program-card{
    padding:32px 28px;
    text-align:center;
    background:#fff;
    border:1px solid #dce7dd;
    border-radius:16px;
    transition:
        transform .2s ease,
        box-shadow .2s ease
}

.program-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow)
}

.program-icon{
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    margin:0 auto 18px;
    border-radius:50%;
    background:#e8f5ea;
    color:var(--green);
    font-size:29px;
    font-weight:900
}

.program-icon.blood{
    background:#fff0f1;
    color:var(--red)
}

.program-card h3{
    margin:0 0 10px;
    font-size:23px
}

.program-card p{
    min-height:76px;
    margin:0;
    color:var(--muted)
}

.program-card a{
    display:inline-block;
    margin-top:17px;
    color:var(--red);
    font-weight:800
}


/* =========================================================
   STORIES
========================================================= */

.story-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:1fr 1fr;
    gap:20px
}

.story-card{
    display:grid;
    grid-template-columns:190px 1fr;
    overflow:hidden;
    min-height:210px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 8px 28px rgba(20,50,25,.05)
}

.story-card>img,
.story-placeholder{
    width:100%;
    height:100%;
    object-fit:cover
}

.story-placeholder{
    display:grid;
    place-items:center;
    background:#edf5ee
}

.story-placeholder img{
    width:90px;
    height:90px;
    object-fit:contain;
    opacity:.75
}

.story-card-body{
    padding:22px
}

.story-card h3{
    margin:9px 0 8px;
    font-size:20px;
    line-height:1.35
}

.story-card p{
    margin:0 0 10px;
    color:var(--muted);
    font-size:14px
}

.story-featured{
    grid-row:1/3;
    display:flex;
    flex-direction:column
}

.story-featured>img,
.story-featured>.story-placeholder{
    height:320px
}

.story-featured .story-card-body{
    padding:26px
}

.story-featured h3{
    font-size:25px
}


/* =========================================================
   MEDIA
========================================================= */

.media-section{
    background:#f7faf7
}

.section-actions{
    display:flex;
    gap:8px
}

.section-actions a,
.media-filter a{
    padding:7px 15px;
    border:1px solid #cfe0d1;
    border-radius:999px;
    background:#fff;
    color:var(--green);
    font-weight:700
}

.media-mosaic{
    display:grid;
    grid-template-columns:1.35fr repeat(3,1fr);
    grid-template-rows:190px 190px;
    gap:10px
}

.media-tile{
    position:relative;
    overflow:hidden;
    border-radius:13px;
    background:#dfeae0
}

.media-tile-1{
    grid-row:1/3
}

.media-tile-2{
    grid-column:2/4
}

.media-tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease
}

.media-tile:hover img{
    transform:scale(1.04)
}

.media-tile>span{
    position:absolute;
    inset:auto 0 0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:25px 14px 12px;
    background:linear-gradient(transparent,#000b);
    color:#fff;
    font-size:13px;
    font-weight:700
}

.media-tile>span b{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#fff;
    color:var(--red)
}

.media-video-placeholder{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    min-height:150px;
    background:linear-gradient(145deg,#153f1c,#1f6f25);
    color:#fff;
    font-size:35px
}

.center-action{
    text-align:center;
    margin-top:26px
}


/* =========================================================
   NEWS + NOTICE
========================================================= */

.updates-section{
    background:#fff
}

.updates-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:38px;
    align-items:start
}

.news-list{
    display:flex;
    flex-direction:column;
    gap:16px
}

.news-list article{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line)
}

.news-list article>img{
    width:130px;
    height:95px;
    object-fit:cover;
    border-radius:10px
}

.news-list time{
    color:var(--muted);
    font-size:12px
}

.news-list h3{
    margin:3px 0;
    font-size:18px;
    line-height:1.35
}

.news-list p{
    margin:3px 0;
    color:var(--muted);
    font-size:13px
}

.notice-panel{
    padding:27px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fbfdfb
}

.notice-list{
    display:flex;
    flex-direction:column
}

.notice-list>a{
    display:grid;
    grid-template-columns:52px 1fr;
    align-items:center;
    gap:14px;
    padding:12px 0;
    border-bottom:1px dashed #d6dfd7
}

.notice-list>a:last-child{
    border:0
}

.notice-list time{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:6px;
    border-radius:8px;
    background:#e8f4ea;
    color:var(--green);
    font-size:11px;
    line-height:1.2
}

.notice-list time strong{
    font-size:20px
}

.notice-list span{
    font-weight:600;
    line-height:1.4
}


/* =========================================================
   FACEBOOK 3 POST FULL ROW
========================================================= */

.facebook-posts-section{
    background:#f7faf7;
    border-top:1px solid #edf2ee
}

.facebook-section-head{
    align-items:end
}

.facebook-section-head p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:14px
}

.facebook-post-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:start
}

.facebook-post-card{
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid #dde6df;
    border-radius:16px;
    box-shadow:0 8px 28px rgba(20,50,25,.06)
}

.facebook-embed-wrap{
    width:100%;
    min-height:560px;
    overflow:hidden;
    background:#fff
}

.facebook-embed-wrap iframe{
    display:block;
    width:100%!important;
    max-width:100%!important;
    min-height:560px;
    margin:0 auto!important;
    border:0!important
}

.facebook-bottom-action{
    display:flex;
    justify-content:center;
    margin-top:26px
}

.facebook-main-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:11px 22px;
    border-radius:10px;
    background:#1877f2;
    color:#fff!important;
    font-size:14px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(24,119,242,.18)
}

.facebook-main-button:hover{
    background:#0f67db
}


/* =========================================================
   CTA
========================================================= */

.membership-cta{
    padding:0 0 60px;
    background:#fff
}

.membership-cta>.container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:33px 42px;
    border-radius:17px;
    background:linear-gradient(135deg,#123a19,#0b5c1b);
    color:#fff;
    box-shadow:0 18px 45px rgba(17,67,26,.18)
}

.membership-cta h2{
    margin:3px 0;
    font-size:30px
}

.membership-cta p{
    margin:2px 0;
    color:#cfe5d2
}

.membership-cta>div>div>span{
    color:#ffbdc2;
    font-size:13px;
    font-weight:800
}

.membership-cta .actions{
    margin:0;
    flex:0 0 auto
}

.button.cta-ghost{
    background:transparent;
    border:1px solid #ffffff80;
    box-shadow:none
}


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

.home-empty{
    grid-column:1/-1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:180px;
    padding:30px;
    border:1px dashed #cbd8cc;
    border-radius:16px;
    background:#fafcfa;
    color:var(--muted);
    text-align:center
}

.home-empty strong{
    color:var(--ink);
    font-size:18px
}

.home-empty.small{
    min-height:100px
}


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

footer{
    background:#102b16;
    color:#fff;
    padding-top:46px
}

.footer-grid{
    display:flex;
    justify-content:space-between
}

.footer-grid div:last-child{
    display:flex;
    flex-direction:column
}

.copyright{
    text-align:center;
    border-top:1px solid #ffffff22;
    padding:18px;
    margin-top:35px;
    color:#ffffffaa
}

.site-footer{
    padding-top:50px
}

.site-footer .footer-grid{
    display:grid;
    grid-template-columns:1.6fr repeat(3,1fr);
    gap:48px
}

.site-footer .footer-grid>div:not(.footer-brand){
    display:flex;
    flex-direction:column;
    gap:8px
}

.site-footer .footer-grid>div>strong{
    margin-bottom:7px;
    color:#fff
}

.site-footer .footer-grid a{
    color:#d5e6d8
}

.site-footer .footer-grid a:hover{
    color:#fff
}

.footer-brand{
    max-width:380px
}

.footer-logo img{
    width:60px;
    height:60px
}

.footer-logo strong{
    color:#fff
}

.footer-logo small{
    display:block;
    color:#b9d8bd
}

.footer-brand p,
.footer-brand address{
    color:#b9cdbb;
    font-size:14px;
    font-style:normal
}


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

.page-hero{
    padding:64px 0;
    background:linear-gradient(135deg,var(--green-dark),var(--green));
    color:#fff
}

.page-hero.compact h1{
    font-size:46px;
    margin:8px 0
}

.page-hero .eyebrow{
    color:#ffbbc1
}

.page-hero p{
    max-width:700px
}

.public-page-hero{
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,255,255,.12),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #102f18,
            #1f6f25
        )
}

.public-page-hero h1{
    margin-bottom:8px
}

.public-page-hero p{
    margin:0;
    color:#d4e7d6
}


/* =========================================================
   EVENT DETAILS
========================================================= */

.event-detail-hero{
    padding:60px 0;
    background:#f5f9f5
}

.event-detail-grid{
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:55px;
    align-items:center
}

.event-detail-grid h1{
    margin:14px 0;
    font-size:clamp(42px,5vw,64px);
    line-height:1.15
}

.event-detail-grid>div>p{
    color:var(--muted);
    font-size:18px
}

.event-detail-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:28px 0
}

.event-detail-meta>div{
    padding:15px;
    border:1px solid #d9e5da;
    border-radius:12px;
    background:#fff
}

.event-detail-meta span,
.event-detail-meta small{
    display:block;
    color:var(--muted);
    font-size:12px
}

.event-detail-meta strong{
    display:block;
    margin:4px 0
}

.event-detail-image{
    overflow:hidden;
    height:430px;
    border-radius:20px;
    box-shadow:var(--shadow)
}

.event-detail-image>img{
    width:100%;
    height:100%;
    object-fit:cover
}

.event-article-grid{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:50px;
    align-items:start
}

.event-side-card{
    position:sticky;
    top:105px;
    padding:25px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow)
}


/* =========================================================
   PUBLIC MEDIA
========================================================= */

.media-filter{
    display:flex;
    gap:10px;
    margin-bottom:28px
}

.media-filter a.active{
    background:var(--green);
    color:#fff;
    border-color:var(--green)
}

.public-media-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.public-media-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 28px rgba(20,50,25,.05)
}

.public-media-card>img{
    width:100%;
    height:230px;
    object-fit:cover
}

.public-media-card>div:last-child{
    display:flex;
    flex-direction:column;
    padding:17px
}


/* =========================================================
   ADMIN ADDITIONS
========================================================= */

.admin-quick-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:24px
}

.admin-quick-card{
    display:flex;
    flex-direction:column;
    padding:20px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff
}

.admin-quick-card strong{
    font-size:19px;
    color:var(--green)
}

.admin-quick-card span{
    margin-top:5px;
    color:var(--muted);
    font-size:13px
}

.admin-page-note{
    margin:0;
    color:var(--muted)
}

.table-subtext{
    display:block;
    color:var(--muted);
    font-size:11px
}

.table-actions{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap
}

.table-actions form{
    margin:0
}

.table-actions button,
.link-danger{
    padding:0;
    border:0;
    background:none;
    color:#a40f20;
    font:inherit;
    cursor:pointer
}

.admin-table-thumb{
    width:64px;
    height:48px;
    object-fit:cover;
    border-radius:6px
}

.admin-video-thumb{
    display:grid;
    place-items:center;
    width:64px;
    height:48px;
    border-radius:6px;
    background:#e8f4ea;
    color:var(--green)
}

.admin-image-preview{
    display:block;
    width:180px;
    height:110px;
    margin-top:10px;
    border-radius:8px;
    object-fit:cover
}

.form-actions{
    display:flex;
    gap:12px;
    margin-top:20px
}


/* =========================================================
   TABLET <=1120
========================================================= */

@media(max-width:1120px){

    .site-header .nav-links{
        gap:13px;
        font-size:14px
    }

    .home-hero-grid{
        gap:38px
    }

    .home-stats-grid>div{
        padding:5px 14px
    }

    .media-mosaic{
        grid-template-columns:1.2fr repeat(2,1fr)
    }

    .media-tile-2{
        grid-column:auto
    }

    .media-tile-7{
        display:none
    }

}


/* =========================================================
   FACEBOOK TABLET
========================================================= */

@media(max-width:1000px){

    .facebook-post-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .facebook-post-grid .facebook-post-card:last-child{
        grid-column:1/-1;
        width:calc(50% - 11px);
        justify-self:center
    }

}


/* =========================================================
   <=900
========================================================= */

@media(max-width:900px){

    .nav-links{
        display:none;
        position:absolute;
        top:84px;
        left:0;
        right:0;
        background:#fff;
        padding:20px;
        flex-direction:column;
        box-shadow:var(--shadow)
    }

    .nav-links.open{
        display:flex
    }

    .menu-button{
        display:block
    }

    .home-hero-grid,
    .event-detail-grid{
        grid-template-columns:1fr
    }

    .home-hero-copy{
        text-align:center
    }

    .home-hero-copy>p{
        margin-left:auto;
        margin-right:auto
    }

    .home-hero-copy .actions,
    .home-trust{
        justify-content:center
    }

    .featured-event-card{
        width:min(620px,100%);
        margin:auto
    }

    .home-stats-grid{
        grid-template-columns:1fr 1fr;
        gap:0
    }

    .home-stats-grid>div:nth-child(2){
        border-right:0
    }

    .home-stats-grid>div:nth-child(-n+2){
        border-bottom:1px solid #cddfce
    }

    .event-grid,
    .program-grid,
    .public-media-grid{
        grid-template-columns:1fr 1fr
    }

    .story-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto
    }

    .story-featured{
        grid-row:auto
    }

    .story-featured>img,
    .story-featured>.story-placeholder{
        height:290px
    }

    .updates-grid,
    .event-article-grid{
        grid-template-columns:1fr
    }

    .event-side-card{
        position:static
    }

    .site-footer .footer-grid{
        grid-template-columns:1.4fr 1fr 1fr
    }

    .site-footer .footer-grid>div:last-child{
        grid-column:2/4
    }

    .admin-quick-grid{
        grid-template-columns:1fr
    }

}


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

@media(max-width:650px){

    .facebook-post-grid{
        grid-template-columns:1fr
    }

    .facebook-post-grid .facebook-post-card:last-child{
        grid-column:auto;
        width:100%
    }

    .facebook-post-card{
        width:100%;
        max-width:500px;
        margin:0 auto
    }

    .facebook-embed-wrap{
        min-height:520px
    }

    .facebook-embed-wrap iframe{
        min-height:520px
    }

}


/* =========================================================
   <=620
========================================================= */

@media(max-width:620px){

    .container,
    .narrow{
        width:min(100% - 26px,1180px)
    }

    .site-header .container{
        width:calc(100% - 26px)
    }

    .brand strong{
        font-size:16px
    }

    .brand small{
        font-size:11px
    }

    .actions,
    .stats,
    .track-form,
    .search,
    .filter-bar{
        flex-direction:column
    }

    .card-grid,
    .member-grid,
    .form-grid,
    .profile-card dl,
    .detail-list{
        grid-template-columns:1fr
    }

    .section{
        padding:48px 0
    }

    .home-hero{
        padding:38px 0
    }

    .home-hero-copy h1{
        font-size:40px
    }

    .home-hero-copy .actions{
        align-items:stretch
    }

    .featured-event-image{
        height:215px
    }

    .featured-event-body{
        padding:20px
    }

    .home-stats-grid{
        grid-template-columns:1fr;
        padding:8px 14px
    }

    .home-stats-grid>div{
        border-right:0!important;
        border-bottom:1px solid #cddfce!important;
        padding:13px 8px
    }

    .home-stats-grid>div:last-child{
        border-bottom:0!important
    }

    .home-section{
        padding:48px 0
    }

    .home-section .section-head h2{
        font-size:30px
    }

    .section-head{
        align-items:flex-start;
        gap:12px
    }

    .section-head>a{
        font-size:13px
    }

    .event-grid,
    .program-grid,
    .public-media-grid{
        grid-template-columns:1fr
    }

    .event-card-image{
        height:220px
    }

    .story-card{
        grid-template-columns:1fr
    }

    .story-card>img,
    .story-card>.story-placeholder{
        height:220px
    }

    .media-mosaic{
        grid-template-columns:1fr 1fr;
        grid-template-rows:220px 150px 150px
    }

    .media-tile-1{
        grid-column:1/3;
        grid-row:auto
    }

    .media-tile-6{
        display:none
    }

    .updates-grid{
        gap:48px
    }

    .news-list article{
        grid-template-columns:95px 1fr
    }

    .news-list article>img{
        width:95px;
        height:82px
    }

    .membership-cta{
        padding-bottom:35px
    }

    .membership-cta>.container{
        flex-direction:column;
        align-items:flex-start;
        padding:28px 23px
    }

    .membership-cta h2{
        font-size:25px
    }

    .membership-cta .actions{
        width:100%;
        align-items:stretch
    }

    .site-footer .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:34px 20px
    }

    .footer-brand{
        grid-column:1/-1
    }

    .site-footer .footer-grid>div:last-child{
        grid-column:auto
    }

    .event-detail-meta{
        grid-template-columns:1fr
    }

    .event-detail-image{
        height:300px
    }

    .media-filter{
        overflow-x:auto
    }

    .form-actions{
        flex-direction:column
    }

}


/* =========================================================
   <=480
========================================================= */

@media(max-width:480px){

    .facebook-section-head{
        flex-direction:column;
        align-items:flex-start
    }

    .facebook-section-head>a{
        margin-top:5px
    }

    .facebook-embed-wrap{
        min-height:480px
    }

    .facebook-embed-wrap iframe{
        min-height:480px
    }

}


/* =========================================================
   MANOBIK FACEBOOK AUTO LATEST 3 POSTS
========================================================= */

.fb-auto-section{
    background:#f7faf7;
    border-top:1px solid #edf2ee;
}

.fb-auto-heading{
    align-items:flex-end;
}

.fb-auto-heading p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:14px;
}

.fb-auto-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}

.fb-auto-card{
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #dde6df;
    border-radius:17px;
    box-shadow:0 10px 30px rgba(20,50,25,.06);
    transition:transform .2s ease,box-shadow .2s ease;
}

.fb-auto-card:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 38px rgba(20,50,25,.09);
}

.fb-auto-image{
    display:block;
    width:100%;
    height:255px;
    overflow:hidden;
    background:#eef5ef;
}

.fb-auto-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}

.fb-auto-card:hover .fb-auto-image img{
    transform:scale(1.025);
}

.fb-auto-image-fallback{
    display:grid;
    place-items:center;
    background:radial-gradient(circle,#fff 0%,#edf5ee 72%,#e2eee4 100%);
}

.fb-auto-image-fallback img{
    width:150px;
    height:150px;
    object-fit:contain;
}

.fb-auto-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:20px;
}

.fb-auto-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.fb-auto-badge{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:4px 9px;
    border-radius:999px;
    background:#eaf2ff;
    color:#1877f2;
    font-size:11px;
    font-weight:800;
}

.fb-auto-meta time{
    color:var(--muted);
    font-size:11px;
}

.fb-auto-body p{
    margin:0 0 17px;
    color:#475349;
    font-size:14px;
    line-height:1.72;
}

.fb-auto-link{
    margin-top:auto;
    color:var(--green);
    font-size:13px;
    font-weight:800;
}

.fb-auto-link:hover{
    color:var(--red);
}

.fb-auto-empty{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:25px 28px;
    border:1px dashed #cbd8cc;
    border-radius:16px;
    background:#fff;
}

.fb-auto-empty strong,
.fb-auto-empty span{
    display:block;
}

.fb-auto-empty span{
    margin-top:3px;
    color:var(--muted);
    font-size:13px;
}

.fb-auto-empty a{
    flex:0 0 auto;
    padding:10px 15px;
    border-radius:9px;
    background:#1877f2;
    color:#fff;
    font-size:13px;
    font-weight:700;
}

@media(max-width:900px){
    .fb-auto-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fb-auto-grid .fb-auto-card:last-child:nth-child(odd){
        grid-column:1/-1;
        width:calc(50% - 11px);
        justify-self:center;
    }
}

@media(max-width:620px){
    .fb-auto-heading{
        flex-direction:column;
        align-items:flex-start;
    }

    .fb-auto-grid{
        grid-template-columns:1fr;
    }

    .fb-auto-grid .fb-auto-card:last-child:nth-child(odd){
        grid-column:auto;
        width:100%;
    }

    .fb-auto-image{
        height:240px;
    }

    .fb-auto-empty{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* =========================================================
   FACEBOOK LATEST POST - PAGE LINK ONLY
========================================================= */

.fb-latest-section{
    background:#f7faf7;
    border-top:1px solid #edf2ee;
}

.fb-latest-head{
    align-items:flex-end;
}

.fb-latest-head p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:14px;
}

.fb-latest-card{
    width:min(500px,100%);
    margin:0 auto;

    overflow:hidden;

    background:#fff;
    border:1px solid #dfe7e1;
    border-radius:16px;

    box-shadow:0 10px 30px rgba(20,50,25,.07);
}

.fb-latest-card iframe{
    display:block;
    width:100% !important;
    max-width:500px;
    height:560px !important;
    margin:0 auto;
    border:0 !important;
}

.fb-latest-action{
    margin-top:18px;
    text-align:center;
}

.fb-latest-action a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border:1px solid #1877f2;
    border-radius:9px;

    color:#1877f2;
    background:#fff;

    font-size:13px;
    font-weight:700;
}

.fb-latest-action a:hover{
    background:#1877f2;
    color:#fff;
}

@media(max-width:620px){

    .fb-latest-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .fb-latest-card{
        width:100%;
    }

    .fb-latest-card iframe{
        width:100% !important;
        height:540px !important;
    }

}