/* UTK Alumni Notes pattern styles */
/* Note that styles generally inherit from the UTK Alumni theme, including css vars */

:root {
    --utkcn-column-gap: 20px;
    --utkcn-row-gap: 40px;
    --utkcn-border-color: #c4c4c4;
}

/**
 * PATTERN
 * =============================================================================
 */

.utkcn-pattern-locked,
.utkcn-pattern-locked > .wp-block-group__inner-container {
    all: unset;
    display: block;
    position: relative;
}

.utkcn-pattern-locked *,
.utkcn-pattern-locked ::before,
.utkcn-pattern-locked ::after {
    box-sizing: border-box;
}

.utkcn-pattern-locked .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.utkcn-class-notes-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--utkcn-row-gap);
    column-gap: var(--utkcn-column-gap);
}

#main .utkcn-class-notes-filters-column,
#main .utkcn-class-notes-list-column {
    flex: 0 0 100%;
}

@media (min-width: 576px) { /* or 481px */
    #main .utkcn-class-notes-filters-column,
    #main .utkcn-class-notes-list-column {
        flex: 0 0 calc( ( 100% - var(--utkcn-column-gap) ) * 1 / 2 );
    }
}

@media (min-width: 768px) {
    #main .utkcn-class-notes-filters-column {
        flex: 0 0 calc( ( 100% - var(--utkcn-column-gap) ) * 1 / 3 );
    }
    #main .utkcn-class-notes-list-column {
        flex: 0 0 calc( ( 100% - var(--utkcn-column-gap) ) * 2 / 3 );
    }
}

@media (min-width: 1280px) {
    #main .utkcn-class-notes-filters-column {
        flex: 0 0 calc( ( 100% - var(--utkcn-column-gap) ) * 1 / 4 );
    }
    #main .utkcn-class-notes-list-column {
        flex: 0 0 calc( ( 100% - var(--utkcn-column-gap) ) * 3 / 4 );
    }
}


/**
 *
 * FILTER / SEARCH BLOCK
 * =============================================================================
 */

.utkcn-notes-filter {
    background: #fff;
    padding: 29px 16px;
    position: sticky;
    top: 90px;
}

.utkcn-notes-filter h1 {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.778rem;
    text-transform: uppercase;
    color: var(--headline);
    margin-bottom: 34px;
}
.utkcn-notes-filter h1::after {
    content: '';
    display: block;
    width: 101px;
    max-width: 100%;
    height: 8px;
    background: var(--primary-accent);
    margin-top: 16px;
}

.utkcn-notes-filter__form .ts-wrapper {
    min-height: 62px;
    margin-bottom: 13px;
}

.utkcn-notes-filter__form :is(
    .ts-dropdown.single, 
    .ts-wrapper.single .ts-control
) {
    width: 100%;
    max-width: 100%;
    border: 2px solid var(--primary-accent);
    box-shadow: none;
    border-radius: 7px;
    background: #fff;
    padding: 0.5em;
    font-size: 1rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#utkcn-top .utkcn-notes-filter__field {
    background: #fff;
}

/* SELECT (TOM SELECT) OPTIONS AND DROPDOWN */

.ts-dropdown {
    z-index: 9999;
}
.ts-dropdown.single, .ts-wrapper.single .ts-control {
    border: 1px solid var(--utkcn-border-color);
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
}

.plugin-dropdown_input .dropdown-input {
    box-shadow: none;
}

.ts-dropdown-content {
    max-height: 300px;
}

.ts-dropdown [data-selectable].option {
    color: var(--text-link);
    font-size: 0.833rem;
    line-height: 1.4;
}
/* applied in the options list, for every selected option */
/*.ts-option-selected {*/
/*    font-weight: 900 !important;*/
/*}*/
.ts-dropdown [data-selectable].option.selected {
    font-weight: 900 !important;
}
/* selected item */

.utkcn-notes-filter__form .ts-control .item {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.889rem;
    color: var(--text-link)
}

/* floating labels */

.utkcn-notes-filter__field-wrap {
    position: relative;
}

.utkcn-notes-filter__label {
    position: absolute;
    top: 50%;
    left: 0.75em;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--text-link);
    pointer-events: none;
    transition: all 0.2s ease;
    background: white;
    padding: 0 0.25em;
    z-index: 2;
}

.utkcn-notes-filter__field-wrap.select--active .utkcn-notes-filter__label {
    top: 0;
    left: 0.55em;
    font-size: 10px;
}

@media screen and (max-width: 781px) {
    .ts-dropdown [data-selectable].option {
        font-size: 1rem;
        line-height: 1.7;
        padding-block: 10px;
    }
    .ts-dropdown-content {
        max-height: 400px;
    }
}

/* SEARCH INPUT */

