MediaWiki:Common.css: Difference between revisions

From Ekologos Wiki
← Older edit
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
457 edits
No edit summary
No edit summary
 
(19 intermediate revisions by the same user not shown)
Line 706: Line 706:
     color: var(--eko-green) !important;
     color: var(--eko-green) !important;
}
}
/* Show all six region cards in one row on desktop */
/* Show the four initial place hubs in one row on desktop */


@media (min-width: 1001px) {
@media (min-width: 1001px) {


     .homepage-grid {
     .homepage-grid {
         grid-template-columns: repeat(6, 1fr) !important;
         grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
         gap: 18px !important;
         gap: 24px !important;
     }
     }


     .eko-card img,
     .eko-card img,
     .eko-card .mw-file-element {
     .eko-card .mw-file-element {
         height: 150px !important;
         height: 210px !important;
     }
     }


     .eko-card-body {
     .eko-card-body {
         padding: 12px 8px !important;
         padding: 14px 10px 8px !important;
     }
     }


     .eko-card-title {
     .eko-card-title {
         font-size: 17px !important;
         font-size: 16px !important;
     }
     }
}
}
Line 771: Line 771:
     display: block !important;
     display: block !important;
     width: 100% !important;
     width: 100% !important;
     height: 150px !important;
     height: 210px !important;
     margin: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
Line 797: Line 797:
     margin: 0 !important;
     margin: 0 !important;
     color: #ffffff !important;
     color: #ffffff !important;
     font-size: 13px !important;
     font-size: 16px !important;
     font-weight: 600 !important;
     font-weight: 600 !important;
     line-height: 1.1 !important;
     line-height: 1.15 !important;
     text-align: center !important;
     text-align: center !important;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
Line 895: Line 895:
}
}


/* Ten theme cards in one row */
/* Nine controlled theme cards in one row */


.theme-grid {
.theme-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(10, minmax(0, 1fr));
     grid-template-columns: repeat(9, minmax(0, 1fr));
     gap: 12px;
     gap: 12px;
     width: 100%;
     width: 100%;
Line 3,022: Line 3,022:
}
}
/* ==========================================================
/* ==========================================================
   HIMALAYAS PAGE — EKOLOGOS
   NAGALAND & INDO–MYANMAR HIGHLANDS HUB — EKOLOGOS
========================================================== */
========================================================== */


Line 3,030: Line 3,030:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas #firstHeading,
body:has(.hima-page) #firstHeading,
.page-Himalayas #contentSub {
body:has(.hima-page) #contentSub {
     display: none !important;
     display: none !important;
}
}


.page-Himalayas .mw-parser-output {
body:has(.hima-page) .mw-parser-output {
     width: 100% !important;
     width: 100% !important;
     max-width: none !important;
     max-width: none !important;
Line 3,042: Line 3,042:
}
}


.page-Himalayas #content,
body:has(.hima-page) #content,
.page-Himalayas #bodyContent {
body:has(.hima-page) #bodyContent {
     margin: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
}
}


.page-Himalayas .hima-page {
body:has(.hima-page) .hima-page {
     width: 100%;
     width: 100%;
     margin: 0;
     margin: 0;
Line 3,064: Line 3,064:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-hero {
body:has(.hima-page) .hima-hero {
     position: relative;
     position: relative;


Line 3,086: Line 3,086:
}
}


.page-Himalayas .hima-hero-overlay {
body:has(.hima-page) .hima-hero-overlay {
     position: absolute;
     position: absolute;
     inset: 0;
     inset: 0;
Line 3,098: Line 3,098:
}
}


.page-Himalayas .hima-hero-inner {
body:has(.hima-page) .hima-hero-inner {
     position: relative;
     position: relative;
     z-index: 2;
     z-index: 2;
Line 3,115: Line 3,115:
}
}


.page-Himalayas .hima-hero-copy {
body:has(.hima-page) .hima-hero-copy {
     width: 100%;
     width: 100%;
     max-width: 650px;
     max-width: 650px;
}
}


.page-Himalayas .hima-title {
body:has(.hima-page) .hima-title {
     margin: 0;
     margin: 0;


Line 3,131: Line 3,131:
}
}


.page-Himalayas .hima-gold-line {
body:has(.hima-page) .hima-gold-line {
     width: 52px;
     width: 52px;
     height: 4px;
     height: 4px;
Line 3,141: Line 3,141:
}
}


.page-Himalayas .hima-hero-intro {
body:has(.hima-page) .hima-hero-intro {
     max-width: 620px;
     max-width: 620px;


Line 3,156: Line 3,156:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-content {
body:has(.hima-page) .hima-content {
     width: calc(100% - 50px);
     width: calc(100% - 50px);
     max-width: 1160px;
     max-width: 1160px;
Line 3,171: Line 3,171:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-intro-grid {
body:has(.hima-page) .hima-intro-grid {
     display: grid;
     display: grid;
     grid-template-columns: minmax(0,1.8fr) minmax(280px,.72fr);
     grid-template-columns: minmax(0,1.8fr) minmax(280px,.72fr);
Line 3,181: Line 3,181:
}
}


.page-Himalayas .hima-main-intro p,
body:has(.hima-page) .hima-main-intro p,
.page-Himalayas .hima-section p {
body:has(.hima-page) .hima-section p {
     margin: 13px 0 0 !important;
     margin: 13px 0 0 !important;


Line 3,196: Line 3,196:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-heading-row {
body:has(.hima-page) .hima-heading-row {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
Line 3,204: Line 3,204:
}
}


.page-Himalayas .hima-icon {
body:has(.hima-page) .hima-icon {
     width: 36px;
     width: 36px;
     height: 36px;
     height: 36px;
Line 3,223: Line 3,223:
}
}


.page-Himalayas .hima-heading {
body:has(.hima-page) .hima-heading {
     color: #23492f;
     color: #23492f;


Line 3,237: Line 3,237:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-glance {
body:has(.hima-page) .hima-glance {
     padding: 25px 24px;
     padding: 25px 24px;


Line 3,248: Line 3,248:
}
}


.page-Himalayas .hima-glance-title {
body:has(.hima-page) .hima-glance-title {
     margin-bottom: 9px;
     margin-bottom: 9px;


Line 3,258: Line 3,258:
}
}


.page-Himalayas .hima-glance-item {
body:has(.hima-page) .hima-glance-item {
     display: grid;
     display: grid;
     grid-template-columns: 32px 1fr;
     grid-template-columns: 32px 1fr;
Line 3,269: Line 3,269:
}
}


.page-Himalayas .hima-glance-item:last-child {
body:has(.hima-page) .hima-glance-item:last-child {
     border-bottom: none;
     border-bottom: none;
}
}


.page-Himalayas .hima-small-icon {
body:has(.hima-page) .hima-small-icon {
     width: 29px;
     width: 29px;
     height: 29px;
     height: 29px;
Line 3,289: Line 3,289:
}
}


.page-Himalayas .hima-glance-item strong,
body:has(.hima-page) .hima-glance-item strong,
.page-Himalayas .hima-glance-item span {
body:has(.hima-page) .hima-glance-item span {
     display: block;
     display: block;
}
}


.page-Himalayas .hima-glance-item strong {
body:has(.hima-page) .hima-glance-item strong {
     margin-bottom: 3px;
     margin-bottom: 3px;


Line 3,302: Line 3,302:
}
}


.page-Himalayas .hima-glance-item span {
body:has(.hima-page) .hima-glance-item span {
     color: #4d5851;
     color: #4d5851;


Line 3,314: Line 3,314:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-two-column {
body:has(.hima-page) .hima-two-column {
     display: grid;
     display: grid;
     grid-template-columns: repeat(2,minmax(0,1fr));
     grid-template-columns: repeat(2,minmax(0,1fr));
Line 3,325: Line 3,325:
}
}


.page-Himalayas .hima-section {
body:has(.hima-page) .hima-section {
     min-width: 0;
     min-width: 0;
}
}


.page-Himalayas .hima-subheading {
body:has(.hima-page) .hima-subheading {
     margin: 8px 0 4px;
     margin: 8px 0 4px;


Line 3,343: Line 3,343:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-list {
body:has(.hima-page) .hima-list {
     margin: 9px 0 0 !important;
     margin: 9px 0 0 !important;
     padding-left: 22px !important;
     padding-left: 22px !important;
Line 3,350: Line 3,350:
}
}


.page-Himalayas .hima-list li {
body:has(.hima-page) .hima-list li {
     margin: 0 0 7px;
     margin: 0 0 7px;


Line 3,357: Line 3,357:
}
}


.page-Himalayas .hima-list li:last-child {
body:has(.hima-page) .hima-list li:last-child {
     margin-bottom: 0;
     margin-bottom: 0;
}
}


.page-Himalayas .hima-links a,
body:has(.hima-page) .hima-links a,
.page-Himalayas .hima-links a:visited {
body:has(.hima-page) .hima-links a:visited {
     color: #245b96;
     color: #245b96;
     text-decoration: none;
     text-decoration: none;
}
}


.page-Himalayas .hima-links a:hover {
body:has(.hima-page) .hima-links a:hover {
     color: #23492f;
     color: #23492f;
     text-decoration: underline;
     text-decoration: underline;
Line 3,374: Line 3,374:


/* Keep MediaWiki red links red */
/* Keep MediaWiki red links red */
.page-Himalayas .hima-links a.new,
body:has(.hima-page) .hima-links a.new,
.page-Himalayas .hima-links a.new:visited {
body:has(.hima-page) .hima-links a.new:visited {
     color: #b63838 !important;
     color: #b63838 !important;
}
}
Line 3,384: Line 3,384:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-main-article {
body:has(.hima-page) .hima-main-article {
     margin-top: 11px;
     margin-top: 11px;


Line 3,394: Line 3,394:
}
}


.page-Himalayas .hima-main-article a {
body:has(.hima-page) .hima-main-article a {
     color: #834246 !important;
     color: #834246 !important;
}
}
Line 3,403: Line 3,403:
---------------------------------------------------------- */
---------------------------------------------------------- */


.page-Himalayas .hima-publications {
body:has(.hima-page) .hima-publications {
     padding-top: 27px;
     padding-top: 27px;
     margin-top: 2px;
     margin-top: 2px;
Line 3,417: Line 3,417:
@media (max-width: 800px) {
@media (max-width: 800px) {


     .page-Himalayas .hima-hero {
     body:has(.hima-page) .hima-hero {
         min-height: 330px;
         min-height: 330px;
     }
     }


     .page-Himalayas .hima-hero-inner {
     body:has(.hima-page) .hima-hero-inner {
         min-height: 330px;
         min-height: 330px;
         padding: 45px 26px;
         padding: 45px 26px;
     }
     }


     .page-Himalayas .hima-title {
     body:has(.hima-page) .hima-title {
         font-size: 48px;
         font-size: 48px;
     }
     }


     .page-Himalayas .hima-intro-grid {
     body:has(.hima-page) .hima-intro-grid {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
         gap: 28px;
         gap: 28px;
     }
     }


     .page-Himalayas .hima-two-column {
     body:has(.hima-page) .hima-two-column {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
         gap: 28px;
         gap: 28px;
Line 3,448: Line 3,448:
@media (max-width: 520px) {
@media (max-width: 520px) {


     .page-Himalayas .hima-hero {
     body:has(.hima-page) .hima-hero {
         min-height: 310px;
         min-height: 310px;


Line 3,454: Line 3,454:
     }
     }


     .page-Himalayas .hima-hero-inner {
     body:has(.hima-page) .hima-hero-inner {
         min-height: 310px;
         min-height: 310px;


Line 3,460: Line 3,460:
     }
     }


     .page-Himalayas .hima-title {
     body:has(.hima-page) .hima-title {
         font-size: 40px;
         font-size: 40px;
     }
     }


     .page-Himalayas .hima-hero-intro {
     body:has(.hima-page) .hima-hero-intro {
         font-size: 14px;
         font-size: 14px;
     }
     }


     .page-Himalayas .hima-content {
     body:has(.hima-page) .hima-content {
         width: calc(100% - 34px);
         width: calc(100% - 34px);


Line 3,474: Line 3,474:
     }
     }


     .page-Himalayas .hima-heading {
     body:has(.hima-page) .hima-heading {
         font-size: 20px;
         font-size: 20px;
     }
     }


     .page-Himalayas .hima-glance {
     body:has(.hima-page) .hima-glance {
         padding: 20px;
         padding: 20px;
     }
     }
Line 4,211: Line 4,211:
     .mycc-page .mycc-two-column > .mycc-panel {
     .mycc-page .mycc-two-column > .mycc-panel {
         width: 100% !important;
         width: 100% !important;
    }
}
/* ==========================================================
  URBALTOUR KOHIMA
  EKOLOGOS WIKI
========================================================== */
/* PAGE */
body:has(.urb-page) #firstHeading,
body:has(.urb-page) #contentSub {
    display: none !important;
}
body:has(.urb-page) .mw-parser-output,
body:has(.urb-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.urb-page) #content,
body:has(.urb-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}
.urb-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;
    background: #f8f6f1;
    color: #303934;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
/* ==========================================================
  HERO
========================================================== */
.urb-hero {
    position: relative;
    width: 100%;
    min-height: 420px;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(208,174,90,.20),
            transparent 32%
        ),
        linear-gradient(
            110deg,
            #173c2d 0%,
            #23492f 45%,
            #426150 100%
        );
    overflow: hidden;
}
.urb-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            120deg,
            transparent 65%,
            rgba(255,255,255,.06) 65%,
            rgba(255,255,255,.06) 66%,
            transparent 66%
        );
    pointer-events: none;
}
.urb-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            rgba(0,0,0,.18)
        );
    pointer-events: none;
}
.urb-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 420px;
    margin: 0 auto;
    padding: 55px 0 85px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.urb-hero-copy {
    width: 100%;
    max-width: 700px;
}
.urb-kicker {
    color: #e2b457;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.urb-kicker-line {
    width: 28px;
    height: 2px;
    margin: 12px 0 15px;
    background: #e2b457;
}
.urb-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.02;
}
.urb-hero-subtitle {
    max-width: 600px;
    margin-top: 23px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}
/* ==========================================================
  PROJECT INFORMATION
========================================================== */
.urb-info-wrap {
    position: relative;
    z-index: 5;
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: -50px auto 0;
}
.urb-info-strip {
    display: grid;
    grid-template-columns:
        .9fr
        .7fr
        1.25fr
        1.6fr
        .7fr;
    background: #ffffff;
    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    overflow: hidden;
}
.urb-info-item {
    min-height: 140px;
    padding: 22px 19px;
    border-right: 1px solid #e5ddcf;
    box-sizing: border-box;
}
.urb-info-item:last-child {
    border-right: 0;
}
.urb-info-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    border: 2px solid #23492f;
    border-radius: 50%;
    font-size: 16px;
}
.urb-info-label {
    margin-bottom: 7px;
    color: #23492f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}
.urb-info-value {
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
/* ==========================================================
  CONTENT
========================================================== */
.urb-content {
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: 29px auto 0;
    box-sizing: border-box;
}
.urb-panel {
    background: rgba(255,255,255,.45);
    border: 1px solid #e4dacb;
    border-radius: 12px;
    box-sizing: border-box;
}
/* HEADINGS */
.urb-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
}
.urb-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
}
.urb-heading {
    color: #23492f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}
/* ==========================================================
  OVERVIEW
========================================================== */
.urb-overview {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 30px;
    padding: 25px;
}
.urb-overview-text p,
.urb-outcomes-text p {
    margin: 0 0 13px !important;
    color: #343b37;
    font-size: 13px;
    line-height: 1.6;
}
.urb-overview-text p:last-child,
.urb-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}
/* ==========================================================
  OBJECTIVES + THEMES
========================================================== */
.urb-two-column {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    width: 100%;
    margin-top: 18px;
}
.urb-two-column > .urb-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;
    padding: 22px 24px;
}
/* OBJECTIVES */
.urb-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 11px;
    color: #343b37;
    font-size: 12px;
    line-height: 1.42;
}
.urb-number-item:last-child {
    margin-bottom: 0;
}
.urb-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
/* THEMES */
.urb-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px 20px;
}
.urb-theme {
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7ebe6;
    border: 1px solid rgba(35,73,47,.05);
    border-radius: 24px;
    color: #29362f;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}
.urb-theme-wide {
    grid-column: span 2;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.urb-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.urb-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 13px;
}
.urb-activity-card {
    min-height: 130px;
    padding: 17px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 6px;
    color: #343b37;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    box-sizing: border-box;
}
.urb-activity-icon {
    height: 38px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    font-size: 27px;
}
/* ==========================================================
  OUTCOMES
========================================================== */
.urb-outcomes {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 30px;
    margin-top: 18px;
    padding: 25px;
    background: #edf1ed;
}
/* ==========================================================
  TEAM + PARTNERS
========================================================== */
.urb-lower-grid {
    display: grid;
    grid-template-columns: 1.65fr .8fr;
    gap: 18px;
    margin-top: 18px;
}
.urb-team,
.urb-partners {
    padding: 21px 18px 18px;
}
/* TEAM */
.urb-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}
.urb-person {
    min-height: 165px;
    padding: 18px 10px;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 7px;
    text-align: center;
}
.urb-avatar {
    width: 53px;
    height: 53px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3ebe4;
    color: #7b9a82;
    border-radius: 50%;
    font-size: 30px;
}
.urb-person-name {
    margin-bottom: 8px;
    color: #2e3531;
    font-size: 12px;
    font-weight: 700;
}
.urb-person-role {
    color: #4b544f;
    font-size: 11px;
    line-height: 1.4;
}
/* PARTNERS */
.urb-partner-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(35,73,47,.13);
}
.urb-partner-item:last-child {
    border-bottom: none;
}
.urb-partner-symbol {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}
.urb-partner-item strong,
.urb-partner-item span {
    display: block;
}
.urb-partner-item strong {
    color: #23492f;
    font-size: 12px;
}
.urb-partner-item span {
    margin-top: 3px;
    color: #5b645e;
    font-size: 11px;
}
/* ==========================================================
  RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .urb-title {
        font-size: 48px;
    }
    .urb-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .urb-info-wide {
        grid-column: span 2;
    }
    .urb-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .urb-lower-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .urb-two-column {
        flex-direction: column !important;
    }
    .urb-two-column > .urb-panel {
        width: 100%;
    }
    .urb-overview,
    .urb-outcomes {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .urb-hero {
        min-height: 380px;
    }
    .urb-hero-inner {
        width: calc(100% - 36px);
        min-height: 380px;
        padding: 45px 0 75px;
    }
    .urb-title {
        font-size: 40px;
    }
    .urb-hero-subtitle {
        font-size: 14px;
    }
    .urb-info-wrap,
    .urb-content {
        width: calc(100% - 30px);
    }
    .urb-info-strip {
        grid-template-columns: 1fr;
    }
    .urb-info-wide {
        grid-column: auto;
    }
    .urb-info-item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }
    .urb-theme-grid {
        grid-template-columns: 1fr;
    }
    .urb-theme-wide {
        grid-column: auto;
    }
    .urb-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .urb-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
  URBALTOUR — TEAM + PARTNERS SIDE BY SIDE
========================================================== */
.urb-page .urb-lower-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 18px !important;
    margin-top: 18px !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
.urb-page .urb-lower-grid > .urb-panel {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* Research Team left */
.urb-page .urb-team {
    grid-column: 1 !important;
}
/* Partner Institutions right */
.urb-page .urb-partners {
    grid-column: 2 !important;
}
/* Keep the three team members in one row */
.urb-page .urb-team-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}
/* Stack only on smaller screens */
@media (max-width: 750px) {
    .urb-page .urb-lower-grid {
        grid-template-columns: 1fr !important;
    }
    .urb-page .urb-team,
    .urb-page .urb-partners {
        grid-column: 1 !important;
    }
}
/* ==========================================================
  URBALTOUR — FINAL LOWER PAGE ARRANGEMENT
========================================================== */
/* ----------------------------------------------------------
  OUTCOMES
  Heading on top, text below across the full width
---------------------------------------------------------- */
.urb-page .urb-outcomes {
    display: block !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding: 24px 26px !important;
    background: #edf1ed !important;
    box-sizing: border-box !important;
}
/* Outcome heading */
.urb-page .urb-outcomes .urb-section-side {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
}
/* Outcome text full width */
.urb-page .urb-outcomes-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.urb-page .urb-outcomes-text p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.urb-page .urb-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
  RESEARCH TEAM + PARTNER INSTITUTIONS
---------------------------------------------------------- */
.urb-page .urb-lower-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr) !important;
    gap: 18px !important;
    margin: 18px 0 0 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
/* VERY IMPORTANT:
  Force both boxes onto the SAME ROW */
.urb-page .urb-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}
.urb-page .urb-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}
/* ----------------------------------------------------------
  RESEARCH TEAM
---------------------------------------------------------- */
.urb-page .urb-team-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}
.urb-page .urb-person {
    width: 100% !important;
    min-height: 150px !important;
    margin: 0 !important;
    padding: 18px 10px !important;
    box-sizing: border-box !important;
}
/* ----------------------------------------------------------
  PARTNER INSTITUTIONS
---------------------------------------------------------- */
.urb-page .urb-partners {
    padding: 21px 20px !important;
}
.urb-page .urb-partner-item {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* ----------------------------------------------------------
  TABLET / MOBILE
---------------------------------------------------------- */
@media (max-width: 750px) {
    .urb-page .urb-lower-grid {
        grid-template-columns: 1fr !important;
    }
    .urb-page .urb-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .urb-page .urb-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}
@media (max-width: 520px) {
    .urb-page .urb-team-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ==========================================================
  WAR RESIDUES PROJECT
  EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.warres-page) #firstHeading,
body:has(.warres-page) #contentSub {
    display: none !important;
}
body:has(.warres-page) .mw-parser-output,
body:has(.warres-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.warres-page) #content,
body:has(.warres-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}
.warres-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;
    background: #f8f6f1;
    color: #303934;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
/* ==========================================================
  HERO
========================================================== */
.warres-hero {
    position: relative;
    width: 100%;
    min-height: 430px;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(
            circle at 76% 34%,
            rgba(190,145,69,.20),
            transparent 34%
        ),
        linear-gradient(
            105deg,
            #172f27 0%,
            #244a35 52%,
            #615943 100%
        );
    overflow: hidden;
}
.warres-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .20;
    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 45px,
            rgba(255,255,255,.055) 46px,
            transparent 47px
        );
    pointer-events: none;
}
.warres-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,31,25,.55),
            rgba(0,0,0,.05)
        );
    pointer-events: none;
}
.warres-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;
    margin: 0 auto;
    padding: 52px 0 82px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.warres-hero-copy {
    width: 100%;
    max-width: 790px;
}
.warres-kicker {
    color: #e1b457;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.warres-kicker-line {
    width: 30px;
    height: 2px;
    margin: 12px 0 15px;
    background: #e1b457;
}
.warres-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 59px;
    font-weight: 500;
    line-height: 1.03;
}
.warres-title-sub {
    max-width: 760px;
    margin-top: 9px;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 400;
    line-height: 1.15;
}
.warres-hero-description {
    max-width: 650px;
    margin-top: 23px;
    color: rgba(255,255,255,.96);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}
/* ==========================================================
  INFORMATION STRIP
========================================================== */
.warres-info-wrap {
    position: relative;
    z-index: 5;
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: -50px auto 0;
}
.warres-info-strip {
    display: grid;
    grid-template-columns:
        .95fr
        .9fr
        1.45fr
        1.15fr
        .65fr;
    background: #ffffff;
    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    overflow: hidden;
}
.warres-info-item {
    min-height: 140px;
    padding: 22px 19px;
    border-right: 1px solid #e5ddcf;
    box-sizing: border-box;
}
.warres-info-item:last-child {
    border-right: none;
}
.warres-info-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    border: 2px solid #23492f;
    border-radius: 50%;
    font-size: 16px;
}
.warres-info-label {
    margin-bottom: 7px;
    color: #23492f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}
.warres-info-value {
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
/* ==========================================================
  MAIN CONTENT
========================================================== */
.warres-content {
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: 29px auto 0;
    box-sizing: border-box;
}
.warres-panel {
    background: rgba(255,255,255,.46);
    border: 1px solid #e3dacb;
    border-radius: 12px;
    box-sizing: border-box;
}
/* HEADINGS */
.warres-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
}
.warres-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
}
.warres-heading {
    color: #23492f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}
/* ==========================================================
  OVERVIEW
========================================================== */
.warres-overview {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 30px;
    padding: 25px;
}
.warres-overview-text p,
.warres-outcomes-text p {
    margin: 0 0 13px !important;
    color: #343b37;
    font-size: 13px;
    line-height: 1.6;
}
.warres-overview-text p:last-child,
.warres-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}
/* ==========================================================
  OBJECTIVES + RESEARCH THEMES
========================================================== */
.warres-two-column {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    margin-top: 18px;
}
.warres-two-column > .warres-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;
    padding: 22px 24px;
}
/* OBJECTIVES */
.warres-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
.warres-number-item:last-child {
    margin-bottom: 0;
}
.warres-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
/* RESEARCH THEMES */
.warres-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px 20px;
}
.warres-theme {
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7ebe6;
    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;
    color: #29362f;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.warres-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.warres-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 13px;
}
.warres-activity-card {
    min-height: 140px;
    padding: 17px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 6px;
    color: #343b37;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}
.warres-activity-icon {
    height: 38px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    font-size: 27px;
}
/* ==========================================================
  EXPECTED OUTCOMES
========================================================== */
.warres-outcomes {
    width: 100%;
    margin-top: 18px;
    padding: 24px 26px;
    background: #edf1ed;
}
.warres-outcomes-text {
    width: 100%;
}
/* ==========================================================
  RESEARCH TEAM
========================================================== */
.warres-team {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.warres-team-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
}
.warres-person {
    min-height: 165px;
    padding: 18px 10px;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 7px;
    text-align: center;
    box-sizing: border-box;
}
.warres-avatar {
    width: 53px;
    height: 53px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3ebe4;
    color: #78977f;
    border-radius: 50%;
    font-size: 30px;
}
.warres-person-name {
    margin-bottom: 8px;
    color: #2e3531;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}
.warres-person-role {
    color: #4b544f;
    font-size: 11px;
    line-height: 1.4;
}
/* ==========================================================
  RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .warres-title {
        font-size: 48px;
    }
    .warres-title-sub {
        font-size: 25px;
    }
    .warres-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .warres-info-wide {
        grid-column: span 2;
    }
    .warres-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .warres-team-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 700px) {
    .warres-two-column {
        flex-direction: column !important;
    }
    .warres-two-column > .warres-panel {
        width: 100%;
    }
    .warres-overview {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .warres-hero {
        min-height: 430px;
    }
    .warres-hero-inner {
        width: calc(100% - 36px);
        min-height: 430px;
        padding: 45px 0 75px;
    }
    .warres-title {
        font-size: 39px;
    }
    .warres-title-sub {
        font-size: 21px;
    }
    .warres-hero-description {
        font-size: 14px;
    }
    .warres-info-wrap,
    .warres-content {
        width: calc(100% - 30px);
    }
    .warres-info-strip {
        grid-template-columns: 1fr;
    }
    .warres-info-wide {
        grid-column: auto;
    }
    .warres-info-item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }
    .warres-theme-grid {
        grid-template-columns: 1fr;
    }
    .warres-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .warres-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
  FOOD SECURITY + CLIMATE ADAPTATION PROJECT
  EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.foodsec-page) #firstHeading,
body:has(.foodsec-page) #contentSub {
    display: none !important;
}
body:has(.foodsec-page) .mw-parser-output,
body:has(.foodsec-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.foodsec-page) #content,
body:has(.foodsec-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}
.foodsec-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;
    background: #f8f6f1;
    color: #303934;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
/* ==========================================================
  HERO
========================================================== */
.foodsec-hero {
    position: relative;
    width: 100%;
    min-height: 440px;
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(202,173,87,.21),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            #16392a 0%,
            #27543b 52%,
            #637357 100%
        );
    overflow: hidden;
}
.foodsec-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .20;
    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 55px,
            rgba(255,255,255,.05) 56px,
            transparent 57px
        );
    pointer-events: none;
}
.foodsec-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8,39,28,.62),
            rgba(0,0,0,.03)
        );
    pointer-events: none;
}
.foodsec-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 440px;
    margin: 0 auto;
    padding: 52px 0 84px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.foodsec-hero-copy {
    width: 100%;
    max-width: 850px;
}
.foodsec-kicker {
    color: #e2b650;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.foodsec-kicker-line {
    width: 30px;
    height: 2px;
    margin: 12px 0 15px;
    background: #e2b650;
}
.foodsec-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 47px;
    font-weight: 500;
    line-height: 1.08;
    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.foodsec-hero-description {
    max-width: 680px;
    margin-top: 23px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}
