@import url('sanfran.css');
:root{
    --event-bezel-size: 2.5vmin;
}
.event {
    height: 100%;
}


div#events_container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    align-items: stretch;
}


div#events_container  a {
    display: table;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    border-radius: var(--event-bezel-size);
    width: 40%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 5vh;
    margin-right:1vw;
}

@media (max-width: 800px) {
    div#events_container  a {
        width: 100% !important;
    }
    /*.event_subtitle_text{
        display: none;
    }*/
}

@media (max-width: 1000px) {
    div#events_container  a {
        width: 47%;
    }
}


div#events_container  a:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

div.event_image_container {
    width: 100%;
    height: 80%;
    aspect-ratio: 30/17;
    max-height: 40vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: var(--event-bezel-size);
    overflow: hidden;
    align-content: center;
    flex-wrap: wrap;
    /*container-type: size;*/
    position: relative;
}

div.event_image_container img.event_main_img {
    object-fit: scale-down;
    width:100%;
    height:100%;
    /*aspect-ratio: 16/9;*/
}

div.event_text{
    margin-left:3vmin;
    margin-right:3vmin;
    margin-bottom:1vmin;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
}

span.event_subtitle_text *{
    margin: 0 !important;
    font-size: inherit !important;
}



.events_more_info_arrow {
    position:absolute;
    inset:0;
    pointer-events:none;
}

/*

.event_processed_img {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    object-fit:scale-down;

    filter:
        grayscale(100%)
        blur(37px)
        contrast(999%)
        invert(100%);

    mask-image:url('/static/icons/circle_arrow.svg');
    -webkit-mask-image:url('/static/icons/circle_arrow.svg');

    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;

    mask-position:right 2% bottom 2%;
    -webkit-mask-position:right 2% bottom 2%;

    mask-size:min(10%,10vh);
    -webkit-mask-size:min(10%,10vh);
}*/



.event_processed_img {
    position: absolute;

    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%)
        blur(70px)
        contrast(999%)
        invert(100%);

    mask-image: url('/static/icons/circle_arrow.svg');
    -webkit-mask-image: url('/static/icons/circle_arrow.svg');

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mask-position: right 2% bottom 2%;
    -webkit-mask-position: right 2% bottom 2%;

    mask-size: min(10%, 10vh);
    -webkit-mask-size: min(10%, 10vh);
}

/*
img#event_processed_img_offset{
    top:0% !important;
    mask-position: right 2% bottom 2% !important;
    -webkit-mask-position: right 2% bottom 2% !important;
}
    */



@media (max-width: 800px) {
    .event_processed_img{
        filter:
        grayscale(100%)
        blur(10px)
        contrast(999%)
        invert(100%) !important;
    }

    img#event_processed_img_offset{
        top:0% !important;
        mask-position: right 2% bottom 2% !important;
        -webkit-mask-position: right 2% bottom 2% !important;
    }
}




.arrow_blur {
    position:absolute;
    right:2%;
    bottom:2%;
    width:10%;
    aspect-ratio:1;
}

.arrow_blur img{
    width:100%;
    aspect-ratio: 1;
        filter:
        grayscale(100%)
        contrast(999%)
        invert(1);

    border-radius:50%;
    mix-blend-mode: difference;
}



span.event_title_text {
    font-family: "San Francisco", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:var(--theme-dark);
    font-size: 100%;
    /*font-size: clamp(1rem, 3vmin, 7rem);*/
    font-size: 0.9rem;
    margin-bottom: 0.7vh;
}

span.event_subtitle_text, span.event_datetime{
    font-family: "San Francisco", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#444;
    font-size: 80%;
    /*font-size: clamp(1rem, 3vmin, 7rem);*/
}


b#upcoming_events, b#live_stream, .home_title{
    font-size: 6vmin;
    font-family: "San Francisco", Arial, Helvetica, sans-serif;
    text-align: center;
    align-content: center;
    display: block;
}


a.temp_event{
    /*width:100% !important;*/
}
.event_image_container{
    max-height: fit-content !important;
}

@media (max-width: 800px) {
    .temp_event {
        /*width: 100% !important;*/
    }
    .event_image_container{
        max-height: fit-content !important;
    }
}






