/*
==================================================
PustakOne Demo Website
File: schools.css
Version: Generation 6
Purpose: Schools Ecosystem
==================================================
*/


/* ========================================= */
/* SECTION: SCHOOLS HERO */
/* ========================================= */

.schools-hero{

    padding:80px 0;
}

.schools-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.schools-hero-content h1{

    font-size:3.5rem;

    line-height:1.1;

    margin-bottom:20px;

    color:var(--color-dark);
}

.schools-hero-content p{

    font-size:1.1rem;

    margin-bottom:30px;
}

.schools-hero-image img{

    width:100%;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);
}


/* ========================================= */
/* SECTION: SCHOOL SEARCH */
/* ========================================= */

.school-search-page{

    padding-bottom:40px;
}


/* ========================================= */
/* SECTION: BOARD FILTERS */
/* ========================================= */

.board-filters{

    padding-bottom:60px;
}

.filter-chips{

    display:flex;

    gap:15px;

    justify-content:center;

    flex-wrap:wrap;
}

.filter-chips button{

    border:none;

    background:#fff;

    padding:12px 24px;

    border-radius:40px;

    box-shadow:var(--shadow-sm);

    cursor:pointer;

    transition:var(--transition);
}

.filter-chips button:hover{

    background:var(--color-primary);

    color:#fff;
}


/* ========================================= */
/* SECTION: SCHOOL DIRECTORY */
/* ========================================= */

.school-directory-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-top:50px;
}

.school-directory-card{

    background:#fff;

    border-radius:var(--radius-md);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    cursor:pointer;
}

.school-directory-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);
}

.school-directory-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;
}

.card-content{

    padding:25px;
}

.card-content h3{

    margin-bottom:10px;
}

.card-content p{

    margin-bottom:10px;
}

.card-content span{

    color:var(--color-primary);

    font-weight:700;
}


/* ========================================= */
/* SECTION: CITY GRID */
/* ========================================= */

.city-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(150px,1fr));

    gap:15px;

    margin-top:40px;
}

.city-grid a{

    background:#fff;

    text-align:center;

    padding:15px;

    border-radius:10px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.city-grid a:hover{

    transform:translateY(-3px);
}


/* ========================================= */
/* SECTION: CTA */
/* ========================================= */

.schools-cta{

    padding:100px 0;

    text-align:center;
}

.schools-cta h2{

    margin-bottom:20px;
}

.schools-cta p{

    margin-bottom:30px;
}


/* ========================================= */
/* SCHOOL DETAIL PAGE */
/* ========================================= */

.school-banner{

    padding:80px 0;
}

.school-banner-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.school-banner img{

    width:100%;

    border-radius:var(--radius-lg);
}

.school-meta{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:20px;
}

.school-meta span{

    background:#fff;

    padding:10px 16px;

    border-radius:30px;

    box-shadow:var(--shadow-sm);
}

.class-selector{

    margin-top:40px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(120px,1fr));

    gap:12px;
}

.class-selector button{

    border:none;

    background:#fff;

    padding:15px;

    border-radius:10px;

    box-shadow:var(--shadow-sm);

    cursor:pointer;
}

.book-list-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

    margin-top:40px;
}

.book-card{

    background:#fff;

    border-radius:var(--radius-md);

    overflow:hidden;

    box-shadow:var(--shadow-sm);
}

.book-card img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;
}

.book-card-content{

    padding:20px;
}

.book-card-content h3{

    margin-bottom:10px;
}

.book-card-content strong{

    color:var(--color-primary);
}

.bookset-highlight{

    margin-top:60px;

    background:#fff;

    padding:40px;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    text-align:center;
}


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

@media(max-width:991px){

    .schools-hero-grid,
    .school-banner-grid{

        grid-template-columns:1fr;
    }
}