/* ==========================================================
  PROJECT INFO STRIP
========================================================== */
.foodsec-info-wrap {
    position: relative;
    z-index: 5;
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: -50px auto 0;
}
.foodsec-info-strip {
    display: grid;
    grid-template-columns:
        1.8fr
        .7fr
        1.15fr
        .65fr;
    background: #ffffff;
    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    overflow: hidden;
}
.foodsec-info-item {
    min-height: 145px;
    padding: 22px 20px;
    border-right: 1px solid #e5ddcf;
    box-sizing: border-box;
}
.foodsec-info-item:last-child {
    border-right: none;
}
.foodsec-info-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    border: 2px solid #23492f;
    border-radius: 50%;
    font-size: 16px;
}
.foodsec-info-label {
    margin-bottom: 7px;
    color: #23492f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}
.foodsec-info-value {
    color: #343b37;
    font-size: 12px;
    line-height: 1.48;
}
/* ==========================================================
  CONTENT
========================================================== */
.foodsec-content {
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: 29px auto 0;
    box-sizing: border-box;
}
.foodsec-panel {
    background: rgba(255,255,255,.46);
    border: 1px solid #e3dacb;
    border-radius: 12px;
    box-sizing: border-box;
}
/* HEADINGS */
.foodsec-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
}
.foodsec-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
}
.foodsec-heading {
    color: #23492f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}
/* ==========================================================
  OVERVIEW
========================================================== */
.foodsec-overview {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 30px;
    padding: 25px;
}
.foodsec-overview-text p,
.foodsec-outcomes-text p {
    margin: 0 0 13px !important;
    color: #343b37;
    font-size: 13px;
    line-height: 1.6;
}
.foodsec-overview-text p:last-child,
.foodsec-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}
/* ==========================================================
  OBJECTIVES + THEMES
========================================================== */
.foodsec-two-column {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    margin-top: 18px;
}
.foodsec-two-column > .foodsec-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;
    padding: 22px 24px;
}
/* OBJECTIVES */
.foodsec-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
.foodsec-number-item:last-child {
    margin-bottom: 0;
}
.foodsec-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
/* RESEARCH THEMES */
.foodsec-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px 20px;
}
.foodsec-theme {
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5ebe4;
    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;
    color: #29362f;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.foodsec-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.foodsec-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 13px;
}
.foodsec-activity-card {
    min-height: 140px;
    padding: 17px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 6px;
    color: #343b37;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}
.foodsec-activity-icon {
    height: 38px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    font-size: 27px;
}
/* ==========================================================
  EXPECTED OUTCOMES
========================================================== */
.foodsec-outcomes {
    width: 100%;
    margin-top: 18px;
    padding: 24px 26px;
    background: #edf1ed;
}
.foodsec-outcomes-text {
    width: 100%;
}
/* ==========================================================
  TEAM + PARTNERS
========================================================== */
.foodsec-lower-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr) !important;
    gap: 18px;
    margin-top: 18px;
    align-items: stretch;
}
.foodsec-team,
.foodsec-partners {
    width: 100%;
    margin: 0 !important;
    padding: 21px 18px 18px;
    box-sizing: border-box;
}
.foodsec-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.foodsec-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
/* TEAM */
.foodsec-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
}
.foodsec-person {
    min-height: 155px;
    padding: 17px 8px;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 7px;
    text-align: center;
    box-sizing: border-box;
}
.foodsec-avatar {
    width: 50px;
    height: 50px;
    margin: 0 auto 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3ebe4;
    color: #78977f;
    border-radius: 50%;
    font-size: 28px;
}
.foodsec-person-name {
    margin-bottom: 7px;
    color: #2e3531;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}
.foodsec-person-role {
    color: #4b544f;
    font-size: 10.5px;
    line-height: 1.4;
}
/* PARTNER INSTITUTIONS */
.foodsec-partner-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 11px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(35,73,47,.13);
}
.foodsec-partner-item:last-child {
    border-bottom: none;
}
.foodsec-partner-symbol {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
}
.foodsec-partner-item strong,
.foodsec-partner-item span {
    display: block;
}
.foodsec-partner-item strong {
    color: #23492f;
    font-size: 11px;
    line-height: 1.3;
}
.foodsec-partner-item span {
    margin-top: 3px;
    color: #5b645e;
    font-size: 10px;
}
/* ==========================================================
  RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .foodsec-title {
        font-size: 40px;
    }
    .foodsec-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .foodsec-info-leads {
        grid-column: span 2;
    }
    .foodsec-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .foodsec-lower-grid {
        grid-template-columns: 1fr !important;
    }
    .foodsec-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .foodsec-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}
@media (max-width: 700px) {
    .foodsec-two-column {
        flex-direction: column !important;
    }
    .foodsec-two-column > .foodsec-panel {
        width: 100%;
    }
    .foodsec-overview {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .foodsec-hero {
        min-height: 430px;
    }
    .foodsec-hero-inner {
        width: calc(100% - 36px);
        min-height: 430px;
        padding: 45px 0 75px;
    }
    .foodsec-title {
        font-size: 33px;
    }
    .foodsec-hero-description {
        font-size: 14px;
    }
    .foodsec-info-wrap,
    .foodsec-content {
        width: calc(100% - 30px);
    }
    .foodsec-info-strip {
        grid-template-columns: 1fr;
    }
    .foodsec-info-leads {
        grid-column: auto;
    }
    .foodsec-info-item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }
    .foodsec-theme-grid {
        grid-template-columns: 1fr;
    }
    .foodsec-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .foodsec-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
  NUTRITION DETERMINANTS PROJECT
  EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.nutrition-page) #firstHeading,
body:has(.nutrition-page) #contentSub {
    display: none !important;
}
body:has(.nutrition-page) .mw-parser-output,
body:has(.nutrition-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.nutrition-page) #content,
body:has(.nutrition-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}
.nutrition-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;
    background: #f8f6f1;
    color: #303934;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
/* ==========================================================
  HERO
========================================================== */
.nutrition-hero {
    position: relative;
    width: 100%;
    min-height: 430px;
    background:
        radial-gradient(
            circle at 78% 32%,
            rgba(213,179,94,.20),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #163a2c 0%,
            #28543d 52%,
            #72806a 100%
        );
    overflow: hidden;
}
.nutrition-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8,39,28,.62),
            rgba(0,0,0,.04)
        );
    pointer-events: none;
}
.nutrition-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;
    margin: 0 auto;
    padding: 52px 0 84px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.nutrition-hero-copy {
    width: 100%;
    max-width: 850px;
}
.nutrition-kicker {
    color: #e2b650;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.nutrition-kicker-line {
    width: 30px;
    height: 2px;
    margin: 12px 0 15px;
    background: #e2b650;
}
.nutrition-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 49px;
    font-weight: 500;
    line-height: 1.08;
    text-shadow: 0 2px 8px rgba(0,0,0,.20);
}
.nutrition-hero-description {
    max-width: 680px;
    margin-top: 23px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}
/* ==========================================================
  PROJECT INFO
========================================================== */
.nutrition-info-wrap {
    position: relative;
    z-index: 5;
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: -50px auto 0;
}
.nutrition-info-strip {
    display: grid;
    grid-template-columns:
        .9fr
        1fr
        .75fr
        1.55fr
        .7fr;
    background: #ffffff;
    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    overflow: hidden;
}
.nutrition-info-item {
    min-height: 140px;
    padding: 22px 19px;
    border-right: 1px solid #e5ddcf;
    box-sizing: border-box;
}
.nutrition-info-item:last-child {
    border-right: none;
}
.nutrition-info-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    border: 2px solid #23492f;
    border-radius: 50%;
    font-size: 16px;
}
.nutrition-info-label {
    margin-bottom: 7px;
    color: #23492f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}
.nutrition-info-value {
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
/* ==========================================================
  MAIN CONTENT
========================================================== */
.nutrition-content {
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: 29px auto 0;
    box-sizing: border-box;
}
.nutrition-panel {
    background: rgba(255,255,255,.46);
    border: 1px solid #e3dacb;
    border-radius: 12px;
    box-sizing: border-box;
}
/* HEADINGS */
.nutrition-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
}
.nutrition-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
}
.nutrition-heading {
    color: #23492f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}
/* ==========================================================
  OVERVIEW
========================================================== */
.nutrition-overview {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 30px;
    padding: 25px;
}
.nutrition-overview-text p,
.nutrition-outcomes-text p {
    margin: 0 0 13px !important;
    color: #343b37;
    font-size: 13px;
    line-height: 1.6;
}
.nutrition-overview-text p:last-child,
.nutrition-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}
/* ==========================================================
  OBJECTIVES + THEMES
========================================================== */
.nutrition-two-column {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    margin-top: 18px;
}
.nutrition-two-column > .nutrition-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;
    padding: 22px 24px;
}
/* OBJECTIVES */
.nutrition-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
.nutrition-number-item:last-child {
    margin-bottom: 0;
}
.nutrition-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
/* RESEARCH THEMES */
.nutrition-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px 20px;
}
.nutrition-theme {
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5ebe4;
    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;
    color: #29362f;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.nutrition-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.nutrition-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 13px;
}
.nutrition-activity-card {
    min-height: 140px;
    padding: 17px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 6px;
    color: #343b37;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}
.nutrition-activity-icon {
    height: 38px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    font-size: 27px;
}
/* ==========================================================
  OUTCOMES
========================================================== */
.nutrition-outcomes {
    width: 100%;
    margin-top: 18px;
    padding: 24px 26px;
    background: #edf1ed;
}
.nutrition-outcomes-text {
    width: 100%;
}
/* ==========================================================
  TEAM + PARTNERS
========================================================== */
.nutrition-lower-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr) !important;
    gap: 18px;
    margin-top: 18px;
    align-items: stretch !important;
}
.nutrition-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.nutrition-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
.nutrition-team,
.nutrition-partners {
    width: 100%;
    margin: 0 !important;
    padding: 21px 18px 18px;
    box-sizing: border-box;
}
/* TEAM */
.nutrition-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}
.nutrition-person {
    min-height: 165px;
    padding: 18px 10px;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 7px;
    text-align: center;
    box-sizing: border-box;
}
.nutrition-avatar {
    width: 53px;
    height: 53px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3ebe4;
    color: #78977f;
    border-radius: 50%;
    font-size: 30px;
}
.nutrition-person-name {
    margin-bottom: 8px;
    color: #2e3531;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}
.nutrition-person-role {
    color: #4b544f;
    font-size: 11px;
    line-height: 1.4;
}
/* PARTNER INSTITUTIONS */
.nutrition-partner-item {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 11px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(35,73,47,.13);
}
.nutrition-partner-item:last-child {
    border-bottom: none;
}
.nutrition-partner-symbol {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
}
.nutrition-partner-item strong,
.nutrition-partner-item span {
    display: block;
}
.nutrition-partner-item strong {
    color: #23492f;
    font-size: 11px;
}
.nutrition-partner-item span {
    margin-top: 3px;
    color: #5b645e;
    font-size: 10px;
}
/* ==========================================================
  RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .nutrition-title {
        font-size: 41px;
    }
    .nutrition-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .nutrition-info-wide {
        grid-column: span 2;
    }
    .nutrition-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .nutrition-lower-grid {
        grid-template-columns: 1fr !important;
    }
    .nutrition-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .nutrition-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}
@media (max-width: 700px) {
    .nutrition-two-column {
        flex-direction: column !important;
    }
    .nutrition-two-column > .nutrition-panel {
        width: 100%;
    }
    .nutrition-overview {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .nutrition-hero {
        min-height: 420px;
    }
    .nutrition-hero-inner {
        width: calc(100% - 36px);
        min-height: 420px;
        padding: 45px 0 75px;
    }
    .nutrition-title {
        font-size: 34px;
    }
    .nutrition-hero-description {
        font-size: 14px;
    }
    .nutrition-info-wrap,
    .nutrition-content {
        width: calc(100% - 30px);
    }
    .nutrition-info-strip {
        grid-template-columns: 1fr;
    }
    .nutrition-info-wide {
        grid-column: auto;
    }
    .nutrition-info-item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }
    .nutrition-theme-grid {
        grid-template-columns: 1fr;
    }
    .nutrition-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .nutrition-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
  NAGA WOMEN'S HEALTH CHANNEL
  EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.nwhc-page) #firstHeading,
body:has(.nwhc-page) #contentSub {
    display: none !important;
}
body:has(.nwhc-page) .mw-parser-output,
body:has(.nwhc-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.nwhc-page) #content,
body:has(.nwhc-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}
.nwhc-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;
    background: #f8f6f1;
    color: #303934;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
/* ==========================================================
  HERO
========================================================== */
.nwhc-hero {
    position: relative;
    width: 100%;
    min-height: 430px;
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(218,177,119,.22),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            #183a2e 0%,
            #285542 53%,
            #747868 100%
        );
    overflow: hidden;
}
.nwhc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(255,255,255,.18) 0,
            rgba(255,255,255,.18) 1px,
            transparent 2px
        );
    background-size: 25px 25px;
    pointer-events: none;
}
.nwhc-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8,37,29,.65),
            rgba(0,0,0,.03)
        );
    pointer-events: none;
}
.nwhc-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;
    margin: 0 auto;
    padding: 52px 0 84px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.nwhc-hero-copy {
    width: 100%;
    max-width: 820px;
}
.nwhc-kicker {
    color: #e2b650;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.nwhc-kicker-line {
    width: 30px;
    height: 2px;
    margin: 12px 0 15px;
    background: #e2b650;
}
.nwhc-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.04;
    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.nwhc-hero-description {
    max-width: 680px;
    margin-top: 23px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}
/* ==========================================================
  PROJECT INFO
========================================================== */
.nwhc-info-wrap {
    position: relative;
    z-index: 5;
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: -50px auto 0;
}
.nwhc-info-strip {
    display: grid;
    grid-template-columns:
        .85fr
        .95fr
        1.35fr
        1.4fr
        .65fr;
    background: #ffffff;
    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    overflow: hidden;
}
.nwhc-info-item {
    min-height: 140px;
    padding: 22px 19px;
    border-right: 1px solid #e5ddcf;
    box-sizing: border-box;
}
.nwhc-info-item:last-child {
    border-right: none;
}
.nwhc-info-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    border: 2px solid #23492f;
    border-radius: 50%;
    font-size: 16px;
}
.nwhc-info-label {
    margin-bottom: 7px;
    color: #23492f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}
.nwhc-info-value {
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
/* ==========================================================
  CONTENT
========================================================== */
.nwhc-content {
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: 29px auto 0;
    box-sizing: border-box;
}
.nwhc-panel {
    background: rgba(255,255,255,.46);
    border: 1px solid #e3dacb;
    border-radius: 12px;
    box-sizing: border-box;
}
/* HEADINGS */
.nwhc-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
}
.nwhc-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
}
.nwhc-heading {
    color: #23492f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}
/* ==========================================================
  OVERVIEW
========================================================== */
.nwhc-overview {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 30px;
    padding: 25px;
}
.nwhc-overview-text p,
.nwhc-outcomes-text p {
    margin: 0 0 13px !important;
    color: #343b37;
    font-size: 13px;
    line-height: 1.6;
}
.nwhc-overview-text p:last-child,
.nwhc-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}
/* ==========================================================
  OBJECTIVES + THEMES
========================================================== */
.nwhc-two-column {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    margin-top: 18px;
}
.nwhc-two-column > .nwhc-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;
    padding: 22px 24px;
}
/* OBJECTIVES */
.nwhc-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
.nwhc-number-item:last-child {
    margin-bottom: 0;
}
.nwhc-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
/* THEMES */
.nwhc-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px 20px;
}
.nwhc-theme {
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7ebe6;
    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;
    color: #29362f;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}
.nwhc-theme-wide {
    grid-column: span 2;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.nwhc-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.nwhc-activity-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 13px;
}
.nwhc-activity-card {
    min-height: 140px;
    padding: 17px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 6px;
    color: #343b37;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}
.nwhc-activity-icon {
    height: 38px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    font-size: 27px;
}
/* ==========================================================
  OUTCOMES
========================================================== */
.nwhc-outcomes {
    width: 100%;
    margin-top: 18px;
    padding: 24px 26px;
    background: #edf1ed;
}
.nwhc-outcomes-text {
    width: 100%;
}
/* ==========================================================
  TEAM + PARTNERS
========================================================== */
.nwhc-lower-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0,2fr) minmax(290px,1fr) !important;
    gap: 18px;
    margin-top: 18px;
    align-items: stretch !important;
}
.nwhc-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.nwhc-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
.nwhc-team,
.nwhc-partners {
    width: 100%;
    margin: 0 !important;
    padding: 21px 18px 18px;
    box-sizing: border-box;
}
/* RESEARCH TEAM */
.nwhc-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
}
.nwhc-person {
    min-height: 155px;
    padding: 17px 9px;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 7px;
    text-align: center;
    box-sizing: border-box;
}
.nwhc-avatar {
    width: 50px;
    height: 50px;
    margin: 0 auto 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3ebe4;
    color: #78977f;
    border-radius: 50%;
    font-size: 28px;
}
.nwhc-person-name {
    margin-bottom: 7px;
    color: #2e3531;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}
.nwhc-person-role {
    color: #4b544f;
    font-size: 10.5px;
    line-height: 1.4;
}
/* PARTNERS */
.nwhc-partner-item {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 11px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(35,73,47,.13);
}
.nwhc-partner-item:last-child {
    border-bottom: none;
}
.nwhc-partner-symbol {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
}
.nwhc-partner-item strong,
.nwhc-partner-item span {
    display: block;
}
.nwhc-partner-item strong {
    color: #23492f;
    font-size: 11px;
}
.nwhc-partner-item span {
    margin-top: 3px;
    color: #5b645e;
    font-size: 10px;
}
/* ==========================================================
  RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .nwhc-title {
        font-size: 47px;
    }
    .nwhc-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .nwhc-info-wide {
        grid-column: span 2;
    }
    .nwhc-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .nwhc-lower-grid {
        grid-template-columns: 1fr !important;
    }
    .nwhc-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .nwhc-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}
@media (max-width: 700px) {
    .nwhc-two-column {
        flex-direction: column !important;
    }
    .nwhc-two-column > .nwhc-panel {
        width: 100%;
    }
    .nwhc-overview {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .nwhc-hero {
        min-height: 420px;
    }
    .nwhc-hero-inner {
        width: calc(100% - 36px);
        min-height: 420px;
        padding: 45px 0 75px;
    }
    .nwhc-title {
        font-size: 38px;
    }
    .nwhc-hero-description {
        font-size: 14px;
    }
    .nwhc-info-wrap,
    .nwhc-content {
        width: calc(100% - 30px);
    }
    .nwhc-info-strip {
        grid-template-columns: 1fr;
    }
    .nwhc-info-wide {
        grid-column: auto;
    }
    .nwhc-info-item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }
    .nwhc-theme-grid {
        grid-template-columns: 1fr;
    }
    .nwhc-theme-wide {
        grid-column: auto;
    }
    .nwhc-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .nwhc-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
  SURGICAL CARE PROJECT
  EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.surgical-page) #firstHeading,
body:has(.surgical-page) #contentSub {
    display: none !important;
}
body:has(.surgical-page) .mw-parser-output,
body:has(.surgical-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.surgical-page) #content,
body:has(.surgical-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}
.surgical-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;
    background: #f8f6f1;
    color: #303934;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
/* ==========================================================
  HERO
========================================================== */
.surgical-hero {
    position: relative;
    width: 100%;
    min-height: 430px;
    background:
        radial-gradient(
            circle at 79% 32%,
            rgba(184,196,168,.18),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #16372b 0%,
            #28513e 52%,
            #66746b 100%
        );
    overflow: hidden;
}
.surgical-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .14;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 45px,
            rgba(255,255,255,.05) 46px,
            transparent 47px
        );
    pointer-events: none;
}
.surgical-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,36,27,.67),
            rgba(0,0,0,.03)
        );
    pointer-events: none;
}
.surgical-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;
    margin: 0 auto;
    padding: 52px 0 84px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.surgical-hero-copy {
    width: 100%;
    max-width: 880px;
}
.surgical-kicker {
    color: #e2b650;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.surgical-kicker-line {
    width: 30px;
    height: 2px;
    margin: 12px 0 15px;
    background: #e2b650;
}
.surgical-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.07;
    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.surgical-hero-description {
    max-width: 690px;
    margin-top: 23px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}
