/* --------------- SIDE WIDGET COLUMN LAYOUT --------------- */
.front-page .region.region-hero .block#block-views-block-events-block-2 {
    width: 100%;
    /* max-height: 100vh; */
    background-color: transparent;
    display: none;
}


/* widget title */
.front-page .region.region-hero .block#block-views-block-events-block-2 h2 {
    color: #FFF;
    margin: 0;
    padding: 1rem;
    font-size: 1.5rem;
    line-height: 1em;
}

/* widget scrolling column of events */
.front-page .region.region-hero .block#block-views-block-events-block-2 {
    display: block;
    /* max-height: calc(100vh - 5.5rem); */
}

.view-events.view-display-id-block_2 .view-content {
    overflow-y: scroll;
    scrollbar-width: none;
    /* max-height: calc(100vh - 12.5rem); */
    display: block;
    height: 100%;
}
.view-events.view-display-id-block_2 .view-content::-webkit-scrollbar { width: 0; }


/* widget button link to full page of events */
.view-events.view-display-id-block_2 .view-footer {
    height: 7rem;
    max-height: 7rem;
}
.view-events.view-display-id-block_2 .view-footer p {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.view-events.view-display-id-block_2 .view-footer a {
    display: block;
    font-size: 16px;
    padding: .75rem 2rem;
    margin: auto;
    width: fit-content;
    border: 1px #FFF solid;
    border-radius: 5.5rem;
    color: #FFF;
    text-transform: uppercase;
    transition: all 300ms ease;
}
.view-events.view-display-id-block_2 .view-footer a:hover {
    background-color: #FFF;
    color: var(--text_color);
    text-decoration: none;
    transition: all 300ms ease;
}


/* --------------- SINGLE EVENT TILE IN HERO WIDGET --------------- */
.view-events.view-display-id-block_2 .view-content .views-row a {
    display: grid;
    gap: 0 .5rem;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: 1fr 2fr 5fr 1fr 1.5fr;
    grid-template-areas:
        'one one empty'
        'twostart twoend empty'
        'four four four'
        'five five empty2'
        'three three three';
    height: 100%;
    padding: 1rem;
    margin: 0 1rem;
    border-bottom: 1px solid #626262;
    /* background-position: calc(100% - 1rem) calc(100% - 1rem); */
    background-position: right bottom;
    background-repeat: no-repeat;
    /* background-size: auto 50%; */
    background-size: 200px 50%;
}

.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-event-type {
    grid-area: one;
    margin-top: .25rem;
    margin-bottom: .5rem;
}
.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-start-date {
    grid-area: twostart;
    position: relative;
    margin-right: .5rem;
}
.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-end-date {
    grid-area: twoend;
}
.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-ref-sections {
    grid-area: three;
    margin-top: .5rem;
}
.view-events.view-display-id-block_2 .view-content .views-row .views-field-title {
    grid-area: four;
    margin: .5rem 0 1rem 0;
}
.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-ref-event-location {
    grid-area: five;
}

/* background image based on eventy type class */
.view-events.view-display-id-block_2 .view-content .views-row.seminars a { background-image: url(../../assets/filigrane/filigrana-seminar-w.svg); }
.view-events.view-display-id-block_2 .view-content .views-row.workshop a { background-image: url(../../assets/filigrane/filigrana-workshop-w.svg);}
.view-events.view-display-id-block_2 .view-content .views-row.school a { background-image: url(../../assets/filigrane/filigrana-school-w.svg); }
.view-events.view-display-id-block_2 .view-content .views-row.scientific-activity a { background-image: url(../../assets/filigrane/filigrana-scientific-activity-w.svg); }
.view-events.view-display-id-block_2 .view-content .views-row.conference a { background-image: url(../../assets/filigrane/filigrana-conference-w.svg);}
.view-events.view-display-id-block_2 .view-content .views-row.ceremonies a,
.view-events.view-display-id-block_2 .view-content .views-row.prizes a { background-image: url(../../assets/filigrane/filigrana-ceremony-w.svg);}
.view-events.view-display-id-block_2 .view-content .views-row.abdus-salam-distinguished-lectures a { background-image: url(../../assets/filigrane/filigrana-lectures-w.svg);}
.view-events.view-display-id-block_2 .view-content .views-row.colloquia a { background-image: url(../../assets/filigrane/filigrana-colloquia-w.svg); }
.view-events.view-display-id-block_2 .view-content .views-row.hosted a { background-image: url(../../assets/filigrane/filigrana-hosted-activity-w.svg); }

/* reset all styled elements from previous css */
.view-events.view-display-id-block_2 .view-content .views-row div {
    width: 100%;
    height: unset;
    max-height: unset;
    min-height: unset;
    min-width: unset;
    max-width: unset;
    margin: 0;
    display: block;
}
.view-events.view-display-id-block_2 .view-content .views-row *::after { display: none; }


/* small event tile style */
.view-events.view-display-id-block_2 a,
.view-events.view-display-id-block_2 a:hover,
.view-events.view-display-id-block_2 div {
    color: #FFF;
}

/* field type location */
.view-events.view-display-id-block_2 .views-field-field-event-type {
    font-size: 13px;
    text-transform: uppercase;
}

/* location field */
.view-events.view-display-id-block_2 .views-field-field-ref-event-location {
  font-size: 13px;
  padding-left: 2rem;
  position: relative;
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  background-position: left center;
}

.view-events.view-display-id-block_2 .views-row.physical .views-field-field-ref-event-location {
  background-image: url(../../assets/icons/icon_pin_w.svg);
  background-size: 1.5rem;
  padding: 6px 0px 6px 2rem;
}

.view-events.view-display-id-block_2 .views-row.online .views-field-field-ref-event-location {
  background-image: url(../../assets/icons/icon_online_w.svg);
  padding: 6px 0px 6px 2rem;
  background-size: 1rem;
}

.view-events.view-display-id-block_2 .views-row.hybrid .views-field-field-ref-event-location {
    background-image: url(../../assets/icons/icon_hybrid_w.svg);
    padding: 6px 0px 6px 2rem;
    background-size: 1rem;
}

/* event title */
.view-events.view-display-id-block_2 .views-field-title h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
    display: block;
    padding-right: 2rem;
    margin: 0;
}