.utkcn-notes-filter input.utkcn-notes-filter__search {
    margin-bottom: 13px;
    padding-right: 42px;
    width: 100%;
    border: 1px solid var(--utkcn-border-color);
    border-radius: 0 10px 10px 0;
    border-left: 10px solid var(--primary-accent);
    min-height: 60px;
    background-image: var(--utkcn-icon-url-search);
    background-position: calc( 100% - 13px ) 50%;
    background-repeat: no-repeat;
}
.utkcn-notes-filter__search::placeholder {
    font-size: 0.778rem;
    color: #4b4b4b;
}


/* BUTTONS */

.utkcn-notes-filter__button--reset {
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 0.889rem;
    color: #fff;
    background: var(--headline) !important;
    width: 100%;
    min-height: 60px;
}

.utkcn-notes-filter__button-icon--reset {
    width: 19px;
    transform: translate(2px, 6px);
}
/* .utkcn-notes-filter__button--reset {
    background: none !important;
    color: var(--headline) !important;
    border: none;
    width: auto;
    padding: 0;
    margin: 1rem 0;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 0.889rem;
} */


/**
 *
 * CARD GRID / LIST BLOCK
 * =============================================================================
 */

.utkcn-notes {
    position: relative;
}

.utkcn-notes-grid__inner,
.utkcn-notes-loading__grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--utkcn-row-gap);
    column-gap: var(--utkcn-column-gap);
    position: relative;
}

.utkcn-card,
.utkcn-notes-loading__card {
    flex: 0 0 100%;
    /* max-width: 100%; */
    background: #fff;
    padding: 16px;
    border-top: 8px solid var(--primary-accent);
    cursor: pointer;
}

@media (min-width: 600px) {
    .utkcn-card,
    .utkcn-notes-loading__card {
        flex: 0 0 calc( ( 100% - ( var(--utkcn-column-gap) * 1 ) ) * 1 / 2 );
        /* max-width: calc( ( 100% - ( var(--utkcn-column-gap) * 1 ) ) * 1 / 2 ); */
    }
}

@media (min-width: 1280px) {
    .utkcn-card,
    .utkcn-notes-loading__card {
        flex: 0 0 calc( ( 100% - ( var(--utkcn-column-gap) * 2 ) ) * 1 / 3 );
        /* max-width: calc( ( 100% - ( var(--utkcn-column-gap) * 2 ) ) * 1 / 3 ); */
    }
}

/* COMMON */

/* note type heading with icon */

.utkcn-note__type {
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: 0.778rem;
}

.utkcn-note__type-icon {
    /*height: 100%;*/
    /*object-fit: contain;*/
    width: auto;
    height: 20px;
    margin-right: 10px;
    object-fit: contain;
}

:is(.utkcn-notes, .utkcn-notes-detail) p:last-child {
    margin-bottom: 0 !important;
}

/* CARD STYLING */

/*.utkcn-card__type {*/
/*    background: #fff;*/
/*}*/
.utkcn-card__title {
    font-weight: 800;
    font-size: 1.111rem;
    line-height: 1.444;
    letter-spacing: 2%;
    margin-bottom: 0.5rem;
}
.utkcn-card__title a {
    color: var(--text);
    text-decoration: none;
}
.utkcn-card__media {
    margin-bottom: 0.85rem;
}
.utkcn-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    pointer-events: none;
    object-fit: cover;
    object-position: center;
}
.utkcn-card__college,
.utkcn-card__location {
    font-weight: 500;
    color: var(--text);
    font-size: 0.889rem;
    margin-bottom: 0.438rem;
}
/*.utkcn-card__icon {*/
/*}*/

@media (max-width: 600px) {
    .utkcn-notes-grid__inner {
        row-gap: 17px;
    }
    .utkcn-card {
        display: flex;
        flex-wrap: wrap;
        column-gap: 20px;
        padding-top: 13px;
    }
    .utkcn-card__body {
        padding-top: 17px;
    }
    .utkcn-card__media {
        flex: 0 1 max( 110px, 25% );
        margin-bottom: 0;
    }
    .utkcn-card__body {
        flex: 1 0 calc( 100% - max( 110px, 25% ) - 20px );
    }
    .utkcn-card__title {
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }
    .utkcn-card__college, .utkcn-card__location {
        margin-bottom: 0.35rem;
    }
    .utkcn-note__type {
        flex: 1 0 100%;
        margin-bottom: 13px;
        font-size: 0.9rem;
    }
}


/* FILTER TOOLBAR */

.utkcn-notes-toolbar__inner {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    margin-bottom: 19px;
}
.utkcn-notes-toolbar__icon {
    margin-right: 13px;
    transform: translateY(7px);
}

/* PILLS */

