/* ==========================================
   SCHOOL TRANSPORT PAGE
========================================== */

/* ---------- HERO ---------- */

.school-hero{

    background:linear-gradient(135deg,#072554,#0d3473);

    color:#fff;

    text-align:center;

    padding:32px 24px;
}

.school-hero h1{

    color:#fff;

    margin:16px 0;
}

.school-hero p{

    color:rgba(255,255,255,.85);
}

/* ---------- MAP ---------- */

.map-placeholder{

    height:220px;

    background:#e8edf3;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#777;

    font-weight:bold;
}

/* ---------- SCHEDULE ---------- */

.schedule-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;
}

.schedule-row strong{

    color:#072554;
}

.schedule-row span{

    color:#57C11D;

    font-weight:bold;
}

/* ---------- DRIVER ---------- */

.driver-card{

    display:flex;

    align-items:center;

    gap:16px;
}

.driver-avatar{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#57C11D;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    font-weight:bold;
}

/* ---------- QUICK ACTIONS ---------- */

.grid .card{

    text-align:center;

    transition:.3s;
}

.grid .card:hover{

    transform:translateY(-4px);
}

/* ---------- STATUS ---------- */

.transport-status{

    margin-top:16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px;

    border-radius:12px;

    background:#eef9e9;
}

.transport-status strong{

    color:#57C11D;
}

/* ---------- RESPONSIVE ---------- */

@media(min-width:768px){

.school-hero{

    padding:60px 40px;
}

.map-placeholder{

    height:320px;
}

}

@media(min-width:1100px){

.school-hero{

    padding:80px;
}

.map-placeholder{

    height:420px;
}

}