/* Card Animation Styles - Monochrome Filter and Interactive Effects */

.speaker-card {

  position: relative;

  border-radius: 1rem;

  overflow: hidden;

  background: #0c0c16;

  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  transition: transform .25s ease, box-shadow .25s ease, filter .3s ease;

  cursor: pointer;

  filter: grayscale(100%);

  height: 100%;


}



.speaker-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 16px 40px rgba(0,0,0,.35);

  filter: grayscale(0%);

}



.speaker-card.is-active {

  filter: grayscale(0%);

}



.speaker-card img {

  width: 100%;

  height: 360px;

  object-fit: cover;

  display: block;

}



/* Attach theme color to the card via CSS var */

.speaker-card.theme-1 { --theme-current: var(--theme-1); }

.speaker-card.theme-2 { --theme-current: var(--theme-2); }

.speaker-card.theme-3 { --theme-current: var(--theme-3); }



/* Hover & Active state: 3px "border" without layout shift (inset shadow) + outline */

.speaker-card.theme-1:hover,

.speaker-card.theme-1.is-active {

  box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 0 0 3px var(--theme-1);

}

.speaker-card.theme-2:hover,

.speaker-card.theme-2.is-active {

  box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 0 0 3px var(--theme-2);

}

.speaker-card.theme-3:hover,

.speaker-card.theme-3.is-active {

  box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 0 0 3px var(--theme-3);

}



/* Active card outline */

.speaker-card.theme-1.is-active {

  outline: 2px solid #8ae8c9;

  outline-offset: 4px;

}

.speaker-card.theme-2.is-active {

  outline: 2px solid #f49b9b;

  outline-offset: 4px;

}

.speaker-card.theme-3.is-active {

  outline: 2px solid #acceed;

  outline-offset: 4px;

}



/* Make sure inner glass/info stays above the inset border */

.speaker-card .speaker-info { 

  position: relative; 

  z-index: 1; 

}



/* "Sala" pill (top-left) */

.room-pill {

  position: absolute;

  top: .75rem;

  left: .75rem;

  z-index: 2;

  padding: .35rem .7rem;

  border-radius: 999px;

  font-weight: 800;

  font-size: .8rem;

  line-height: 1;

  color: #000;

  border: 1px solid rgba(0,0,0,.15);

  background: var(--theme-current, #fff);

  box-shadow: 0 6px 14px rgba(0,0,0,.18);

}



/* Keyboard focus ring for accessibility */

.speaker-card:focus-visible {

  outline: 2px solid var(--theme-current, #fff);

  outline-offset: 4px;

  border-radius: 1rem;

}



/* Theme pane styling - updated for individual positioning */

.theme-schedules {

  margin-top: 2rem;

  margin-bottom: 1.5rem;

  scroll-margin-top: 100px; /* Account for fixed navbar */

  position: relative;

}



.theme-pane-container {
  width: 100%;
  margin-top: 1rem;
}

.theme-pane {
  display: none;
  background: #0e0e15;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  scroll-margin-top: 120px;
  position: relative;
  width: 100%;
}

/* Desktop: Hide mobile theme panes and show desktop ones */
@media (min-width: 992px) {
  .theme-pane-container {
    display: none;
  }
  
  .desktop-theme-panes {
    display: block;
  }
  
  .desktop-theme-panes .theme-pane {
    margin-top: 2rem;
    margin-bottom: 3rem;
  }
}

/* Mobile: Hide desktop theme panes */
@media (max-width: 991px) {
  .desktop-theme-panes {
    display: none;
  }

  .speaker-card {
    height: unset;
  }
}



.theme-pane.show {

  opacity: 1;

  transform: translateY(0);

}



.theme-pane.hide {

  opacity: 0;

  transform: translateY(-10px);

}



/* Left accent border per theme */

.theme-accent-1 { border-top: 6px solid #8ae8c9; }

.theme-accent-2 { border-top: 6px solid #f49b9b; }

.theme-accent-3 { border-top: 6px solid #acceed; }



/* Content div outlines removed - keeping only card outlines */



/* Connecting line CSS removed - keeping clean design */



/* Enhanced typography and spacing for better readability */

.theme-pane .container-fluid {

  column-count: 2;

  column-gap: 2.5rem;

  column-rule: 1px solid rgba(255,255,255,0.1);

}



.theme-pane .schedule-row {

  padding: 1.2rem 0;

  /* border-bottom: 1px solid rgba(255,255,255,0.08); */

  break-inside: avoid; /* Prevent breaking rows across columns */

  page-break-inside: avoid; /* Fallback for older browsers */

}



.theme-pane .schedule-row:last-child { 

  border-bottom: 0; 

}



.theme-pane .session-title {

  font-size: 1.1rem;

  line-height: 1.5;

  margin-bottom: 0.8rem;

  color: #ffffff;

}



.theme-pane .session-desc-theme-1,

.theme-pane .session-desc-theme-2 {

  font-size: 1rem;

  margin-bottom: 0.5rem;

  margin-top: 1.5rem;

  break-after: avoid; /* Keep section headers with their content */

}



.theme-pane .divider {

  margin: 2rem 0;

  column-span: all; /* Span across both columns */

}



/* Responsive column layout */

@media (max-width: 768px) {

  .theme-pane .container-fluid {

    column-count: 1;

    column-gap: 0;

    column-rule: none;

  }

  

  .theme-pane {

    padding: 1.5rem 1rem;

    margin-bottom: 1.5rem;

  }

  

  .theme-pane-container {

    margin-top: 0.5rem;

  }

}



@media (max-width: 576px) {

  .theme-pane {

    padding: 1rem 0.75rem;

    margin-bottom: 1rem;

    border-radius: 0.75rem;

  }

}