/* =========================================================
   SDG GOAL / EVENTS SYSTEM
   ========================================================= */


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

.sdg-goal-page {

    width: 100%;

    min-height: 100vh;

    padding: 0 10px 45px;

    box-sizing: border-box;

    background: #eef2f3;

    color: #303c49;

}


/* =========================================================
   CONTAINER
========================================================= */

.sdg-goal-page .sdg-container {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.sdg-goal-breadcrumb {

    position: relative;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    min-height: 65px;

    padding: 10px 5px;

    box-sizing: border-box;

    color: #34495e;

    font-size: 14px;

    line-height: 1.5;

}


.sdg-goal-breadcrumb a {

    color: #34495e;

    text-decoration: none;

    transition: color 0.2s ease;

}


.sdg-goal-breadcrumb a:hover {

    color: #075b9a;

}


.sdg-breadcrumb-separator {

    color: #777;

    font-weight: 700;

}


/* =========================================================
   BACK BUTTON
========================================================= */

.sdg-goal-back {

    margin-left: auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 8px 16px;

    background: #ff443d;

    color: #ffffff !important;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.sdg-goal-back:hover {

    background: #df332e;

    color: #ffffff !important;

    transform: translateY(-1px);

}


/* =========================================================
   GOAL TITLE
========================================================= */

.sdg-goal-title {

    width: 100%;

    min-height: 105px;

    display: flex;

    align-items: center;

    padding: 20px 38px;

    box-sizing: border-box;

    background: #03284d;

    color: #ffffff;

}


.sdg-goal-title h1 {

    margin: 0;

    color: #ffffff;

    font-size: 34px;

    font-weight: 800;

    line-height: 1.25;

}


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

.sdg-goal-content {

    margin: 22px 25px 0;

    background: #ffffff;

    border: 1px solid #d9dfe2;

    box-sizing: border-box;

}


/* =========================================================
   SUMMARY
========================================================= */

.sdg-goal-summary {

    padding: 25px 27px 22px;

    background: #eeeeee;

    border-bottom: 1px solid #d9d9d9;

}


.sdg-goal-summary h2 {

    margin: 0 0 20px;

    color: #303c49;

    font-size: 21px;

    font-weight: 800;

    line-height: 1.45;

}


/* =========================================================
   VIEW ALL EVENTS
========================================================= */

.sdg-view-all-events {

    display: inline-block;

    margin-left: 7px;

    color: #075b9a;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

}


.sdg-view-all-events:hover {

    color: #0b7ab8;

    text-decoration: underline;

}


/* =========================================================
   DEPARTMENT SUMMARY
========================================================= */

.sdg-department-summary {

    width: 100%;

    display: grid;

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

    gap: 0;

    box-sizing: border-box;

}


/* =========================================================
   DEPARTMENT ITEM
========================================================= */

.sdg-department-item {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    color: #4d5963;

    font-size: 15px;

    line-height: 1.2;

}


.sdg-department-item span {

    font-weight: 600;

    white-space: nowrap;

}


.sdg-department-item strong {

    font-size: 17px;

    font-weight: 600;

    color: #4d5963;

}


/* =========================================================
   TOTAL
========================================================= */

.sdg-department-total {

    color: #03284d;

}


.sdg-department-total span {

    color: #03284d;

    font-weight: 800;

}


.sdg-department-total strong {

    color: #03284d;

    font-weight: 800;

}


/* =========================================================
   GOAL DESCRIPTION
========================================================= */

.sdg-goal-description {

    padding: 18px 27px;

    background: #ffffff;

    border-bottom: 1px solid #e2e2e2;

}


.sdg-goal-description p {

    margin: 0;

    color: #59656f;

    font-size: 15px;

    line-height: 1.7;

}


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

.sdg-events-list {

    width: 100%;

    padding: 20px 22px 25px;

    box-sizing: border-box;

    background: #ffffff;

}


/* =========================================================
   EVENT ACCORDION
========================================================= */

.sdg-event-accordion {

    width: 100%;

    margin: 0 0 9px;

}


.sdg-event-accordion:last-child {

    margin-bottom: 0;

}


/* =========================================================
   EVENT BUTTON
========================================================= */

.sdg-event-button {

    width: 100%;

    min-height: 64px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 16px 20px;

    box-sizing: border-box;

    border: 1px solid #e1e5e7;

    border-radius: 2px;

    background: #eeeeee;

    color: #303c49;

    text-align: left;

    font-family: inherit;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.45;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


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

.sdg-event-button:hover {

    background: #e4e9ec;

    border-color: #d3dade;

}


/* =========================================================
   ACTIVE EVENT
========================================================= */

.sdg-event-button.active {

    background: #03284d;

    border-color: #03284d;

    color: #ffffff;

}


/* =========================================================
   EVENT NUMBER
========================================================= */

.sdg-event-number {

    flex: 0 0 auto;

    min-width: 27px;

    font-weight: 800;

}


/* =========================================================
   EVENT DATE
========================================================= */

.sdg-event-date {

    flex: 0 0 auto;

    font-weight: 800;

}


/* =========================================================
   EVENT DEPARTMENT
========================================================= */

.sdg-event-department {

    flex: 0 0 auto;

    font-weight: 800;

}


/* =========================================================
   EVENT TITLE
========================================================= */

.sdg-event-title {

    flex: 1 1 auto;

    min-width: 0;

    font-weight: 700;

    overflow-wrap: anywhere;

}


/* =========================================================
   EVENT ARROW
========================================================= */

.sdg-event-arrow {

    flex: 0 0 30px;

    width: 30px;

    height: 30px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: 8px;

    border-radius: 50%;

    background: #2f7d1f;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1;

}


.sdg-event-button.active .sdg-event-arrow {

    background: #ffffff;

    color: #03284d;

}


/* =========================================================
   EVENT PANEL
========================================================= */

.sdg-event-panel {

    display: none;

    width: 100%;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #d9dfe2;

    border-top: 0;

}


.sdg-event-panel.open {

    display: block;

}


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

.sdg-event-details {

    padding: 22px 27px;

    color: #4b5862;

    font-size: 15px;

    line-height: 1.7;

}


.sdg-event-details p {

    margin: 0 0 10px;

}


.sdg-event-details p:last-child {

    margin-bottom: 0;

}


.sdg-event-details strong {

    color: #03284d;

    font-weight: 800;

}


/* =========================================================
   EVENT DESCRIPTION
========================================================= */

.sdg-event-description {

    margin-top: 5px;

}


.sdg-event-description > strong {

    display: block;

    margin-bottom: 5px;

}


.sdg-event-description p {

    margin: 0;

}


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

.sdg-no-events {

    padding: 45px 20px;

    text-align: center;

    color: #68747c;

}


.sdg-no-events i {

    margin-bottom: 12px;

    font-size: 35px;

}


.sdg-no-events p {

    margin: 0;

    font-size: 15px;

}


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

.sdg-goal-footer-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 22px 25px 25px;

}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.sdg-goal-footer-actions
.sdg-primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 170px;

    padding: 11px 20px;

    box-sizing: border-box;

    background: #2f7d1f;

    color: #ffffff;

    border-radius: 5px;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.sdg-goal-footer-actions
.sdg-primary-button:hover {

    background: #246617;

    color: #ffffff;

    transform: translateY(-1px);

}


/* =========================================================
   =========================================================
   ALL SDG EVENTS PAGE
   =========================================================
   ========================================================= */

.sdg-events-overview {

    width: 100%;

    padding: 35px 10px 55px;

    box-sizing: border-box;

    background: #eef2f3;

}


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

.sdg-events-intro {

    max-width: 800px;

    margin: 12px auto 0;

    color: #5e6a73;

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   17 GOAL GRID
========================================================= */

.sdg-goals-event-grid {

    width: 100%;

    max-width: 1250px;

    margin: 28px auto 0;

    display: grid;

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

    gap: 18px;

}


/* =========================================================
   GOAL EVENT CARD
========================================================= */

.sdg-goal-event-card {

    min-height: 145px;

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 22px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dfe4e6;

    border-radius: 8px;

    color: #303c49;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}


.sdg-goal-event-card:hover {

    color: #303c49;

    border-color: #bfcbd1;

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.08);

}


/* =========================================================
   GOAL NUMBER
========================================================= */

.sdg-goal-event-number {

    flex: 0 0 70px;

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background: #03284d;

    color: #ffffff;

    border-radius: 50%;

    font-size: 15px;

    font-weight: 800;

    text-align: center;

}


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

.sdg-goal-event-content {

    flex: 1 1 auto;

    min-width: 0;

}


.sdg-goal-event-content h2 {

    margin: 0 0 9px;

    color: #303c49;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.35;

}


.sdg-goal-event-content p {

    margin: 0;

    color: #66737b;

    font-size: 13px;

    font-weight: 600;

}


.sdg-goal-event-content p i {

    margin-right: 5px;

    color: #2f7d1f;

}


/* =========================================================
   GOAL CARD ARROW
========================================================= */

.sdg-goal-event-arrow {

    flex: 0 0 auto;

    font-size: 25px;

    font-weight: 700;

    color: #2f7d1f;

    transition:
        transform 0.2s ease;

}


.sdg-goal-event-card:hover
.sdg-goal-event-arrow {

    transform: translateX(4px);

}


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

@media (max-width: 1100px) {

    .sdg-goal-title h1 {

        font-size: 30px;

    }


    .sdg-goal-content {

        margin-left: 15px;

        margin-right: 15px;

    }


    .sdg-department-summary {

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

        row-gap: 18px;

    }


    .sdg-goals-event-grid {

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

    }

}


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

@media (max-width: 767px) {


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

    .sdg-goal-page {

        padding:
            0 5px 30px;

    }


    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */

    .sdg-goal-breadcrumb {

        min-height: auto;

        padding:
            11px 7px 11px;

        padding-right: 80px;

        gap: 5px;

        font-size: 11px;

    }


    .sdg-goal-back {

        position: absolute;

        top: 9px;

        right: 3px;

        padding:
            6px 9px;

        font-size: 10px;

    }


    /* -----------------------------------------------------
       TITLE
    ----------------------------------------------------- */

    .sdg-goal-title {

        min-height: auto;

        padding:
            17px 17px;

    }


    .sdg-goal-title h1 {

        font-size: 22px;

        line-height: 1.3;

    }


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

    .sdg-goal-content {

        margin:
            12px 5px 0;

    }


    /* -----------------------------------------------------
       SUMMARY
    ----------------------------------------------------- */

    .sdg-goal-summary {

        padding:
            17px 13px 16px;

    }


    .sdg-goal-summary h2 {

        margin-bottom: 14px;

        font-size: 15px;

        line-height: 1.5;

    }


    .sdg-view-all-events {

        display: block;

        margin:
            8px 0 0;

        font-size: 11px;

    }


    /* -----------------------------------------------------
       DEPARTMENTS
    ----------------------------------------------------- */

    .sdg-department-summary {

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

        gap:
            14px 7px;

    }


    .sdg-department-item {

        gap: 5px;

        font-size: 11px;

    }


    .sdg-department-item span {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


    .sdg-department-item strong {

        font-size: 13px;

    }


    /* -----------------------------------------------------
       DESCRIPTION
    ----------------------------------------------------- */

    .sdg-goal-description {

        padding:
            14px 13px;

    }


    .sdg-goal-description p {

        font-size: 12px;

        line-height: 1.65;

    }


    /* -----------------------------------------------------
       EVENTS
    ----------------------------------------------------- */

    .sdg-events-list {

        padding:
            12px 9px 16px;

    }


    .sdg-event-accordion {

        margin-bottom: 7px;

    }


    /* -----------------------------------------------------
       EVENT BUTTON
    ----------------------------------------------------- */

    .sdg-event-button {

        min-height: 52px;

        align-items: flex-start;

        padding:
            12px 10px;

        gap: 3px;

        font-size: 12px;

        line-height: 1.55;

    }


    .sdg-event-number {

        min-width: 19px;

    }


    .sdg-event-date {

        flex: 0 0 auto;

    }


    .sdg-event-department {

        flex: 0 0 auto;

    }


    .sdg-event-title {

        overflow-wrap: anywhere;

    }


    .sdg-event-arrow {

        flex: 0 0 24px;

        width: 24px;

        height: 24px;

        margin-left: 5px;

        font-size: 16px;

    }


    /* -----------------------------------------------------
       EVENT DETAILS
    ----------------------------------------------------- */

    .sdg-event-details {

        padding:
            14px 12px;

        font-size: 12px;

        line-height: 1.65;

    }


    .sdg-event-details p {

        margin-bottom: 8px;

    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .sdg-goal-footer-actions {

        flex-direction: column;

        gap: 8px;

        margin:
            17px 10px 20px;

    }


    .sdg-goal-footer-actions
    .sdg-primary-button {

        width: 100%;

        min-width: 0;

        padding:
            10px 15px;

        font-size: 12px;

    }


    /* -----------------------------------------------------
       ALL SDG EVENTS
    ----------------------------------------------------- */

    .sdg-events-overview {

        padding:
            22px 7px 35px;

    }


    .sdg-events-intro {

        margin-top: 9px;

        font-size: 12px;

        line-height: 1.6;

    }


    .sdg-goals-event-grid {

        grid-template-columns:
            1fr;

        gap: 10px;

        margin-top: 18px;

    }


    .sdg-goal-event-card {

        min-height: 88px;

        padding:
            13px;

        gap: 12px;

        border-radius: 7px;

    }


    .sdg-goal-event-number {

        flex: 0 0 52px;

        width: 52px;

        height: 52px;

        font-size: 11px;

    }


    .sdg-goal-event-content h2 {

        margin-bottom: 5px;

        font-size: 15px;

        line-height: 1.3;

    }


    .sdg-goal-event-content p {

        font-size: 11px;

    }


    .sdg-goal-event-arrow {

        font-size: 21px;

    }

}


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

@media (max-width: 400px) {


    .sdg-goal-title h1 {

        font-size: 19px;

    }


    .sdg-department-summary {

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

        gap:
            13px 6px;

    }


    .sdg-department-item {

        font-size: 10px;

    }


    .sdg-department-item strong {

        font-size: 12px;

    }


    .sdg-event-button {

        padding:
            10px 8px;

        font-size: 11px;

    }


    .sdg-event-number {

        min-width: 17px;

    }


    .sdg-event-arrow {

        flex-basis: 22px;

        width: 22px;

        height: 22px;

        font-size: 14px;

    }


    .sdg-event-details {

        padding:
            12px 10px;

        font-size: 11px;

    }


    .sdg-goal-event-card {

        min-height: 78px;

        padding:
            10px;

    }


    .sdg-goal-event-number {

        flex-basis: 46px;

        width: 46px;

        height: 46px;

        font-size: 10px;

    }


    .sdg-goal-event-content h2 {

        font-size: 13px;

    }


    .sdg-goal-event-content p {

        font-size: 10px;

    }

}
.sdg-event-button {

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    pointer-events: auto;

    cursor: pointer;

}
.sdg-event-accordion {

    position: relative;

    pointer-events: auto;

}