/* ==========================================================
  PROJECT INFO
========================================================== */
.surgical-info-wrap {
    position: relative;
    z-index: 5;
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: -50px auto 0;
}
.surgical-info-strip {
    display: grid;
    grid-template-columns:
        .8fr
        .9fr
        1.2fr
        1.65fr
        .65fr;
    background: #ffffff;
    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    overflow: hidden;
}
.surgical-info-item {
    min-height: 140px;
    padding: 22px 19px;
    border-right: 1px solid #e5ddcf;
    box-sizing: border-box;
}
.surgical-info-item:last-child {
    border-right: none;
}
.surgical-info-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    border: 2px solid #23492f;
    border-radius: 50%;
    font-size: 16px;
}
.surgical-info-label {
    margin-bottom: 7px;
    color: #23492f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}
.surgical-info-value {
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
/* ==========================================================
  MAIN CONTENT
========================================================== */
.surgical-content {
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: 29px auto 0;
    box-sizing: border-box;
}
.surgical-panel {
    background: rgba(255,255,255,.46);
    border: 1px solid #e3dacb;
    border-radius: 12px;
    box-sizing: border-box;
}
/* HEADINGS */
.surgical-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
}
.surgical-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
}
.surgical-heading {
    color: #23492f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}
/* ==========================================================
  OVERVIEW
========================================================== */
.surgical-overview {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 30px;
    padding: 25px;
}
.surgical-overview-text p,
.surgical-outcomes-text p {
    margin: 0 0 13px !important;
    color: #343b37;
    font-size: 13px;
    line-height: 1.6;
}
.surgical-overview-text p:last-child,
.surgical-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}
/* ==========================================================
  OBJECTIVES + THEMES
========================================================== */
.surgical-two-column {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    margin-top: 18px;
}
.surgical-two-column > .surgical-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;
    padding: 22px 24px;
}
/* OBJECTIVES */
.surgical-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
.surgical-number-item:last-child {
    margin-bottom: 0;
}
.surgical-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
/* THEMES */
.surgical-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px 20px;
}
.surgical-theme {
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6ebe7;
    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;
    color: #29362f;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}
.surgical-theme-wide {
    grid-column: span 2;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.surgical-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.surgical-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 13px;
}
.surgical-activity-card {
    min-height: 140px;
    padding: 17px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 6px;
    color: #343b37;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}
.surgical-activity-icon {
    height: 38px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    font-size: 27px;
}
/* ==========================================================
  OUTCOMES
========================================================== */
.surgical-outcomes {
    width: 100%;
    margin-top: 18px;
    padding: 24px 26px;
    background: #edf1ed;
}
.surgical-outcomes-text {
    width: 100%;
}
/* ==========================================================
  TEAM + PARTNERS
========================================================== */
.surgical-lower-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0,2.25fr) minmax(290px,.9fr) !important;
    gap: 18px;
    margin-top: 18px;
    align-items: stretch !important;
}
.surgical-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.surgical-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
.surgical-team,
.surgical-partners {
    width: 100%;
    margin: 0 !important;
    padding: 21px 18px 18px;
    box-sizing: border-box;
}
/* TEAM */
.surgical-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}
.surgical-person {
    min-height: 145px;
    padding: 16px 8px;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 7px;
    text-align: center;
    box-sizing: border-box;
}
.surgical-avatar {
    width: 47px;
    height: 47px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3ebe4;
    color: #78977f;
    border-radius: 50%;
    font-size: 26px;
}
.surgical-person-name {
    margin-bottom: 7px;
    color: #2e3531;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}
.surgical-person-role {
    color: #4b544f;
    font-size: 10px;
    line-height: 1.4;
}
/* PARTNERS */
.surgical-partner-item {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 11px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(35,73,47,.13);
}
.surgical-partner-item:last-child {
    border-bottom: none;
}
.surgical-partner-symbol {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 700;
}
.surgical-partner-item strong,
.surgical-partner-item span {
    display: block;
}
.surgical-partner-item strong {
    color: #23492f;
    font-size: 11px;
    line-height: 1.3;
}
.surgical-partner-item span {
    margin-top: 3px;
    color: #5b645e;
    font-size: 10px;
    line-height: 1.3;
}
/* ==========================================================
  RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .surgical-title {
        font-size: 40px;
    }
    .surgical-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .surgical-info-wide {
        grid-column: span 2;
    }
    .surgical-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .surgical-lower-grid {
        grid-template-columns: 1fr !important;
    }
    .surgical-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .surgical-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}
@media (max-width: 700px) {
    .surgical-two-column {
        flex-direction: column !important;
    }
    .surgical-two-column > .surgical-panel {
        width: 100%;
    }
    .surgical-overview {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .surgical-hero {
        min-height: 430px;
    }
    .surgical-hero-inner {
        width: calc(100% - 36px);
        min-height: 430px;
        padding: 45px 0 75px;
    }
    .surgical-title {
        font-size: 33px;
    }
    .surgical-hero-description {
        font-size: 14px;
    }
    .surgical-info-wrap,
    .surgical-content {
        width: calc(100% - 30px);
    }
    .surgical-info-strip {
        grid-template-columns: 1fr;
    }
    .surgical-info-wide {
        grid-column: auto;
    }
    .surgical-info-item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }
    .surgical-theme-grid {
        grid-template-columns: 1fr;
    }
    .surgical-theme-wide {
        grid-column: auto;
    }
    .surgical-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .surgical-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
  EKOLOGOS PROJECT PAGE
========================================================== */
body:has(.ekp-page) #firstHeading,
body:has(.ekp-page) #contentSub {
    display: none !important;
}
body:has(.ekp-page) .mw-parser-output,
body:has(.ekp-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.ekp-page) #content,
body:has(.ekp-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}
.ekp-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;
    background: #f8f6f1;
    color: #303934;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}
/* ==========================================================
  HERO
========================================================== */
.ekp-hero {
    position: relative;
    width: 100%;
    min-height: 430px;
    background:
        radial-gradient(
            circle at 76% 35%,
            rgba(207,177,91,.22),
            transparent 34%
        ),
        linear-gradient(
            108deg,
            #123829 0%,
            #24513a 50%,
            #65765f 100%
        );
    overflow: hidden;
}
.ekp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .15;
    background:
        repeating-radial-gradient(
            circle at 80% 50%,
            rgba(255,255,255,.10) 0,
            rgba(255,255,255,.10) 1px,
            transparent 2px,
            transparent 24px
        );
    pointer-events: none;
}
.ekp-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,36,27,.68),
            rgba(0,0,0,.02)
        );
    pointer-events: none;
}
.ekp-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;
    margin: 0 auto;
    padding: 55px 0 82px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.ekp-hero-copy {
    width: 100%;
    max-width: 790px;
}
.ekp-kicker {
    color: #e2b650;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.ekp-kicker-line {
    width: 30px;
    height: 2px;
    margin: 12px 0 15px;
    background: #e2b650;
}
.ekp-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 68px;
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.ekp-hero-subtitle {
    max-width: 690px;
    margin-top: 23px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}
/* ==========================================================
  INFO STRIP
========================================================== */
.ekp-info-wrap {
    position: relative;
    z-index: 5;
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: -50px auto 0;
}
.ekp-info-strip {
    display: grid;
    grid-template-columns:
        1.1fr
        .7fr
        1.5fr
        1.2fr
        .7fr;
    background: #ffffff;
    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    overflow: hidden;
}
.ekp-info-item {
    min-height: 140px;
    padding: 22px 19px;
    border-right: 1px solid #e5ddcf;
    box-sizing: border-box;
}
.ekp-info-item:last-child {
    border-right: none;
}
.ekp-info-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    border: 2px solid #23492f;
    border-radius: 50%;
    font-size: 16px;
}
.ekp-info-label {
    margin-bottom: 7px;
    color: #23492f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}
.ekp-info-value {
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
/* ==========================================================
  CONTENT
========================================================== */
.ekp-content {
    width: calc(100% - 60px);
    max-width: 1180px;
    margin: 29px auto 0;
    box-sizing: border-box;
}
.ekp-panel {
    background: rgba(255,255,255,.46);
    border: 1px solid #e3dacb;
    border-radius: 12px;
    box-sizing: border-box;
}
/* HEADINGS */
.ekp-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
}
.ekp-section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
}
.ekp-heading {
    color: #23492f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}
/* ==========================================================
  OVERVIEW
========================================================== */
.ekp-overview {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    padding: 25px;
}
.ekp-overview-text p,
.ekp-feature-card p {
    margin: 0 0 13px !important;
    color: #343b37;
    font-size: 13px;
    line-height: 1.6;
}
.ekp-overview-text p:last-child,
.ekp-feature-card p:last-child {
    margin-bottom: 0 !important;
}
/* ==========================================================
  OBJECTIVES + COORDINATION
========================================================== */
.ekp-two-column {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 18px;
    margin-top: 18px;
}
.ekp-two-column > .ekp-panel {
    padding: 22px 24px;
}
.ekp-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
    color: #343b37;
    font-size: 12px;
    line-height: 1.45;
}
.ekp-number-item:last-child {
    margin-bottom: 0;
}
.ekp-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
/* COORDINATION DETAILS */
.ekp-detail-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(35,73,47,.12);
}
.ekp-detail-item:last-child {
    border-bottom: none;
}
.ekp-detail-item strong,
.ekp-detail-item span {
    display: block;
}
.ekp-detail-item strong {
    margin-bottom: 3px;
    color: #23492f;
    font-size: 11px;
}
.ekp-detail-item span {
    color: #515b55;
    font-size: 11.5px;
    line-height: 1.4;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.ekp-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}
.ekp-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 13px;
}
.ekp-activity-card {
    min-height: 135px;
    padding: 17px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fffdfa;
    border: 1px solid #ddd1bf;
    border-radius: 6px;
    color: #343b37;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}
.ekp-activity-icon {
    height: 38px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23492f;
    font-size: 27px;
}
/* ==========================================================
  EDUCATION / KNOWLEDGE / PUBLIC ENGAGEMENT
========================================================== */
.ekp-three-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
    margin-top: 18px;
}
.ekp-feature-card {
    padding: 22px 22px;
}
/* ==========================================================
  PARTNERS + RELATED TOPICS
========================================================== */
.ekp-lower-grid {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(280px,.8fr);
    gap: 18px;
    margin-top: 18px;
    align-items: stretch;
}
.ekp-partners,
.ekp-topics {
    padding: 21px 18px 18px;
}
/* PARTNERS */
.ekp-partner-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 22px;
}
.ekp-partner-item {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 11px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(35,73,47,.12);
}
.ekp-partner-symbol {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #23492f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
}
.ekp-partner-item strong,
.ekp-partner-item span {
    display: block;
}
.ekp-partner-item strong {
    color: #23492f;
    font-size: 11px;
    line-height: 1.3;
}
.ekp-partner-item span {
    margin-top: 3px;
    color: #5b645e;
    font-size: 10px;
}
/* RELATED TOPICS */
.ekp-topic-list > div {
    margin-bottom: 10px;
}
.ekp-topic-list a,
.ekp-topic-list a:visited {
    display: block;
    padding: 10px 14px;
    background: #e7ebe6;
    border-radius: 20px;
    color: #23492f !important;
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    text-decoration: none !important;
}
.ekp-topic-list a:hover {
    background: #dce5dc;
}
/* ==========================================================
  RESPONSIVE
========================================================== */
@media (max-width: 900px) {
    .ekp-title {
        font-size: 56px;
    }
    .ekp-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .ekp-info-wide {
        grid-column: span 2;
    }
    .ekp-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .ekp-three-grid {
        grid-template-columns: 1fr;
    }
    .ekp-lower-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .ekp-two-column {
        grid-template-columns: 1fr !important;
    }
    .ekp-overview {
        grid-template-columns: 1fr;
    }
    .ekp-partner-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .ekp-hero {
        min-height: 390px;
    }
    .ekp-hero-inner {
        width: calc(100% - 36px);
        min-height: 390px;
        padding: 45px 0 75px;
    }
    .ekp-title {
        font-size: 46px;
    }
    .ekp-hero-subtitle {
        font-size: 14px;
    }
    .ekp-info-wrap,
    .ekp-content {
        width: calc(100% - 30px);
    }
    .ekp-info-strip {
        grid-template-columns: 1fr;
    }
    .ekp-info-wide {
        grid-column: auto;
    }
    .ekp-info-item {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }
    .ekp-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
/* ==========================================================
  EKOLOGOS PAGE — CLEAN LAYOUT FIX
  MediaWiki-safe flex arrangement
========================================================== */
/* Remove MediaWiki-generated empty paragraph elements */
.ekp-page .ekp-two-column > p,
.ekp-page .ekp-three-grid > p,
.ekp-page .ekp-lower-grid > p {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Make sure panels are never floated */
.ekp-page .ekp-panel {
    float: none !important;
}
/* ==========================================================
  OBJECTIVES + COORDINATION
========================================================== */
.ekp-page .ekp-two-column {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 18px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
.ekp-page .ekp-two-column > .ekp-panel {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    box-sizing: border-box !important;
    grid-column: auto !important;
    grid-row: auto !important;
}
/* ==========================================================
  ACTIVITIES
========================================================== */
.ekp-page .ekp-activities {
    width: 100% !important;
    margin: 18px 0 0 !important;
    box-sizing: border-box !important;
}
.ekp-page .ekp-activity-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
}
/* ==========================================================
  EDUCATION + KNOWLEDGE + PUBLIC ENGAGEMENT
========================================================== */
.ekp-page .ekp-three-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 18px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
.ekp-page .ekp-three-grid > .ekp-panel {
    flex: 1 1 0 !important;
    width: 33.333% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 22px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    box-sizing: border-box !important;
}
/* ==========================================================
  PARTNERS + RELATED TOPICS
========================================================== */
.ekp-page .ekp-lower-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 18px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
/* Partner Institutions — larger left box */
.ekp-page .ekp-partners {
    flex: 2 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}
/* Related Topics — smaller right box */
.ekp-page .ekp-topics {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 260px !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}
/* Partner institutions within left box */
.ekp-page .ekp-partner-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 24px !important;
    width: 100% !important;
}
/* ==========================================================
  TABLET
========================================================== */
@media (max-width: 900px) {
    .ekp-page .ekp-activity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .ekp-page .ekp-three-grid {
        flex-wrap: wrap !important;
    }
    .ekp-page .ekp-three-grid > .ekp-panel {
        width: calc(50% - 9px) !important;
        flex: 1 1 calc(50% - 9px) !important;
    }
    .ekp-page .ekp-lower-grid {
        flex-direction: column !important;
    }
    .ekp-page .ekp-partners,
    .ekp-page .ekp-topics {
        width: 100% !important;
        min-width: 0 !important;
    }
}
/* ==========================================================
  MOBILE
========================================================== */
@media (max-width: 700px) {
    .ekp-page .ekp-two-column {
        flex-direction: column !important;
    }
    .ekp-page .ekp-two-column > .ekp-panel {
        width: 100% !important;
    }
    .ekp-page .ekp-three-grid {
        flex-direction: column !important;
    }
    .ekp-page .ekp-three-grid > .ekp-panel {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .ekp-page .ekp-partner-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 520px) {
    .ekp-page .ekp-activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* Main Page: mark missing pages as In development */
/* =========================================================
  MAIN PAGE — INDIVIDUAL "IN DEVELOPMENT" BADGES
  Himalayas is intentionally excluded
  ========================================================= */
/* Badge */
body.page-Main_Page a[href*="Arctic"]::after,
body.page-Main_Page a[href*="Amazonia"]::after,
body.page-Main_Page a[href*="South_India"]::after,
body.page-Main_Page a[href*="Southeast_Asia"]::after,
body.page-Main_Page a[href*="All_Regions"]::after,
body.page-Main_Page a[href*="Biodiversity"]::after,
body.page-Main_Page a[href*="Water_Systems"]::after,
body.page-Main_Page a[href*="Fire_%26_Land_Management"]::after,
body.page-Main_Page a[href*="Forest_Knowledge"]::after,
body.page-Main_Page a[href*="Fisheries"]::after,
body.page-Main_Page a[href*="Animal_Relations"]::after,
body.page-Main_Page a[href*="Climate_Change"]::after,
body.page-Main_Page a[href*="Agriculture"]::after,
body.page-Main_Page a[href*="Traditional_Medicine"]::after,
body.page-Main_Page a[href*="Dreams_%26_Cosmologies"]::after {
    content: "In development";
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 10;
    padding: 3px 7px;
    border-radius: 10px;
    background: #eee8d8;
    color: #6b5a2b;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
/* =========================================================
  MAIN PAGE — IN DEVELOPMENT BADGES
  Applied only to cards explicitly marked in Main Page HTML
  ========================================================= */
body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card {
    position: relative !important;
}
/* Badge */
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 50 !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    background: #eee8d8 !important;
    color: #6b5a2b !important;
    border: 1px solid #e0d7bd !important;
    border-radius: 10px !important;
    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    pointer-events: none !important;
}
/* =========================================================
  MAIN PAGE — FINAL IN DEVELOPMENT BADGES
  ========================================================= */
/* Stop old automatic MediaWiki red-link badges causing duplicates */
body.page-Main_Page a.new::after {
    content: none !important;
    display: none !important;
}
body.page-Main_Page a.new {
    opacity: 1 !important;
}
/* Cards which have a badge in the upper-right corner */
body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card,
body.page-Main_Page .collection-card {
    position: relative !important;
}
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge,
body.page-Main_Page .collection-card > .dev-badge {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 50 !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    background: #eee8d8 !important;
    color: #6b5a2b !important;
    border: 1px solid #e0d7bd !important;
    border-radius: 10px !important;
    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    pointer-events: none !important;
}
/* Badges beside ordinary text links */
body.page-Main_Page .dev-inline-badge {
    display: inline-block !important;
    width: auto !important;
    margin-left: 5px !important;
    padding: 2px 6px !important;
    background: #eee8d8 !important;
    color: #6b5a2b !important;
    border: 1px solid #e0d7bd !important;
    border-radius: 10px !important;
    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    pointer-events: none !important;
}
/* Featured article badges — especially compact */
body.page-Main_Page .dev-article-badge {
    margin-left: 4px !important;
    padding: 1px 5px !important;
    font-size: 7px !important;
}
/* Keep each footer link together with its badge */
body.page-Main_Page .dev-footer-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
}
/* Footer badges need to be very small */
body.page-Main_Page .dev-footer-badge {
    margin-left: 1px !important;
    padding: 1px 4px !important;
    font-size: 6px !important;
}
/* =========================================================
  EKOLOGOS MAIN PAGE — CLEAN IN DEVELOPMENT LABELS
  ========================================================= */
/* Prevent old automatic red-link labels */
body.page-Main_Page a.new::after {
    content: none !important;
    display: none !important;
}
body.page-Main_Page a.new {
    opacity: 1 !important;
}
/* ---------------------------------------------------------
  STANDARD BADGE
  --------------------------------------------------------- */
body.page-Main_Page .dev-badge,
body.page-Main_Page .dev-inline-badge {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 3px 7px !important;
    margin: 0 !important;
    background: #f1ead7 !important;
    border: 1px solid #ded3b5 !important;
    border-radius: 999px !important;
    color: #78652d !important;
    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.15px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    pointer-events: none !important;
}
/* ---------------------------------------------------------
  REGION + THEME + COLLECTION CARDS
  Badge floats neatly in top-right corner
  --------------------------------------------------------- */
body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card,
body.page-Main_Page .collection-card {
    position: relative !important;
}
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge,
body.page-Main_Page .collection-card > .dev-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 30 !important;
    margin: 0 !important;
    background: rgba(248, 244, 232, 0.96) !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.10) !important;
}
/* Collection badge slightly stronger over photographs */
body.page-Main_Page .collection-card > .dev-badge {
    top: 9px !important;
    right: 9px !important;
    background: rgba(250, 247, 238, 0.97) !important;
}
/* ---------------------------------------------------------
  FEATURED ARTICLES
  Small badge sits neatly after title
  --------------------------------------------------------- */
body.page-Main_Page .home-article-title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    column-gap: 5px !important;
    row-gap: 3px !important;
}
body.page-Main_Page .home-article-title .dev-article-badge {
    flex: 0 0 auto !important;
    padding: 2px 5px !important;
    font-size: 7px !important;
    vertical-align: middle !important;
}
/* ---------------------------------------------------------
  BROWSE / ABOUT / PROJECT LINKS
  --------------------------------------------------------- */
body.page-Main_Page .section-title-right,
body.page-Main_Page .theme-title-right,
body.page-Main_Page .home-browse-articles,
body.page-Main_Page .home-info-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
body.page-Main_Page .section-title-right .dev-inline-badge,
body.page-Main_Page .theme-title-right .dev-inline-badge,
body.page-Main_Page .home-browse-articles .dev-inline-badge,
body.page-Main_Page .home-info-link .dev-inline-badge {
    margin-left: 2px !important;
}
/* ---------------------------------------------------------
  COMMUNITY BUTTON
  Put badge above-right instead of after button text
  --------------------------------------------------------- */