/* event dates */
.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-end-date,
.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-start-date {
    width: fit-content;
    display: grid;
    gap: 0 5px;
    grid-template-areas:
        'one two'
        'one three'
        'one four';
    grid-template-rows: 1fr 1fr 1fr;
    max-height: 50px;
}

.view-events.view-display-id-block_2 .views-field-field-end-date div.day,
.view-events.view-display-id-block_2 .views-field-field-start-date div.day {
    font-size: 50px;
    grid-area: one;
    font-weight: 300;
    color: var(--medium_gray);
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
}
.view-events.view-display-id-block_2 .views-field-field-end-date div.month,
.view-events.view-display-id-block_2 .views-field-field-start-date div.month {
    grid-area: two;
    font-size: 13px;
    text-transform: uppercase;
    color: #FFF;
    margin: 0 0 auto auto;
}
.view-events.view-display-id-block_2 .views-field-field-end-date div.year,
.view-events.view-display-id-block_2 .views-field-field-start-date div.year {
    grid-area: three;
    font-size: 13px;
    color: #FFF;
    margin: 0 0 auto auto;
}

.view-events.view-display-id-block_2 .view-content .views-row .views-field-field-start-date::after {
  content: '';
  display: flex;
  position: absolute;
  top: 0;
  right: -.75rem;
  width: 2px;
  height: 34px;
  transform-origin: center center;
  transform: rotateZ(10deg);
  background-color: #FFF;
}


/* event sections */
.view-events.view-display-id-block_2 .views-row div.views-field-field-ref-sections {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.view-events.view-display-id-block_2 .views-row div.views-field-field-ref-sections.multiple-sections .section {
  font-size: 0;
  width: 0;
  margin-bottom: .5rem;
}

.view-events.view-display-id-block_2 .views-row div.views-field-field-ref-sections.multiple-sections .section:last-child {
    padding-left: 3rem;
}

.view-events.view-display-id-block_2 .views-field-field-ref-sections div.section {
    padding-left: 2.5rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 10px;
    line-height: 1.5em;
    text-transform: uppercase;
    color: var(--border_gray);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.view-events.view-display-id-block_2 .views-field-field-ref-sections .section.other {
  display: none;
}
.view-events.view-display-id-block_2 .views-field-field-ref-sections .section.hecap {
    background-image: url(../../assets/loghi/logo-hecap-col-typo.svg);
}
.view-events.view-display-id-block_2 .views-field-field-ref-sections .section.cmsp {
    background-image: url(../../assets/loghi/logo-cmsp-col-typo.svg);
}
.view-events.view-display-id-block_2 .views-field-field-ref-sections .section.math {
    background-image: url(../../assets/loghi/logo-math-col-typo.svg);
}
.view-events.view-display-id-block_2 .views-field-field-ref-sections .section.esp {
    background-image: url(../../assets/loghi/logo-esp-col-typo.svg);
}
.view-events.view-display-id-block_2 .views-field-field-ref-sections .section.sti {
    background-image: url(../../assets/loghi/logo-sti-col-typo.svg);
}
.view-events.view-display-id-block_2 .views-field-field-ref-sections .section.qls {
    background-image: url(../../assets/loghi/logo-qls-col-typo.svg);
}

@media (min-width: 1200px) {
    .view-events.view-display-id-block_2 {
        display: flex;
        flex-direction: column;
        height: 100%;
        /* justify-content: space-between; */
    }

    .front-page .region.region-hero .block#block-views-block-events-block-2 #block-views-block-events-block-2 {
        height: 100%;
    }

    .front-page .region.region-hero .block#block-views-block-events-block-2 { max-height: 100vh; }
    .front-page .region.region-hero .block#block-views-block-events-block-2 { max-height: calc(100vh - 5.5rem); }
    .view-events.view-display-id-block_2 .view-content { max-height: calc(100vh - 12.5rem); }

    .view-events.view-display-id-block_2 .view-content .views-row a {
        display: grid;
        gap: .25rem .5rem;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: unset;
        grid-template-areas:
            'one twostart twoend'
            'three three empty'
            'four four four'
            'five five five';
        padding: 1.5rem 1rem 3rem 1rem;
        height: fit-content; 
    }

    .view-events.view-display-id-block_2 .views-field-title h3 {
        font-size: 16px;
        font-weight: 400;
    }

    .view-events.view-display-id-block_2 .view-content .views-row .views-field-field-event-type { margin-bottom: 1.75rem; }
    .view-events.view-display-id-block_2 .view-content .views-row .views-field-field-ref-sections { margin-top: 0; }

    .front-page .region.region-hero .block#block-views-block-events-block-2 h2 { padding: 2rem; }
    .front-page .region.region-hero .block#block-views-block-events-block-2 { width: 400px; }
}

@media (min-width: 1500px) {
    .front-page .region.region-hero .block#block-views-block-events-block-2 { width: 450px; }
}