/* =====================================================================
   SLA Public Pages Kit (sla-pages.css)
   Page-local visual upgrades for news.php, members.php, projects.php,
   contact.php, news-details.php, all-members.php, page.php.
   Does NOT affect index.php (loaded only by these pages).
   ===================================================================== */

/* ---------- Page banner ----------
   Pages use the native `.page-banner` style defined in includes/frontend_header.php
   (green gradient + soft circles) — identical to the original site design.
   No page-local banner CSS needed here. */

/* ---------- Section headers ---------- */
.pg-section-head { text-align: center; margin-bottom: 2.6rem; }
.pg-section-head .pg-sh-eyebrow {
    display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #006a4e; background: #e6f5f0;
    padding: .35rem 1rem; border-radius: 999px; margin-bottom: .8rem;
}
.pg-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #111827; letter-spacing: -.02em; margin: 0 0 .6rem; }
.pg-section-head h2 .pg-sh-accent { color: #006a4e; }
.pg-section-head p { color: #6b7280; max-width: 640px; margin: 0 auto; font-size: .95rem; line-height: 1.7; }
/* Solid red underline bar — same as index.php section headers (w-24 h-1 bg-bd-red) */
.pg-section-head .pg-sh-line { width: 96px; height: 4px; border-radius: 0; margin: 1rem auto 0; background: #f42a41; }

/* ---------- Filter pill rows (news/members) ---------- */
.pg-pills { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.pg-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1.15rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: #fff; color: #4b5563; border: 1.5px solid #e5e9ee;
    text-decoration: none !important; transition: all .22s ease; line-height: 1.2;
}
.pg-pill:hover { border-color: #006a4e; color: #006a4e; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,106,78,.12); }
.pg-pill.active {
    background: linear-gradient(45deg, #006a4e, #008a68); color: #fff; border-color: transparent;
    box-shadow: 0 6px 16px rgba(0,106,78,.3);
}
.pg-pill.active-red {
    background: linear-gradient(45deg, #f42a41, #ff5a6e); color: #fff; border-color: transparent;
    box-shadow: 0 6px 16px rgba(244,42,65,.3);
}
.pg-pill .pg-pill-count { font-size: .68rem; opacity: .75; }

/* ---------- Search bar ---------- */
.pg-searchbar {
    background: #fff; border-radius: 22px; border: 1px solid #e5e9ee;
    box-shadow: 0 10px 34px -12px rgba(16,24,40,.14);
    padding: 1.4rem 1.5rem;
}
.pg-searchwrap { position: relative; margin-bottom: 1.2rem; }
.pg-searchwrap i { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.pg-searchwrap input {
    width: 100%; padding: .85rem 1.2rem .85rem 2.9rem;
    border-radius: 999px; border: 1.5px solid #e5e9ee; font-size: .9rem;
    font-family: 'Poppins', sans-serif; transition: all .25s ease; background: #f8faf9;
}
.pg-searchwrap input:focus { outline: none; border-color: #006a4e; background: #fff; box-shadow: 0 0 0 4px rgba(0,106,78,.12); }
.pg-searchbtn {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    background: linear-gradient(45deg, #006a4e, #008a68); color: #fff; border: none;
    border-radius: 999px; padding: .55rem 1.3rem; font-weight: 600; font-size: .82rem; cursor: pointer;
    transition: all .25s ease;
}
.pg-searchbtn:hover { box-shadow: 0 6px 16px rgba(0,106,78,.35); transform: translateY(-50%) scale(1.03); }

/* ---------- News card ---------- */
.pg-news-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    border: 1px solid #eef2f1; box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 12px 28px -14px rgba(16,24,40,.12);
    transition: transform .35s ease, box-shadow .35s ease; display: flex; flex-direction: column; height: 100%;
    position: relative;
}
.pg-news-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(16,24,40,.22); }
.pg-news-card .pg-nc-img { height: 210px; overflow: hidden; position: relative; }
.pg-news-card .pg-nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.pg-news-card:hover .pg-nc-img img { transform: scale(1.07); }
.pg-news-card .pg-nc-cat {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: linear-gradient(45deg, #006a4e, #008a68); color: #fff;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: .32rem .85rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.pg-news-card .pg-nc-body { padding: 1.35rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pg-news-card .pg-nc-meta { display: flex; gap: .9rem; flex-wrap: wrap; color: #9ca3af; font-size: .72rem; font-weight: 500; margin-bottom: .6rem; }
.pg-news-card .pg-nc-title { font-size: 1.06rem; font-weight: 700; color: #111827; line-height: 1.42; margin: 0 0 .55rem; letter-spacing: -.01em; }
.pg-news-card .pg-nc-title a { color: inherit; text-decoration: none; transition: color .2s; }
.pg-news-card .pg-nc-title a:hover { color: #006a4e; }
.pg-news-card .pg-nc-excerpt { color: #6b7280; font-size: .84rem; line-height: 1.65; margin: 0 0 1rem; }
.pg-news-card .pg-nc-foot { margin-top: auto; padding-top: .9rem; border-top: 1px dashed #eef2f1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pg-news-card .pg-nc-author { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.pg-news-card .pg-nc-author img, .pg-news-card .pg-nc-author .pg-nc-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 2px solid #e6f5f0; flex-shrink: 0;
}
.pg-news-card .pg-nc-author .pg-nc-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    background: #006a4e; color: #fff; font-size: .68rem; font-weight: 700;
}
.pg-news-card .pg-nc-author span { font-size: .74rem; font-weight: 600; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-news-card .pg-nc-read {
    display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
    color: #006a4e; font-size: .8rem; font-weight: 700; text-decoration: none;
    transition: all .25s ease;
}
.pg-news-card .pg-nc-read:hover { color: #f42a41; gap: .6rem; }

/* ---------- Contact page ---------- */
.pg-contact-card {
    background: #fff; border-radius: 22px; border: 1px solid #e5e9ee;
    box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 14px 34px -16px rgba(16,24,40,.14);
    padding: 2rem;
}
.pg-contact-info-item {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; border-radius: 18px; border: 1px solid #e5e9ee;
    padding: 1.25rem 1.35rem; transition: all .3s ease;
    box-shadow: 0 2px 10px -6px rgba(16,24,40,.08);
}
.pg-contact-info-item:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(16,24,40,.18); border-color: #bfe3d6; }
.pg-contact-info-item .pci-icon {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #e6f5f0; color: #006a4e; font-size: 1.05rem;
}
.pg-contact-info-item h4 { margin: 0 0 .15rem; font-size: .92rem; font-weight: 700; color: #111827; }
.pg-contact-info-item p { margin: 0; font-size: .82rem; color: #6b7280; line-height: 1.6; word-break: break-word; }
.pg-contact-info-item a { color: #006a4e; text-decoration: none; font-weight: 600; }
.pg-contact-info-item a:hover { color: #f42a41; }

/* ---------- Generic content shell (page.php / details) ---------- */
.pg-content-shell {
    background: #fff; border-radius: 22px; border: 1px solid #e5e9ee;
    box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 14px 34px -16px rgba(16,24,40,.14);
    padding: 2.4rem 2.6rem;
}
@media (max-width: 640px) { .pg-content-shell { padding: 1.5rem 1.2rem; } }

/* ---------- Project cards ---------- */
.pg-project-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    border: 1px solid #eef2f1;
    box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 12px 28px -14px rgba(16,24,40,.12);
    transition: transform .35s ease, box-shadow .35s ease; height: 100%;
    display: flex; flex-direction: column;
}
.pg-project-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(16,24,40,.22); }
.pg-project-card .pg-pc-img { height: 200px; overflow: hidden; position: relative; }
.pg-project-card .pg-pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.pg-project-card:hover .pg-pc-img img { transform: scale(1.07); }
.pg-project-card .pg-pc-status {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    padding: .3rem .8rem; border-radius: 999px; color: #fff;
    background: linear-gradient(45deg, #006a4e, #008a68); box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.pg-project-card .pg-pc-status.completed { background: linear-gradient(45deg, #059669, #10b981); }
.pg-project-card .pg-pc-status.ongoing { background: linear-gradient(45deg, #d97706, #f59e0b); }
.pg-project-card .pg-pc-status.upcoming { background: linear-gradient(45deg, #2563eb, #3b82f6); }
.pg-project-card .pg-pc-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pg-project-card .pg-pc-title { font-size: 1.08rem; font-weight: 700; color: #111827; margin: 0 0 .5rem; line-height: 1.4; letter-spacing: -.01em; }
.pg-project-card .pg-pc-desc { color: #6b7280; font-size: .85rem; line-height: 1.65; margin: 0 0 1.1rem; }
.pg-project-card .pg-pc-foot { margin-top: auto; }

/* ---------- Results count / misc ---------- */
.pg-results { color: #6b7280; font-size: .85rem; }
.pg-results strong { color: #006a4e; font-weight: 700; }
.pg-empty {
    text-align: center; padding: 4rem 1.5rem;
    background: #fff; border-radius: 22px; border: 1px dashed #d8e2de;
}
.pg-empty .pg-empty-ico {
    width: 84px; height: 84px; margin: 0 auto 1.2rem; border-radius: 26px;
    display: flex; align-items: center; justify-content: center;
    background: #e6f5f0; color: #006a4e; font-size: 2rem;
}
.pg-empty h3 { color: #111827; font-weight: 800; font-size: 1.3rem; margin: 0 0 .4rem; }
.pg-empty p { color: #6b7280; margin: 0 auto 1.4rem; max-width: 400px; font-size: .9rem; }