body.page-Main_Page .home-community-button {
    position: relative !important;
    display: inline-block !important;
}
body.page-Main_Page .home-community-button .dev-inline-badge {
    position: absolute !important;
    top: -12px !important;
    right: -10px !important;
    z-index: 20 !important;
    margin: 0 !important;
    font-size: 7px !important;
}
/* ---------------------------------------------------------
  FOOTER
  Compact badges to avoid visual clutter
  --------------------------------------------------------- */
body.page-Main_Page .home-footer-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px 22px !important;
}
body.page-Main_Page .dev-footer-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}
body.page-Main_Page .dev-footer-badge {
    padding: 2px 4px !important;
    font-size: 6px !important;
    opacity: 0.88 !important;
}
/* ---------------------------------------------------------
  MOBILE
  --------------------------------------------------------- */
@media (max-width: 700px) {
    body.page-Main_Page .dev-badge,
    body.page-Main_Page .dev-inline-badge {
        font-size: 7px !important;
    }
    body.page-Main_Page .eko-card > .dev-badge,
    body.page-Main_Page .theme-card > .dev-badge,
    body.page-Main_Page .collection-card > .dev-badge {
        top: 5px !important;
        right: 5px !important;
    }
    body.page-Main_Page .home-footer-links {
        gap: 10px 14px !important;
    }
}
/* =========================================================
  NAGALAND & INDO–MYANMAR HIGHLANDS — MISSING PAGES / IN DEVELOPMENT
  ========================================================= */
/* Missing MediaWiki pages */
.hima-page a.new {
    color: #315f42 !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
}
/* "In development" badge */
.hima-page a.new::after {
    content: "In development" !important;
    display: inline-block !important;
    margin-left: 6px !important;
    padding: 2px 6px !important;
    background: #f1ead7 !important;
    border: 1px solid #ded3b5 !important;
    border-radius: 999px !important;
    color: #78652d !important;
    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}
/* ==========================================================
  PLACE HUB CARDS — SMALL-SCREEN HEIGHT
  ========================================================== */
@media (max-width: 600px) {
    .page-Main_Page .homepage-grid .eko-card img,
    .page-Main_Page .homepage-grid .eko-card .mw-file-element {
        height: 200px !important;
     }
     }
}
}

Latest revision as of 12:18, 1 October 2026

/* ==========================================================
   EKOLOGOS WIKI DESIGN SYSTEM v2.0
   Foundation
========================================================== */

/* ==========================================================
   1. ROOT VARIABLES
========================================================== */

:root{

    --eko-green:#23492F;
    --eko-accent:#295536;
    --eko-bg:#F8F6F1;
    --eko-white:#ffffff;
    --eko-text:#333333;
    --eko-light:#666666;

    --radius:18px;

    --shadow-sm:0 6px 18px rgba(0,0,0,.08);
    --shadow-md:0 12px 30px rgba(0,0,0,.10);
    --shadow-lg:0 22px 50px rgba(0,0,0,.15);

    --container:1280px;

}

/* ==========================================================
   2. GLOBAL
========================================================== */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    background:var(--eko-bg);
    color:var(--eko-text);
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
}

/* ==========================================================
   FULL WIDTH LAYOUT
========================================================== */

body .container,
body .container-fluid,
.col-cmln,
.col-12,
#mw-content-text,
.page-Main_Page .mw-parser-output{

    width:100% !important;
    max-width:100% !important;

}

.page-Main_Page .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.page-Main_Page .flex-fill.container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.page-Main_Page #content,
.page-Main_Page #bodyContent,
.page-Main_Page #mw-content-text,
.page-Main_Page .mw-parser-output{

    margin:0 !important;
    padding:0 !important;

}

/* ==========================================================
   CONTENT PAGES
========================================================== */

body:not(.page-Main_Page) .mw-parser-output{

    max-width:1100px;
    margin:auto;
    padding:40px 30px;

}

/* ==========================================================
   MAIN PAGE CLEANUP
========================================================== */

.page-Main_Page #firstHeading,
.page-Main_Page #contentSub,
.page-Main_Page #toc,
.page-Main_Page .page-tools,
.page-Main_Page .mw-indicators{

    display:none !important;

}

/* ==========================================================
   NAVBAR
========================================================== */

.page-Main_Page .navbar{

    position:absolute;
    top:0;
    left:0;
    right:0;

    z-index:1000;

    background:transparent !important;
    border:none !important;
    box-shadow:none !important;

}


/* Navigation */

.page-Main_Page .navbar-nav>li>a{

    color:#ffffff !important;
    font-weight:500;

}

.page-Main_Page .navbar-nav>li>a:hover{

    color:#d8ead8 !important;

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

.eko-hero {
    position: relative;

    width: 100%;
    min-height: 560px;
    height: 560px;
    max-height: 560px;

    background:
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
        url("https://wiki.highlanderpress.org/images/thumb/2/26/Hero.jpg/800px-Hero.jpg?20260703054727");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* CENTRE EVERYTHING */
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    overflow: hidden;
}


/* HERO OVERLAY */

.eko-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.30);
}


/* HERO CONTENT */

.eko-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto !important;
    padding: 40px 30px;

    box-sizing: border-box;

    text-align: center !important;
}
.eko-content .hero-title-main {
    margin: 0 0 8px !important;
}

.eko-content .hero-title-sub {
    margin: 0 0 16px !important;
}

.eko-content > p {
    margin: 0 auto !important;
}

.eko-search-form {
    margin: 24px auto 0 !important;
}

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

.eko-content .hero-title-main {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 78px;
    font-weight: 700;
    line-height: 1;

    color: #ffffff !important;

    margin: 0 0 -5px !important;

    text-align: center !important;
}


.eko-content .hero-title-sub {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 52px;
    font-weight: 500;
    line-height: 1.15;

    color: #ffffff !important;

    margin: 0 0 0px !important;

    text-align: center !important;
}


/* Divider */

.eko-content .hero-title-sub::after {
    display: none !important;
    content: none !important;
}


/* HERO DESCRIPTION */

.eko-content > p {
    max-width: 720px;

    margin: 20px auto 0 !important;

    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1.6;

    color: #ffffff !important;

    text-align: center !important;
}/* ==========================================================
   HOMEPAGE SECTION
========================================================== */

.homepage-section{

    max-width:var(--container);
    margin:0 auto;
    padding:90px 40px;

}

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

.section-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    width:100%;

    margin-bottom:2px;

}

/* Left side */

.section-title-left{

    display:flex;
    align-items:center;

    gap:16px;

    flex:1;

}

/* Remove MediaWiki image wrappers */

.section-title-left span,
.section-title-left a{

    display:flex;
    align-items:center;

    margin:0;
    padding:0;

}

/* Globe icon */

.section-title-left .mw-file-element,
.section-title-left img,
.section-icon,
.section-icon img{

    width:32px !important;
    height:32px !important;

    min-width:32px;
    min-height:32px;

    display:block;

    object-fit:contain;

    margin:0;
    padding:0;

    border:none;
    box-shadow:none;

}

/* Heading */

.section-heading{

    margin:0;
    padding:0;

    font-family:Georgia,"Times New Roman",serif;
    font-size:46px;
    font-weight:500;
    line-height:1;

    color:var(--eko-green);

}

/* Remove default MediaWiki heading spacing */

.section-heading::before,
.section-heading::after{

    display:none !important;
    content:none !important;

}

.section-title-left h2{

    margin:0 !important;
    padding:0 !important;
    border:none !important;

}

/* Right side */

.section-title-right{

    margin-left:auto;

    white-space:nowrap;

    font-size:18px;
    font-weight:600;

    display:flex;
    align-items:center;

}

.section-title-right a{

    color:var(--eko-green);
    text-decoration:none;

    transition:.25s;

}

.section-title-right a:hover{

    color:var(--eko-accent);
    text-decoration:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .section-header{

        flex-direction:column;
        align-items:flex-start;
        gap:20px;

    }

    .section-heading{

        font-size:34px;

    }

    .section-title-right{

        margin-left:0;

    }

}

@media (max-width:480px){

    .section-heading{

        font-size:28px;

    }

    .section-title-left .mw-file-element,
    .section-title-left img{

        width:26px !important;
        height:26px !important;

        min-width:26px;
        min-height:26px;

    }

    .section-title-right{

        font-size:16px;

    }

}

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

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

/* ==========================================================
   CARDS
========================================================== */

.eko-card{
    width:100%;
    display:block;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:.3s;
}

.eko-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.eko-card img,
.eko-card .mw-file-element{

    width:100%;
    height:260px;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}

.eko-card:hover img,
.eko-card:hover .mw-file-element{

    transform:scale(1.05);

}

.eko-card-body{

    padding:18px;

}

.eko-card-title{

    margin:0;

    text-align:center;

    font-family:Georgia,serif;

    font-size:24px;

    color:var(--eko-green);

}

.eko-card-text{

    display:none !important;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1000px){

    .homepage-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .eko-hero{
        min-height:600px;
        height:auto;
        padding:100px 25px 80px;
    }

    .hero-title-main{
        font-size:54px;
        line-height:1.05;
        margin-bottom:10px;
    }

    .hero-title-sub{
        font-size:36px;
        line-height:1.2;
        margin-bottom:24px;
    }

    .hero-title-sub::after{
        width:320px;
        margin:24px auto 0;
    }

    .eko-content p{
        max-width:620px;
        font-size:18px;
        line-height:1.6;
        margin-top:28px;
    }

    .section-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .homepage-section{
        padding:70px 25px;
    }

    .homepage-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:480px){

    .eko-hero{
        min-height:500px;
        height:auto;
        padding:80px 18px 60px;
    }

    .hero-title-main{
        font-size:40px;
        line-height:1.1;
        margin-bottom:8px;
    }

    .hero-title-sub{
        font-size:28px;
        line-height:1.25;
        margin-bottom:20px;
    }

    .hero-title-sub::after{
        width:220px;
        margin:20px auto 0;
    }

    .eko-content p{
        max-width:100%;
        font-size:17px;
        line-height:1.6;
        margin-top:24px;
    }

    .homepage-section{
        padding:50px 18px;
    }

    .eko-card img,
    .eko-card .mw-file-element{
        height:200px;
    }

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeInUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.animate-in{

animation:fadeInUp .6s ease forwards;

}

.eko-card:nth-child(1){animation-delay:.1s;}
.eko-card:nth-child(2){animation-delay:.2s;}
.eko-card:nth-child(3){animation-delay:.3s;}
.eko-card:nth-child(4){animation-delay:.4s;}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{text-align:center;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
/* Make both texts the same size */
.homepage-section .section-heading,
.homepage-section .section-title-right a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
.section-title-right a,
.section-title-right a:visited {
    color: var(--eko-green) !important;
}
/* Show the four initial place hubs in one row on desktop */

@media (min-width: 1001px) {

    .homepage-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .eko-card img,
    .eko-card .mw-file-element {
        height: 210px !important;
    }

    .eko-card-body {
        padding: 14px 10px 8px !important;
    }

    .eko-card-title {
        font-size: 16px !important;
    }
}
/* Region titles inside images — compact version */

.eko-card {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Remove MediaWiki spacing around images */

.eko-card > p,
.eko-card > figure,
.eko-card > span,
.eko-card > a,
.eko-card .mw-file-description {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
}

.eko-card > p > span,
.eko-card > p > span > a,
.eko-card > figure > a,
.eko-card > span > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Image fills the card without a white border */

.eko-card img,
.eko-card .mw-file-element {
    display: block !important;
    width: 100% !important;
    height: 210px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Small title overlay */

.eko-card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 10px 4px 4px !important;
    background: linear-gradient(
    to bottom,
    transparent,
    var(--eko-green)
) !important;
    box-sizing: border-box !important;
}

.eko-card-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Final fix: space between region heading and cards */

.page-Main_Page .homepage-section > .section-header {
    margin-bottom: 8px !important;
}

.page-Main_Page .homepage-section > .section-header + p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-Main_Page .homepage-section > .homepage-grid {
    margin-top: 0 !important;
}

/* Move region cards closer to the heading */
.page-Main_Page .homepage-section .homepage-grid {
    margin-top: 0px !important;
}

/* ==========================================================
   EXPLORE BY THEME
========================================================== */

.theme-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 25px 40px 55px;
    box-sizing: border-box;
}

/* Theme heading row */

.theme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 14px;
}

.theme-title-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.theme-title-left span,
.theme-title-left a {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.theme-title-left img,
.theme-title-left .mw-file-element {
    display: block;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.theme-heading,
.theme-title-right a {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px !important;
    font-weight: 500;
    line-height: 1.2;
    color: var(--eko-green) !important;
}

.theme-title-right {
    margin-left: auto;
    white-space: nowrap;
}

.theme-title-right a {
    text-decoration: none !important;
}

.theme-title-right a:hover {
    color: var(--eko-accent) !important;
}

/* Nine controlled theme cards in one row */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

/* Individual theme card */

.theme-card {
    min-height: 115px;
    padding: 12px 5px 10px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #f5f3ed;
    border: 1px solid rgba(35, 73, 47, 0.12);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);

    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.08);
}

/* Icon */

.theme-icon {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin-bottom: 5px;
}

.theme-icon span,
.theme-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}

.theme-icon img,
.theme-icon .mw-file-element {
    display: block;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Theme title */

.theme-name {
    color: var(--eko-green);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
}

/* Responsive layout */

@media (max-width: 1000px) {
    .theme-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 600px) {
    .theme-section {
        padding: 25px 18px 40px;
    }

    .theme-header {
        align-items: flex-start;
        gap: 12px;
    }

    .theme-heading,
    .theme-title-right a {
        font-size: 15px !important;
    }

    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
/* Remove vertical gaps around Explore by Theme */

.page-Main_Page .homepage-section {
    padding-bottom: 0 !important;
}

.page-Main_Page .theme-section {
    padding-top: 0 !important;
}

.page-Main_Page .theme-header {
    margin-bottom: 0 !important;
}

.page-Main_Page .theme-grid {
    margin-top: 0 !important;
}
/* ==========================================================
   FEATURED KNOWLEDGE COLLECTIONS
========================================================== */

.collections-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 30px 40px 70px;
    box-sizing: border-box;
}

/* Section heading */

.collections-heading {
    margin: 0 0 14px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

/* Four cards in one row */

.collections-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* Individual card */

.collection-card {
    background: #ffffff;
    border: 1px solid rgba(35, 73, 47, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.09);
}

/* Remove MediaWiki image spacing */

.collection-image {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.collection-image p,
.collection-image span,
.collection-image a {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

/* Main card image */

.collection-image img,
.collection-image .mw-file-element {
    display: block;
    width: 100% !important;
    height: 170px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
}

/* Text area */

.collection-body {
    min-height: 135px;
    padding: 16px 16px 18px;
    box-sizing: border-box;
}

/* Card title */

.collection-title {
    margin: 0 0 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
}

.collection-title a,
.collection-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}

.collection-title a:hover {
    color: var(--eko-accent) !important;
}

/* Description */

.collection-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

/* Tablet */

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

/* Mobile */

@media (max-width: 600px) {
    .collections-section {
        padding: 25px 18px 45px;
    }

    .collections-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   HOMEPAGE LOWER SECTIONS
========================================================== */

.home-lower-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px 40px 25px;
    box-sizing: border-box;
}


/* ==========================================================
   FEATURED ARTICLES AND COMMUNITY
========================================================== */

.home-upper-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 24px;
    align-items: stretch;
    width: 100%;
}

.home-articles-panel {
    border-top: 1px solid rgba(35, 73, 47, 0.15);
    padding-top: 12px;
}

.home-lower-heading {
    margin: 0 0 14px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.home-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 12px;
}

.home-article-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.home-article-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
}

.home-article-thumb span,
.home-article-thumb a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.home-article-thumb img,
.home-article-thumb .mw-file-element {
    display: block;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border-radius: 50%;
    border: none !important;
    box-shadow: none !important;
}

.home-article-copy {
    min-width: 0;
}

.home-article-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.home-article-title a,
.home-article-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}

.home-article-title a:hover {
    color: var(--eko-accent) !important;
}

.home-article-place {
    margin-top: 2px;
    color: var(--eko-light);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
}

.home-browse-articles {
    margin-top: 12px;
    text-align: right;
}

.home-browse-articles a,
.home-browse-articles a:visited {
    color: var(--eko-green) !important;
    font-size: 12px;
    text-decoration: none !important;
}


/* Community card */

.home-community-card {
    padding: 22px 26px;
    box-sizing: border-box;
    background: #eeece4;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
}

.home-community-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.home-community-symbol {
    font-size: 26px;
    line-height: 1;
}

