/* =====================================================
   VOLUME 1 ISSUE 1
   SEPARATE PAGE CSS
   ===================================================== */

.v1s1-hero,
.v1s1-details,
.v1s1-main,
.v1s1-bottom-nav {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}


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

.v1s1-hero {
    width: 100%;
    min-height: 275px;

    background:
        linear-gradient(
            105deg,
            #ffffff 0%,
            #fbfcfb 65%,
            #f1f6f4 100%
        );

    border-bottom: 1px solid #dce4e1;

    position: relative;
    overflow: hidden;
}


.v1s1-hero::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    left: -170px;
    top: -160px;

    border: 1px solid rgba(0,84,70,.08);

    border-radius: 50%;
}


.v1s1-hero-inner {
    width: 100%;
    max-width: 1365px;

    min-height: 275px;

    margin: auto;

    padding: 25px 70px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        180px
        275px;

    align-items: center;

    gap: 35px;

    box-sizing: border-box;
}


/* LEFT */

.v1s1-badge {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    background: #c9a51a;

    color: #ffffff;

    padding: 6px 12px;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 800;

    margin-bottom: 10px;
}


.v1s1-hero-left h1 {
    margin: 0;

    color: #073e35;

    font-size: 40px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1px;
}


.v1s1-gold-dot {
    display: inline-block;

    width: 13px;
    height: 13px;

    background: #c9a51a;

    border-radius: 50%;

    margin: 0 9px;

    vertical-align: middle;
}


.v1s1-hero-left p {
    margin: 12px 0 0;

    color: #394448;

    font-size: 14px;

    font-weight: 500;
}


.v1s1-line {
    width: 46px;
    height: 3px;

    background: #c9a51a;

    margin-top: 14px;
}


.v1s1-buttons {
    display: flex;

    gap: 15px;

    margin-top: 18px;
}


.v1s1-btn {
    height: 35px;

    padding: 0 19px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;
}


.v1s1-btn-primary {
    background: #005548;

    color: #ffffff;

    border: 1px solid #005548;
}


.v1s1-btn-primary:hover {
    background: #003f35;

    color: #ffffff;
}


.v1s1-btn-secondary {
    background: #ffffff;

    color: #005548;

    border: 1px solid #005548;
}


.v1s1-btn-secondary:hover {
    background: #005548;

    color: #ffffff;
}


/* COVER */

.v1s1-cover-box {
    width: 160px;
    height: 215px;

    margin: auto;

    border: 1px solid #c9a51a;

    box-shadow:
        0 7px 18px rgba(0,0,0,.14);

    overflow: hidden;
}


.v1s1-cover-box img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* INFORMATION */

.v1s1-information {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.v1s1-info-row {
    display: flex;

    align-items: center;

    gap: 10px;
}


.v1s1-info-icon {
    width: 30px;
    height: 30px;

    min-width: 30px;

    border-radius: 50%;

    background: #eaf0ee;

    color: #005548;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;
}


.v1s1-info-row small {
    display: block;

    color: #687174;

    font-size: 9px;

    margin-bottom: 2px;
}


.v1s1-info-row strong {
    display: block;

    color: #1c282b;

    font-size: 10px;
}


.v1s1-green {
    color: #08733f !important;
}


/* =====================================================
   ISSUE DETAILS
   ===================================================== */

.v1s1-details {
    width: 100%;
    max-width: 1365px;

    margin: 10px auto;

    padding: 0 15px;

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 12px;

    box-sizing: border-box;
}


.v1s1-detail-box {
    min-height: 57px;

    background: #ffffff;

    border: 1px solid #e2e7e5;

    border-radius: 6px;

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

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    box-sizing: border-box;
    
    border-left:5px solid #d4af37;
}


.v1s1-detail-box > i {
    width: 34px;
    height: 34px;

    min-width: 34px;

    border-radius: 8px;

    background: #eef3f1;

    color:  #d4af37;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;
}


.v1s1-detail-box span {
    display: block;

    color: #687174;

    font-size: 9px;

    margin-bottom: 3px;
}


.v1s1-detail-box strong {
    display: block;

    color: #182628;

    font-size: 11px;
}


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

.v1s1-main {
    width: 100%;
    max-width: 1365px;

    margin: 0 auto;

    padding: 0 15px 15px;

    box-sizing: border-box;
}


.v1s1-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        305px;

    gap: 20px;
}


/* =====================================================
   TABLE OF CONTENTS
   ===================================================== */

.v1s1-toc {
    background: #ffffff;

    border: 1px solid #e1e6e4;

    border-radius: 6px;

    overflow: hidden;

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);
}


.v1s1-toc-header {
    min-height: 70px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #e5e9e7;

    box-sizing: border-box;
}


.v1s1-toc-header h2 {
    margin: 0;

    color: #102d2c;

    font-size: 17px;

    font-weight: 800;
}


.v1s1-toc-header h2 i {
    margin-right: 7px;

    color: #005548;
}


.v1s1-toc-header p {
    margin: 7px 0 0;

    color: #6b7476;

    font-size: 10px;
}


.v1s1-page-select {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #555f62;

    font-size: 10px;
}


.v1s1-page-select select {
    height: 31px;

    border: 1px solid #d8dfdd;

    border-radius: 5px;

    padding: 0 10px;

    background: #ffffff;

    color: #303b3d;

    outline: none;
}


/* ARTICLE */

.v1s1-article {
    min-height: 70px;

    padding: 10px 16px;

    display: grid;

    grid-template-columns:
        31px
        minmax(220px, 1fr)
        190px
        230px;

    align-items: center;

    gap: 13px;

    border-bottom: 1px solid #e6eae9;

    box-sizing: border-box;

    transition: background .2s ease;
}


.v1s1-article:hover {
    background: #fafcfb;
}


