/***

  Feature Article Rotator 3 Styles


  @note: Image Dimensions
  The rotator will (in theory) scale to the width of the screen. The max width of the rotator is controlled by framework layout styles. The height of the rotator scales but it does have a max height. If you're looking for max image dimensions (which you should) then you should use the max width of the content area on desktop and the max height of the rotator on desktop.

  TLDR: maybe 1040 x 255. I take no responsibility for skewed images because you didnt read the explainer above.



  @note: Image Scaling for Mobile
  Images do not affect the rotator wrapper’s dimension because they are positioned absolutely. This is problematic because we need the images to determine the height of the rotator wrapper and the rotator wrapper needs a height to maintain proper page layout. We can't rely on the images to provide that height... or can we? We can set a fixed height on the wrapper that is equal to the image’s max height. This leaves gaps between the image and the bottom of the wrapper when the screen width shrinks. Enter top padding and aspect ratio. By adding a top padding as a percentage to the wrapper we can enforce an aspect ratio that scales the width and height of the wrapper with the screen width. Applying an aspect ratio to the wrapper that matches the aspect ratio of the image (based on preferred max width and height) allows both elements to scale in unison. Problem solved!

**/

/* Base control style. */
.FeatureArticleRotator {
  width: 100%; /* Exact width must be handled by ancestors. The width of the rotating control. */
  position: relative; /* Position relative so we can absolutely position elements inside of it. */
  overflow: hidden; /* No image or text should flow outside of the control. */
}

@media (max-width: 767.5px) {
  .FeatureArticleRotator {
    height: 295px; /* Needed for mobile because the height would be 0 without it. The absolutely positioned content contributes nothing to height. */
    background-color: #393939;
    border-top: 1px solid #ced2d6;
    border-bottom: 1px solid #ced2d6;
  }
}

@media (min-width: 768px) {
  .FeatureArticleRotator {
    padding-top: 24.519%;/* aspect ratio: 208 : 51; 51/208 = .24519 */
    max-height: 255px;/* we dont want the image blowing out the page. */
  }
}

/* Image list. */
.FeatureArticleRotator ul.ArticleImages {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  overflow: hidden; /* Hides any image overflow. This will help when the image scales for mobile */
}

@media (max-width: 767.5px) {
  .FeatureArticleRotator ul.ArticleImages {
    bottom: 45px;/* height of .ArticleButtons */
  }
}

@media (min-width: 768px) {
  .FeatureArticleRotator ul.ArticleImages {
    bottom: 0;
  }
}

/* Individual list items containing the image. */
/* - Each list item will need to have its z-index cycled to allow for the rotating and cross-fade effect. */
.FeatureArticleRotator ul.ArticleImages li {
  display: block; /* Removesthe list item bullets. */
  padding: 0; /* Remove default padding. */
  margin: 0; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can do the cross-fade effect. */
  top: 0; /* Item should remain at the top. */
  right: 0;
  bottom: 0;
  left: 0; /* Item should remain on the left. */
  background-color: #393939;/* Needed for rotator transition. Hides the other slides when they aren't needed. */
}

@media (min-width: 768px) {
  .FeatureArticleRotator ul.ArticleImages li {
    background-color: transparent;
  }
}

.FeatureArticleRotator ul.ArticleImages li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #000000;
  text-decoration: none;
}

@media (max-width: 767.5px) {
  .FeatureArticleRotator ul.ArticleImages li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 20px;
    box-sizing: border-box;
  }

  .FeatureArticleRotator ul.ArticleImages li a:after {
    content: "more details";
    align-self: center;
    display: inline-block;
    padding: 9px 33px 9px 12px;
    margin-top: 20px;
    background: #fff url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 12c0 1.11-.9 2-2 2s-2-.89-2-2V6.83l-8.59 8.59c-.39.38-.9.58-1.41.58-.51 0-1.02-.2-1.41-.59-.78-.78-.78-2.05 0-2.83L9.17 4H4c-1.11 0-2-.89-2-2s.9-2 2-2h12v12z' fill='%2300597b'/%3E%3C/svg%3E") no-repeat right 12px center/10px 10px;
    color: #00597b;
    font-size: 0.975em;/* 0.975em = 13/13.333 */
    text-align: center;
    border-radius: 5px;
  }
}

.FeatureArticleRotator ul.ArticleImages li a .RotatorTitle {
  display: none;
}

@media (max-width: 767.5px) {
  .FeatureArticleRotator ul.ArticleImages li a .RotatorTitle {
    /* 
      Hacks for text truncation.
      more details: https://css-tricks.com/almanac/properties/l/line-clamp/
      support: https://caniuse.com/css-line-clamp
    */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    /* end hacks */

    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    color: #ffffff;
    text-align: center;
  }
}

.FeatureArticleRotator ul.ArticleImages li a .Description {
  box-sizing: border-box;
  display: none;
}

.FeatureArticleRotator ul.ArticleImages li a .Description:empty {
  display: none;
}

@media (min-width: 768px) {
  .FeatureArticleRotator ul.ArticleImages li a .Description {
    display: block;
    max-height: calc(100% - 80px);/* 215px for hard cut off. 80px stops the bottom from flowing under the rotator buttons */
    position: absolute;
    top: 50%;
    right: 60px;
    z-index: 1;
    transform: translateY(-50%);
  }
}