.home-community-text {
    max-width: 330px;
    margin: 16px auto 12px;
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.home-community-people {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    margin: 12px 0;
    color: var(--eko-green);
    font-size: 34px;
    line-height: 1;
}

.home-community-button {
    text-align: center;
}

.home-community-button a,
.home-community-button a:visited {
    display: inline-block;
    padding: 8px 20px;
    background: var(--eko-green);
    color: #ffffff !important;
    border-radius: 4px;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}

.home-community-button a:hover {
    background: var(--eko-accent);
}


/* ==========================================================
   ABOUT AND PROJECT
========================================================== */

.home-about-project {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
    background: #f1efe8;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

.home-about-box,
.home-project-box {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 25px;
    box-sizing: border-box;
}

.home-project-box {
    border-left: 1px solid rgba(35, 73, 47, 0.16);
}

.home-info-icon {
    width: 70px;
    line-height: 0;
}

.home-info-icon span,
.home-info-icon a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.home-info-icon img,
.home-info-icon .mw-file-element {
    display: block;
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}

.home-info-title {
    margin-bottom: 9px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.home-info-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.home-info-link {
    margin-top: 12px;
}

.home-info-link a,
.home-info-link a:visited {
    color: var(--eko-green) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
}


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

.home-footer {
    display: grid;
    grid-template-columns: 220px 1fr 120px;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(35, 73, 47, 0.18);
}

.home-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-footer-brand > span,
.home-footer-brand > a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

.home-footer-brand img,
.home-footer-brand .mw-file-element {
    display: block;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}

.home-footer-brand-main {
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
}

.home-footer-brand-small {
    margin-top: 4px;
    color: var(--eko-green);
    font-size: 8px;
    letter-spacing: 5px;
    line-height: 1;
}

.home-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}

.home-footer-links a,
.home-footer-links a:visited {
    color: var(--eko-text) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 10px;
    text-decoration: none !important;
}

.home-footer-social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 17px;
    color: var(--eko-green);
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
}


/* ==========================================================
   RESPONSIVE LOWER SECTIONS
========================================================== */

@media (max-width: 900px) {

    .home-upper-grid {
        grid-template-columns: 1fr;
    }

    .home-about-project {
        grid-template-columns: 1fr;
    }

    .home-project-box {
        border-left: none;
        border-top: 1px solid rgba(35, 73, 47, 0.16);
    }

    .home-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .home-footer-brand,
    .home-footer-social {
        justify-content: center;
    }

}

@media (max-width: 600px) {

    .home-lower-section {
        padding: 20px 18px;
    }

    .home-articles-grid {
        grid-template-columns: 1fr;
    }

    .home-about-box,
    .home-project-box {
        grid-template-columns: 1fr;
    }

    .home-footer-links {
        gap: 12px;
    }

}
/* Keep Featured Articles and Communities side by side */

.home-upper-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* Stack them only on small screens */

@media (max-width: 400px) {
    .home-upper-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Featured Articles left — Communities right */

.page-Main_Page .home-upper-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.page-Main_Page .home-articles-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

.page-Main_Page .home-community-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
}
/* About Ekologos left — Ekologos Project right */

.page-Main_Page .home-about-project {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
}

.page-Main_Page .home-about-box,
.page-Main_Page .home-project-box {
    width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;
}

.page-Main_Page .home-project-box {
    border-left: 1px solid rgba(35, 73, 47, 0.16) !important;
    border-top: none !important;
}

/* Stack only on very small screens */

@media (max-width: 500px) {

    .page-Main_Page .home-about-project {
        flex-direction: column !important;
    }

    .page-Main_Page .home-about-box,
    .page-Main_Page .home-project-box {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .page-Main_Page .home-project-box {
        border-left: none !important;
        border-top: 1px solid rgba(35, 73, 47, 0.16) !important;
    }

}
/* More space between footer links */
.page-Main_Page .home-footer-links {
    gap: 32px !important;
}
/* Correct spacing between footer links */

.page-Main_Page .home-footer-links > p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.page-Main_Page .home-footer-links > p > a {
    display: inline-block !important;
    margin: 0 !important;
}
/* More space between social symbols */

.page-Main_Page .home-footer-social > p {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.page-Main_Page .home-footer-social > p > span {
    display: inline-block !important;
    margin: 0 !important;
}
/* Keep the Contribute button permanently green */

.page-Main_Page .home-community-button a,
.page-Main_Page .home-community-button a:visited,
.page-Main_Page .home-community-button a.new {
    display: inline-block !important;
    padding: 8px 20px !important;

    background-color: var(--eko-green) !important;
    color: #ffffff !important;

    border-radius: 4px !important;
    text-decoration: none !important;
}

/* Keep it green when hovering */

.page-Main_Page .home-community-button a:hover,
.page-Main_Page .home-community-button a.new:hover {
    background-color: var(--eko-accent) !important;
    color: #ffffff !important;
}

/* Resize MediaWiki header logo */
.mw-logo {
    background-size: contain !important;
}

/* ==========================================================
   HERO — REMOVE ALL DIVIDERS
========================================================== */

.eko-hero .hero-title-main::before,
.eko-hero .hero-title-main::after,
.eko-hero .hero-title-sub::before,
.eko-hero .hero-title-sub::after,
.eko-hero .eko-content h1::before,
.eko-hero .eko-content h1::after,
.eko-hero .eko-content h2::before,
.eko-hero .eko-content h2::after {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   REMOVE ALL HERO DIVIDERS — FINAL OVERRIDE
========================================================== */

/* Remove borders from headings */
.eko-hero h1,
.eko-hero h2,
.eko-hero .mw-heading,
.eko-hero .mw-heading1,
.eko-hero .mw-heading2 {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove ALL pseudo-element dividers */
.eko-hero h1::before,
.eko-hero h1::after,
.eko-hero h2::before,
.eko-hero h2::after,
.eko-hero .mw-heading::before,
.eko-hero .mw-heading::after,
.eko-hero .mw-heading1::before,
.eko-hero .mw-heading1::after,
.eko-hero .mw-heading2::before,
.eko-hero .mw-heading2::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Specifically remove the old divider rules */
.eko-hero .hero-title-main::after,
.eko-hero .hero-title-sub::after {
    content: none !important;
    display: none !important;
}

/* Remove actual horizontal rules inside hero */
.eko-hero hr {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove Chameleon heading separators inside hero */
.eko-hero .mw-heading,
.eko-hero .mw-heading h1,
.eko-hero .mw-heading h2 {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.eko-hero .mw-heading::before,
.eko-hero .mw-heading::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================
   HERO — TIGHTEN H1 / H2 SPACING
========================================================== */

.eko-hero .eko-content h1,
.eko-hero .eko-content h2 {
    margin-top: 0 !important;
}

.eko-hero .eko-content h1 {
    margin-bottom: 0 !important;
}

.eko-hero .eko-content h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

/* Remove spacing from MediaWiki heading wrappers */
.eko-hero .mw-heading {
    margin: 0 !important;
    padding: 0 !important;
}

/* Specifically control the space between H1 and H2 */
.eko-hero .hero-title-main + .hero-title-sub {
    margin-top: 0 !important;
}
/* ==========================================================
   EKOLOGOS NAVBAR — OVERLAY HERO
========================================================== */

.page-Main_Page .eko-navbar-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}
/* ==========================================================
   REMOVE CHAMELEON SPACE ABOVE MAIN CONTENT
========================================================== */

.page-Main_Page .flex-fill {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-Main_Page .flex-fill > .row:first-child {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.page-Main_Page .flex-fill > .row:first-child > * {
    margin: 0 !important;
    padding: 0 !important;
}

.page-Main_Page .flex-fill > .row:first-child .siteNotice {
    display: none !important;
}

.page-Main_Page .flex-fill > .row:nth-child(2) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ==========================================================
   EKOLOGOS NAVBAR BRAND — FINAL
========================================================== */

.page-Main_Page .navbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* Logo + EKOLOGOS WIKI together */
.page-Main_Page .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    height: 70px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    position: relative !important;
}

/* Logo */
.page-Main_Page .navbar-brand img,
.page-Main_Page .navbar-brand .mw-wiki-logo,
.page-Main_Page #p-logo img {
    display: block !important;

    height: 70px !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* EKOLOGOS WIKI label */
.page-Main_Page .navbar-brand::after {
    content: "EKOLOGOS\A WIKI" !important;

    display: block !important;

    white-space: pre !important;

    margin-left: 10px !important;

    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    letter-spacing: 3px !important;

    color: #23492F !important;

    text-align: left !important;

    position: static !important;
}

/* ==========================================================
   EKOLOGOS HERO SEARCH — FINAL
   Move Chameleon search from navbar into hero
========================================================== */

/* Navbar remains transparent */
.page-Main_Page .navbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Move the EXISTING Chameleon search into the hero */
.page-Main_Page #p-search {
    position: absolute !important;

    top: 300px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 750px !important;
    max-width: calc(100% - 40px) !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    z-index: 2000 !important;
}

/* Search form */
.page-Main_Page #p-search form {
    display: flex !important;

    width: 100% !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border-radius: 12px !important;
    overflow: hidden !important;

    box-shadow: 0 4px 15px rgba(0,0,0,.20) !important;
}

/* Search input */
.page-Main_Page #p-search input[type="search"],
.page-Main_Page #p-search input[type="text"] {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 54px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: #ffffff !important;

    color: #333333 !important;

    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
}

/* Placeholder */
.page-Main_Page #p-search input::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}

/* Search button */
.page-Main_Page #p-search button,
.page-Main_Page #p-search input[type="submit"] {
    flex: 0 0 70px !important;

    width: 70px !important;
    min-width: 70px !important;

    height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    background: var(--eko-green) !important;

    color: #ffffff !important;

    cursor: pointer !important;
}
/* ==========================================================
   HERO — FINAL DESKTOP LAYOUT
========================================================== */

.page-Main_Page .eko-hero {
    min-height: 560px !important;
    height: 560px !important;
    max-height: 560px !important;
    box-sizing: border-box !important;
}

.page-Main_Page .eko-content {
    max-width: 1000px !important;
    padding: 0 30px !important;
}

/* Main title */
.page-Main_Page .eko-content .hero-title-main {
    font-size: 60px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

/* Subtitle */
.page-Main_Page .eko-content .hero-title-sub {
    font-size: 50px !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;

    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

/* Description */
.page-Main_Page .eko-content > p {
    max-width: 900px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.45 !important;
}


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

@media (max-width: 768px) {

    .page-Main_Page .eko-hero {
        min-height: 300px !important;
        height: auto !important;
        max-height: none !important;
        padding: 80px 24px 42px !important;
    }

    .page-Main_Page .eko-content .hero-title-main {
        font-size: 44px !important;
        line-height: 1.05 !important;
        margin-bottom: 5px !important;
    }

    .page-Main_Page .eko-content .hero-title-sub {
        font-size: 34px !important;
        line-height: 1.1 !important;
        margin-bottom: 14px !important;
    }

    .page-Main_Page .eko-content > p {
        max-width: 680px !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
    }
}


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

@media (max-width: 480px) {

    .page-Main_Page .eko-hero {
        min-height: 280px !important;
        height: auto !important;
        padding: 72px 18px 36px !important;
    }

    .page-Main_Page .eko-content .hero-title-main {
        font-size: 36px !important;
        line-height: 1.05 !important;
        margin-bottom: 4px !important;
    }

    .page-Main_Page .eko-content .hero-title-sub {
        font-size: 27px !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }

    .page-Main_Page .eko-content > p {
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}
/* ==========================================================
   EKOLOGOS BRAND — UNIVERSAL ON ALL PAGES
========================================================== */

.navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    height: 70px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    position: relative !important;
}

/* Ekologos logo */
.navbar-brand img,
.navbar-brand .mw-wiki-logo {
    display: block !important;

    height: 70px !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    background-size: contain !important;
}

/* EKOLOGOS WIKI text */
.navbar-brand::after {
    content: "EKOLOGOS\A WIKI" !important;

    display: block !important;
    white-space: pre !important;

    margin-left: 10px !important;

    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    letter-spacing: 3px !important;

    color: #23492F !important;

    text-align: left !important;

    position: static !important;
}
/* ==========================================================
   EKOLOGOS BRAND — ALL PAGES, FINAL
========================================================== */

/* Logo container */
.navbar #p-logo {
    display: flex !important;
    align-items: center !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 8px !important;
}

/* Logo image */
.navbar #p-logo img,
.navbar #p-logo .mw-wiki-logo,
.navbar .navbar-brand img,
.navbar .navbar-brand .mw-wiki-logo {
    display: block !important;
    height: 70px !important;
    width: auto !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
}

/* EKOLOGOS WIKI text beside logo */
.navbar #p-logo::after,
.navbar .navbar-brand::after {
    content: "EKOLOGOS\A WIKI" !important;
    display: block !important;
    white-space: pre !important;
    margin-left: 10px !important;

    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    letter-spacing: 3px !important;

    color: #23492F !important;
    text-align: left !important;
}
/* ==========================================================
   POSTGRADUATE CERTIFICATE IN RESEARCH
   CLEAN FINAL BASE
========================================================== */


/* ----------------------------------------------------------
   PAGE
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research #firstHeading,
.page-Postgraduate_Certificate_in_Research #contentSub {
    display: none !important;
}

.page-Postgraduate_Certificate_in_Research .mw-parser-output {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-Postgraduate_Certificate_in_Research #content,
.page-Postgraduate_Certificate_in_Research #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.page-Postgraduate_Certificate_in_Research .pgcert-page {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #f8f6f1;
    color: #29352f;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}


/* ----------------------------------------------------------
   REMOVE ACCIDENTAL MEDIAWIKI PREFORMATTING
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-page pre {
    display: contents !important;
}


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

.page-Postgraduate_Certificate_in_Research .pgcert-hero {
    position: relative;

    width: 100%;
    min-height: 430px;

    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            90deg,
            rgba(12,40,32,.84) 0%,
            rgba(17,42,37,.65) 52%,
            rgba(17,31,29,.42) 100%
        ),
        url("https://wiki.highlanderpress.org/images/thumb/5/54/FilePGCertR-Hero.jpg/800px-FilePGCertR-Hero.jpg?20260825055157");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.page-Postgraduate_Certificate_in_Research .pgcert-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.03),
            rgba(0,0,0,.18)
        );

    pointer-events: none;
}


/* Hero content — ONE COLUMN for now */

.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;
    min-height: 430px;

    margin: 0 auto;
    padding: 55px 34px 60px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.page-Postgraduate_Certificate_in_Research .pgcert-hero-copy {
    width: 100%;
    max-width: 780px;

    margin: 0;
    padding: 0;
}


/*
   Hide the broken/duplicated hero card.
   We already have Programme at a glance below.
*/
.page-Postgraduate_Certificate_in_Research .pgcert-hero-card {
    display: none !important;
}


/* ----------------------------------------------------------
   HERO TYPOGRAPHY
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-kicker {
    margin: 0 0 10px;

    color: #e0b45b;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.page-Postgraduate_Certificate_in_Research .pgcert-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.02;
}

.page-Postgraduate_Certificate_in_Research .pgcert-title-accent {
    width: 52px;
    height: 3px;

    margin: 18px 0 16px;

    background: #d9aa4d;
    border-radius: 2px;
}

.page-Postgraduate_Certificate_in_Research .pgcert-tagline {
    margin: 0 0 11px;

    color: #edc46d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
}

.page-Postgraduate_Certificate_in_Research .pgcert-hero-text {
    width: 100%;
    max-width: 680px;

    margin: 0;

    color: rgba(255,255,255,.96);

    font-size: 16px;
    line-height: 1.55;
}


/* ----------------------------------------------------------
   FIVE PROGRAMME FACTS
   NO OVERLAP
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-facts {
    position: relative;
    z-index: 3;

    width: calc(100% - 44px);
    max-width: 1120px;

    margin: 0 auto;
    padding: 0;

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

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-top: none;
    border-radius: 0 0 13px 13px;

    box-shadow: 0 9px 25px rgba(0,0,0,.09);

    overflow: hidden;
}

.page-Postgraduate_Certificate_in_Research .pgcert-fact {
    min-height: 118px;

    padding: 18px 15px;

    text-align: center;

    border-right: 1px solid rgba(35,73,47,.13);

    box-sizing: border-box;
}

.page-Postgraduate_Certificate_in_Research .pgcert-fact:last-child {
    border-right: none;
}

.page-Postgraduate_Certificate_in_Research .pgcert-fact-icon {
    margin: 0 0 7px;

    color: #295536;

    font-size: 25px;
    line-height: 1;
}

.page-Postgraduate_Certificate_in_Research .pgcert-fact-title {
    margin: 0 0 5px;

    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.page-Postgraduate_Certificate_in_Research .pgcert-fact-text {
    margin: 0;

    color: #5a625d;

    font-size: 11.5px;
    line-height: 1.4;
}


/* ----------------------------------------------------------
   MAIN CONTENT
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-main-grid {
    width: calc(100% - 44px);
    max-width: 1120px;

    margin: 42px auto 70px;
    padding: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 38px;
    align-items: start;

    box-sizing: border-box;
}

.page-Postgraduate_Certificate_in_Research .pgcert-main-content {
    min-width: 0;
}


/* ----------------------------------------------------------
   SECTION HEADINGS
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 14px;

    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.page-Postgraduate_Certificate_in_Research .pgcert-heading-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 12px;
}


/* ----------------------------------------------------------
   OVERVIEW
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-intro {
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(35,73,47,.15);
}

.page-Postgraduate_Certificate_in_Research .pgcert-intro p {
    margin: 0 0 12px !important;

    color: #343c38;

    font-size: 14px;
    line-height: 1.65;
}

.page-Postgraduate_Certificate_in_Research .pgcert-intro p:last-child {
    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   PARTICIPANT SUPPORT
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-support-heading {
    margin-top: 22px;
}

.page-Postgraduate_Certificate_in_Research .pgcert-support-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    column-gap: 28px;
}

.page-Postgraduate_Certificate_in_Research .pgcert-support-item {
    min-height: 58px;

    padding: 11px 0;

    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;

    color: #3e4742;

    font-size: 12px;
    line-height: 1.45;

    border-bottom: 1px solid rgba(35,73,47,.11);
}

.page-Postgraduate_Certificate_in_Research .pgcert-support-icon {
    width: 30px;
    height: 30px;

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

    background: #295536;
    color: #ffffff;

    border-radius: 50%;

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


/* ----------------------------------------------------------
   COMPLETION MESSAGE
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-completion {
    margin-top: 20px;
    padding: 16px 18px;

    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;

    background: #e9eee9;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 10px;

    color: #3e4742;

    font-size: 12px;
    line-height: 1.5;
}

.page-Postgraduate_Certificate_in_Research .pgcert-completion-icon {
    width: 38px;
    height: 38px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;
}


/* ----------------------------------------------------------
   PROGRAMME AT A GLANCE SIDEBAR
---------------------------------------------------------- */

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar {
    width: 100%;

    padding: 24px;

    background: #edf1ed;

    border: 1px solid rgba(35,73,47,.09);
    border-radius: 14px;

    box-sizing: border-box;
}

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-title {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
}

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-line {
    width: 34px;
    height: 2px;

    margin: 11px 0 7px;

    background: #d9aa4d;
}

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item {
    padding: 12px 0;

    border-bottom: 1px solid rgba(35,73,47,.13);
}

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item:last-child {
    border-bottom: none;
}

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item strong,
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item span {
    display: block;
}

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item strong {
    margin-bottom: 3px;

    color: #23492f;

    font-size: 12px;
}

.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item span {
    color: #505a54;

    font-size: 12px;
    line-height: 1.4;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 800px) {

    .page-Postgraduate_Certificate_in_Research .pgcert-hero,
    .page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
        min-height: 400px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
        padding: 45px 24px 50px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-title {
        font-size: 46px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-facts {
        grid-template-columns: repeat(2,minmax(0,1fr));

        width: calc(100% - 30px);

        border-radius: 0 0 10px 10px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-fact {
        border-bottom: 1px solid rgba(35,73,47,.13);
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-fact:nth-child(2n) {
        border-right: none;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-main-grid {
        grid-template-columns: 1fr;

        width: calc(100% - 34px);
    }
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 520px) {

    .page-Postgraduate_Certificate_in_Research .pgcert-hero,
    .page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
        min-height: 380px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
        padding: 38px 20px 44px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-title {
        font-size: 38px;
        line-height: 1.05;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-tagline {
        font-size: 18px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-hero-text {
        font-size: 14px;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-facts {
        grid-template-columns: 1fr;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-fact {
        border-right: none;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-support-grid {
        grid-template-columns: 1fr;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-section-heading {
        font-size: 20px;
    }
}
/* ==========================================================
   PGCertR — REMOVE HERO CARD + SHORTEN HERO
========================================================== */

/* Remove Programme at a Glance from inside the hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-card {
    display: none !important;
}

/* Shorter hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    overflow: hidden !important;
}

/* Centre hero text vertically */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
    width: 100% !important;
    max-width: 1180px !important;

    height: 360px !important;
    min-height: 360px !important;

    margin: 0 auto !important;
    padding: 32px 34px !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
}

/* Give the text more width now that the right card is gone */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-copy {
    width: 100% !important;
    max-width: 800px !important;
    padding: 0 !important;
}
@media (max-width: 600px) {

    .page-Postgraduate_Certificate_in_Research .pgcert-hero {
        height: auto !important;
        min-height: 330px !important;
        max-height: none !important;
    }

    .page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
        height: auto !important;
        min-height: 330px !important;
        padding: 38px 20px !important;
    }
}
/* ==========================================================
   PGCertR — FIX MEDIAWIKI PREFORMATTED TEXT
========================================================== */

.page-Postgraduate_Certificate_in_Research .pgcert-page pre {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;

    color: inherit !important;

    white-space: normal !important;
    overflow: visible !important;
}


/* Hero title */
.page-Postgraduate_Certificate_in_Research .pgcert-title,
.page-Postgraduate_Certificate_in_Research .pgcert-title pre {
    color: #ffffff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 58px !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
}


/* Gold subtitle */
.page-Postgraduate_Certificate_in_Research .pgcert-tagline,
.page-Postgraduate_Certificate_in_Research .pgcert-tagline pre {
    color: #edc46d !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}


/* White description */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text,
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text pre {
    color: rgba(255,255,255,.96) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}
/* ==========================================================
   PGCertR — HERO TEXT + HEIGHT
========================================================== */

/* Slightly taller hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero {
    height: 410px !important;
    min-height: 410px !important;
    max-height: 410px !important;
}

/* Keep content vertically centred */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
    height: 410px !important;
    min-height: 410px !important;

    padding: 45px 34px !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
}


/* Main title — white */
.page-Postgraduate_Certificate_in_Research .pgcert-title,
.page-Postgraduate_Certificate_in_Research .pgcert-title pre {
    color: #ffffff !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 58px !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
}


/* Subtitle — white */
.page-Postgraduate_Certificate_in_Research .pgcert-tagline,
.page-Postgraduate_Certificate_in_Research .pgcert-tagline pre {
    color: #ffffff !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
}


/* Description — white */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text,
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text pre {
    color: #ffffff !important;

    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}


/* Prevent MediaWiki preformatted styling inside hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero pre {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;

    color: inherit !important;

    white-space: normal !important;
    overflow: visible !important;
}
/* ==========================================================
   NAGALAND & INDO–MYANMAR HIGHLANDS HUB — EKOLOGOS
========================================================== */


/* ----------------------------------------------------------
   PAGE RESET
---------------------------------------------------------- */

body:has(.hima-page) #firstHeading,
body:has(.hima-page) #contentSub {
    display: none !important;
}

body:has(.hima-page) .mw-parser-output {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.hima-page) #content,
body:has(.hima-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.hima-page) .hima-page {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}


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

body:has(.hima-page) .hima-hero {
    position: relative;

    width: 100%;
    min-height: 360px;

    background:
        linear-gradient(
            90deg,
            rgba(10,46,35,.86) 0%,
            rgba(20,48,40,.62) 43%,
            rgba(8,25,25,.20) 100%
        ),
        url("https://wiki.highlanderpress.org/images/7/79/Himalayas.jpg");

    background-size: cover;
    background-position: center 48%;
    background-repeat: no-repeat;

    overflow: hidden;
}

body:has(.hima-page) .hima-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            rgba(0,0,0,.18)
        );
}

body:has(.hima-page) .hima-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1160px;
    min-height: 360px;

    margin: 0 auto;
    padding: 58px 32px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

body:has(.hima-page) .hima-hero-copy {
    width: 100%;
    max-width: 650px;
}

body:has(.hima-page) .hima-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.05;
}

body:has(.hima-page) .hima-gold-line {
    width: 52px;
    height: 4px;

    margin: 22px 0 18px;

    background: #ddb04d;
    border-radius: 3px;
}

body:has(.hima-page) .hima-hero-intro {
    max-width: 620px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.58;
}


/* ----------------------------------------------------------
   MAIN CONTENT CONTAINER
---------------------------------------------------------- */

body:has(.hima-page) .hima-content {
    width: calc(100% - 50px);
    max-width: 1160px;

    margin: 0 auto;
    padding: 42px 0 65px;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   KOHIMA + AT A GLANCE
---------------------------------------------------------- */

body:has(.hima-page) .hima-intro-grid {
    display: grid;
    grid-template-columns: minmax(0,1.8fr) minmax(280px,.72fr);

    gap: 52px;
    align-items: start;

    margin-bottom: 38px;
}

body:has(.hima-page) .hima-main-intro p,
body:has(.hima-page) .hima-section p {
    margin: 13px 0 0 !important;

    color: #303934;

    font-size: 14px;
    line-height: 1.65;
}


/* ----------------------------------------------------------
   SECTION HEADING
---------------------------------------------------------- */

body:has(.hima-page) .hima-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 9px;
}

body:has(.hima-page) .hima-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-family: Georgia, serif;
    font-size: 15px;
}

body:has(.hima-page) .hima-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}


/* ----------------------------------------------------------
   AT A GLANCE
---------------------------------------------------------- */

body:has(.hima-page) .hima-glance {
    padding: 25px 24px;

    background: #edf0e9;

    border: 1px solid rgba(35,73,47,.08);
    border-radius: 14px;

    box-shadow: 0 7px 20px rgba(0,0,0,.04);
}

body:has(.hima-page) .hima-glance-title {
    margin-bottom: 9px;

    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 700;
}

body:has(.hima-page) .hima-glance-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;

    padding: 13px 0;

    border-bottom: 1px solid rgba(35,73,47,.14);
}

body:has(.hima-page) .hima-glance-item:last-child {
    border-bottom: none;
}

body:has(.hima-page) .hima-small-icon {
    width: 29px;
    height: 29px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 8px;
}

body:has(.hima-page) .hima-glance-item strong,
body:has(.hima-page) .hima-glance-item span {
    display: block;
}

body:has(.hima-page) .hima-glance-item strong {
    margin-bottom: 3px;

    color: #23492f;

    font-size: 12px;
}

body:has(.hima-page) .hima-glance-item span {
    color: #4d5851;

    font-size: 12px;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   TWO-COLUMN SECTIONS
---------------------------------------------------------- */

body:has(.hima-page) .hima-two-column {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 48px;

    padding: 26px 0;

    border-top: 1px solid rgba(35,73,47,.18);
}

body:has(.hima-page) .hima-section {
    min-width: 0;
}

body:has(.hima-page) .hima-subheading {
    margin: 8px 0 4px;

    color: #293b31;

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


/* ----------------------------------------------------------
   LISTS
---------------------------------------------------------- */

body:has(.hima-page) .hima-list {
    margin: 9px 0 0 !important;
    padding-left: 22px !important;

    color: #303934;
}

body:has(.hima-page) .hima-list li {
    margin: 0 0 7px;

    font-size: 13px;
    line-height: 1.42;
}

body:has(.hima-page) .hima-list li:last-child {
    margin-bottom: 0;
}

body:has(.hima-page) .hima-links a,
body:has(.hima-page) .hima-links a:visited {
    color: #245b96;
    text-decoration: none;
}

body:has(.hima-page) .hima-links a:hover {
    color: #23492f;
    text-decoration: underline;
}


/* Keep MediaWiki red links red */
body:has(.hima-page) .hima-links a.new,
body:has(.hima-page) .hima-links a.new:visited {
    color: #b63838 !important;
}


/* ----------------------------------------------------------
   MAIN ARTICLE
---------------------------------------------------------- */

body:has(.hima-page) .hima-main-article {
    margin-top: 11px;

    color: #834246;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-style: italic;
}

body:has(.hima-page) .hima-main-article a {
    color: #834246 !important;
}


/* ----------------------------------------------------------
   PUBLICATIONS
---------------------------------------------------------- */

body:has(.hima-page) .hima-publications {
    padding-top: 27px;
    margin-top: 2px;

    border-top: 1px solid rgba(35,73,47,.18);
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 800px) {

    body:has(.hima-page) .hima-hero {
        min-height: 330px;
    }

    body:has(.hima-page) .hima-hero-inner {
        min-height: 330px;
        padding: 45px 26px;
    }

    body:has(.hima-page) .hima-title {
        font-size: 48px;
    }

    body:has(.hima-page) .hima-intro-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    body:has(.hima-page) .hima-two-column {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 520px) {

    body:has(.hima-page) .hima-hero {
        min-height: 310px;

        background-position: 58% center;
    }

    body:has(.hima-page) .hima-hero-inner {
        min-height: 310px;

        padding: 40px 20px;
    }

    body:has(.hima-page) .hima-title {
        font-size: 40px;
    }

    body:has(.hima-page) .hima-hero-intro {
        font-size: 14px;
    }

    body:has(.hima-page) .hima-content {
        width: calc(100% - 34px);

        padding-top: 30px;
    }

    body:has(.hima-page) .hima-heading {
        font-size: 20px;
    }

    body:has(.hima-page) .hima-glance {
        padding: 20px;
    }
}
/* ==========================================================
   MYCCLIMATE PROJECT PAGE
   Ekologos Wiki
========================================================== */


/* ----------------------------------------------------------
   PAGE-SPECIFIC RESET
   Uses :has() so we do not depend on MediaWiki page class
---------------------------------------------------------- */

body:has(.mycc-page) #firstHeading,
body:has(.mycc-page) #contentSub {
    display: none !important;
}

body:has(.mycc-page) .mw-parser-output {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.mycc-page) #content,
body:has(.mycc-page) #bodyContent,
body:has(.mycc-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mycc-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.mycc-hero {
    position: relative;

    width: 100%;
    min-height: 430px;

    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            90deg,
            rgba(9,46,37,.92) 0%,
            rgba(16,48,39,.75) 38%,
            rgba(18,41,34,.30) 74%,
            rgba(0,0,0,.08) 100%
        ),
        url("https://wiki.highlanderpress.org/images/2/21/MyCClimate.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.mycc-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.03),
            rgba(0,0,0,.20)
        );

    pointer-events: none;
}

.mycc-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;

    margin: 0 auto;
    padding: 52px 0 88px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.mycc-hero-copy {
    width: 100%;
    max-width: 700px;
}

.mycc-kicker {
    margin: 0;

    color: #e4b750;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.2;
}

.mycc-kicker-line {
    width: 28px;
    height: 2px;

    margin: 12px 0 13px;

    background: #e4b750;
}

.mycc-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 49px;
    font-weight: 500;
    line-height: 1.06;

    text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.mycc-hero-subtitle {
    max-width: 570px;

    margin-top: 22px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;

    text-shadow: 0 1px 5px rgba(0,0,0,.35);
}


/* ----------------------------------------------------------
   PROJECT INFORMATION STRIP
---------------------------------------------------------- */

.mycc-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -52px auto 0;
}

.mycc-info-strip {
    display: grid;

    grid-template-columns:
        .85fr
        .95fr
        1fr
        1.65fr
        .75fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.11);

    overflow: hidden;
}

.mycc-info-item {
    min-height: 140px;

    padding: 22px 20px;

    border-right: 1px solid #e7dfd2;

    box-sizing: border-box;
}

.mycc-info-item:last-child {
    border-right: 0;
}

.mycc-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 19px;
    line-height: 1;
}

.mycc-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .35px;
}

.mycc-info-value {
    color: #333b37;

    font-size: 12px;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   MAIN CONTENT
---------------------------------------------------------- */

.mycc-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.mycc-panel {
    background: rgba(255,255,255,.42);

    border: 1px solid #e5dccd;
    border-radius: 12px;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   SECTION HEADINGS
---------------------------------------------------------- */

.mycc-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.mycc-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 17px;
}

.mycc-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ----------------------------------------------------------
   OVERVIEW
---------------------------------------------------------- */

.mycc-overview {
    display: grid;
    grid-template-columns: 245px 1fr;

    gap: 30px;

    padding: 24px 25px;
}

.mycc-overview-text p,
.mycc-outcomes-text p {
    margin: 0 0 13px !important;

    color: #333a36;

    font-size: 13px;
    line-height: 1.58;
}

.mycc-overview-text p:last-child,
.mycc-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   OBJECTIVES + THEMES
---------------------------------------------------------- */

.mycc-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 18px;

    margin-top: 18px;
}

.mycc-two-column > .mycc-panel {
    padding: 22px 24px;
}


/* Objectives */

.mycc-number-list {
    position: relative;
}

.mycc-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 11px;

    color: #333a36;

    font-size: 12px;
    line-height: 1.42;
}

.mycc-number-item:last-child {
    margin-bottom: 0;
}

.mycc-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* Research themes */

.mycc-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 13px 20px;

    padding-top: 4px;
}

.mycc-theme {
    min-height: 43px;

    padding: 8px 12px;

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

    background: #e7ebe6;

    border: 1px solid rgba(35,73,47,.05);
    border-radius: 24px;

    color: #29362f;

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   ACTIVITIES
---------------------------------------------------------- */

.mycc-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.mycc-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));

    gap: 13px;
}

