/* --- 1. GLOBAL & BACKGROUND (FORCED BLACK) --- */
html, body, .main-react-view, .home-custom-css, .section-speakers, .speaker-view, .speaker-container, .trade-template, .speakers {
  background-color: #000000 !important;
  margin: 0 !important;
  font-family: "IBM Plex Sans", sans-serif !important;
}

/* --- 2. LAYOUT GRID (4-COL DESKTOP / 2-COL MOBILE) --- */
.section-speakers.section-speakers .row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 40px 10px !important;
  width: 100% !important;
}

/* NUCLEAR FIX: Remove Bizzabo's 'ghost' spacers causing the 1-column stack */
.section-speakers.section-speakers .row::before, 
.section-speakers.section-speakers .row::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 992px) {
  .section-speakers.section-speakers .row > div[class*="col-"] {
    width: 25% !important;
    flex: 0 0 25% !important;
    padding: 0 15px 50px 15px !important;
  }
}

@media (max-width: 991px) {
  .section-speakers.section-speakers .row > div[class*="col-"] {
    width: 50% !important;
    flex: 0 0 50% !important;
    padding: 0 8px 30px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* --- 3. SPEAKER IMAGES & IMAGE-ONLY HOVER --- */
.trade-template .speakers .entity-photo-holder img,
.trade-template .speakers .entity-photo-holder .object-trade-thumbnail {
  width: 200px !important;
  height: 200px !important;
  min-width: 200px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border: 4px solid transparent !important; /* Expansion buffer */
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
  display: block !important;
  margin: 0 auto !important;
  transform: scale(1) !important;
}

/* TARGET THE IMAGE ONLY ON HOVER */
.trade-template .speakers .entity-photo-holder:hover img,
.trade-template .speakers .entity-photo-holder:hover .object-trade-thumbnail {
  border: 0px solid transparent !important; 
  box-shadow: -8px 8px 0px 0px #9BEE36 !important; /* Solid Green Shadow (Left) */
  transform: scale(1.04) !important; /* Image-only expansion */
}

/* Neutralize Bizzabo's default "card lift" so the text stays still */
.trade-template .speakers .entity-photo-holder:hover {
  transform: none !important;
  text-decoration: none !important;
}

@media (max-width: 480px) {
  .trade-template .speakers .entity-photo-holder img {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* --- 4. TEXT STYLING (8px SPACING) --- */
.speaker-text { text-align: center !important; margin-top: 15px !important; width: 100% !important; }
.attendee-name { font-weight: 700 !important; font-size: 18px !important; color: #FFFFFF !important; margin-bottom: 8px !important; }
.attendee-title, .attendee-company { font-size: 16px !important; color: #FFFFFF !important; line-height: 1.1 !important; display: block !important; }
.attendee-title { margin-bottom: 8px !important; }

/* --- 5. SPEAKER DETAIL CARD (THE NUCLEAR FIX) --- */

/* Force IBM Plex Sans globally in this view to kill Titillium at the root */
.speaker-view, .speaker-view *, .speaker-view *:before, .speaker-view *:after {
  font-family: "IBM Plex Sans", sans-serif !important;
}

/* 1. STOP VERTICAL STRETCH & CENTER THE CARD */
/* We target the main app wrappers to kill the 100vh flex-stretch behavior */
#main-app-container, 
.main-app-container, 
.main-react-view, 
.speaker-view, 
.speaker-container {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: #000000 !important;
  text-align: center !important; /* Helps center the card block */
}

.speaker-view .speaker-container {
  padding: 65px 0 100px 0 !important;
  width: 100% !important;
}

/* 2. THE WHITE CARD: Center horizontally and stop vertical growth */
.speaker-view .speaker-profile {
  background-color: #FFFFFF !important;
  float: none !important; 
  display: inline-block !important; /* Changed to inline-block for perfect centering */
  text-align: left !important; /* Resets text alignment inside the card */
  margin: 20px auto !important; 
  width: 90% !important;
  max-width: 900px !important; 
  height: auto !important; 
  box-shadow: -16px 16px 0px 0px #9BEE36 !important; /* Left shadow */
  border: 0px solid #E1E2E7 !important;
  padding: 40px !important; 
  position: relative !important;

  @media (max-width: 768px) {
    padding: 30px 20px !important;
    width: calc(100% - 40px) !important;
    margin: 0 auto 30px auto !important;
    display: block !important;
  }
}

/* 3. BACK BUTTON: Perfect Centering & No Titillium */
.speaker-back-button {
  box-shadow: none !important;
  top: -41px !important;
  background-color: #FFFFFF !important;
  padding: 0 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  min-width: 110px;

  /* Target all internal tags to kill ghost icon padding */
  &, span, div, label, .bz-button-label, .back-button-text {
    font-family: "IBM Plex Sans", sans-serif !important;
    color: #000000 !important;
    font-size: 16px !important;
    text-transform: none !important;
    margin: 0 !important; 
    padding: 0 !important;
  }

  /* Hides the Arrow symbol */
  i, .bz-icon, [class^="fa-"] { display: none !important; }
}

/* 4. NUCLEAR HIDE FOR LIKE/SHARE/SOCIAL BUTTONS */
/* Using attribute selectors to catch dynamically generated React classes */
[class*="speaker-actions"],
[class*="favorite"],
[class*="share"],
.speaker-profile-actions,
.action-items,
.favorite-container,
.social-share,
.speaker-social {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* 5. Cleanup Photo & Bio */
.speaker-photo {
  padding: 0 0 20px 0 !important;
  display: block !important;
}

.speaker-photo img {
  border: none !important;
  outline: none !important;
  max-width: 100% !important;
  display: block !important;
}

.speaker-bio-wrapper, .speaker-bio-wrapper * {
  color: #13182D !important;
  font-family: "IBM Plex Sans", sans-serif !important;
}

/* Hide Speaker Like Button */ .speaker-view .speaker-container .speaker-profile .speaker-community-like-wrapper span { display: none; }

/*left aligns box content*/
.session-info.col-lg-12 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  	text-align: left !important;
}

/*fits boxes to content vertically*/
/*.agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .speakers-container.has-speakers{
    min-height: 0px !important;
}*/

/*Aligns Date Titles To the left*/
 .day-title-row .col-lg-12 {
        display: flex !important;
        align-items: flex-start !important;
    }

/*Left Align speaker info*/
    .agenda-view .session-list-container .session-day-container .time-row .session-elem .session-container .speakers-container .speakers-carousel .speaker-info{

        text-align: left;

    }


/*Date Title Styling*/
.agenda-view .session-list-container .session-day-container .day-title-row .day-title {
    font-size: 24px;
    line-height: 34px;
    text-align: left;
    padding-bottom: 16px;
    padding-top: 32px;
}


/*center Speaker Photos in schedule details*/

.agenda-view .session-page .session-speaker-container .row a.agenda-flex{
	align-items:center;
}


/*Session Title Font Size*/

.agenda-view .session-page .session-section-title{
	font-size: 32px !important;
}


.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions{
	background-color: transparent !important;
}

.agenda-view--session .session-page-elements-container.dynamic-size:not(:has(.qna-without-chat)):not(:has(.qna)) .session-page-element:not(.full-width-video){
	display: flex;
  	justify-content: center;

}


.agenda-view--session .session-page-elements-container.dynamic-size .session-section-container{
	width: 100%;

}

.agenda-view .session-page .title-indicator{
	display: none;
}

.speaker-position.text-ellipsis.font-size-12{
	display: none;
}


.speaker-sessions > div > div.row {
    display: flex;
}

.speaker-view .speaker-container .speaker-sessions-twitter-wrapper .speaker-sessions .speaker-session{
	max-width: 800px;
    justify-self: center;
    align-self: center;
    margin: 0 auto !important;

}

.agenda-view .agenda-search-container .agenda-search .search-row .select-ticket-section{
	display: none;
}


.css-10x627i {
    color: #fff;
}



@media (max-width: 767px) {

.agenda-view .session-page .session-speaker-container .itemSpeaker a.agenda-flex .speaker-info{
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }
  
  
}




@media (max-width: 607px) {
  
  .speakers-carousel > .slick-list > .slick-track > .slick-slide {
    max-width: 160px;
}
  
/*STACKS SPEAKERS ON SCHEDULE PAGE MOBILE*/


/*div.speakers-carousel > div.slick-list >div.slick-track {
    display: flex;
    flex-direction: column;
}/*

}
  
  .css-10x627i {
    color: #fff;
}