.v1s1-number {
    width: 31px;
    height: 31px;

    border-radius: 5px;

    background: #005548;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;
}


.v1s1-article-info {
    text-decoration: none;

    min-width: 0;
}


.v1s1-article-type {
    color: #a17c00;

    font-size:11px;

    font-weight: 700;
}


.v1s1-article-info h3 {
    margin: 2px 0;

    color: #152326;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 800;
}


.v1s1-article-info p {
    margin: 0;

    color: #697174;

    font-size: 11px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* PAGE / DOI */

.v1s1-article-meta {
    color: #566064;

    font-size: 9px;

    line-height: 1.7;
}


.v1s1-article-meta strong {
    color: #303b3e;

    font-weight: 600;
}


/* ACTIONS */

.v1s1-article-actions {
    display: flex;

    justify-content: flex-end;

    gap: 7px;
}


.v1s1-action {
    height: 26px;

    padding: 0 9px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border-radius: 4px;

    font-size: 9px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;
}


.v1s1-action.abstract {
    color: #005548;

    border: 1px solid #8ca9a3;

    background: #ffffff;
}


.v1s1-action.abstract:hover {
    background: #005548;

    color: #ffffff;
}


.v1s1-action.pdf {
    color: #c72727;

    border: 1px solid #e4a1a1;

    background: #ffffff;
}


.v1s1-action.pdf:hover {
    background: #c72727;

    color: #ffffff;
}


.v1s1-action.cite {
    color: #41494c;

    border: 1px solid #b9c0c1;

    background: #ffffff;
}


/* PAGINATION */

.v1s1-pagination {
    min-height: 48px;

    padding: 7px 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;
}


.v1s1-pagination button,
.v1s1-pagination span {
    min-width: 35px;
    height: 30px;

    padding: 0 9px;

    border: 1px solid #d8dfdd;

    background: #ffffff;

    color: #3e494b;

    border-radius: 4px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    cursor: pointer;
}


.v1s1-pagination button:disabled {
    opacity: .45;

    cursor: not-allowed;
}


.v1s1-pagination .active {
    background: #005548;

    color: #ffffff;

    border-color: #005548;
}


/* =====================================================
   RIGHT SIDE
   ===================================================== */

.v1s1-side {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.v1s1-side-card {
    background: #ffffff;

    border: 1px solid #e1e6e4;

    border-radius: 6px;

    padding: 15px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);
        
   border-top:4px solid #d4af37;   
    
}


.v1s1-side-card h3 {
    margin: 0;

    color: #102d2c;

    font-size: 17px;

    font-weight: 800;
}


.v1s1-side-card h3 i {
    color: #005548;

    margin-right: 7px;
}


.v1s1-side-line {
    width: 28px;
    height: 2px;

    background: #c9a51a;

    margin: 8px 0 12px;
}


.v1s1-side-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid #edf0ef;

    font-size: 12px;
}


.v1s1-side-item:last-child {
    border-bottom: 0;
}


.v1s1-side-item span {
    color: #5d6769;
}


.v1s1-side-item strong {
    color: #202b2e;

    text-align: right;
}


/* RELATED */

.v1s1-related {
    display: block;

    text-decoration: none;

    padding: 11px 0;

    border-bottom: 1px solid #e7ebea;
}


.v1s1-related:last-child {
    border-bottom: 0;
}


.v1s1-related strong {
    display: block;

    color: #172a2c;

    font-size: 12px;

    margin-bottom: 5px;
}


.v1s1-related span {
    display: block;

    color: #697376;

    font-size: 10px;

    line-height: 1.4;
}


.v1s1-related small {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 7px;

    color: #005548;

    font-size: 9px;

    font-weight: 700;
}


/* =====================================================
   BOTTOM NAV
   ===================================================== */

.v1s1-bottom-nav {
    width: 100%;
    max-width: 1365px;

    margin: 0 auto 20px;

    padding: 0 15px;

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap: 1px;

    box-sizing: border-box;
}


.v1s1-bottom-nav a {
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #ffffff;

    border: 1px solid #e0e5e3;

    color: #10403a;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    transition: .2s ease;
}


.v1s1-bottom-nav a:hover {
    background: #005548;

    color: #ffffff;
}


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

@media (max-width: 1100px) {

    .v1s1-hero-inner {
        padding-left: 35px;
        padding-right: 35px;

        grid-template-columns:
            minmax(0, 1fr)
            160px
            230px;

        gap: 20px;
    }

    .v1s1-details {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .v1s1-content {
        grid-template-columns:
            1fr;
    }

    .v1s1-side {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 850px) {

    .v1s1-hero-inner {
        grid-template-columns:
            1fr 150px;
    }

    .v1s1-information {
        display: none;
    }

    .v1s1-article {
        grid-template-columns:
            31px
            1fr
            170px;
    }

    .v1s1-article-actions {
        grid-column: 2 / 4;

        justify-content: flex-start;
    }

}


@media (max-width: 650px) {

    .v1s1-hero-inner {
        display: flex;

        flex-direction: column;

        padding: 25px 20px;

        text-align: center;
    }

    .v1s1-line {
        margin-left: auto;
        margin-right: auto;
    }

    .v1s1-buttons {
        justify-content: center;

        flex-wrap: wrap;
    }

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

    .v1s1-toc-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

    .v1s1-article {
        grid-template-columns:
            31px
            1fr;
    }

    .v1s1-article-meta {
        grid-column: 2;
    }

    .v1s1-article-actions {
        grid-column: 2;

        flex-wrap: wrap;
    }

    .v1s1-side {
        display: block;
    }

    .v1s1-side-card {
        margin-bottom: 14px;
    }

    .v1s1-bottom-nav {
        grid-template-columns: 1fr;
    }

}