/* Style the agenda */
#agenda {
    padding-top: 7rem;
    padding-bottom: 5rem;
    text-align: left;
}

#agenda h1 {
    font-size: 3rem;
    font-weight: 300;
    padding-bottom: 1rem;
}

#agenda h2 {
    font-size: 2rem;
    font-weight: 400;
    text-align: left;
}

#agenda > p {
    font-size: 1.2rem;
    padding-bottom: 5rem;
}





#agenda_didactic {
    padding-bottom: 10rem;
    text-align: center;
}





#agenda .nest_card {
    width: 100%;
    color: var(--clr_base_100);
}

#agenda .nest_display {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    
    position: relative;
    overflow: hidden;
    
    padding-inline: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;

    min-height: 35rem;
}

#agenda .nest_display > img {
    position: absolute;
    top: 0;
    left: -5rem;

    min-width: calc(100% + 10rem);
    min-height: 100%;
    aspect-ratio: 1/1;

    filter: opacity(0.1);
    transition: all 300ms;
}

#agenda .nest_card:hover .nest_display > img,
#agenda .nest_card:focus-within .nest_display > img {
    transform: scale(1.07);
}

#agenda .nest_display > div {z-index: 1;}

#agenda .nest_display > div.cont-flex-row {
    align-items: center;
    gap: 0.75rem;
}

#agenda .nest_card p.nest_header {
    font-size: 2rem;
    font-weight: 500;
    text-align: left;
}

#agenda .nest_card svg {
    width: 7.5rem;
    height: 7.5rem;
    fill: transparent;
    stroke: var(--clr_base_100);
    stroke-width: 0.2rem;
}





#agenda .nest_card .nest_cronos {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

#agenda .nest_card p.nest_day {
    font-size: 6.5rem;
    font-weight: 100;
}

#agenda .nest_card p.nest_to {
    font-size: 2rem;
    padding-inline: 0.75rem;
    padding-top: 2.5rem;
}

#agenda .nest_card p.nest_note {
    font-size: 1.5rem;
}

#agenda .nest_card div.nest_month {
    position: relative;
    width: 2rem;
    height: 5rem;

    margin-inline: 0.5rem;
    background: var(--clr_base_100);
}

#agenda .nest_card p.nest_month {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    font-size: 1.5rem;
    font-weight: 500;

    transform: rotate(-90deg);
    width: 5rem;
}





#agenda .nest_card .nest_layered {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    padding-inline: 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background-color: var(--clr_base_800_80);
    opacity: 0;
    transition: all 300ms;
}

#agenda .nest_card:hover .nest_layered,
#agenda .nest_card:focus-within .nest_layered {
    opacity: 1;
}

#agenda .nest_layered p,
#agenda .nest_layered a {
    transform: translateY(2rem);
    transition: all 300ms;
}

#agenda .nest_card:hover .nest_layered p,
#agenda .nest_card:hover .nest_layered a,
#agenda .nest_card:focus-within .nest_layered p,
#agenda .nest_card:focus-within .nest_layered a {
    transform: translateY(0rem);
}

#agenda .nest_layered > p:nth-child(1) {
    font-size: 1.75rem;
    font-weight: 500;
    padding-bottom: 1.75rem;
}

#agenda .nest_layered > a {
    font-size: 1.15rem;
    padding-bottom: 0.75rem;
    color: var(--clr_base_100);
}

#agenda .nest_layered > a:hover,
#agenda .nest_layered > a:focus-within {
    text-decoration: underline;
}





#agenda_events {
    margin-bottom: 5rem;
}

#agenda_events .nest_display {
    background-color: var(--clr_base_200);
    color: var(--clr_base_800);
    text-align: center;
}

#agenda_events .nest_card div.nest_month {
    background-color: var(--clr_base_800);
}

#agenda_events .nest_card p.nest_month {
    color: var(--clr_base_100);
}

#agenda_events .nest_card p.nest_description {
    font-size: 1.25rem;
    text-align: left;
    margin-top: 2rem;
}

#agenda_events .nest_display {
    min-height: 20rem;
}

#agenda_events .nest_card .nest_layered {
    background-color: var(--clr_base_700);
}

#agenda_events .nest_card .nest_layered p {
    font-size: 1.1rem;
    line-height: 150%;
    text-align: center;
    color: var(--clr_base_100);
}





/* @media (max-width: 576px) {
    #agenda h1 {font-size: 2rem;}
} */









/* The default styling is focused on 1080p displays */
/* 4k display */
@media (min-width: 1950px) {
    /* No adjustments required */
}

/* Windowed browser */
@media (max-width: 1400px) {
    /* Reduce the showcase card height while maintaining enough space for the layered text */
    #agenda .nest_display {min-height: 32rem;}

    /* Increase the events card height to account for the line breaks taking additional space */
    #agenda_events .nest_display {min-height: 25rem;}

    /* Small adjustment to the card headers for visual consistency between screen sizes */
    #agenda .nest_card p.nest_header {font-size: 1.8rem;}

    /* Reduce the cronos items to prevent undesired overflows of line breaks */
    #agenda .nest_card p.nest_day {font-size: 5rem;}
    #agenda .nest_card p.nest_to {padding-top: 2rem;}
}

