/* =========================================================
   APM Logistics - Halaman Tentang Kami
   File: css/apm-about.css
   (Section Legalitas, Mengapa & Alur memakai gaya bawaan apm-landing.css)
   ========================================================= */

/* ---------- Hero ---------- */
.about-hero{
    background:linear-gradient(180deg,#f4f8fd 0%,var(--white) 100%);
    padding:40px 0 16px
}
.about-hero__grid{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:48px;
    align-items:start
}
.about-hero__title{
    font-size:clamp(30px,3.6vw,46px);
    letter-spacing:-.015em;
    line-height:1.12;
    margin-bottom:14px
}
.about-hero__lead{
    font-size:17px;
    max-width:520px;
    margin-bottom:22px
}
.about-hero__cta{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap
}
.about-hero__link{
    color:var(--navy);
    font-weight:600;
    font-size:15px;
    border-bottom:2px solid var(--red);
    padding-bottom:2px
}
.about-hero__link:hover{
    color:var(--red)
}
.about-hero__stats{
    list-style:none;
    margin:24px 0 0;
    padding:16px 0 0;
    border-top:1px solid var(--border);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.about-hero__stats strong{
    display:block;
    color:var(--navy);
    font-size:22px;
    line-height:1.2
}
.about-hero__stats span{
    font-size:13px;
    color:var(--muted)
}

.about-hero__story{
    padding:24px 28px;
    border-left:4px solid var(--red);
    box-shadow:0 14px 36px rgba(19,47,94,.08)
}
.about-hero__story p{
    font-size:15.5px;
    line-height:1.7
}
.about-hero__story p + p{
    margin-top:14px
}
.about-hero__story strong{
    color:var(--navy)
}
.about-hero__tagline{
    margin-top:18px !important;
    padding-top:16px;
    border-top:1px dashed var(--border);
    color:var(--navy);
    font-weight:700;
    font-size:16.5px !important
}

/* ---------- Jarak antar section (khusus halaman ini) ----------
   .section bawaan apm-landing.css = 80px atas-bawah, terlalu renggang di sini */
.about-hero ~ .section{
    padding:40px 0
}
/* .container bawaan punya padding 25px atas-bawah -> dobel jarak; nolkan di halaman ini */
.about-hero > .container,
.about-hero ~ .section > .container,
.about-cta > .container{
    padding-top:0;
    padding-bottom:0
}
.about-hero ~ .section .section-head{
    margin-bottom:24px
}
.about-hero ~ .section.legal h2{
    margin-bottom:22px
}

/* ---------- Legalitas: 2 kartu ---------- */
.about-legal__cards{
    grid-template-columns:repeat(2,1fr);
    max-width:520px
}
.legal__img img{
    min-height:280px
}

/* ---------- CTA penutup ---------- */
.about-cta{
    padding:8px 0 56px
}
.about-cta__box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:34px 40px;
    border-radius:var(--radius);
    background:linear-gradient(120deg,var(--navy) 0%,var(--navy-btn) 100%);
    color:#dbe5f5
}
.about-cta__box h2{
    color:var(--white);
    font-size:clamp(22px,2.4vw,30px);
    margin-bottom:6px
}
.about-cta__actions{
    display:flex;
    gap:12px;
    flex:none
}
.about-cta__ghost{
    display:inline-flex;
    align-items:center;
    padding:12px 26px;
    border-radius:999px;
    border:1.5px solid rgba(255,255,255,.5);
    color:var(--white);
    font-weight:600;
    font-size:15px;
    transition:background .2s,border-color .2s
}
.about-cta__ghost:hover{
    background:rgba(255,255,255,.1);
    border-color:var(--white)
}

/* ---------- Responsive ---------- */
@media (max-width:991px){
    .about-hero__grid{
        grid-template-columns:1fr;
        gap:24px
    }
    .about-hero ~ .section{
        padding:36px 0
    }
    .about-cta__box{
        flex-direction:column;
        align-items:flex-start
    }
}
@media (max-width:575px){
    .about-hero{
        padding:24px 0 4px
    }
    .about-hero ~ .section{
        padding:28px 0
    }
    .about-cta{
        padding:4px 0 36px
    }
    .about-hero__story{
        padding:22px 20px
    }
    .about-hero__stats strong{
        font-size:18px
    }
    .about-legal__cards{
        grid-template-columns:1fr
    }
    .about-cta__box{
        padding:26px 22px
    }
    .about-cta__actions{
        flex-direction:column;
        width:100%
    }
    .about-cta__ghost{
        justify-content:center
    }
}