.mycc-activity-card {
    min-height: 130px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    background: #fffdfa;

    border: 1px solid #ded2c0;
    border-radius: 6px;

    color: #333b37;

    font-size: 11px;
    line-height: 1.35;
    text-align: center;

    box-sizing: border-box;
}

.mycc-activity-icon {
    height: 37px;

    margin-bottom: 10px;

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

    color: #23492f;

    font-size: 28px;
    line-height: 1;
}


/* ----------------------------------------------------------
   OUTCOMES
---------------------------------------------------------- */

.mycc-outcomes {
    margin-top: 18px;
    padding: 24px 25px;

    display: grid;
    grid-template-columns: 245px 1fr;

    gap: 30px;

    background: #edf1ed;
}


/* ----------------------------------------------------------
   RESEARCH TEAM
---------------------------------------------------------- */

.mycc-team {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.mycc-team-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));

    gap: 17px;
}

.mycc-person {
    min-height: 175px;

    padding: 18px 10px;

    background: #fffdfa;

    border: 1px solid #ded2c0;
    border-radius: 6px;

    text-align: center;

    box-sizing: border-box;
}

.mycc-avatar {
    width: 53px;
    height: 53px;

    margin: 0 auto 12px;

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

    background: #e3ebe4;
    color: #7a9b82;

    border-radius: 50%;

    font-size: 30px;
}

.mycc-person-name {
    margin-bottom: 8px;

    color: #292f2c;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.mycc-person-role {
    color: #3e4742;

    font-size: 11px;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   MEDIAWIKI LINK COLOURS INSIDE PAGE
---------------------------------------------------------- */

.mycc-page a {
    color: #295c91;
}

.mycc-page a.new {
    color: #b63a3a !important;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 900px) {

    .mycc-title {
        font-size: 42px;
    }

    .mycc-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .mycc-info-item {
        min-height: 120px;

        border-bottom: 1px solid #e7dfd2;
    }

    .mycc-info-wide {
        grid-column: span 2;
    }

    .mycc-two-column {
        grid-template-columns: 1fr;
    }

    .mycc-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .mycc-team-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 600px) {

    .mycc-hero {
        min-height: 410px;

        background-position: 58% center;
    }

    .mycc-hero-inner {
        width: calc(100% - 36px);
        min-height: 410px;

        padding: 50px 0 80px;
    }

    .mycc-title {
        font-size: 34px;
        line-height: 1.08;
    }

    .mycc-hero-subtitle {
        font-size: 14px;
    }

    .mycc-info-wrap,
    .mycc-content {
        width: calc(100% - 30px);
    }

    .mycc-info-strip {
        grid-template-columns: 1fr;
    }

    .mycc-info-wide {
        grid-column: auto;
    }

    .mycc-info-item {
        min-height: auto;

        border-right: none;
    }

    .mycc-overview,
    .mycc-outcomes {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .mycc-theme-grid {
        grid-template-columns: 1fr;
    }

    .mycc-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .mycc-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   MYCCLIMATE — OBJECTIVES + RESEARCH THEMES SIDE BY SIDE
========================================================== */

.mycc-page .mycc-two-column {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 18px !important;

    margin-top: 18px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.mycc-page .mycc-two-column > .mycc-panel {
    width: calc(50% - 9px) !important;
    flex: 1 1 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* Mobile — stack only on small screens */
@media (max-width: 700px) {

    .mycc-page .mycc-two-column {
        flex-direction: column !important;
    }

    .mycc-page .mycc-two-column > .mycc-panel {
        width: 100% !important;
    }
}
/* ==========================================================
   URBALTOUR KOHIMA
   EKOLOGOS WIKI
========================================================== */


/* PAGE */

body:has(.urb-page) #firstHeading,
body:has(.urb-page) #contentSub {
    display: none !important;
}

body:has(.urb-page) .mw-parser-output,
body:has(.urb-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.urb-page) #content,
body:has(.urb-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.urb-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.urb-hero {
    position: relative;

    width: 100%;
    min-height: 420px;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(208,174,90,.20),
            transparent 32%
        ),
        linear-gradient(
            110deg,
            #173c2d 0%,
            #23492f 45%,
            #426150 100%
        );

    overflow: hidden;
}

.urb-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 65%,
            rgba(255,255,255,.06) 65%,
            rgba(255,255,255,.06) 66%,
            transparent 66%
        );

    pointer-events: none;
}

.urb-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            rgba(0,0,0,.18)
        );

    pointer-events: none;
}

.urb-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 420px;

    margin: 0 auto;
    padding: 55px 0 85px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.urb-hero-copy {
    width: 100%;
    max-width: 700px;
}

.urb-kicker {
    color: #e2b457;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.urb-kicker-line {
    width: 28px;
    height: 2px;

    margin: 12px 0 15px;

    background: #e2b457;
}

.urb-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.02;
}

.urb-hero-subtitle {
    max-width: 600px;

    margin-top: 23px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================
   PROJECT INFORMATION
========================================================== */

.urb-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -50px auto 0;
}

.urb-info-strip {
    display: grid;

    grid-template-columns:
        .9fr
        .7fr
        1.25fr
        1.6fr
        .7fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.10);

    overflow: hidden;
}

.urb-info-item {
    min-height: 140px;

    padding: 22px 19px;

    border-right: 1px solid #e5ddcf;

    box-sizing: border-box;
}

.urb-info-item:last-child {
    border-right: 0;
}

.urb-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 16px;
}

.urb-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.urb-info-value {
    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}


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

.urb-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.urb-panel {
    background: rgba(255,255,255,.45);

    border: 1px solid #e4dacb;
    border-radius: 12px;

    box-sizing: border-box;
}


/* HEADINGS */

.urb-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.urb-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.urb-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.urb-overview {
    display: grid;
    grid-template-columns: 235px 1fr;

    gap: 30px;

    padding: 25px;
}

.urb-overview-text p,
.urb-outcomes-text p {
    margin: 0 0 13px !important;

    color: #343b37;

    font-size: 13px;
    line-height: 1.6;
}

.urb-overview-text p:last-child,
.urb-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   OBJECTIVES + THEMES
========================================================== */

.urb-two-column {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 18px;

    width: 100%;

    margin-top: 18px;
}

.urb-two-column > .urb-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;

    padding: 22px 24px;
}


/* OBJECTIVES */

.urb-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 11px;

    color: #343b37;

    font-size: 12px;
    line-height: 1.42;
}

.urb-number-item:last-child {
    margin-bottom: 0;
}

.urb-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* THEMES */

.urb-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 13px 20px;
}

.urb-theme {
    min-height: 44px;

    padding: 8px 12px;

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

    background: #e7ebe6;

    border: 1px solid rgba(35,73,47,.05);
    border-radius: 24px;

    color: #29362f;

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    box-sizing: border-box;
}

.urb-theme-wide {
    grid-column: span 2;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.urb-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.urb-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));

    gap: 13px;
}

.urb-activity-card {
    min-height: 130px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 6px;

    color: #343b37;

    font-size: 11px;
    line-height: 1.35;
    text-align: center;

    box-sizing: border-box;
}

.urb-activity-icon {
    height: 38px;

    margin-bottom: 10px;

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

    color: #23492f;

    font-size: 27px;
}


/* ==========================================================
   OUTCOMES
========================================================== */

.urb-outcomes {
    display: grid;
    grid-template-columns: 235px 1fr;

    gap: 30px;

    margin-top: 18px;
    padding: 25px;

    background: #edf1ed;
}


/* ==========================================================
   TEAM + PARTNERS
========================================================== */

.urb-lower-grid {
    display: grid;
    grid-template-columns: 1.65fr .8fr;

    gap: 18px;

    margin-top: 18px;
}

.urb-team,
.urb-partners {
    padding: 21px 18px 18px;
}


/* TEAM */

.urb-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 16px;
}

.urb-person {
    min-height: 165px;

    padding: 18px 10px;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 7px;

    text-align: center;
}

.urb-avatar {
    width: 53px;
    height: 53px;

    margin: 0 auto 12px;

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

    background: #e3ebe4;
    color: #7b9a82;

    border-radius: 50%;

    font-size: 30px;
}

.urb-person-name {
    margin-bottom: 8px;

    color: #2e3531;

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

.urb-person-role {
    color: #4b544f;

    font-size: 11px;
    line-height: 1.4;
}


/* PARTNERS */

.urb-partner-item {
    display: grid;
    grid-template-columns: 48px 1fr;

    gap: 12px;
    align-items: center;

    padding: 15px 0;

    border-bottom: 1px solid rgba(35,73,47,.13);
}

.urb-partner-item:last-child {
    border-bottom: none;
}

.urb-partner-symbol {
    width: 43px;
    height: 43px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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

.urb-partner-item strong,
.urb-partner-item span {
    display: block;
}

.urb-partner-item strong {
    color: #23492f;

    font-size: 12px;
}

.urb-partner-item span {
    margin-top: 3px;

    color: #5b645e;

    font-size: 11px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .urb-title {
        font-size: 48px;
    }

    .urb-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .urb-info-wide {
        grid-column: span 2;
    }

    .urb-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .urb-lower-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .urb-two-column {
        flex-direction: column !important;
    }

    .urb-two-column > .urb-panel {
        width: 100%;
    }

    .urb-overview,
    .urb-outcomes {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .urb-hero {
        min-height: 380px;
    }

    .urb-hero-inner {
        width: calc(100% - 36px);
        min-height: 380px;

        padding: 45px 0 75px;
    }

    .urb-title {
        font-size: 40px;
    }

    .urb-hero-subtitle {
        font-size: 14px;
    }

    .urb-info-wrap,
    .urb-content {
        width: calc(100% - 30px);
    }

    .urb-info-strip {
        grid-template-columns: 1fr;
    }

    .urb-info-wide {
        grid-column: auto;
    }

    .urb-info-item {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }

    .urb-theme-grid {
        grid-template-columns: 1fr;
    }

    .urb-theme-wide {
        grid-column: auto;
    }

    .urb-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .urb-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   URBALTOUR — TEAM + PARTNERS SIDE BY SIDE
========================================================== */

.urb-page .urb-lower-grid {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 2fr 1fr !important;

    gap: 18px !important;

    margin-top: 18px !important;
    padding: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}

.urb-page .urb-lower-grid > .urb-panel {
    width: 100% !important;
    margin: 0 !important;

    box-sizing: border-box !important;
}


/* Research Team left */
.urb-page .urb-team {
    grid-column: 1 !important;
}


/* Partner Institutions right */
.urb-page .urb-partners {
    grid-column: 2 !important;
}


/* Keep the three team members in one row */
.urb-page .urb-team-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;
}


/* Stack only on smaller screens */
@media (max-width: 750px) {

    .urb-page .urb-lower-grid {
        grid-template-columns: 1fr !important;
    }

    .urb-page .urb-team,
    .urb-page .urb-partners {
        grid-column: 1 !important;
    }
}
/* ==========================================================
   URBALTOUR — FINAL LOWER PAGE ARRANGEMENT
========================================================== */


/* ----------------------------------------------------------
   OUTCOMES
   Heading on top, text below across the full width
---------------------------------------------------------- */

.urb-page .urb-outcomes {
    display: block !important;

    width: 100% !important;

    margin-top: 18px !important;
    padding: 24px 26px !important;

    background: #edf1ed !important;

    box-sizing: border-box !important;
}


/* Outcome heading */
.urb-page .urb-outcomes .urb-section-side {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
}


/* Outcome text full width */
.urb-page .urb-outcomes-text {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


.urb-page .urb-outcomes-text p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.6 !important;
}


.urb-page .urb-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}



/* ----------------------------------------------------------
   RESEARCH TEAM + PARTNER INSTITUTIONS
---------------------------------------------------------- */

.urb-page .urb-lower-grid {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr) !important;

    gap: 18px !important;

    margin: 18px 0 0 0 !important;
    padding: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* VERY IMPORTANT:
   Force both boxes onto the SAME ROW */

.urb-page .urb-team {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
}


.urb-page .urb-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
}


/* ----------------------------------------------------------
   RESEARCH TEAM
---------------------------------------------------------- */

.urb-page .urb-team-grid {
    display: grid !important;

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

    gap: 16px !important;

    width: 100% !important;
}


.urb-page .urb-person {
    width: 100% !important;
    min-height: 150px !important;

    margin: 0 !important;
    padding: 18px 10px !important;

    box-sizing: border-box !important;
}



/* ----------------------------------------------------------
   PARTNER INSTITUTIONS
---------------------------------------------------------- */

.urb-page .urb-partners {
    padding: 21px 20px !important;
}


.urb-page .urb-partner-item {
    width: 100% !important;

    box-sizing: border-box !important;
}



/* ----------------------------------------------------------
   TABLET / MOBILE
---------------------------------------------------------- */

@media (max-width: 750px) {

    .urb-page .urb-lower-grid {
        grid-template-columns: 1fr !important;
    }

    .urb-page .urb-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .urb-page .urb-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

}


@media (max-width: 520px) {

    .urb-page .urb-team-grid {
        grid-template-columns: 1fr !important;
    }

}
/* ==========================================================
   WAR RESIDUES PROJECT
   EKOLOGOS WIKI
========================================================== */


/* PAGE RESET */

body:has(.warres-page) #firstHeading,
body:has(.warres-page) #contentSub {
    display: none !important;
}

body:has(.warres-page) .mw-parser-output,
body:has(.warres-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.warres-page) #content,
body:has(.warres-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.warres-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.warres-hero {
    position: relative;

    width: 100%;
    min-height: 430px;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 76% 34%,
            rgba(190,145,69,.20),
            transparent 34%
        ),
        linear-gradient(
            105deg,
            #172f27 0%,
            #244a35 52%,
            #615943 100%
        );

    overflow: hidden;
}

.warres-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .20;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 45px,
            rgba(255,255,255,.055) 46px,
            transparent 47px
        );

    pointer-events: none;
}

.warres-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,31,25,.55),
            rgba(0,0,0,.05)
        );

    pointer-events: none;
}

.warres-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;

    margin: 0 auto;
    padding: 52px 0 82px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.warres-hero-copy {
    width: 100%;
    max-width: 790px;
}

.warres-kicker {
    color: #e1b457;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.warres-kicker-line {
    width: 30px;
    height: 2px;

    margin: 12px 0 15px;

    background: #e1b457;
}

.warres-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 59px;
    font-weight: 500;
    line-height: 1.03;
}

.warres-title-sub {
    max-width: 760px;

    margin-top: 9px;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 400;
    line-height: 1.15;
}

.warres-hero-description {
    max-width: 650px;

    margin-top: 23px;

    color: rgba(255,255,255,.96);

    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================
   INFORMATION STRIP
========================================================== */

.warres-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -50px auto 0;
}

.warres-info-strip {
    display: grid;

    grid-template-columns:
        .95fr
        .9fr
        1.45fr
        1.15fr
        .65fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.10);

    overflow: hidden;
}

.warres-info-item {
    min-height: 140px;

    padding: 22px 19px;

    border-right: 1px solid #e5ddcf;

    box-sizing: border-box;
}

.warres-info-item:last-child {
    border-right: none;
}

.warres-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 16px;
}

.warres-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.warres-info-value {
    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.warres-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.warres-panel {
    background: rgba(255,255,255,.46);

    border: 1px solid #e3dacb;
    border-radius: 12px;

    box-sizing: border-box;
}


/* HEADINGS */

.warres-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.warres-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.warres-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.warres-overview {
    display: grid;
    grid-template-columns: 235px 1fr;

    gap: 30px;

    padding: 25px;
}

.warres-overview-text p,
.warres-outcomes-text p {
    margin: 0 0 13px !important;

    color: #343b37;

    font-size: 13px;
    line-height: 1.6;
}

.warres-overview-text p:last-child,
.warres-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   OBJECTIVES + RESEARCH THEMES
========================================================== */

.warres-two-column {
    width: 100%;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 18px;

    margin-top: 18px;
}

.warres-two-column > .warres-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;

    padding: 22px 24px;
}


/* OBJECTIVES */

.warres-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 12px;

    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}

.warres-number-item:last-child {
    margin-bottom: 0;
}

.warres-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* RESEARCH THEMES */

.warres-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 13px 20px;
}

.warres-theme {
    min-height: 44px;

    padding: 8px 12px;

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

    background: #e7ebe6;

    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;

    color: #29362f;

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    box-sizing: border-box;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.warres-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.warres-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));

    gap: 13px;
}

.warres-activity-card {
    min-height: 140px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 6px;

    color: #343b37;

    font-size: 11px;
    line-height: 1.4;
    text-align: center;

    box-sizing: border-box;
}

.warres-activity-icon {
    height: 38px;

    margin-bottom: 11px;

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

    color: #23492f;

    font-size: 27px;
}


/* ==========================================================
   EXPECTED OUTCOMES
========================================================== */

.warres-outcomes {
    width: 100%;

    margin-top: 18px;
    padding: 24px 26px;

    background: #edf1ed;
}

.warres-outcomes-text {
    width: 100%;
}


/* ==========================================================
   RESEARCH TEAM
========================================================== */

.warres-team {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.warres-team-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));

    gap: 16px;
}

.warres-person {
    min-height: 165px;

    padding: 18px 10px;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 7px;

    text-align: center;

    box-sizing: border-box;
}

.warres-avatar {
    width: 53px;
    height: 53px;

    margin: 0 auto 12px;

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

    background: #e3ebe4;
    color: #78977f;

    border-radius: 50%;

    font-size: 30px;
}

.warres-person-name {
    margin-bottom: 8px;

    color: #2e3531;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.warres-person-role {
    color: #4b544f;

    font-size: 11px;
    line-height: 1.4;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .warres-title {
        font-size: 48px;
    }

    .warres-title-sub {
        font-size: 25px;
    }

    .warres-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .warres-info-wide {
        grid-column: span 2;
    }

    .warres-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .warres-team-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}


@media (max-width: 700px) {

    .warres-two-column {
        flex-direction: column !important;
    }

    .warres-two-column > .warres-panel {
        width: 100%;
    }

    .warres-overview {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .warres-hero {
        min-height: 430px;
    }

    .warres-hero-inner {
        width: calc(100% - 36px);
        min-height: 430px;

        padding: 45px 0 75px;
    }

    .warres-title {
        font-size: 39px;
    }

    .warres-title-sub {
        font-size: 21px;
    }

    .warres-hero-description {
        font-size: 14px;
    }

    .warres-info-wrap,
    .warres-content {
        width: calc(100% - 30px);
    }

    .warres-info-strip {
        grid-template-columns: 1fr;
    }

    .warres-info-wide {
        grid-column: auto;
    }

    .warres-info-item {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }

    .warres-theme-grid {
        grid-template-columns: 1fr;
    }

    .warres-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .warres-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   FOOD SECURITY + CLIMATE ADAPTATION PROJECT
   EKOLOGOS WIKI
========================================================== */


/* PAGE RESET */

body:has(.foodsec-page) #firstHeading,
body:has(.foodsec-page) #contentSub {
    display: none !important;
}

body:has(.foodsec-page) .mw-parser-output,
body:has(.foodsec-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.foodsec-page) #content,
body:has(.foodsec-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.foodsec-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.foodsec-hero {
    position: relative;

    width: 100%;
    min-height: 440px;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(202,173,87,.21),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            #16392a 0%,
            #27543b 52%,
            #637357 100%
        );

    overflow: hidden;
}

.foodsec-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .20;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 55px,
            rgba(255,255,255,.05) 56px,
            transparent 57px
        );

    pointer-events: none;
}

.foodsec-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,39,28,.62),
            rgba(0,0,0,.03)
        );

    pointer-events: none;
}

.foodsec-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 440px;

    margin: 0 auto;
    padding: 52px 0 84px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.foodsec-hero-copy {
    width: 100%;
    max-width: 850px;
}

