/*==========================================================
    FILE: opencalls.css

    Athens B5G/6G Platform
==========================================================*/


/*==========================================================
    VARIABLES
==========================================================*/

:root{

    --primary:#004b87;

    --primary-light:#0066b3;

    --background:#f5f7fa;

    --surface:#ffffff;

    --text:#333333;

    --border:#d8dce2;

    --shadow:0 8px 22px rgba(0,0,0,.08);

    --radius:18px;

}


/*==========================================================
    GENERAL
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body{

    font-family:

        "Segoe UI",
        Arial,
        sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.6;

}


main{

    width:min(1500px,92%);

    margin:0 auto;

    padding-bottom:80px;

}


/*==========================================================
    HERO
==========================================================*/

.hero-section{

    padding:

        90px
        0
        50px;

    text-align:center;

}


.hero-content h1{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:18px;

}


.hero-content p{

    max-width:900px;

    margin:0 auto;

    font-size:1.15rem;

    color:#555;

}


/*==========================================================
    INTRO
==========================================================*/

.intro-section{

    text-align:center;

    margin-bottom:70px;

}


.intro-section p{

    max-width:900px;

    margin:auto;

    font-size:1.05rem;

}


/*==========================================================
    YEAR SECTION
==========================================================*/

.calls-year{

    background:var(--surface);

    border-radius:var(--radius);

    padding:45px;

    margin-bottom:70px;

    box-shadow:var(--shadow);

    border-left:6px solid var(--primary);
    border-top:1px solid var(--border);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);

}


/*==========================================================
    YEAR HEADER
==========================================================*/

.year-header{

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:40px;

}


.year-line{

    flex:1;

    height:2px;

    background:var(--primary);

}


.year-header h2{

    font-size:2rem;

    color:var(--primary);

    letter-spacing:.05em;

}


/*==========================================================
    PARTNER HEADERS
==========================================================*/

.partner-headings{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    margin-bottom:35px;

}


.partner-heading{

    text-align:center;

    font-size:1.4rem;

    font-weight:700;

    color:var(--primary);

    padding-bottom:10px;

    border-bottom:3px solid var(--primary);

}


/*==========================================================
    TWO COLUMNS
==========================================================*/

.calls-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

}


.calls-column{

    display:grid;

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

    gap:30px;

    align-content:start;

}


/*==========================================================
    CARD
==========================================================*/

.call-card{

    background:white;

    border-radius:16px;

    overflow:hidden;

    text-decoration:none;

    color:inherit;

    box-shadow:var(--shadow);

    border:1px solid #e2e5ea;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease;

}


.call-card:hover{

    transform:translateY(-6px);

    box-shadow:

        0 14px 30px rgba(0,0,0,.14);

    border-color:var(--primary);

}


.call-card img{

    width:100%;

    height:170px;

    object-fit:contain;

    background:white;

    padding:20px;

}


.call-name{

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:72px;

    padding:

        15px
        18px;

    background:

        linear-gradient(

            to bottom,

            #ffffff,

            #eceff3

        );

    font-weight:600;

    font-size:1rem;

}


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

@media (max-width:1100px){

    .calls-column{

        grid-template-columns:1fr;

    }

}


@media (max-width:900px){

    .calls-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .partner-headings{

        grid-template-columns:1fr;

        gap:45px;

    }

}


@media (max-width:600px){

    .hero-content h1{

        font-size:2.3rem;

    }

    .calls-year{

        padding:30px 20px;

    }

    .year-header{

        gap:15px;

    }

    .year-header h2{

        font-size:1.6rem;

    }

    .partner-heading{

        font-size:1.2rem;

    }

    .call-card img{

        height:140px;

    }

}