@media (min-width: 768px) and (max-width: 1039.5px) {
  .FeatureArticleRotator ul.ArticleImages li a .Description {
    /* 69.25% reduction */
    padding-top: min(1.35vw, 15px);/* tablet = 10.3875; desktop = 15; */
    padding-right: min(1.6vw, 18px);/* tablet = 12.47; desktop = 18; */
    padding-bottom: min(1.35vw, 15px);
    padding-left: min(1.6vw, 18px);
    width: calc(277px + (400 - 277) * ((100vw - 768px)/(1040 - 768)));/* tablet = 277; desktop = 400; */
    font-size: min(1.43vw, 14px);
    line-height: min(2.14vw, 21px);
  }
}

@media (min-width: 1040px) {
  .FeatureArticleRotator ul.ArticleImages li a .Description {
    /* lock in values to prevent scaling. */
    padding: 15px 18px;
    width: 400px;
    font-size: 14px;
    line-height: 21px;
  }
}

.FeatureArticleRotator ul.ArticleImages li img {
  display: none;
  width: 100%;/* No explicit height. I want to preserve the image's intrinsict aspect ratio so it scales down nicely to mobile */
}

@media (min-width: 768px) {
  .FeatureArticleRotator ul.ArticleImages li img {
    display: block;
  }
}

/* Article button list. */
.FeatureArticleRotator ul.ArticleButtons {
  display: flex;
  padding: 0; /* Remove default padding. */
  margin: 0; /* Remove default margins. */
  position: absolute; /* Position absolutely so we can place the buttons within the space provided by the skin the image down. */
  z-index: 200; /* Buttons should appear on the top of the images. */
  list-style: none;
}

@media (max-width: 767.5px) {
  .FeatureArticleRotator ul.ArticleButtons {
    justify-content: flex-end;
    padding: 8px 18px;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

@media (min-width: 768px) {
  .FeatureArticleRotator ul.ArticleButtons {
    padding: 5px 8px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

/* Article button items. */
.FeatureArticleRotator ul.ArticleButtons li {
  flex: 0 0 auto;
  display: block; /* Get rid of the list-item bullets. */
  width: 28px; /* The width of the li. */
  height: 28px; /* The height of the li. */
  padding: 0; /* Remove default padding. */
  margin: 0 0 0 16px; /* Remove default margins and add some separation between buttons with a right margin. */
}

@media (min-width: 768px) and (max-width: 1039.5px) {
  .FeatureArticleRotator ul.ArticleButtons li {
    width: 24px;
    height: 24px;
    margin-left: 14px;
  }
}

@media (min-width: 1040px) {
  .FeatureArticleRotator ul.ArticleButtons li {
    width: 18px;
    height: 18px;
    margin-left: 10px;
  }
}

.FeatureArticleRotator ul.ArticleButtons li:first-child {
  margin-left: 0;
}

.FeatureArticleRotator ul.ArticleButtons li a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 2px solid #707070;
  background-color: #b5baba;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  transition: background-color 320ms;
}

.FeatureArticleRotator ul.ArticleButtons li a:hover {
  background-color: #41aec8;
  border-color: #c8c8c8;
}

.FeatureArticleRotator ul.ArticleButtons li.rotator-active a {
  background-color: #14819b;
  border-color: #80c7d8;
}



@media (min-width: 768px) {
/*** Slide Themes ***/
/*
  @note: DO NOT DELETE THESE. These are applied via an admin interface.
  @note: ArticleImages is the correct list. */
  .FeatureArticleRotator ul.ArticleImages li.Light .Description {
    color: #000000;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .FeatureArticleRotator ul.ArticleImages li.LightBare .Description {
    color: #000000;
  }

  .FeatureArticleRotator ul.ArticleImages li.Dark .Description {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.8);
  }

  .FeatureArticleRotator ul.ArticleImages li.DarkBare .Description {
    color: #ffffff;
  }

/*** Custom Themes! ***/
/* @note: A custom class can be applied via an admin interface but its not hardcoded into the interface so it is up to us to maintain these here. Please don't go crazy with the number of custom themes you keep around. Delete old themes. */
  .FeatureArticleRotator ul.ArticleImages li.Light.SeventhStClosure .Description {
    background: #e6f6f6;
    color: #344287;
    border: 1px solid #c3cccc;
  }
  .FeatureArticleRotator ul.ArticleImages li.Light.FrederickSummerCamp .Description{
    opacity: .8;
  }

  .FeatureArticleRotator ul.ArticleImages li.Light.ShuttleService .Description {
    margin-left: -30px;
  }

  .FeatureArticleRotator ul.ArticleImages li.Light.FDCRotator .Description {
    width: 320px;
    right: 150px;
  }

    .FeatureArticleRotator ul.ArticleImages li.Light.FDCRotator .Description::first-line {
      color: #035b7f;
      font-weight: bold;
    }
}




/*** Full Width Styles ***/
/*
  @note: full width pages (like the admin pages) need special wrappers because the page layout is different then the home page.
*/
.FullWidthOuterWrapper {
  background-color: #393939;/* Same as bg color seen on staff home page. */
}

.FullWidthOuterWrapper .FullWidthInnerWrapper {
  margin: 0 auto;
  max-width: 1040px;
}