/*
  Expert Sessions page specific styles
  - Styles specific to the expert sessions page only
  - Requires general.css to be loaded first
*/

/* Override container max-width for expert sessions page to match header */
.expert-sessions-page .container {
  max-width: var(--max-content-width-header-and-footer);
}

/* Hero section */
.expert-sessions-page-hero {
  padding-block: var(--spacing-lg) var(--spacing-md);
  background: #f5f5f5;
  text-align: left;
}

.expert-sessions-page-hero h1 {
  margin: 0 0 var(--spacing-lg);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.3;
  color: var(--color-text);
  font-weight: 700;
  max-width: 600px;
  display: inline-block;
}

.expert-sessions-page-hero p { 
  margin: 0 0 var(--spacing-md); 
  color: var(--color-text);
  font-size: 16px;
  line-height: 22px;
}

/* Intro section */
.expert-sessions-page-intro { 
  padding-block: var(--spacing-lg) var(--spacing-xl); 
  text-align: left;
  background: #000000;
  color: #ffffff;
}

.expert-sessions-page-intro p { 
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: #ffffff;
}

.expert-sessions-page-intro a {
  color: #00bcd4;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.expert-sessions-page-intro a:hover {
  opacity: 0.8;
}

/* Gallery section */
.expert-sessions-page-gallery-section { 
  padding-block: 0 var(--spacing-2xl); 
  background: #000000;
}

.expert-sessions-page-gallery-section h2 {
  text-align: left;
  margin: 0 0 var(--spacing-xl);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: #ffffff;
}

.expert-sessions-page-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
  max-width: 1120px;
  margin-inline: auto;
}

/* Card styling */
.expert-sessions-page-card {
  border: none;
  border-radius: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.expert-sessions-page-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: inherit;
}

.expert-sessions-page-card figure { 
  margin: 0; 
  line-height: 0; 
  position: relative;
  overflow: hidden;
  margin-inline: 0;
  margin-block: 0;
}

.expert-sessions-page-card img {
  display: block;
  width: 100%;
  height: 225px;
  /* width: auto; */
  object-fit: cover;
  transition: transform 0.3s ease;
}

.expert-sessions-page-card:hover img {
  /* transform: scale(1.05); */
}

.expert-sessions-page-card .speaker-label {
  background: #00bcd4;
  color: #000000;
  width: fit-content;
  padding: 2px 12px;
  font-size: 14px;
  border-radius: 0;
  line-height: 20px;
  font-family: var(--font-primary);
}

.expert-sessions-page-card .expert-sessions-page-card-body { 
  padding-top: var(--spacing-md); 
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.expert-sessions-page-card .speaker { 
  font-weight: 600; 
  font-size: 1rem;
  color: var(--color-text);
  margin: 0;
}

.expert-sessions-page-card .title { 
  color: #ffffff;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
}



/* Expert Sessions page responsive breakpoints */
@media (max-width: 1024px) {
  .expert-sessions-page-gallery-grid { 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
  }
}

@media (max-width: 820px) {
  .expert-sessions-page-hero { 
    padding-block: var(--spacing-xl) var(--spacing-lg); 
  }
  
  .expert-sessions-page-hero h1 { 
    font-size: clamp(1.8rem, 4vw, 2.4rem); 
  }
}

@media (max-width: 680px) {
  .expert-sessions-page-gallery-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
  
  .expert-sessions-page-card img { 
    height: 100%; 
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 460px) {
  .expert-sessions-page-gallery-grid { 
    grid-template-columns: 1fr; 
  }
  
  .expert-sessions-page-card img { 
    height: 100%; 
    width: 100%;
    object-fit: cover;
  }
}

/* Match desktop H1 metrics from source snapshot */
@media (min-width: 768px) {
  .expert-sessions-page-hero h1 { 
    font-size: 35px; 
    line-height: 45.5px; 
  }
}