/* Windowed browser */
@media (max-width: 1200px) {
    /* Switch from 3 columns to 2 to improve text line lengths */
    #agenda div.cont-grid-3 {grid-template-columns: repeat(2, 1fr);}

    /* Adjust the height of the card items for visual constency with the new layout */
    #agenda .nest_display {min-height: 30rem;}
    #agenda_events .nest_display {min-height: 19rem;}
    #agenda_didactic > div.nest_card:nth-child(1) .nest_display {min-height: 25rem;}

    /* Reduce the headers to improve visual balance */
    #agenda h1 {
        font-size: 2.5rem;
        font-weight: 400;
    }

    /* Remove the line breack of the school's address */
    #agenda_didactic .nest_layered br {display: none;}
    #agenda_didactic .nest_layered small {font-size: 1rem;}

    /* Normalize the texts back to 1 rem */
    #agenda > p {font-size: 1rem;}
    #agenda_didactic .nest_layered a {font-size: 1rem;}
    #agenda_events .nest_card p.nest_description {font-size: 1rem;}
    #agenda_events .nest_card .nest_layered p {font-size: 1rem;}

    /* Reduce the layout spacing between blocks to improve air and flow */
    #agenda > p {padding-bottom: 3rem;}
    #agenda_didactic {padding-bottom: 5rem;}
    #agenda_events {margin-bottom: 3rem;}
}

/* Horizontal tablet display */
@media (max-width: 992px) {
    /* Reduce card height to prevent items from overlaping each other on the 769px screen size */
    #agenda .nest_display {min-height: 28rem;}
    #agenda_events .nest_display {min-height: 19rem;}
    #agenda_didactic > div.nest_card:nth-child(1) .nest_display {min-height: 23rem;}

    /* Reduce the headers to improve visual balance */
    #agenda h1 {font-size: 2.25rem;}
    #agenda h2 {font-size: 1.75rem;}
    #agenda .nest_card p.nest_header {font-size: 1.5rem;}

    /* Scale down the svg icons to increase air within the cards */
    #agenda .nest_card svg {
        width: 5rem;
        height: 5rem;
    }

    /* Reduce the cronos items to prevent undesired overflows of line breaks */
    #agenda .nest_card p.nest_day {
        font-size: 3.5rem;
        font-weight: 300;
    }
    #agenda .nest_card p.nest_to {
        font-size: 1.75rem;
        padding-top: 1.5rem;
    }
    #agenda .nest_card p.nest_note {font-size: 1.35rem;}
    #agenda .nest_card div.nest_month {height: 4rem;}
    #agenda .nest_card p.nest_month {
        font-size: 1.35rem;
        width: 4rem;
    }
}

/* Vertical tablet / Horizontal mobile display */
@media (max-width: 768px) {
    /* Reduce card height to prevent items from overlaping each other on the 769px screen size */
    #agenda .nest_display {min-height: 25rem;}
    #agenda_events .nest_display {min-height: 19rem;}
    #agenda_didactic > div.nest_card:nth-child(1) .nest_display {min-height: 20rem;}

    /* Reduce the headers to improve visual balance */
    #agenda h1 {font-size: 2rem;}
    #agenda h2 {font-size: 1.5rem;}
    #agenda .nest_card p.nest_header {font-size: 1.35rem;}

    /* Scale down the svg icons to increase air within the cards */
    #agenda .nest_card svg {
        width: 4rem;
        height: 4rem;
        stroke-width: 0.3rem;
    }
    #agenda .nest_display > div.cont-flex-row {gap: 0.5rem;}

    /* Reduce the layered text to increase free space */
    #agenda .nest_card .nest_layered {padding-inline: 1rem;}
    #agenda .nest_layered p:nth-child(1) {
        font-size: 1.35rem;
        padding-bottom: 1.2rem;
    }
    #agenda_didactic .nest_layered a {font-size: 0.9rem;}
    #agenda_didactic .nest_layered small {font-size: 0.9rem;}
    #agenda_events .nest_card .nest_layered p {
        font-size: 1rem;
        text-align: left;
    }

    /* Reduce the cronos items to prevent an overflow that extends the cards beyond their intended width */
    #agenda .nest_card p.nest_day {
        font-size: 2.75rem;
        font-weight: 300;
    }
    #agenda .nest_card p.nest_to {
        font-size: 1.5rem;
        padding-inline: 0.5rem;
        padding-top: 1.25rem;
    }
    #agenda .nest_card p.nest_note {font-size: 1.15rem;}
    #agenda .nest_card div.nest_month {height: 3rem;}
    #agenda .nest_card p.nest_month {
        font-size: 1.15rem;
        width: 3rem;
    }

    /* Reduce the layout spacing between blocks to improve air and flow */
    #agenda_events {margin-bottom: 2rem;}
}

/* Vertical mobile display */
@media (max-width: 576px) {
    /* Switch from 2 columns to 1 */
    #agenda div.cont-grid-3 {grid-template-columns: repeat(1, 1fr);}
    #agenda_didactic > div.nest_card:nth-child(1) {grid-column: 1;}

    /* Adjust the height of the card items for visual constency with the new layout */
    #agenda .nest_display {min-height: 20rem;}
    #agenda_events .nest_display {min-height: 13rem;}
    #agenda_didactic > div.nest_card:nth-child(1) .nest_display {min-height: 20rem;}

    /* Adjust the spacing in the description of the event cards */
    #agenda_events .nest_card p.nest_description {margin-top: 0.75rem;}
}

/* Small mobile display */
@media (max-width: 400px) {
    /* Adjust the height of the card items to prevent possible overlaps or overflows */
    #agenda .nest_display {min-height: 23rem;}
    #agenda_events .nest_display {min-height: 15rem;}
    #agenda_didactic > div.nest_card:nth-child(1) .nest_display {min-height: 23rem;}
}