.utkcn-filter-pill {
    display: inline-flex;
    align-items: center;
    background: var(--text);
    border-radius: 30px;
    padding: 5px 10px 5px 19px;
    margin: 0.25rem;
}
.utkcn-filter-pill__label {
    color: #fff;
    display: inline-block;
    font-size: 0.778rem;
    line-height: 1.3;
}
.utkcn-filter-pill__remove {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    margin-left: 6px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    /* border-radius: 50%; */
}

.utkcn-filter-pill__remove:hover,
.utkcn-filter-pill__remove:focus {
    background: inherit;
    color: #eee;
}


/* LOADING INDICATORS */

.utkcn-notes-loading {
    position: absolute;
    pointer-events: none;
    /*justify-content: center;*/
    width: 100%;
    margin-top: 50px;
    z-index: 10;
    display: none;
    left: calc(50% - 35px);
}

/* ROTATING SPINNER */

.utkcn-notes-loading__spinner {
    width: 70px;
    height: 70px;
    border: 10px solid #e6e6e6;
    border-top-color: var(--headline);
    border-radius: 50%;
    animation: spin 0.4s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* CARD OVERLAY FOR LOADER */

.utkcn-notes-grid__inner {
    overflow-x: hidden;
}
body.utkcn-loading-filtered .utkcn-notes-grid__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    z-index: 2;
    animation: loader-shimmer 1s cubic-bezier(0.4, 0, 0.6, 1.2) infinite;
    display: none;
}
body.utkcn-loading-filtered .utkcn-notes-grid__inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

body.utkcn-loading-page .utkcn-notes-loading,
body.utkcn-loading-filtered .utkcn-notes-grid__inner::before {
    display: flex;
}

/* skeleton loader styling animation */

.utkcn-notes-loading__grid {
    display: none;
}
/*
.utkcn-notes-loading__grid {
    margin-top: var(--utkcn-row-gap);
}
.utkcn-notes-loading__card {
    position: relative;
    overflow: hidden;
    min-height: 350px;
    border-top: 0 none;
}
.utkcn-notes-loading__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent 20%,#fff 50%, transparent 70%);
    animation: loader-shimmer 1s cubic-bezier(0.4, 0, 0.6, 1.2) infinite;
}
.utkcn-notes-loading__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 100%;
    background: #e5e5e5;
}
*/


/* announcements: No more results, no results */

.utkcn-notes-empty {
    padding: 50px;
    flex: 1 0 100%;
    max-width: calc( 100% - var(--utkcn-column-gap) * 2 );
    border-top: 1px solid var(--utkcn-border-color);
    margin: 0 auto;
}
.utkcn-notes-empty :is(h2, h3, h4, h5) {
    font-size: 1.5rem;
    text-align: center;
}

@keyframes loader-shimmer {
  0% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(200%);
  }
}



/**
 *
 * DRAWER FURNITURE & CONTROLS
 * =============================================================================
 */

.utkcn-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    /* browser hint */
    will-change: visibility;
    z-index: 0;
}

.utkcn-drawer__close {
    background: none !important;
    padding: 0 0 2px;
    margin-bottom: 45px;
    color: var(--text-link) !important;
    border: 0 none;
    border-bottom: 3px solid var(--text-link);
    font-size: 1.111rem;
    font-weight: 700;
    line-height: 1;
}

.utkcn-drawer__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background-color 300ms ease;
    will-change: background-color;
    -webkit-backdrop-filter: blur(0px);
}

.utkcn-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(1052px, calc(100vw - 100px));
    max-width: 100%;
    height: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    padding: 64px 210px 64px 108px;
    /* trigger hardware acceleration */
    will-change: transform;
    /* prevent flicker */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* DRAWER VISIBILITY */

