/* STYLES FOR THE AOTW COMPONENT GOIES HERE */
.component-aotw .headshot { --bs-aspect-ratio:110% }
.component-aotw .headshot img { width:100% }
.component-aotw .default-headshot { display:flex; flex-direction:column; justify-content:center; align-items:center; }  

/* STANDARD LAYOUT */
.component-aotw.layout-standard .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-standard .details-wrapper { width:100% }
.component-aotw.layout-standard .component-image { display:none; align-self:center; text-align:center }
.component-aotw.layout-standard .players { display:flex; flex-direction:column; flex-wrap:wrap; gap:20px }
.component-aotw.layout-standard .player { width:100%; position:relative }
.component-aotw.layout-standard .player-details { position:absolute; left:10px; right:10px; bottom:10px }

@media only screen and (min-width:576px) {
    .component-aotw.layout-standard .players { flex-direction:row; justify-content:space-between }
    .component-aotw.layout-standard .player { flex:1 1 48% }
}

@media only screen and (min-width:768px) {
    .component-aotw.layout-standard .details-wrapper { width:30%; align-self:center; order:2 }
    .component-aotw.layout-standard .page-details { flex-direction:column }
    .component-aotw.layout-standard .players { flex-wrap:nowrap }
    .component-aotw.layout-standard .player { flex:1 0 200px; max-width:270px }
    .component-aotw.layout-standard .player:last-child { order:3 }
    .component-aotw.layout-standard .component-headings { display:none }
    .component-aotw.layout-standard .component-image { display:block }
    .component-aotw.layout-standard .component-image img { max-width:100% }
}

/* INLINE LAYOUT */
.component-aotw.layout-inline .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-inline .layout-wrapper { display:flex; flex-direction:column; gap:1rem }
.component-aotw.layout-inline .component-image { display:none }
.component-aotw.layout-inline .players { display:flex; flex-direction:column; gap:20px }
.component-aotw.layout-inline .player { flex:1; max-width:270px }

