/* Penyesuaian halaman kampus Surabaya terhadap layout detail Jakarta. */
.surabaya-page .jakarta-hero-image {
    border-radius: 18px;
}

.surabaya-page .surabaya-unit-timeline::before {
    background: linear-gradient(var(--unit-green) 0 33.333%, var(--unit-orange) 33.333% 66.666%, var(--unit-blue) 66.666% 100%);
}

.surabaya-page .surabaya-unit-timeline .unit-row {
    min-height: 440px;
}

.surabaya-page .surabaya-unit-timeline .unit-content img {
    object-position: center;
}

@media (max-width: 768px) {
    body.surabaya-page .jakarta-mobile-history {
        display: none;
    }

    body.surabaya-page .jakarta-units,
    body.surabaya-page .jakarta-cta {
        display: block;
    }

    body.surabaya-page .jakarta-units {
        padding: 42px 0 32px;
        color: #20242a;
        background: #f7f9fd;
    }

    body.surabaya-page .jakarta-units .jakarta-section-heading {
        text-align: center;
    }

    body.surabaya-page .jakarta-units .jakarta-section-heading h2 {
        max-width: 330px;
        margin: 17px auto 12px;
        margin-right: auto;
        margin-left: auto;
        font-size: 21px;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    body.surabaya-page .jakarta-units .jakarta-section-heading p {
        max-width: 330px;
        margin: 0 auto;
        font-size: 10px;
        line-height: 1.4;
    }

    body.surabaya-page .surabaya-unit-timeline {
        margin-top: 28px;
        padding-bottom: 34px;
    }

    body.surabaya-page .surabaya-unit-timeline::before {
        top: 7px;
        bottom: 28px;
        left: 14px;
        width: 5px;
    }

    body.surabaya-page .surabaya-unit-timeline .unit-row {
        width: 100%;
        min-height: 560px;
        box-sizing: border-box;
        padding-left: 42px;
    }

    body.surabaya-page .surabaya-unit-timeline .unit-axis {
        top: 0;
        left: 8px;
        width: 15px;
        height: 15px;
        border-width: 3px;
    }

    body.surabaya-page .surabaya-unit-timeline .unit-axis span {
        width: 4px;
        height: 4px;
    }

    body.surabaya-page .surabaya-unit-timeline .unit-line {
        top: 6px;
        right: 20px;
        left: 20px;
        height: 0;
        border-top-width: 3px;
    }

    body.surabaya-page .surabaya-unit-timeline .unit-line i {
        top: -22px;
        right: -20px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    body.surabaya-page .surabaya-unit-timeline .unit-label {
        top: 226px;
        left: 42px;
        min-width: 0;
        min-height: 23px;
        padding: 0 9px;
        font-size: 8px;
        transform: none;
    }

    body.surabaya-page .unit-content {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0;
        padding: 43px 8px 35px 0;
    }

    body.surabaya-page .unit-content img {
        order: -1;
        width: calc(100% - 20px);
        max-width: none;
        height: 170px;
        aspect-ratio: auto;
        object-fit: cover;
        border-radius: 10px;
    }

    body.surabaya-page .unit-content > div {
        width: calc(100% - 20px);
        margin-top: 48px;
    }

    body.surabaya-page .unit-content > div > span {
        font-size: 9px;
    }

    body.surabaya-page .unit-content h3 {
        margin: 13px 0 12px;
        font-size: 17px;
        line-height: 1.08;
    }

    body.surabaya-page .unit-content p {
        margin: 0 0 16px;
        font-size: 10px;
        line-height: 1.45;
    }

    body.surabaya-page .unit-content a {
        width: max-content;
        min-height: 32px;
        padding: 0 11px;
        font-size: 8px;
    }

    body.surabaya-page .surabaya-unit-timeline .unit-finish {
        bottom: 0;
        left: 0;
        min-width: 0;
        min-height: 22px;
        padding: 0 9px;
        font-size: 8px;
        transform: none;
    }

    body.surabaya-page .jakarta-cta {
        display: none;
    }

    body.surabaya-page .site-footer {
        margin-top: 0;
    }
}