body.utkcn-drawer--visible .utkcn-drawer {
    visibility: visible;
}
body.utkcn-drawer--visible .utkcn-drawer .utkcn-drawer__overlay {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
body.utkcn-drawer--visible .utkcn-drawer .utkcn-drawer__panel {
    transform: translateX(0);
}
/* smooth closing animation */
body:not(.utkcn-drawer--visible) .utkcn-drawer {
    transition: visibility 0s 500ms;
}

@media screen and (max-width: 960px) {
    .utkcn-drawer__panel {
        /* width: calc(100vw - 40px); */
        padding-left: 40px;
        padding-right: 80px;
    }
    .utkcn-drawer__content {
        padding: 24px;
    }
}

@media screen and (max-width: 768px) {
    .utkcn-drawer__panel {
        width: calc(100vw - 40px);
        padding: 60px 20px;
    }
    .utkcn-drawer__content {
        padding: 24px;
    }
}

/**
 *
 * DRAWER CONTENT
 * =============================================================================
 */

.utkcn-note-detail .wp-post-image {
    width: 294px;
    height: 300px;
    object-fit: cover;
    position: relative;
    box-shadow: 12px 12px 0 0 var(--primary-accent);
}
.utkcn-note-detail__head {
    display: flex;
    margin-bottom: 50px;
}
.utkcn-note-detail__head .utkcn-col-group {
    flex: 1;
}
.utkcn-note-detail__head .utkcn-row-group {
    background-color: var(--headline);
    box-shadow: 210px 0 0 0 var(--headline);
    padding: 27px 0 33px 55px;
}

:is(
    body.utkcn-class-note-single,
    .utkcn-drawer__panel
) .utkcn-note__type {
    margin-left: 55px;
}

/*.utkcn-note-detail__type {*/
/*    font-size: 1rem;*/
/*    padding-left: 55px;*/
/*    margin: 0 0 20px;*/
/*    !* min-height: 58px; *!*/
/*}*/
/*.utkcn-note-detail__icon {*/
/*    width: auto;*/
/*    height: 36px;*/
/*    object-fit: contain;*/
/*    margin-right: 18px;*/
/*}*/
.utkcn-note-detail__title {
    font-weight: 900;
    font-size: 1.889rem;
    line-height: 1.188;
    color: #fff;
    position: relative;
}

.utkcn-note-detail__title-link {
    text-decoration: none;
}
.utkcn-note-detail__anchor {
    background: var(--utkcn-icon-url-link) no-repeat center center;
    background-size: contain;
    width: 26px;
    height: 26px;
    bottom: 0;
    opacity: 0;
    position: absolute;
    display: inline-block;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
body:not(.utkcn-class-note-single) .utkcn-note-detail__head .utkcn-row-group:hover .utkcn-note-detail__anchor {
    opacity: 1;
    transform: translateX(10px);
    pointer-events: auto;
}




.utkcn-note-detail__college,
.utkcn-note-detail__location {
    font-weight: 500;
    color: var(--text);
    font-size: 1.111rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    color: #fff;
}
.utkcn-note-detail__update {
    font-size: 1.111rem;
    line-height: 1.5;
    margin-bottom: 47px;
}
.utkcn-note__secondary-image {
    min-height: 300px;
    width: auto;
    object-fit: cover;
    display: block;
    margin-bottom: 47px;
}
.utkcn-note__date-added {
    font-style: italic;
    font-size: 0.813rem;
    display: inline-block;
    margin-left: 8px;
}

/* DRAWER IMAGES SLIDER/CAROUSEL (SPLIDE) */

.utkcn-note-detail__images-secondary {
    margin: 1rem 0 3rem;
}
.utkcn-note-detail__images-secondary .splide {
    background: #eee;
}

@media (max-width: 960px) {
    .utkcn-note-detail__head {
        flex-direction: column;
    }
    .utkcn-note-detail__head .wp-post-image {
        margin-bottom: 38px;
    }
    .utkcn-note-detail__head .utkcn-row-group {
        padding-left: 43px;
    }
    :is(
        body.utkcn-class-note-single,
        .utkcn-drawer__panel
    ) .utkcn-note__type {
        margin: 0 0 25px 43px;
    }
    /*.utkcn-note-detail__type {*/
    /*    padding-left: 43px;*/
    /*    margin-bottom: 24px;*/
    /*}*/
}

@media (max-width: 781px) {
    .utkcn-class-notes-container {
        row-gap: 0;
    }
    .utkcn-notes-filter {
        position: relative;
        top: initial;
        background: none;
        padding-inline: 0;
    }
    .utkcn-notes-filter h1 {
        border-bottom: 0 none;
        font-size: 0.875rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 60px;
        border: 1px solid var(--utkcn-border-color);
        margin-bottom: 17px;
        background: #fff;
        cursor: pointer;
    }
    .utkcn-notes-filter h1::after {
        content: "";
        width: 37px;
        height: 36px;
        display: block;
        background: var(--utkcn-icon-url-filter) no-repeat center center;
        background-size: contain;
        margin-left: 15px;
        transform: translateY(-8px);
    }
    /* required for proper mobile filter interactivity */
    .utkcn-notes-filter__form-wrapper {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .utkcn-drawer__panel {
        width: 100%;
    }
    .utkcn-drawer__content {
        padding-right: 17px;
        padding-left: 5px;
    }
    .utkcn-note-detail__head .utkcn-row-group {
        padding-left: 25px;
    }
    :is(
        body.utkcn-class-note-single,
        .utkcn-drawer__panel
    ) .utkcn-note__type {
        margin-left: 25px;
    }
}





/**
 *
 * Sticky header visibility
 * =============================================================================
 */

.utkcn-sticky-header--retract {
    transform: translateZ(0) translateY(-100%) !important;
}


.utkcn-html-scroll-lock {
    overflow: hidden !important;
}