/* =========================================================
   ABOUT + CAREER SHARED LAYOUT
   Dipakai bersama oleh:
   - views/about.ejs
   - views/jobs.ejs

   Tujuan:
   1. Jarak navbar ke hero sama.
   2. Hero atas dan bawah sama rapi.
   3. About dan Career memakai pola visual yang sama.
   4. Isi halaman tetap berbeda.
   5. Tidak mengubah fungsi, route, query, filter, atau form.
========================================================= */

body.inner-page {
    padding-top: 74px !important;
}

/* Root page */
body.inner-page .about-page-final,
body.inner-page .jobs-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #f7fafc !important;
    min-height: 100vh;
}

/* Hero utama About dan Career */
body.inner-page .about-hero-final,
body.inner-page .jobs-hero {
    margin-top: 0 !important;
    padding-top: 74px !important;
    padding-bottom: 68px !important;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.28), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255, 199, 0, 0.16), transparent 28%),
        linear-gradient(135deg, #06264a 0%, #005baa 50%, #0f172a 100%) !important;
    color: #ffffff !important;
    overflow: hidden;
}

/* Layout hero dibuat sama */
.about-hero-inner-final,
.jobs-hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 420px !important;
    gap: 38px !important;
    align-items: center !important;
}

/* Badge/kicker dibuat sama */
.about-kicker-final,
.jobs-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

/* Judul hero dibuat setara */
.about-hero-final h1,
.jobs-hero h1 {
    margin: 0 !important;
    max-width: 820px !important;
    font-size: clamp(42px, 5.5vw, 68px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
}

/* Paragraf hero dibuat setara */
.about-hero-final p,
.jobs-hero p {
    margin: 22px 0 0 !important;
    max-width: 720px !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
}

/* Statistik hero dibuat setara */
.about-hero-stats-final,
.jobs-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 30px !important;
    max-width: 660px !important;
}

.about-hero-stat-final,
.jobs-hero-stat {
    border-radius: 18px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
}

.about-hero-stat-final strong,
.jobs-hero-stat strong {
    display: block !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: #ffffff !important;
}

.about-hero-stat-final span,
.jobs-hero-stat span {
    display: block !important;
    margin-top: 7px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

/* Kartu kanan hero dibuat sama ukuran dan rasa visualnya */
.about-hero-card-final,
.jobs-hero-card {
    border-radius: 30px !important;
    padding: 26px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18) !important;
}

.about-hero-card-final h3,
.jobs-hero-card h3 {
    margin: 0 0 18px !important;
    color: #ffffff !important;
    font-weight: 950 !important;
}

.about-hero-card-final ul,
.jobs-hero-card ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.about-hero-card-final li,
.jobs-hero-card li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 13px !important;
    color: rgba(255, 255, 255, 0.84) !important;
    line-height: 1.55 !important;
}

.about-hero-card-final li:last-child,
.jobs-hero-card li:last-child {
    margin-bottom: 0 !important;
}

/* Section bawah dibuat konsisten */
.about-content-section,
.jobs-list-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

/* Filter career tetap dekat dengan hero, tapi rapi */
.jobs-filter-wrap {
    margin-top: -42px !important;
    position: relative !important;
    z-index: 3 !important;
}

/* Responsive */
@media (max-width: 991.98px) {
    body.inner-page {
        padding-top: 70px !important;
    }

    body.inner-page .about-hero-final,
    body.inner-page .jobs-hero {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    .about-hero-inner-final,
    .jobs-hero-inner {
        grid-template-columns: 1fr !important;
    }

    .about-hero-card-final,
    .jobs-hero-card {
        display: none !important;
    }

    .about-hero-stats-final,
    .jobs-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .about-content-section,
    .jobs-list-section {
        padding-top: 62px !important;
        padding-bottom: 62px !important;
    }
}

@media (max-width: 767.98px) {
    .about-hero-stats-final,
    .jobs-hero-stats {
        grid-template-columns: 1fr !important;
    }

    .jobs-filter-wrap {
        margin-top: -30px !important;
    }
}

@media (max-width: 575.98px) {
    body.inner-page {
        padding-top: 68px !important;
    }

    body.inner-page .about-hero-final,
    body.inner-page .jobs-hero {
        padding-top: 52px !important;
        padding-bottom: 48px !important;
    }

    .about-content-section,
    .jobs-list-section {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }
}