.foodsec-kicker {
    color: #e2b650;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.foodsec-kicker-line {
    width: 30px;
    height: 2px;

    margin: 12px 0 15px;

    background: #e2b650;
}

.foodsec-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 47px;
    font-weight: 500;
    line-height: 1.08;

    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.foodsec-hero-description {
    max-width: 680px;

    margin-top: 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================
   PROJECT INFO STRIP
========================================================== */

.foodsec-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -50px auto 0;
}

.foodsec-info-strip {
    display: grid;

    grid-template-columns:
        1.8fr
        .7fr
        1.15fr
        .65fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.10);

    overflow: hidden;
}

.foodsec-info-item {
    min-height: 145px;

    padding: 22px 20px;

    border-right: 1px solid #e5ddcf;

    box-sizing: border-box;
}

.foodsec-info-item:last-child {
    border-right: none;
}

.foodsec-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 16px;
}

.foodsec-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.foodsec-info-value {
    color: #343b37;

    font-size: 12px;
    line-height: 1.48;
}


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

.foodsec-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.foodsec-panel {
    background: rgba(255,255,255,.46);

    border: 1px solid #e3dacb;
    border-radius: 12px;

    box-sizing: border-box;
}


/* HEADINGS */

.foodsec-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.foodsec-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.foodsec-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.foodsec-overview {
    display: grid;
    grid-template-columns: 235px 1fr;

    gap: 30px;

    padding: 25px;
}

.foodsec-overview-text p,
.foodsec-outcomes-text p {
    margin: 0 0 13px !important;

    color: #343b37;

    font-size: 13px;
    line-height: 1.6;
}

.foodsec-overview-text p:last-child,
.foodsec-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   OBJECTIVES + THEMES
========================================================== */

.foodsec-two-column {
    width: 100%;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 18px;

    margin-top: 18px;
}

.foodsec-two-column > .foodsec-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;

    padding: 22px 24px;
}


/* OBJECTIVES */

.foodsec-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 12px;

    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}

.foodsec-number-item:last-child {
    margin-bottom: 0;
}

.foodsec-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* RESEARCH THEMES */

.foodsec-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 13px 20px;
}

.foodsec-theme {
    min-height: 44px;

    padding: 8px 12px;

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

    background: #e5ebe4;

    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;

    color: #29362f;

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    box-sizing: border-box;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.foodsec-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.foodsec-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));

    gap: 13px;
}

.foodsec-activity-card {
    min-height: 140px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 6px;

    color: #343b37;

    font-size: 11px;
    line-height: 1.4;
    text-align: center;

    box-sizing: border-box;
}

.foodsec-activity-icon {
    height: 38px;

    margin-bottom: 11px;

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

    color: #23492f;

    font-size: 27px;
}


/* ==========================================================
   EXPECTED OUTCOMES
========================================================== */

.foodsec-outcomes {
    width: 100%;

    margin-top: 18px;
    padding: 24px 26px;

    background: #edf1ed;
}

.foodsec-outcomes-text {
    width: 100%;
}


/* ==========================================================
   TEAM + PARTNERS
========================================================== */

.foodsec-lower-grid {
    width: 100%;

    display: grid !important;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr) !important;

    gap: 18px;

    margin-top: 18px;

    align-items: stretch;
}

.foodsec-team,
.foodsec-partners {
    width: 100%;

    margin: 0 !important;
    padding: 21px 18px 18px;

    box-sizing: border-box;
}

.foodsec-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.foodsec-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* TEAM */

.foodsec-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 15px;
}

.foodsec-person {
    min-height: 155px;

    padding: 17px 8px;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 7px;

    text-align: center;

    box-sizing: border-box;
}

.foodsec-avatar {
    width: 50px;
    height: 50px;

    margin: 0 auto 11px;

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

    background: #e3ebe4;
    color: #78977f;

    border-radius: 50%;

    font-size: 28px;
}

.foodsec-person-name {
    margin-bottom: 7px;

    color: #2e3531;

    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}

.foodsec-person-role {
    color: #4b544f;

    font-size: 10.5px;
    line-height: 1.4;
}


/* PARTNER INSTITUTIONS */

.foodsec-partner-item {
    display: grid;
    grid-template-columns: 44px 1fr;

    gap: 11px;
    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid rgba(35,73,47,.13);
}

.foodsec-partner-item:last-child {
    border-bottom: none;
}

.foodsec-partner-symbol {
    width: 40px;
    height: 40px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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

.foodsec-partner-item strong,
.foodsec-partner-item span {
    display: block;
}

.foodsec-partner-item strong {
    color: #23492f;

    font-size: 11px;
    line-height: 1.3;
}

.foodsec-partner-item span {
    margin-top: 3px;

    color: #5b645e;

    font-size: 10px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .foodsec-title {
        font-size: 40px;
    }

    .foodsec-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .foodsec-info-leads {
        grid-column: span 2;
    }

    .foodsec-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .foodsec-lower-grid {
        grid-template-columns: 1fr !important;
    }

    .foodsec-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .foodsec-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}


@media (max-width: 700px) {

    .foodsec-two-column {
        flex-direction: column !important;
    }

    .foodsec-two-column > .foodsec-panel {
        width: 100%;
    }

    .foodsec-overview {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .foodsec-hero {
        min-height: 430px;
    }

    .foodsec-hero-inner {
        width: calc(100% - 36px);
        min-height: 430px;

        padding: 45px 0 75px;
    }

    .foodsec-title {
        font-size: 33px;
    }

    .foodsec-hero-description {
        font-size: 14px;
    }

    .foodsec-info-wrap,
    .foodsec-content {
        width: calc(100% - 30px);
    }

    .foodsec-info-strip {
        grid-template-columns: 1fr;
    }

    .foodsec-info-leads {
        grid-column: auto;
    }

    .foodsec-info-item {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }

    .foodsec-theme-grid {
        grid-template-columns: 1fr;
    }

    .foodsec-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .foodsec-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   NUTRITION DETERMINANTS PROJECT
   EKOLOGOS WIKI
========================================================== */


/* PAGE RESET */

body:has(.nutrition-page) #firstHeading,
body:has(.nutrition-page) #contentSub {
    display: none !important;
}

body:has(.nutrition-page) .mw-parser-output,
body:has(.nutrition-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.nutrition-page) #content,
body:has(.nutrition-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.nutrition-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.nutrition-hero {
    position: relative;

    width: 100%;
    min-height: 430px;

    background:
        radial-gradient(
            circle at 78% 32%,
            rgba(213,179,94,.20),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #163a2c 0%,
            #28543d 52%,
            #72806a 100%
        );

    overflow: hidden;
}

.nutrition-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,39,28,.62),
            rgba(0,0,0,.04)
        );

    pointer-events: none;
}

.nutrition-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;

    margin: 0 auto;
    padding: 52px 0 84px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.nutrition-hero-copy {
    width: 100%;
    max-width: 850px;
}

.nutrition-kicker {
    color: #e2b650;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.nutrition-kicker-line {
    width: 30px;
    height: 2px;

    margin: 12px 0 15px;

    background: #e2b650;
}

.nutrition-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 49px;
    font-weight: 500;
    line-height: 1.08;

    text-shadow: 0 2px 8px rgba(0,0,0,.20);
}

.nutrition-hero-description {
    max-width: 680px;

    margin-top: 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================
   PROJECT INFO
========================================================== */

.nutrition-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -50px auto 0;
}

.nutrition-info-strip {
    display: grid;

    grid-template-columns:
        .9fr
        1fr
        .75fr
        1.55fr
        .7fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.10);

    overflow: hidden;
}

.nutrition-info-item {
    min-height: 140px;

    padding: 22px 19px;

    border-right: 1px solid #e5ddcf;

    box-sizing: border-box;
}

.nutrition-info-item:last-child {
    border-right: none;
}

.nutrition-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 16px;
}

.nutrition-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.nutrition-info-value {
    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.nutrition-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.nutrition-panel {
    background: rgba(255,255,255,.46);

    border: 1px solid #e3dacb;
    border-radius: 12px;

    box-sizing: border-box;
}


/* HEADINGS */

.nutrition-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.nutrition-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.nutrition-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.nutrition-overview {
    display: grid;
    grid-template-columns: 235px 1fr;

    gap: 30px;

    padding: 25px;
}

.nutrition-overview-text p,
.nutrition-outcomes-text p {
    margin: 0 0 13px !important;

    color: #343b37;

    font-size: 13px;
    line-height: 1.6;
}

.nutrition-overview-text p:last-child,
.nutrition-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   OBJECTIVES + THEMES
========================================================== */

.nutrition-two-column {
    width: 100%;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 18px;

    margin-top: 18px;
}

.nutrition-two-column > .nutrition-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;

    padding: 22px 24px;
}


/* OBJECTIVES */

.nutrition-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 12px;

    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}

.nutrition-number-item:last-child {
    margin-bottom: 0;
}

.nutrition-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* RESEARCH THEMES */

.nutrition-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 13px 20px;
}

.nutrition-theme {
    min-height: 44px;

    padding: 8px 12px;

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

    background: #e5ebe4;

    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;

    color: #29362f;

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    box-sizing: border-box;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.nutrition-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.nutrition-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));

    gap: 13px;
}

.nutrition-activity-card {
    min-height: 140px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 6px;

    color: #343b37;

    font-size: 11px;
    line-height: 1.4;
    text-align: center;

    box-sizing: border-box;
}

.nutrition-activity-icon {
    height: 38px;

    margin-bottom: 11px;

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

    color: #23492f;

    font-size: 27px;
}


/* ==========================================================
   OUTCOMES
========================================================== */

.nutrition-outcomes {
    width: 100%;

    margin-top: 18px;
    padding: 24px 26px;

    background: #edf1ed;
}

.nutrition-outcomes-text {
    width: 100%;
}


/* ==========================================================
   TEAM + PARTNERS
========================================================== */

.nutrition-lower-grid {
    width: 100%;

    display: grid !important;
    grid-template-columns: minmax(0,2fr) minmax(300px,1fr) !important;

    gap: 18px;

    margin-top: 18px;

    align-items: stretch !important;
}

.nutrition-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.nutrition-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.nutrition-team,
.nutrition-partners {
    width: 100%;

    margin: 0 !important;
    padding: 21px 18px 18px;

    box-sizing: border-box;
}


/* TEAM */

.nutrition-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 16px;
}

.nutrition-person {
    min-height: 165px;

    padding: 18px 10px;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 7px;

    text-align: center;

    box-sizing: border-box;
}

.nutrition-avatar {
    width: 53px;
    height: 53px;

    margin: 0 auto 12px;

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

    background: #e3ebe4;
    color: #78977f;

    border-radius: 50%;

    font-size: 30px;
}

.nutrition-person-name {
    margin-bottom: 8px;

    color: #2e3531;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.nutrition-person-role {
    color: #4b544f;

    font-size: 11px;
    line-height: 1.4;
}


/* PARTNER INSTITUTIONS */

.nutrition-partner-item {
    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 11px;
    align-items: center;

    padding: 13px 0;

    border-bottom: 1px solid rgba(35,73,47,.13);
}

.nutrition-partner-item:last-child {
    border-bottom: none;
}

.nutrition-partner-symbol {
    width: 41px;
    height: 41px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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

.nutrition-partner-item strong,
.nutrition-partner-item span {
    display: block;
}

.nutrition-partner-item strong {
    color: #23492f;

    font-size: 11px;
}

.nutrition-partner-item span {
    margin-top: 3px;

    color: #5b645e;

    font-size: 10px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .nutrition-title {
        font-size: 41px;
    }

    .nutrition-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .nutrition-info-wide {
        grid-column: span 2;
    }

    .nutrition-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .nutrition-lower-grid {
        grid-template-columns: 1fr !important;
    }

    .nutrition-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .nutrition-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}


@media (max-width: 700px) {

    .nutrition-two-column {
        flex-direction: column !important;
    }

    .nutrition-two-column > .nutrition-panel {
        width: 100%;
    }

    .nutrition-overview {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .nutrition-hero {
        min-height: 420px;
    }

    .nutrition-hero-inner {
        width: calc(100% - 36px);
        min-height: 420px;

        padding: 45px 0 75px;
    }

    .nutrition-title {
        font-size: 34px;
    }

    .nutrition-hero-description {
        font-size: 14px;
    }

    .nutrition-info-wrap,
    .nutrition-content {
        width: calc(100% - 30px);
    }

    .nutrition-info-strip {
        grid-template-columns: 1fr;
    }

    .nutrition-info-wide {
        grid-column: auto;
    }

    .nutrition-info-item {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }

    .nutrition-theme-grid {
        grid-template-columns: 1fr;
    }

    .nutrition-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .nutrition-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   NAGA WOMEN'S HEALTH CHANNEL
   EKOLOGOS WIKI
========================================================== */


/* PAGE RESET */

body:has(.nwhc-page) #firstHeading,
body:has(.nwhc-page) #contentSub {
    display: none !important;
}

body:has(.nwhc-page) .mw-parser-output,
body:has(.nwhc-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.nwhc-page) #content,
body:has(.nwhc-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.nwhc-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.nwhc-hero {
    position: relative;

    width: 100%;
    min-height: 430px;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(218,177,119,.22),
            transparent 35%
        ),
        linear-gradient(
            110deg,
            #183a2e 0%,
            #285542 53%,
            #747868 100%
        );

    overflow: hidden;
}

.nwhc-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .16;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(255,255,255,.18) 0,
            rgba(255,255,255,.18) 1px,
            transparent 2px
        );

    background-size: 25px 25px;

    pointer-events: none;
}

.nwhc-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,37,29,.65),
            rgba(0,0,0,.03)
        );

    pointer-events: none;
}

.nwhc-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;

    margin: 0 auto;
    padding: 52px 0 84px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.nwhc-hero-copy {
    width: 100%;
    max-width: 820px;
}

.nwhc-kicker {
    color: #e2b650;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.nwhc-kicker-line {
    width: 30px;
    height: 2px;

    margin: 12px 0 15px;

    background: #e2b650;
}

.nwhc-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.04;

    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.nwhc-hero-description {
    max-width: 680px;

    margin-top: 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================
   PROJECT INFO
========================================================== */

.nwhc-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -50px auto 0;
}

.nwhc-info-strip {
    display: grid;

    grid-template-columns:
        .85fr
        .95fr
        1.35fr
        1.4fr
        .65fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.10);

    overflow: hidden;
}

.nwhc-info-item {
    min-height: 140px;

    padding: 22px 19px;

    border-right: 1px solid #e5ddcf;

    box-sizing: border-box;
}

.nwhc-info-item:last-child {
    border-right: none;
}

.nwhc-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 16px;
}

.nwhc-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.nwhc-info-value {
    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}


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

.nwhc-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.nwhc-panel {
    background: rgba(255,255,255,.46);

    border: 1px solid #e3dacb;
    border-radius: 12px;

    box-sizing: border-box;
}


/* HEADINGS */

.nwhc-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.nwhc-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.nwhc-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.nwhc-overview {
    display: grid;
    grid-template-columns: 235px 1fr;

    gap: 30px;

    padding: 25px;
}

.nwhc-overview-text p,
.nwhc-outcomes-text p {
    margin: 0 0 13px !important;

    color: #343b37;

    font-size: 13px;
    line-height: 1.6;
}

.nwhc-overview-text p:last-child,
.nwhc-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   OBJECTIVES + THEMES
========================================================== */

.nwhc-two-column {
    width: 100%;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 18px;

    margin-top: 18px;
}

.nwhc-two-column > .nwhc-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;

    padding: 22px 24px;
}


/* OBJECTIVES */

.nwhc-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 12px;

    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}

.nwhc-number-item:last-child {
    margin-bottom: 0;
}

.nwhc-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* THEMES */

.nwhc-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 13px 20px;
}

.nwhc-theme {
    min-height: 44px;

    padding: 8px 12px;

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

    background: #e7ebe6;

    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;

    color: #29362f;

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    box-sizing: border-box;
}

.nwhc-theme-wide {
    grid-column: span 2;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.nwhc-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.nwhc-activity-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));

    gap: 13px;
}

.nwhc-activity-card {
    min-height: 140px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 6px;

    color: #343b37;

    font-size: 11px;
    line-height: 1.4;
    text-align: center;

    box-sizing: border-box;
}

.nwhc-activity-icon {
    height: 38px;

    margin-bottom: 11px;

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

    color: #23492f;

    font-size: 27px;
}


/* ==========================================================
   OUTCOMES
========================================================== */

.nwhc-outcomes {
    width: 100%;

    margin-top: 18px;
    padding: 24px 26px;

    background: #edf1ed;
}

.nwhc-outcomes-text {
    width: 100%;
}


/* ==========================================================
   TEAM + PARTNERS
========================================================== */

.nwhc-lower-grid {
    width: 100%;

    display: grid !important;
    grid-template-columns: minmax(0,2fr) minmax(290px,1fr) !important;

    gap: 18px;

    margin-top: 18px;

    align-items: stretch !important;
}

.nwhc-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.nwhc-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.nwhc-team,
.nwhc-partners {
    width: 100%;

    margin: 0 !important;
    padding: 21px 18px 18px;

    box-sizing: border-box;
}


/* RESEARCH TEAM */

.nwhc-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 15px;
}

.nwhc-person {
    min-height: 155px;

    padding: 17px 9px;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 7px;

    text-align: center;

    box-sizing: border-box;
}

.nwhc-avatar {
    width: 50px;
    height: 50px;

    margin: 0 auto 11px;

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

    background: #e3ebe4;
    color: #78977f;

    border-radius: 50%;

    font-size: 28px;
}

.nwhc-person-name {
    margin-bottom: 7px;

    color: #2e3531;

    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}

.nwhc-person-role {
    color: #4b544f;

    font-size: 10.5px;
    line-height: 1.4;
}


/* PARTNERS */

.nwhc-partner-item {
    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 11px;
    align-items: center;

    padding: 14px 0;

    border-bottom: 1px solid rgba(35,73,47,.13);
}

.nwhc-partner-item:last-child {
    border-bottom: none;
}

.nwhc-partner-symbol {
    width: 41px;
    height: 41px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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

.nwhc-partner-item strong,
.nwhc-partner-item span {
    display: block;
}

.nwhc-partner-item strong {
    color: #23492f;

    font-size: 11px;
}

.nwhc-partner-item span {
    margin-top: 3px;

    color: #5b645e;

    font-size: 10px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .nwhc-title {
        font-size: 47px;
    }

    .nwhc-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .nwhc-info-wide {
        grid-column: span 2;
    }

    .nwhc-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .nwhc-lower-grid {
        grid-template-columns: 1fr !important;
    }

    .nwhc-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .nwhc-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}


@media (max-width: 700px) {

    .nwhc-two-column {
        flex-direction: column !important;
    }

    .nwhc-two-column > .nwhc-panel {
        width: 100%;
    }

    .nwhc-overview {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .nwhc-hero {
        min-height: 420px;
    }

    .nwhc-hero-inner {
        width: calc(100% - 36px);
        min-height: 420px;

        padding: 45px 0 75px;
    }

    .nwhc-title {
        font-size: 38px;
    }

    .nwhc-hero-description {
        font-size: 14px;
    }

    .nwhc-info-wrap,
    .nwhc-content {
        width: calc(100% - 30px);
    }

    .nwhc-info-strip {
        grid-template-columns: 1fr;
    }

    .nwhc-info-wide {
        grid-column: auto;
    }

    .nwhc-info-item {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }

    .nwhc-theme-grid {
        grid-template-columns: 1fr;
    }

    .nwhc-theme-wide {
        grid-column: auto;
    }

    .nwhc-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .nwhc-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   SURGICAL CARE PROJECT
   EKOLOGOS WIKI
========================================================== */


/* PAGE RESET */

body:has(.surgical-page) #firstHeading,
body:has(.surgical-page) #contentSub {
    display: none !important;
}

body:has(.surgical-page) .mw-parser-output,
body:has(.surgical-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.surgical-page) #content,
body:has(.surgical-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.surgical-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.surgical-hero {
    position: relative;

    width: 100%;
    min-height: 430px;

    background:
        radial-gradient(
            circle at 79% 32%,
            rgba(184,196,168,.18),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #16372b 0%,
            #28513e 52%,
            #66746b 100%
        );

    overflow: hidden;
}

.surgical-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .14;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 45px,
            rgba(255,255,255,.05) 46px,
            transparent 47px
        );

    pointer-events: none;
}

.surgical-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,36,27,.67),
            rgba(0,0,0,.03)
        );

    pointer-events: none;
}

.surgical-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;

    margin: 0 auto;
    padding: 52px 0 84px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.surgical-hero-copy {
    width: 100%;
    max-width: 880px;
}

.surgical-kicker {
    color: #e2b650;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.surgical-kicker-line {
    width: 30px;
    height: 2px;

    margin: 12px 0 15px;

    background: #e2b650;
}

.surgical-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.07;

    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.surgical-hero-description {
    max-width: 690px;

    margin-top: 23px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================
   PROJECT INFO
========================================================== */

.surgical-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -50px auto 0;
}

.surgical-info-strip {
    display: grid;

    grid-template-columns:
        .8fr
        .9fr
        1.2fr
        1.65fr
        .65fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.10);

    overflow: hidden;
}

.surgical-info-item {
    min-height: 140px;

    padding: 22px 19px;

    border-right: 1px solid #e5ddcf;

    box-sizing: border-box;
}

.surgical-info-item:last-child {
    border-right: none;
}

.surgical-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 16px;
}

.surgical-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.surgical-info-value {
    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.surgical-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.surgical-panel {
    background: rgba(255,255,255,.46);

    border: 1px solid #e3dacb;
    border-radius: 12px;

    box-sizing: border-box;
}


/* HEADINGS */

.surgical-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.surgical-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.surgical-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.surgical-overview {
    display: grid;
    grid-template-columns: 235px 1fr;

    gap: 30px;

    padding: 25px;
}

.surgical-overview-text p,
.surgical-outcomes-text p {
    margin: 0 0 13px !important;

    color: #343b37;

    font-size: 13px;
    line-height: 1.6;
}

.surgical-overview-text p:last-child,
.surgical-outcomes-text p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   OBJECTIVES + THEMES
========================================================== */

.surgical-two-column {
    width: 100%;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 18px;

    margin-top: 18px;
}

.surgical-two-column > .surgical-panel {
    width: calc(50% - 9px);
    flex: 1 1 0;

    padding: 22px 24px;
}


/* OBJECTIVES */

.surgical-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 12px;

    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}

.surgical-number-item:last-child {
    margin-bottom: 0;
}

.surgical-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* THEMES */

.surgical-theme-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 13px 20px;
}

.surgical-theme {
    min-height: 44px;

    padding: 8px 12px;

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

    background: #e6ebe7;

    border: 1px solid rgba(35,73,47,.06);
    border-radius: 24px;

    color: #29362f;

    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;

    box-sizing: border-box;
}

.surgical-theme-wide {
    grid-column: span 2;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.surgical-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.surgical-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));

    gap: 13px;
}

.surgical-activity-card {
    min-height: 140px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 6px;

    color: #343b37;

    font-size: 11px;
    line-height: 1.4;
    text-align: center;

    box-sizing: border-box;
}

.surgical-activity-icon {
    height: 38px;

    margin-bottom: 11px;

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

    color: #23492f;

    font-size: 27px;
}


/* ==========================================================
   OUTCOMES
========================================================== */

