/* ==========================================
   RESPONSIVE.CSS
========================================== */


/* ==========================================
   Large Laptop
   ≤1200px
========================================== */

@media (max-width:1200px){

    .hero h2{
        font-size:2.6rem;
    }

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

}


/* ==========================================
   Tablet Landscape
   ≤992px
========================================== */

@media (max-width:992px){

    main{
        gap:4rem;
    }

    .hero{
        min-height:50vh;
        padding:3rem 1rem;
    }

    .hero h2{
        font-size:2.3rem;
    }

    .hero p{
        font-size:1rem;
    }

    .filter-section,
    .sort-section{

        display:grid;

        grid-template-columns:repeat(2, 1fr);

        gap:12px;

        width:100%;

        padding:0 16px;
    }

    .filter-section select,
    .sort-section select{

        width:100%;

        max-width:none;
    }

    .stat-card{
        width:auto;
        max-width:none;
    }

}


/* ==========================================
   Tablet Portrait
   ≤768px
========================================== */

@media (max-width:768px){

    .container{
        width:94%;
    }

    main{
        gap:3rem;
    }

    .hero{
        min-height:45vh;
    }

    .hero h2{
        font-size:2rem;
    }

    .hero p{
        font-size:.95rem;
    }

    .search-section{
        padding:0 1rem;
    }

    .search-section input{
        width:100%;
    }

    .filter-section,
    .sort-section{

        flex-direction:column;

        align-items:center;

        gap:1rem;
    }

    .filter-section select,
    .sort-section select{

        width:100%;

        max-width:350px;
    }

    .politician-grid{

        grid-template-columns:1fr;

        gap:2rem;
    }

    .card-image{

        height:260px;
    }

    .card-body{

        padding:1.2rem;
    }

    .card-name{

        font-size:1.35rem;
    }

    .stats-section{

        padding:0 1rem;
    }

    #backToTop{

        width:45px;
        height:45px;
        right:20px;
        bottom:20px;
    }

}


/* ==========================================
   Mobile
   ≤576px
========================================== */

@media (max-width:576px){

    body{
        font-size:15px;
    }

    .hero{

        min-height:40vh;

        padding:2.5rem 1rem;
    }

    .hero h2{

        font-size:1.7rem;

        line-height:1.3;
    }

    .hero p{

        font-size:.9rem;
    }

    .logo h1{

        display:none;
    }

    .politician-grid{

        gap:1.5rem;
    }

    .card-image{

        height:220px;
    }

    .card-body{

        padding:1rem;
    }

    .card-name{

        font-size:1.2rem;
    }

    .party-badge{

        font-size:.75rem;

        padding:.4rem .8rem;
    }

    .education-box{

        padding:.8rem;
    }

    .info-row{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:12px;
    }

    .info-title{

        white-space:nowrap;
    }

    .info-value{

        text-align:right;

        white-space:nowrap;
    }

    .stat-card{

        padding:1.5rem;
    }

    .stat-card h3{

        font-size:2rem;
    }

    footer{

        padding:1.5rem 1rem;

        font-size:.9rem;
    }

}


/* ==========================================
   Very Small Devices
   ≤360px
========================================== */

@media (max-width:360px){

    .hero h2{

        font-size:1.5rem;
    }

    .card-image{

        height:200px;
    }

    .card-name{

        font-size:1.1rem;
    }

    .search-section input{

        padding:.85rem;
    }

    .filter-section select,
    .sort-section select{

        font-size:.9rem;
    }

}