/* =====================================================
   JSTA - EDITORIAL GOVERNANCE
   Journal of Scientific and Technological Advances
   ===================================================== */

.jg-page {
    --jg-navy: #12364c;
    --jg-deep: #0c293d;
    --jg-teal: #168b92;
    --jg-ink: #233849;
    --jg-muted: #5c7080;
    --jg-border: #dfe9ed;

    color: var(--jg-ink);
    background: #fff;
}

.jg-page * {
    box-sizing: border-box;
}

.jg-page .container {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}

/* =========================================
   FIRST SECTION - LIGHT HERO
   ========================================= */

.jg-page .jg-banner {
    background: linear-gradient(
        115deg,
        #edf6f8 0%,
        #f8fbfc 60%,
        #ffffff 100%
    ) !important;

    color: #12364c !important;
    padding: 74px 0 76px;
    border: 0;
    border-bottom: 1px solid #dce8eb;
}

.jg-page .jg-banner-inner {
    max-width: 1120px;
}

.jg-page .jg-kicker {
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 700;
    color: #197f8b !important;
    margin: 0 0 16px;
}

.jg-page .jg-banner h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.15;
    letter-spacing: -.035em;
    color: #12364c !important;
    font-weight: 750;
    margin: 0 0 17px;
}

.jg-page .jg-banner p:not(.jg-kicker) {
    max-width: 720px;
    font-size: 17px;
    line-height: 1.75;
    color: #43586b !important;
    margin: 0;
}

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

.jg-page .jg-content {
    padding-top: 54px;
    padding-bottom: 76px;
    max-width: 1120px;
}

.jg-page .jg-intro {
    max-width: 900px;
    margin-bottom: 52px;
}

.jg-page p {
    font-size: 15.5px;
    line-height: 1.86;
    margin: 0 0 16px;
}

.jg-page .jg-lead {
    font-size: 18px;
    line-height: 1.85;
    color: #2d4252;
}

.jg-page .jg-note {
    background: #ecf7f7;
    border-left: 3px solid var(--jg-teal);
    padding: 15px 19px;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: #365461;
    margin-top: 26px;
}

/* =========================================
   GOVERNANCE SECTIONS
   ========================================= */

.jg-page .jg-section {
    border-top: 1px solid var(--jg-border);
    padding: 33px 0 35px;
}

.jg-page .jg-section-heading {
    display: flex;
    align-items: baseline;
    gap: 17px;
    margin-bottom: 23px;
}

.jg-page .jg-section-heading > span {
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 750;
    color: var(--jg-teal);
}

.jg-page .jg-section h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.32;
    letter-spacing: -.02em;
    color: var(--jg-navy);
    margin: 0;
}

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

.jg-page .jg-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.jg-page .jg-role {
    border: 1px solid var(--jg-border);
    border-radius: 9px;
    padding: 26px;
    background: #fcfefe;
}

.jg-page .jg-role .jg-label {
    font-size: 11px;
    letter-spacing: .11em;
    color: var(--jg-teal);
    font-weight: 750;
    line-height: 1.5;
    margin-bottom: 8px;
}

.jg-page .jg-role h3 {
    font-size: 20px;
    line-height: 1.35;
    color: var(--jg-navy);
    margin: 0 0 12px;
}

.jg-page .jg-role p:last-child {
    font-size: 14.5px;
    margin-bottom: 0;
    color: var(--jg-muted);
}

/* =========================================
   LISTS
   ========================================= */

.jg-page .jg-list {
    padding-left: 22px;
    margin: 17px 0 0;
}

.jg-page .jg-list li {
    padding-left: 5px;
    margin: 0 0 13px;
    line-height: 1.75;
    font-size: 15px;
}

.jg-page .jg-list li::marker {
    color: var(--jg-teal);
}

/* =========================================
   RELATED LINKS
   ========================================= */

.jg-page .jg-links {
    margin-top: 24px;
    background: #edf6f7;
    border-radius: 9px;
    padding: 25px 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.jg-page .jg-links a {
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--jg-navy);
}

.jg-page .jg-links a:hover,
.jg-page .jg-links a:focus-visible {
    color: #057d87;
    text-decoration: underline;
}

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

@media (max-width: 720px) {

    .jg-page .container {
        width: min(100% - 32px, 1120px);
    }

    .jg-page .jg-banner {
        padding: 53px 0 58px;
    }

    .jg-page .jg-content {
        padding-top: 38px;
        padding-bottom: 52px;
    }

    .jg-page .jg-role-grid {
        grid-template-columns: 1fr;
    }

    .jg-page .jg-role {
        padding: 21px;
    }

    .jg-page .jg-section {
        padding: 28px 0;
    }

    .jg-page .jg-section-heading {
        gap: 12px;
    }

    .jg-page .jg-links {
        padding: 21px;
        gap: 14px 20px;
    }
}