.surgical-outcomes {
    width: 100%;

    margin-top: 18px;
    padding: 24px 26px;

    background: #edf1ed;
}

.surgical-outcomes-text {
    width: 100%;
}


/* ==========================================================
   TEAM + PARTNERS
========================================================== */

.surgical-lower-grid {
    width: 100%;

    display: grid !important;
    grid-template-columns: minmax(0,2.25fr) minmax(290px,.9fr) !important;

    gap: 18px;

    margin-top: 18px;

    align-items: stretch !important;
}

.surgical-team {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.surgical-partners {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.surgical-team,
.surgical-partners {
    width: 100%;

    margin: 0 !important;
    padding: 21px 18px 18px;

    box-sizing: border-box;
}


/* TEAM */

.surgical-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 14px;
}

.surgical-person {
    min-height: 145px;

    padding: 16px 8px;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 7px;

    text-align: center;

    box-sizing: border-box;
}

.surgical-avatar {
    width: 47px;
    height: 47px;

    margin: 0 auto 10px;

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

    background: #e3ebe4;
    color: #78977f;

    border-radius: 50%;

    font-size: 26px;
}

.surgical-person-name {
    margin-bottom: 7px;

    color: #2e3531;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.surgical-person-role {
    color: #4b544f;

    font-size: 10px;
    line-height: 1.4;
}


/* PARTNERS */

.surgical-partner-item {
    display: grid;
    grid-template-columns: 46px 1fr;

    gap: 11px;
    align-items: center;

    padding: 15px 0;

    border-bottom: 1px solid rgba(35,73,47,.13);
}

.surgical-partner-item:last-child {
    border-bottom: none;
}

.surgical-partner-symbol {
    width: 42px;
    height: 42px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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

.surgical-partner-item strong,
.surgical-partner-item span {
    display: block;
}

.surgical-partner-item strong {
    color: #23492f;

    font-size: 11px;
    line-height: 1.3;
}

.surgical-partner-item span {
    margin-top: 3px;

    color: #5b645e;

    font-size: 10px;
    line-height: 1.3;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .surgical-title {
        font-size: 40px;
    }

    .surgical-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .surgical-info-wide {
        grid-column: span 2;
    }

    .surgical-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .surgical-lower-grid {
        grid-template-columns: 1fr !important;
    }

    .surgical-team {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .surgical-partners {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}


@media (max-width: 700px) {

    .surgical-two-column {
        flex-direction: column !important;
    }

    .surgical-two-column > .surgical-panel {
        width: 100%;
    }

    .surgical-overview {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .surgical-hero {
        min-height: 430px;
    }

    .surgical-hero-inner {
        width: calc(100% - 36px);
        min-height: 430px;

        padding: 45px 0 75px;
    }

    .surgical-title {
        font-size: 33px;
    }

    .surgical-hero-description {
        font-size: 14px;
    }

    .surgical-info-wrap,
    .surgical-content {
        width: calc(100% - 30px);
    }

    .surgical-info-strip {
        grid-template-columns: 1fr;
    }

    .surgical-info-wide {
        grid-column: auto;
    }

    .surgical-info-item {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }

    .surgical-theme-grid {
        grid-template-columns: 1fr;
    }

    .surgical-theme-wide {
        grid-column: auto;
    }

    .surgical-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .surgical-team-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   EKOLOGOS PROJECT PAGE
========================================================== */

body:has(.ekp-page) #firstHeading,
body:has(.ekp-page) #contentSub {
    display: none !important;
}

body:has(.ekp-page) .mw-parser-output,
body:has(.ekp-page) #mw-content-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.ekp-page) #content,
body:has(.ekp-page) #bodyContent {
    margin: 0 !important;
    padding: 0 !important;
}

.ekp-page {
    width: 100%;
    margin: 0;
    padding: 0 0 65px;

    background: #f8f6f1;
    color: #303934;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
}


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

.ekp-hero {
    position: relative;

    width: 100%;
    min-height: 430px;

    background:
        radial-gradient(
            circle at 76% 35%,
            rgba(207,177,91,.22),
            transparent 34%
        ),
        linear-gradient(
            108deg,
            #123829 0%,
            #24513a 50%,
            #65765f 100%
        );

    overflow: hidden;
}

.ekp-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .15;

    background:
        repeating-radial-gradient(
            circle at 80% 50%,
            rgba(255,255,255,.10) 0,
            rgba(255,255,255,.10) 1px,
            transparent 2px,
            transparent 24px
        );

    pointer-events: none;
}

.ekp-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,36,27,.68),
            rgba(0,0,0,.02)
        );

    pointer-events: none;
}

.ekp-hero-inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 60px);
    max-width: 1180px;
    min-height: 430px;

    margin: 0 auto;
    padding: 55px 0 82px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}

.ekp-hero-copy {
    width: 100%;
    max-width: 790px;
}

.ekp-kicker {
    color: #e2b650;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.ekp-kicker-line {
    width: 30px;
    height: 2px;

    margin: 12px 0 15px;

    background: #e2b650;
}

.ekp-title {
    margin: 0;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 68px;
    font-weight: 500;
    line-height: 1;

    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.ekp-hero-subtitle {
    max-width: 690px;

    margin-top: 23px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================================
   INFO STRIP
========================================================== */

.ekp-info-wrap {
    position: relative;
    z-index: 5;

    width: calc(100% - 60px);
    max-width: 1180px;

    margin: -50px auto 0;
}

.ekp-info-strip {
    display: grid;

    grid-template-columns:
        1.1fr
        .7fr
        1.5fr
        1.2fr
        .7fr;

    background: #ffffff;

    border: 1px solid rgba(35,73,47,.10);
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(0,0,0,.10);

    overflow: hidden;
}

.ekp-info-item {
    min-height: 140px;

    padding: 22px 19px;

    border-right: 1px solid #e5ddcf;

    box-sizing: border-box;
}

.ekp-info-item:last-child {
    border-right: none;
}

.ekp-info-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 12px;

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

    color: #23492f;

    border: 2px solid #23492f;
    border-radius: 50%;

    font-size: 16px;
}

.ekp-info-label {
    margin-bottom: 7px;

    color: #23492f;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.ekp-info-value {
    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}


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

.ekp-content {
    width: calc(100% - 60px);
    max-width: 1180px;

    margin: 29px auto 0;

    box-sizing: border-box;
}

.ekp-panel {
    background: rgba(255,255,255,.46);

    border: 1px solid #e3dacb;
    border-radius: 12px;

    box-sizing: border-box;
}


/* HEADINGS */

.ekp-heading-row {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 16px;
}

.ekp-section-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.ekp-heading {
    color: #23492f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.2;
}


/* ==========================================================
   OVERVIEW
========================================================== */

.ekp-overview {
    display: grid;
    grid-template-columns: 220px 1fr;

    gap: 30px;

    padding: 25px;
}

.ekp-overview-text p,
.ekp-feature-card p {
    margin: 0 0 13px !important;

    color: #343b37;

    font-size: 13px;
    line-height: 1.6;
}

.ekp-overview-text p:last-child,
.ekp-feature-card p:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   OBJECTIVES + COORDINATION
========================================================== */

.ekp-two-column {
    width: 100%;

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

    gap: 18px;

    margin-top: 18px;
}

.ekp-two-column > .ekp-panel {
    padding: 22px 24px;
}


.ekp-number-item {
    display: grid;
    grid-template-columns: 27px 1fr;

    gap: 12px;
    align-items: start;

    margin-bottom: 12px;

    color: #343b37;

    font-size: 12px;
    line-height: 1.45;
}

.ekp-number-item:last-child {
    margin-bottom: 0;
}

.ekp-number {
    width: 24px;
    height: 24px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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


/* COORDINATION DETAILS */

.ekp-detail-item {
    padding: 12px 0;

    border-bottom: 1px solid rgba(35,73,47,.12);
}

.ekp-detail-item:last-child {
    border-bottom: none;
}

.ekp-detail-item strong,
.ekp-detail-item span {
    display: block;
}

.ekp-detail-item strong {
    margin-bottom: 3px;

    color: #23492f;

    font-size: 11px;
}

.ekp-detail-item span {
    color: #515b55;

    font-size: 11.5px;
    line-height: 1.4;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.ekp-activities {
    margin-top: 18px;
    padding: 21px 18px 18px;
}

.ekp-activity-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));

    gap: 13px;
}

.ekp-activity-card {
    min-height: 135px;

    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fffdfa;

    border: 1px solid #ddd1bf;
    border-radius: 6px;

    color: #343b37;

    font-size: 11px;
    line-height: 1.4;
    text-align: center;

    box-sizing: border-box;
}

.ekp-activity-icon {
    height: 38px;

    margin-bottom: 11px;

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

    color: #23492f;

    font-size: 27px;
}


/* ==========================================================
   EDUCATION / KNOWLEDGE / PUBLIC ENGAGEMENT
========================================================== */

.ekp-three-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 18px;

    margin-top: 18px;
}

.ekp-feature-card {
    padding: 22px 22px;
}


/* ==========================================================
   PARTNERS + RELATED TOPICS
========================================================== */

.ekp-lower-grid {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(280px,.8fr);

    gap: 18px;

    margin-top: 18px;

    align-items: stretch;
}

.ekp-partners,
.ekp-topics {
    padding: 21px 18px 18px;
}


/* PARTNERS */

.ekp-partner-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 0 22px;
}

.ekp-partner-item {
    display: grid;
    grid-template-columns: 46px 1fr;

    gap: 11px;
    align-items: center;

    padding: 13px 0;

    border-bottom: 1px solid rgba(35,73,47,.12);
}

.ekp-partner-symbol {
    width: 42px;
    height: 42px;

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

    background: #23492f;
    color: #ffffff;

    border-radius: 50%;

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

.ekp-partner-item strong,
.ekp-partner-item span {
    display: block;
}

.ekp-partner-item strong {
    color: #23492f;

    font-size: 11px;
    line-height: 1.3;
}

.ekp-partner-item span {
    margin-top: 3px;

    color: #5b645e;

    font-size: 10px;
}


/* RELATED TOPICS */

.ekp-topic-list > div {
    margin-bottom: 10px;
}

.ekp-topic-list a,
.ekp-topic-list a:visited {
    display: block;

    padding: 10px 14px;

    background: #e7ebe6;

    border-radius: 20px;

    color: #23492f !important;

    font-size: 11.5px;
    font-weight: 500;
    text-align: center;

    text-decoration: none !important;
}

.ekp-topic-list a:hover {
    background: #dce5dc;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .ekp-title {
        font-size: 56px;
    }

    .ekp-info-strip {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .ekp-info-wide {
        grid-column: span 2;
    }

    .ekp-activity-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .ekp-three-grid {
        grid-template-columns: 1fr;
    }

    .ekp-lower-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .ekp-two-column {
        grid-template-columns: 1fr !important;
    }

    .ekp-overview {
        grid-template-columns: 1fr;
    }

    .ekp-partner-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .ekp-hero {
        min-height: 390px;
    }

    .ekp-hero-inner {
        width: calc(100% - 36px);
        min-height: 390px;

        padding: 45px 0 75px;
    }

    .ekp-title {
        font-size: 46px;
    }

    .ekp-hero-subtitle {
        font-size: 14px;
    }

    .ekp-info-wrap,
    .ekp-content {
        width: calc(100% - 30px);
    }

    .ekp-info-strip {
        grid-template-columns: 1fr;
    }

    .ekp-info-wide {
        grid-column: auto;
    }

    .ekp-info-item {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid #e5ddcf;
    }

    .ekp-activity-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
/* ==========================================================
   EKOLOGOS PAGE — CLEAN LAYOUT FIX
   MediaWiki-safe flex arrangement
========================================================== */


/* Remove MediaWiki-generated empty paragraph elements */
.ekp-page .ekp-two-column > p,
.ekp-page .ekp-three-grid > p,
.ekp-page .ekp-lower-grid > p {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Make sure panels are never floated */
.ekp-page .ekp-panel {
    float: none !important;
}


/* ==========================================================
   OBJECTIVES + COORDINATION
========================================================== */

.ekp-page .ekp-two-column {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 18px !important;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


.ekp-page .ekp-two-column > .ekp-panel {
    flex: 1 1 0 !important;

    width: 50% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 22px 24px !important;

    box-sizing: border-box !important;

    grid-column: auto !important;
    grid-row: auto !important;
}


/* ==========================================================
   ACTIVITIES
========================================================== */

.ekp-page .ekp-activities {
    width: 100% !important;

    margin: 18px 0 0 !important;

    box-sizing: border-box !important;
}


.ekp-page .ekp-activity-grid {
    display: grid !important;

    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

    gap: 13px !important;

    width: 100% !important;
}


/* ==========================================================
   EDUCATION + KNOWLEDGE + PUBLIC ENGAGEMENT
========================================================== */

.ekp-page .ekp-three-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 18px !important;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


.ekp-page .ekp-three-grid > .ekp-panel {
    flex: 1 1 0 !important;

    width: 33.333% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 22px !important;

    grid-column: auto !important;
    grid-row: auto !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   PARTNERS + RELATED TOPICS
========================================================== */

.ekp-page .ekp-lower-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 18px !important;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* Partner Institutions — larger left box */
.ekp-page .ekp-partners {
    flex: 2 1 0 !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
}


/* Related Topics — smaller right box */
.ekp-page .ekp-topics {
    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 260px !important;

    margin: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
}


/* Partner institutions within left box */
.ekp-page .ekp-partner-grid {
    display: grid !important;

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

    gap: 0 24px !important;

    width: 100% !important;
}


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

@media (max-width: 900px) {

    .ekp-page .ekp-activity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }


    .ekp-page .ekp-three-grid {
        flex-wrap: wrap !important;
    }


    .ekp-page .ekp-three-grid > .ekp-panel {
        width: calc(50% - 9px) !important;
        flex: 1 1 calc(50% - 9px) !important;
    }


    .ekp-page .ekp-lower-grid {
        flex-direction: column !important;
    }


    .ekp-page .ekp-partners,
    .ekp-page .ekp-topics {
        width: 100% !important;
        min-width: 0 !important;
    }

}


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

@media (max-width: 700px) {

    .ekp-page .ekp-two-column {
        flex-direction: column !important;
    }


    .ekp-page .ekp-two-column > .ekp-panel {
        width: 100% !important;
    }


    .ekp-page .ekp-three-grid {
        flex-direction: column !important;
    }


    .ekp-page .ekp-three-grid > .ekp-panel {
        width: 100% !important;
        flex: 0 0 auto !important;
    }


    .ekp-page .ekp-partner-grid {
        grid-template-columns: 1fr !important;
    }

}


@media (max-width: 520px) {

    .ekp-page .ekp-activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}
/* Main Page: mark missing pages as In development */
/* =========================================================
   MAIN PAGE — INDIVIDUAL "IN DEVELOPMENT" BADGES
   Himalayas is intentionally excluded
   ========================================================= */


/* Badge */
body.page-Main_Page a[href*="Arctic"]::after,
body.page-Main_Page a[href*="Amazonia"]::after,
body.page-Main_Page a[href*="South_India"]::after,
body.page-Main_Page a[href*="Southeast_Asia"]::after,
body.page-Main_Page a[href*="All_Regions"]::after,

body.page-Main_Page a[href*="Biodiversity"]::after,
body.page-Main_Page a[href*="Water_Systems"]::after,
body.page-Main_Page a[href*="Fire_%26_Land_Management"]::after,
body.page-Main_Page a[href*="Forest_Knowledge"]::after,
body.page-Main_Page a[href*="Fisheries"]::after,
body.page-Main_Page a[href*="Animal_Relations"]::after,
body.page-Main_Page a[href*="Climate_Change"]::after,
body.page-Main_Page a[href*="Agriculture"]::after,
body.page-Main_Page a[href*="Traditional_Medicine"]::after,
body.page-Main_Page a[href*="Dreams_%26_Cosmologies"]::after {
    content: "In development";
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 10;

    padding: 3px 7px;
    border-radius: 10px;

    background: #eee8d8;
    color: #6b5a2b;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
/* =========================================================
   MAIN PAGE — IN DEVELOPMENT BADGES
   Applied only to cards explicitly marked in Main Page HTML
   ========================================================= */

body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card {
    position: relative !important;
}

/* Badge */
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    left: auto !important;
    bottom: auto !important;

    z-index: 50 !important;

    display: inline-block !important;
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 3px 7px !important;

    background: #eee8d8 !important;
    color: #6b5a2b !important;

    border: 1px solid #e0d7bd !important;
    border-radius: 10px !important;

    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;

    white-space: nowrap !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    pointer-events: none !important;
}
/* =========================================================
   MAIN PAGE — FINAL IN DEVELOPMENT BADGES
   ========================================================= */

/* Stop old automatic MediaWiki red-link badges causing duplicates */
body.page-Main_Page a.new::after {
    content: none !important;
    display: none !important;
}

body.page-Main_Page a.new {
    opacity: 1 !important;
}

/* Cards which have a badge in the upper-right corner */
body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card,
body.page-Main_Page .collection-card {
    position: relative !important;
}

body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge,
body.page-Main_Page .collection-card > .dev-badge {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 50 !important;

    display: inline-block !important;
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 3px 7px !important;

    background: #eee8d8 !important;
    color: #6b5a2b !important;
    border: 1px solid #e0d7bd !important;
    border-radius: 10px !important;

    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    pointer-events: none !important;
}

/* Badges beside ordinary text links */
body.page-Main_Page .dev-inline-badge {
    display: inline-block !important;
    width: auto !important;

    margin-left: 5px !important;
    padding: 2px 6px !important;

    background: #eee8d8 !important;
    color: #6b5a2b !important;
    border: 1px solid #e0d7bd !important;
    border-radius: 10px !important;

    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;

    text-decoration: none !important;
    pointer-events: none !important;
}

/* Featured article badges — especially compact */
body.page-Main_Page .dev-article-badge {
    margin-left: 4px !important;
    padding: 1px 5px !important;
    font-size: 7px !important;
}

/* Keep each footer link together with its badge */
body.page-Main_Page .dev-footer-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

/* Footer badges need to be very small */
body.page-Main_Page .dev-footer-badge {
    margin-left: 1px !important;
    padding: 1px 4px !important;
    font-size: 6px !important;
}
/* =========================================================
   EKOLOGOS MAIN PAGE — CLEAN IN DEVELOPMENT LABELS
   ========================================================= */

/* Prevent old automatic red-link labels */
body.page-Main_Page a.new::after {
    content: none !important;
    display: none !important;
}

body.page-Main_Page a.new {
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   STANDARD BADGE
   --------------------------------------------------------- */

body.page-Main_Page .dev-badge,
body.page-Main_Page .dev-inline-badge {
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    padding: 3px 7px !important;
    margin: 0 !important;

    background: #f1ead7 !important;
    border: 1px solid #ded3b5 !important;
    border-radius: 999px !important;

    color: #78652d !important;

    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    letter-spacing: 0.15px !important;
    text-transform: none !important;
    text-decoration: none !important;

    white-space: nowrap !important;

    box-shadow: none !important;

    pointer-events: none !important;
}


/* ---------------------------------------------------------
   REGION + THEME + COLLECTION CARDS
   Badge floats neatly in top-right corner
   --------------------------------------------------------- */

body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card,
body.page-Main_Page .collection-card {
    position: relative !important;
}

body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge,
body.page-Main_Page .collection-card > .dev-badge {
    position: absolute !important;

    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;

    z-index: 30 !important;

    margin: 0 !important;

    background: rgba(248, 244, 232, 0.96) !important;

    box-shadow:
        0 1px 3px rgba(0,0,0,0.10) !important;
}


/* Collection badge slightly stronger over photographs */
body.page-Main_Page .collection-card > .dev-badge {
    top: 9px !important;
    right: 9px !important;

    background: rgba(250, 247, 238, 0.97) !important;
}


/* ---------------------------------------------------------
   FEATURED ARTICLES
   Small badge sits neatly after title
   --------------------------------------------------------- */

body.page-Main_Page .home-article-title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    column-gap: 5px !important;
    row-gap: 3px !important;
}

body.page-Main_Page .home-article-title .dev-article-badge {
    flex: 0 0 auto !important;

    padding: 2px 5px !important;

    font-size: 7px !important;

    vertical-align: middle !important;
}


/* ---------------------------------------------------------
   BROWSE / ABOUT / PROJECT LINKS
   --------------------------------------------------------- */

body.page-Main_Page .section-title-right,
body.page-Main_Page .theme-title-right,
body.page-Main_Page .home-browse-articles,
body.page-Main_Page .home-info-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

body.page-Main_Page .section-title-right .dev-inline-badge,
body.page-Main_Page .theme-title-right .dev-inline-badge,
body.page-Main_Page .home-browse-articles .dev-inline-badge,
body.page-Main_Page .home-info-link .dev-inline-badge {
    margin-left: 2px !important;
}


/* ---------------------------------------------------------
   COMMUNITY BUTTON
   Put badge above-right instead of after button text
   --------------------------------------------------------- */

body.page-Main_Page .home-community-button {
    position: relative !important;
    display: inline-block !important;
}

body.page-Main_Page .home-community-button .dev-inline-badge {
    position: absolute !important;

    top: -12px !important;
    right: -10px !important;

    z-index: 20 !important;

    margin: 0 !important;

    font-size: 7px !important;
}


/* ---------------------------------------------------------
   FOOTER
   Compact badges to avoid visual clutter
   --------------------------------------------------------- */

body.page-Main_Page .home-footer-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-wrap: wrap !important;
    gap: 14px 22px !important;
}

body.page-Main_Page .dev-footer-item {
    display: inline-flex !important;
    align-items: center !important;

    gap: 4px !important;

    white-space: nowrap !important;
}

body.page-Main_Page .dev-footer-badge {
    padding: 2px 4px !important;

    font-size: 6px !important;

    opacity: 0.88 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    body.page-Main_Page .dev-badge,
    body.page-Main_Page .dev-inline-badge {
        font-size: 7px !important;
    }

    body.page-Main_Page .eko-card > .dev-badge,
    body.page-Main_Page .theme-card > .dev-badge,
    body.page-Main_Page .collection-card > .dev-badge {
        top: 5px !important;
        right: 5px !important;
    }

    body.page-Main_Page .home-footer-links {
        gap: 10px 14px !important;
    }
}
/* =========================================================
   NAGALAND & INDO–MYANMAR HIGHLANDS — MISSING PAGES / IN DEVELOPMENT
   ========================================================= */

/* Missing MediaWiki pages */
.hima-page a.new {
    color: #315f42 !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
}

/* "In development" badge */
.hima-page a.new::after {
    content: "In development" !important;

    display: inline-block !important;
    margin-left: 6px !important;
    padding: 2px 6px !important;

    background: #f1ead7 !important;
    border: 1px solid #ded3b5 !important;
    border-radius: 999px !important;

    color: #78652d !important;

    font-family: Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;

    white-space: nowrap !important;
    vertical-align: middle !important;

    box-shadow: none !important;
}

/* ==========================================================
   PLACE HUB CARDS — SMALL-SCREEN HEIGHT
   ========================================================== */
@media (max-width: 600px) {
    .page-Main_Page .homepage-grid .eko-card img,
    .page-Main_Page .homepage-grid .eko-card .mw-file-element {
        height: 200px !important;
    }
}
Retrieved from "https://wiki.highlanderpress.org/index.php?title=MediaWiki:Common.css&oldid=479"
Powered by MediaWiki