div#event_popup_window_root_container_base {
    position:fixed;
    display: flex;
    top: 0;
    left: 0;
    height:100vh;
    width:100%;
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    align-items: center;
    justify-content: center;
    justify-items: center;
    font-family: "San Francisco", Arial, Helvetica, sans-serif;
    color:var(--theme-dark);
}



div.event_popup_window_shown{
    transform: translateY(0%);
    opacity: 100%;
}

div.event_popup_window_hidden {
    transform: translateY(100%) !important;
    opacity:0% !important;
    /*display: none !important;*/
}

div#event_popup_window_root_container_base div#event_popup_window_main{
    height:80%;
    width:80%;
    background-color: var(--theme-white);
    border-radius: min(40px, 2vmin);
    padding-top: 4vh;
    padding-left:2vw;
    padding-right:2vw;
    padding-bottom: 4vh;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

div#event_popup_window_root_container_base div#event_popup_window_content {
    overflow-y:auto;           /* scrollable */
    height:90%;
}

div#event_popup_window_main div#event_popup_window_close{
    display: flex;
    justify-content: right;
    align-items: center;
    height: 10%;
}

div#event_popup_window_main div#event_popup_window_close button#event_popup_closeBtn {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: right;
    border: none;
}

div#event_popup_window_main div#event_popup_window_close button#event_popup_closeBtn .event_x_close_line {
    position: absolute;
    color:var(--theme-dark);
    background: var(--theme-dark);
    top:50%;
    left:50%;
    transform-origin: center;
    width:100%;
    height: 8%;
    border-radius: 200px;
}

div#event_popup_window_main div#event_popup_window_close button#event_popup_closeBtn .event_x_close_line:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

div#event_popup_window_main div#event_popup_window_close button#event_popup_closeBtn .event_x_close_line:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hover */
div#event_popup_window_main div#event_popup_window_close button#event_popup_closeBtn:hover {
    transform: scale(1.3);
}

div#event_popup_window_main div#event_popup_window_close button#event_popup_closeBtn:hover .event_x_close_line:first-child {
    transform: translate(-50%, -50%) rotate(135deg);
}

div#event_popup_window_main div#event_popup_window_close button#event_popup_closeBtn:hover .event_x_close_line:last-child {
    transform: translate(-50%, -50%) rotate(45deg);
}


div#event_popup_window_main div#event_popup_window_img_container{
    width:50%;
    min-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#event_popup_window_main
div#event_popup_window_img_container 
img#event_popup_window_img{
    width:100%;
    border-radius: var(--event-bezel-size);
}



div#event_popup_window_content_top_group{
    display: flex;
    margin-bottom: 5vh;
}

div#event_popup_window_content_top_group 
div#event_popup_window_content_top_group_right{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-top: 7%;
    margin-bottom: 7%;
    margin-left: 5%;
    margin-right: 5%;
}

div#event_popup_window_content
div#event_popup_window_content_top_group 
div#event_popup_window_content_top_group_right
div#event_popup_window_title {
    font-size: 7vmin;
    font-weight: bolder;
}

div#event_popup_window_content
div#event_popup_window_description {
    font-size: max(2vmin, 13px);
}

div#event_popup_window_content_top_group_right
div#event_popup_window_sign_up_container{
    width:100%;
}

div#event_popup_window_content_top_group_right
div#event_popup_window_sign_up_container
a#event_popup_window_sign_up {
    display: block;
    border-radius: 200px;
    width:100%;
    font-weight: bolder;
    font-size: 3vmin;
    background-color: var(--theme-diffuse);
    margin-top:1vh;
    padding-top:1vh;
    padding-bottom:1vh;
    text-align: center;
}



div.event_main_content_image_attachment_container{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

div.event_main_content_image_attachment_container
img.event_main_content_image_attachment{
    width:60%;
}



/* Mobile support */
@media (max-width: 800px) {
    div#event_popup_window_root_container_base 
    div#event_popup_window_content
    div#event_popup_window_content_top_group
    {
        flex-direction: column;
    }

    div#event_popup_window_root_container_base 
    div#event_popup_window_content
    div#event_popup_window_content_top_group
    div#event_popup_window_img_container 
    {
        width: 100%;
        min-width:100%;
    }


    div#event_popup_window_content_top_group{
        margin-bottom: 2vh;
    }

    div#event_popup_window_root_container_base div#event_popup_window_main{
        width:90%;
    }

    div.event_main_content_image_attachment_container
    img.event_main_content_image_attachment{
        width:100%;
    }

}