/**
 * @version     CVS: 2.1.2
 * @package     com_competition_display
 * @copyright   2025 André Eißer
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author      André Eißer <andre.eisser@dotwerkstatt.de>
 */

.bgCompBrand { background-color: #EFEFEF; }
.cCompBrand { color: #EFEFEF; }

body, p {
    font-size: 19px !important;
    line-height: 26px  !important;
}
p.small, ul.small { font-size: 14px !important; line-height: 20px !important; letter-spacing: -0.25px; }

h1.compLeading {
    font-size: 44px;
    line-height: 46px;
    font-weight: 800;
    width: 95%;
}

h4 small { font-weight: 300 !important; }

span.compBadge {
    font-weight: 400;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 9px;
}

.bgGrey {background-color: #F2F2F2; }

.shadowSuperLight { box-shadow: 0px 4px 12px 2px rgba(0,0,0,0.15); }




/* MENUPANEL & NAVBAR 
========================================== */
#navBar { z-index: 100 !important; }

.navbar { transition: transform .3s ease;}
.navbar.hideNav {
  transform: translateY(-100%) !important;
  transition: transform .3s ease;
}

.compNavLogo { height: 52px; width: auto; max-width: 2000px !important; }


#mmComp {
  margin-top: 188px !important; 
  position: fixed;
}

.mmenu {margin-top: 68px !important; height: calc(100% - 68px) !important; }




/* HERO & PAGE LEADING
================================ */

.comp-hero {
    background-image: url('../../../__assets/competitions/general/bg_lines_hero_black.png');
    background-position: left calc(100% + 64px);
    background-repeat: repeat-x;
    background-size: 50%;
}

.comp-hero .row {
  align-items: stretch;
}

.contentMenuImage {
  width: 120px;
  height: 120px;
/*
  background-size: cover;
  background-position: 50% 50%;
*/
  background-color: #212121;
  
  background-image: url('../../../__assets/competitions/general/bg_center_lines.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;

}

.pageLeadingImage {
  height: 320px;
  width: 100%;
  margin: 0px; padding: 0px;
  margin-top: -56px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: #EFEFEF;
}

.compHeroImage {
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

#competitionPageHeader {
    background-image: url('../../../__assets/competitions/general/bg_center_lines.png');
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: 65%;
    padding-bottom: 128px;
    margin-top: 164px;
    margin-bottom: 56px;
}
    
#competitionPageHeader * { color: #FFFFFF !important; }



/* IMAGES
================================ */

.copyRightC {
  position: absolute;
  bottom: 0px;
  right: 4px;
}
    
.patronageImage,
.juryMemberImageFull,
.juryMemberImage {
  width: 100%;
  height: 160px;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-color: #F2F2F2;
}
    
.juryMemberImageFull {
  height: 320px; 
  display: block; 
  background-size: cover;
}
    
.patronageImage { 
  width: 340px; 
  height: 540px; 
  display: block; 
}
    
.img-flex{
  width: 100%;
  min-height: 90%;    
  position: relative;
  margin: 0;
}
    
.logoHolder {
    height: 164px;
    width: 100%;
    overflow: hidden;
}
    
.logoHolder img {
    width: 90%; height: auto;
    margin-left: 5%;
    filter: grayscale(1);
}
    
.logoHolder img:hover { filter: grayscale(0); }
    
.large_full_image {
  height: 100%;
  width: 100%;
  display: block;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
    

/* SLIDE SHOW 
====================== */

#timelineSlideShow .slick-slide {
  margin-right: 32px !important;
  opacity: 0.75;
}


#timelineSlideShow .slick-slide.slick-current { 
    opacity: 1; 
    padding-bottom: 102px;
    background-image: url('../../../__assets/competitions/general/bg_lines_black.png');
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: 350%;
}


#timelineSlideShow .slick-slide.slick-active { opacity: 1; }

#timelineSlideShow .slick-list {
  overflow: visible;
  margin: 0;
  padding: 0;
}
.slider-wrapper,
.slider-wrapper > * {
  overflow: visible;
}
.slider-wrapper {
  position: relative;
  margin-top: 32px;
  text-align: left;
}
.slider-nav {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 24px;
  margin-top: 16px;
}
.slick-prev,
.slick-next {
  background: none;
  border: none;
  color: #3F3465;
  font-size: 20px;
  cursor: pointer;
}
.slick-prev:hover,
.slick-next:hover {
  color: #999;
}
.slick-dots-wrapper {
  flex: 0 1 auto;
}
.slick-dots {
  display: flex !important;
  gap: 8px;
  padding: 0;
  margin: 0;
  margin-top: 3px;
  list-style: none;
  justify-content: center;
}
.slick-dots li button:before {
  font-size: 10px;
  color: #3F3465;
  opacity: 0.25;
}

.slick-dots li.slick-active button:before {
  opacity: 1;
}

slick-dots.dots--plain{
  display: flex !important;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: center;
  align-items: center;
}

.slick-dots.dots--plain li button { display: none; } 
.slick-dots.dots--plain li { margin: 0; }

.slick-dots.dots--plain .dot{
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #bbb;
  cursor: pointer;
}

.slick-dots.dots--plain li.slick-active .dot{
  background: #3F3465;
  width: 24px;
  height: 24px;
  margin-top: -4px;
}
.slick-dots.dots--plain .dot:focus{ outline: none; }

/* ====================== 
   ENDE SLIDE SHOW 
   ====================== */
   
@media (max-width: 992px) {

  h1.compLeading {
      font-size: 36px;
   line-height: 40px;
      margin-top: -102px !important;
      width: 65%;
  } 
  
  .comp-hero {
    padding-bottom: 128px;
    background-size: 100%;
    background-position: left calc(100% + 80px);
    padding-bottom: 188px;
  }

}

@media (max-width: 767px) {
    
    p.small {
        font-size: 12px !important;
        line-height: 16px !important;
    }
    h1.compLeading {
        font-size: 36px;
        line-height: 44px;
        margin-top: -102px !important;
        width: 85%;
    }
    
    span.compBadge { 
        font-size: 12px;
        line-height: 15px;
    }

    .compNavLogo {
        margin-left: 0px;
        height: 48px;
    }
    .comp-hero {
        background-size: 120%;
        background-position: left calc(100% + 60px);
        padding-bottom: 160px;
    }
    .compHeroImage { height: 320px; }

  #competitionPageHeader {
    background-size: 135%;
      padding-bottom: 88px;
    }
}
@media (max-width: 576px) {
  .compNavLogo {
    margin-left: 15px;
    height: 40px;
   }

    .comp-hero {
       background-size: 150%;
       background-position: left calc(100% + 60px);
       padding-bottom: 140px;
   }
      
   h1.compLeading {
       font-size: 28px;
       line-height: 32px;
       width: 100%;
   }
   
  #competitionPageHeader {
    background-size: 175%;
      padding-bottom: 64px;
    }

}

@supports (aspect-ratio: 1 / 1) {
  .img-flex{ aspect-ratio: 1 / 1; }
}


@supports not (aspect-ratio: 1 / 1) {
  .img-flex::before{
    content:"";
    display:block;
    padding-top:90%;        
  }
  .img-flex > img{
    position:absolute;
    inset:0;
  }
}

.img-flex > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}