/* LAST UPDATED 06.20.2024 - SM */

/* NOTE:
** There are at least 3 ways carousels are built on the EVMS website:
*** 1. Flickity & Silc Grid (landing pages, in the process of converting all to Bootstrap as of mid-March 2024)
*** 2. Silc Grid only
*** 3. Bootstrap (typical pages/using a content type)
*/

/* It appears that Bootstrap is doing most of the heavy lifting for carousels. */

/* Added 05.29.2024 to attempt to fix bottom spacing issues with carousels */
.container.provider-carousel {
  margin: 0 auto;
  padding: 0;
}

.provider-carousel .carousel-item {
    padding: 0;
}


.profile-highlight__image {
    background-size: cover;
    background-position: 50%;
}

.profile-highlight__name {
    color: var(--primary-accent);
    font-family: var(--heading-font-family);
    font-size: 1.75em;
    font-weight: 400; /* Formerly 600 */
    margin-bottom: 0.5em;
}

/* For the carousels on /education - mostly built with flickity and silc-grid */
.profile-highlight-slider-binder,
.profile-highlight-slider {
    position: relative;
}

.profile-highlight-slider::after,
.profile-highlight-slider::before {
    border-bottom: 1px solid var(--primary-neutral-gray);
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 0.2em;
}

.profile-highlight-slider::after {
    right: -0.1em;
}

.profile-highlight-slider::before {
    left: -0.1em;
}

.profile-highlight-slider .flickity-viewport {
    overflow: hidden;
}

.profile-highlight-slider .profile-highlight {
    margin: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: 100%;
}

.profile-highlight-slider .profile-highlight.is-selected {
    display: block;
}

.profile-highlight {
    color: var(--primary-neutral-gray);
    font-size: 1em;
    font-weight: 500;
    line-height: 1.4;
}

.profile-highlight__content p {
    line-height: 1.75;
}

.profile-highlight__content a {
    font-weight: 400;
    text-decoration: none;
}


/* Carousel controls - custom styling on top of the Bootstrap standard styling */
/* .carousel-control-next and .carousel-control-prev are Bootstrap classes, so everything below are customizations */

.provider-carousel .carousel-control-next,
.provider-carousel .carousel-control-prev
 {
    background-color: var(--primary-neutral-light);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    box-shadow: none;
    height: 2.5em;
    opacity: 1;
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    transition: border .3s ease-in-out;
    width: 2.5em;
}

span.carousel-control-prev-icon {
    display: block;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-image: none;
    height: 30%;
    left: 56%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
        -webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    width: 30%;
}

/* The following creates the angles for the "icons" - it's not using Font Awesome or HTML entities to create the angles/chevrons pointing left or right */
.carousel-control-next-icon::after,
.carousel-control-prev-icon::after {
    height: 2px;
    width: 100%;
}

.carousel-control-next-icon::before,
.carousel-control-prev-icon::before {
    height: 100%;
    width: 2px;
}

.carousel-control-next-icon::after,
.carousel-control-next-icon::before,
.carousel-control-prev-icon::after,
.carousel-control-prev-icon::before {
    background-color: var(--secondary-light);
    border-radius: 2px;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    transition: background .3s ease-in-out;
        -webkit-transition: background .3s ease-in-out;
}

/* Carousel controls - for the carousel on /education */
.profile-highlight-slider-binder .prev-next,
.prev-next {
    border-color: var(--primary-color);
    box-shadow: none;
    height: 2em;
    width: 2em;
}


.profile-highlight-slider-binder .prev-next .hat {
    left: 56%;
}

/* Check to see where else this is used. This seems kind of generic for previous & next buttons */
.prev-next {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    box-shadow: none;
        -webkit-box-shadow: none;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
}

/* .hat appears on carousels and on the maps pagination */
.prev-next .hat {
    height: 30%;
    left: 56%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);   
}

.prev-next .hat::after,
.prev-next .hat::before {
    background-color: var(--primary-color);
    border-radius: 0.1em;
    content: "";
    height: 0.1em;
    left: 0;
    position: absolute;
    top: 0;
    transition: background 0.3s ease-in-out;
    width: 100%;
}

.prev-next--next {
    left: auto;
    /* transform: translateY(-50%) rotate(180deg);
        -webkit-transform: translateY(-50%) rotate(180deg); */
    right: 2%;
}

.prev-next--previous {
    left: -2%;
}
      
/* 07.08.22 - Specificity for Bootstrap carousels */
.carousel-outside-controls .bi.bi-chevron-right {
  margin-right: 0%;
  margin-top: 20%;
}
      
.carousel-outside-controls .bi.bi-chevron-left {
  margin-left: 0%;
  margin-top: 20%;
}
      
/* More prev/next icons after the .hat ones failed - 03.11.2024 */
.icon--next, 
.icon--prev {   
  color: var(--primary-color); 
  font-size: 1.5em;
  position: absolute;
  top: 1px; /* Formerly 10%, may also look different in preview mode vs. live */
}
      
.icon--next {
  left: 14px;
}
      
.icon--prev {
  left: 12px; 
}







/***** MEDIA QUERIES *****/
@media screen and (min-width: 360px) {
      /* For the "HP Sliders" */
    .carousel-control-prev,
    .carousel-control-next {
        background-color: var(--primary-neutral-light);
        border-radius: 50%;
        height: 43px;
        width: 43px;
        position: absolute;
        top: 45%;
    }
}

@media screen and (min-width: 360px) and (max-width: 668px) {
  .provider-carousel .carousel-control-prev {
    left: -10% !important;
  }
  
  .provider-carousel .carousel-control-next {
	right: -10% !important;
  }
}



@media screen and (min-width: 576px) {
    .carousel-outside-controls .carousel-control-prev {
        left: 0;
    }
}
      
@media screen and (max-width: 768px) {
    #hp-slider .icon--next, 
    #hp-slider .icon--prev {
      top: 20%;
    }
}


@media screen and (min-width: 768px) {
    .provider-carousel .carousel-item {
        padding: 0 75px;
    }

    .faculty-float-adj {
        display: block;
        margin: 0 0 0 auto;
        max-width: 430px; /* Added 05.29.2024 */
    }
}

@media screen and (min-width: 800px) {
    .profile-highlight-slider .profile-highlight {
        overflow: hidden;
        /* padding: 0 3.75em; */
    }

    .profile-highlight-slider-binder .prev-next {
        top: 50%;
    }
}

/* Found in carousel on /patient_care */
@media screen and (max-width: 991px) {
    /* Found in carousel on /patient_care */
    .profile-highlight__image {
        background-position: 50%;
        background-size: cover;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%; /* Added 06.21.2022 */
    }
  
  .profile-highlight-slider-binder .prev-next, .prev-next {
    top: 100%;
  }
  
  .prev-next--next {
    right: 0;
  }
  
  
    .provider-carousel .carousel-control-prev,
    .provider-carousel .carousel-control-next {
        top: 33%;
    }
  
  	.provider-carousel .carousel-control-prev {
      left: 0;
    }
  
  	.provider-carousel .carousel-control-next {
       right: 0;
    }
}


/* ADDED 06.21.2022 */
@media screen and (max-width: 1080px) {
  .profile-highlight__image {
    width: 95%;
  }
}