.component-aotw.layout-inline .player-bio { padding:5px 10px }
.component-aotw.layout-inline .player-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  }
.component-aotw.layout-inline .team-logo { position:absolute; left:0; bottom:0; width:60px; background:#fff }
.component-aotw.layout-inline .team-logo + .player-bio { margin-left:60px }

.component-aotw.layout-inline .slick-slider { margin:0; overflow:hidden; }
.component-aotw.layout-inline .slick-slider .player { max-width:none }
.component-aotw.layout-inline .slick-dots { position:static }
.component-aotw.layout-inline .btn { margin-top:-3rem }
.component-aotw.layout-inline .btn.slick-disabled { display:none !important }
.component-aotw.layout-inline .btn { visibility:hidden; border:none; transition:all .4s; }
.component-aotw.layout-inline .slick-prev { border-radius:0 var(--bs-border-radius) var(--bs-border-radius) 0 }
.component-aotw.layout-inline .slick-next { border-radius:var(--bs-border-radius) 0 0 var(--bs-border-radius) }
.component-aotw.layout-inline .slick-slider:hover .btn { visibility:visible }
.component-aotw.layout-inline .slick-slider:hover .slick-prev { left:0 }
.component-aotw.layout-inline .slick-slider:hover .slick-next { right:0 }
.component-aotw.layout-inline .slider-buttons { display:none }

@media only screen and (min-width:576px) {
    .component-aotw.layout-inline .players:not(.slick-slider) { flex-direction:row }
   
    .component-aotw.layout-inline .slick-list { margin-left:-20px }
    .component-aotw.layout-inline .slick-slider .player { margin-left:20px }
    .component-aotw.layout-inline .slider-buttons { display:block; margin-top:20px; display:flex; justify-content:center; }
}

@media only screen and (min-width:992px) {
   .component-aotw.layout-inline .layout-wrapper { flex-direction:row; align-items:center; justify-content:space-between }
   .component-aotw.layout-inline .page-details { flex-direction:column }
   .component-aotw.layout-inline .details-wrapper { width:30% }
   .component-aotw.layout-inline .players { width:62%; justify-content:flex-end }
   .component-aotw.layout-inline .component-title,
   .component-aotw.layout-inline .component-sub-title { display:none }
   .component-aotw.layout-inline .component-image { display:block }
}

/* ALIGN LAYOUT */
.component-aotw.layout-align .headshot img { min-width:100%; height:100%; }
.component-aotw.layout-align .slick-list .slick-track { align-items: self-start; }
.component-aotw.layout-align .page-details { flex-direction:column; text-align:center }
.component-aotw.layout-align .player { position:relative; display:flex !important; justify-content:space-between; overflow:hidden;  }
.component-aotw.layout-align .player .player-headshot { z-index:2; position:relative; display:flex; flex-direction:column; }
.component-aotw.layout-align .player .player-headshot .headshot-wrapper { padding:0; }
.component-aotw.layout-align .player .headshot {
    border-radius:0;
    position:relative;
    transform:skewX(-8deg);
    overflow:hidden;
    padding:0;
    border-left:0.5rem solid #fff;
    border-right:0.5rem solid #fff;
    box-shadow:0 0 2rem rgba(0, 0, 0, 0.25);
}
.component-aotw.layout-align .player .headshot .headshot-holder {
    overflow:hidden;
    border-radius:0;
    transform:skewX(8deg) scale(1.2);
    scale:1;
    width:100%;
    background-position: center 0;
    transform-origin: right top;
    background-size: cover;
    border:0;
}
@media only screen and (min-width:992px) {
    .component-aotw.layout-align .player .player-headshot { padding-right:6rem; }
}

.component-aotw.layout-align .player .headshot .headshot-holder img { max-width:300px; max-height:400px; }
.component-aotw.layout-align .player .headshot-cutout { position:absolute; left:-10%; bottom:0; width:80%; height:80%; z-index:1; background:none no-repeat top 50%; background-size:cover }

.component-aotw.layout-align .player .player-details { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; text-transform:uppercase; padding:1rem 0; }
.component-aotw.layout-align .player .player-details .player-bio { display:flex; align-items:center; flex-direction:column; gap:10px; text-align:center }
.component-aotw.layout-align .player .player-details .player-name { font-size:1.5rem; font-weight:700; line-height:1.2 }
.component-aotw.layout-align .player .player-details .team-logo,
.component-aotw.layout-align .player .player-details .player-bio .pos { display:none }

.component-aotw.layout-align .slick-slider { margin:0; overflow:hidden }
.component-aotw.layout-align .slick-slider .slick-dots { position:static; margin:1rem 0 }
.component-aotw.layout-align .slick-slider .btn { border-radius:0; transition:all .4s }
.component-aotw.layout-align .slick-slider .slick-next { right:-9999px }
.component-aotw.layout-align .slick-slider .slick-prev { left:-9999px }

@media only screen and (min-width:992px) {
    .component-aotw.layout-align .player .headshot {
        background: linear-gradient(90deg, rgba(0,0,0,0.5), transparent);
    }
    .component-aotw.layout-align .player .headshot .headshot-holder img { max-width:400px; max-height:500px; }
   .component-aotw.layout-align .player .player-headshot .headshot-wrpaper { padding-right:3rem; }
   .component-aotw.layout-align .player .player-details { padding:3rem 0; }
   .component-aotw.layout-align .player .player-details .player-bio { flex-direction:row-reverse }
   .component-aotw.layout-align .player .player-details .player-name { font-size:1.5rem }
   .component-aotw.layout-align .slick-slider:hover .slick-next { right:0 }
   .component-aotw.layout-align .slick-slider:hover .slick-prev { left:0 }
   .component-aotw.layout-align .slick-dots { display:none }
}

@media only screen and (min-width:1200px) {

}

/* BIO LAYOUT*/
.component-aotw.layout-bio .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-bio .player {  display:flex !important; justify-content:center }
.component-aotw.layout-bio .player-headshot { position:relative; width:25%; min-width:100px; max-width:250px  }
.component-aotw.layout-bio .headshot { flex:1; position:relative; background:transparent !important }
.component-aotw.layout-bio .headshot .headshot-holder img.invisible { visibility: visible !important;}
.component-aotw.layout-bio .player-details { flex:1 1 50%; padding:0 1rem; padding-bottom:2.5rem; display:flex; align-items:center }
.component-aotw.layout-bio .player-details .player-bio { display:flex; flex-direction:column; gap:10px; font-size:1.2rem }
.component-aotw.layout-bio .player-details .player-name { font-size:1.5rem; order:2; font-weight:700; line-height:1.2; text-transform:uppercase }
.component-aotw.layout-bio .player-details .full-story-link { order:3 }
.component-aotw.layout-bio .player-details .full-story-link:hover { color: var(--bs-secondary) }
.component-aotw.layout-bio .player-details .player-bio .player-attrs { display: flex; flex-direction:row-reverse; order:1; background: var(--bs-primary); color: #fff; padding: 0 1rem; justify-content: flex-end; max-width:500px }
.component-aotw.layout-bio .player-details .player-bio .player-attrs .pos:before { content:"|"; margin:0 10px }
.component-aotw.layout-bio .player-details .player-bio .synopsis { order:3 }
.component-aotw.layout-bio .player-details .team-logo { display:none }

.component-aotw.layout-bio .slick-track { align-items:stretch }
.component-aotw.layout-bio .slick-slider { margin:0; overflow:hidden }
.component-aotw.layout-bio .slick-slider .btn { display:none !important; height:2rem; border:none; border-radius:0; transition:all .4s; transform:none  }
.component-aotw.layout-bio .slick-slider .slick-next,
.component-aotw.layout-bio .slick-slider .slick-prev { right:0; top:auto; bottom:0 }
.component-aotw.layout-bio .slick-slider .slick-prev { left:auto; right:80px }
.component-aotw.layout-bio .slick-pp { right:40px; bottom:0 !important }
.component-aotw.layout-bio .slick-slider .slick-dots {  position:static }


@media only screen and (min-width:992px) {
   .component-aotw.layout-bio .player-details { padding:1.5rem; padding-bottom:2rem }
   .component-aotw.layout-bio .player-details .player-name { font-size:2.5rem }
   .component-aotw.layout-bio .slick-slider .btn { display:block !important }
}

/* SLIDER LAYOUT */
.component-aotw.layout-slider .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-slider .layout-wrapper { display:flex; flex-direction:column; gap:1rem; justify-content:space-between }
.component-aotw.layout-slider .page-details { flex-direction:column-reverse }
.component-aotw.layout-slider .details-wrapper { text-align:center }
.component-aotw.layout-slider .players { display:flex; flex-direction:column; gap:20px }
.component-aotw.layout-slider .player { flex:1; max-width:270px }

.component-aotw.layout-slider .player-bio { padding:5px 10px }
.component-aotw.layout-slider .player-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff  }

.component-aotw.layout-slider .slick-slider { margin:0; overflow:hidden }
.component-aotw.layout-slider .slick-slider .slick-list { padding-bottom:3rem }
.component-aotw.layout-slider .slick-slider .slick-slide { margin:0 15px }
.component-aotw.layout-slider .slick-slider .player { max-width:none }
.component-aotw.layout-slider .slick-dots { display:none !important }
.component-aotw.layout-slider .btn.slick-disabled { opacity:0.2 }

.component-aotw.layout-slider .slick-slider .btn { position:absolute; top:auto !important; bottom:15px !important; z-index:3 !important; width:2rem; height:2rem; line-height:1; border:2px solid; background:var(--bs-primary); transform:none; transition:all .4s; border-radius:50%; --bs-btn-color:#fff; --bs-btn-hover-color:var(--bs-tertiary); --bs-btn-active-color:var(--bs-tertiary) }
.component-aotw.layout-slider .slick-slider .slick-prev { left:50% !important; transform:translateX(-75px) }
.component-aotw.layout-slider .slick-slider .slick-next { left:50% !important; right:auto !important; transform:translateX(50px) }
.component-aotw.layout-slider .slick-slider .slick-pp { left:50% !important; transform:translateX(-15px) }
.component-aotw.layout-slider .slick-slider .slick-pp .fa-play { margin-left:3px }
.component-aotw.layout-slider .slick-slider .slick-pp .fa-play:before { font-weight:400 }


@media only screen and (min-width:576px) {
    
    .component-aotw.layout-slider .players:not(.slick-slider) { flex-direction:row }
   
    .component-aotw.layout-slider .slick-list { margin-left:-20px }
    .component-aotw.layout-slider .slick-slider .player { margin-left:20px }
    
    .component-aotw.layout-slider .slick-slider .slick-prev { transform:translateX(-3.5rem) }
    .component-aotw.layout-slider .slick-slider .slick-next { transform:translateX(3.5rem) }
    .component-aotw.layout-slider .slick-slider .slick-pp { transform:translateX(0) }

}

@media only screen and (min-width:992px) {
    
   .component-aotw.layout-slider .layout-wrapper { align-items:center; justify-content:space-between }
   .component-aotw.layout-slider .players { width:100%; justify-content:center }
   .component-aotw.layout-slider .player-details { position:absolute; left:0; right:0; bottom:0; background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.8) 100%) }

}