/* Talks page styles */

/* Layout overrides for this page */
body.talks #main{ max-width:none; margin:0; padding:0; }

/* 1) Hero */
.talks-hero{ 
  position:relative; 
  width:100vw; 
  left:50%; 
  margin-left:-50vw; 
  right:50%; 
  margin-right:-50vw; 
  min-height:85vh; 
  background:#000 center/cover no-repeat; 
  margin-bottom:0; 
  overflow:hidden;
}
/* Video background */
.talks-hero .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Fallback background image for browsers that don't support video */
.talks-hero{ background-image:url('/public/images/talks/hero.jpg'); }
.talks-hero .hero-overlay{ 
  position:absolute; 
  inset:0; 
  background: linear-gradient(135deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.5) 100%);
}
.talks-hero .hero-inner{ 
  position:relative; 
  z-index:1; 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:80px var(--container-pad,24px); 
  min-height:85vh; 
  display:flex; 
  align-items:center; 
}
.talks-hero .hero-copy{ 
  max-width: 50ch; 
  color:#fff; 
  position:relative;
}
.talks-hero h1{ 
  margin:0 0 20px; 
  font-size: clamp(32px, 5.5vw, 56px); 
  line-height:1.1; 
  font-weight:800;
  letter-spacing:-0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.talks-hero .lead{ 
  margin:24px 0 32px; 
  font-size: clamp(18px, 2.2vw, 22px); 
  line-height:1.5; 
  color:#f8f8f8; 
  font-weight:400;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.talks-hero .cta-row{
  display:flex;
  justify-content:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
.talks-hero .btn-primary{ 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px; 
  border-radius:50px; 
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  color:#fff; 
  text-decoration:none; 
  font-weight:600; 
  font-size:16px;
  transition:all .3s ease; 
  min-width:200px; 
  text-align:center;
  box-shadow: 0 8px 32px rgba(108,43,217,.3);
  border: 2px solid transparent;
  position:relative;
  overflow:hidden;
}
.talks-hero .btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.talks-hero .btn-primary:hover{ 
  transform:translateY(-2px); 
  box-shadow: 0 12px 40px rgba(108,43,217,.4);
}
.talks-hero .btn-primary:hover::before{
  opacity:1;
}
.talks-hero .btn-primary:active{
  transform:translateY(0);
}

/* 2) Recent Presentations */
.talks-recent{ 
  padding:80px 0; 
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  position:relative;
  overflow:hidden;
}
.talks-recent::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(108,43,217,.08) 0%, transparent 70%);
  pointer-events:none;
}
.talks-recent .wrap{ 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px); 
  position:relative;
  z-index:1;
}
.talks-recent h2{ 
  margin:0 0 48px; 
  font-size: clamp(28px, 4vw, 38px); 
  font-weight:700;
  text-align:center;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cards-carousel{ 
  position:relative; 
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px;
  padding:32px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.3);
}
.cards-carousel .c-btn{ 
  position:absolute; 
  top:50%; 
  transform:translateY(-50%); 
  width:56px; 
  height:56px; 
  border-radius:50%; 
  border:2px solid rgba(255,255,255,.8); 
  background:rgba(255,255,255,.9); 
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--primary); 
  display:grid; 
  place-items:center; 
  cursor:pointer; 
  transition:all .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  font-size:20px;
  font-weight:bold;
  z-index:2;
}
.cards-carousel .c-btn:hover{ 
  background:var(--primary); 
  color:#fff; 
  transform:translateY(-50%) scale(1.1);
  box-shadow: 0 12px 32px rgba(108,43,217,.3);
}
.cards-carousel .prev{ left:16px; }
.cards-carousel .next{ right:16px; }
.c-track{ 
  display:flex; 
  gap:24px; 
  overflow:auto; 
  scroll-snap-type:x mandatory; 
  padding-bottom:10px; 
}
.c-card{ 
  flex:0 0 calc((100% - 48px) / 3); 
  background:rgba(255,255,255,.9); 
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px; 
  border:1px solid rgba(255,255,255,.3); 
  box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.5) inset; 
  overflow:hidden; 
  scroll-snap-align:start; 
  transition: all .3s ease; 
  position:relative;
}
.c-card::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(108,43,217,.05) 0%, rgba(108,43,217,.02) 100%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:1;
}
.c-card:hover{ 
  transform:translateY(-4px); 
  box-shadow: 0 20px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.6) inset;
}
.c-card:hover::before{
  opacity:1;
}
.c-media{ 
  aspect-ratio: 16 / 9; 
  background:#eaeaea; 
  position:relative;
  overflow:hidden;
}
.c-media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
  transition:transform .3s ease;
}
.c-card:hover .c-media img{
  transform:scale(1.05);
}
.c-body{ 
  padding:24px; 
  position:relative;
  z-index:2;
}
.c-body h3{ 
  margin:0 0 12px; 
  font-size: clamp(18px, 2.4vw, 22px); 
  font-weight:700;
  color:#1e293b;
  line-height:1.3;
}
.location{ 
  margin:0 0 16px; 
  font-size:14px; 
  color:#64748b; 
  display:flex; 
  align-items:center; 
  gap:8px; 
  font-weight:500;
}
.pin{ 
  width:12px; 
  height:12px; 
  display:inline-block; 
  border-radius:50% 50% 50% 0; 
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  transform:rotate(-45deg); 
  position:relative; 
  box-shadow: 0 2px 8px rgba(108,43,217,.3);
}
.pin::after{ 
  content:""; 
  position:absolute; 
  width:4px; 
  height:4px; 
  background:#fff; 
  border-radius:50%; 
  top:3px; 
  left:3px; 
}
.c-body hr{ 
  border:none; 
  border-top:1px solid rgba(108,43,217,.1); 
  margin:16px 0; 
}
.c-body .learn{ 
  color:var(--primary); 
  text-decoration:none; 
  font-weight:600; 
  font-size:15px;
  transition:color .3s ease;
}
.c-body .learn:hover{
  color:#8b5cf6;
}

/* 3) Gallery */
.talks-gallery{ 
  padding:80px 0; 
  background: #fff;
}
.talks-gallery .wrap{ 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px); 
}
.talks-gallery h2{ 
  margin:0 0 40px; 
  font-size: clamp(28px, 4vw, 38px); 
  font-weight:700;
  text-align:center;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gallery{ 
  position:relative; 
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius:24px;
  padding:24px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
.g-viewport{ 
  overflow:hidden; 
  border-radius:16px; 
  position:relative; 
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.g-track{ 
  display:flex; 
  transition: transform .5s ease; 
  will-change: transform; 
}
.g-slide{ 
  flex:0 0 100%; 
  width:100%; 
  aspect-ratio: 16 / 9; 
  background:#eaeaea; 
  border-radius:16px;
  overflow:hidden;
}
.g-slide img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
  transition:transform .3s ease;
}
.g-slide:hover img{
  transform:scale(1.02);
}
.g-btn{ 
  position:absolute; 
  top:50%; 
  transform:translateY(-50%); 
  width:56px; 
  height:56px; 
  border-radius:50%; 
  border:2px solid rgba(255,255,255,.8); 
  background:rgba(255,255,255,.9); 
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:grid; 
  place-items:center; 
  cursor:pointer; 
  z-index:2; 
  transition:all .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  color:var(--primary);
  font-size:20px;
  font-weight:bold;
}
.g-btn:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-50%) scale(1.1);
  box-shadow: 0 12px 32px rgba(108,43,217,.3);
}
.g-btn.prev{ left:16px; }
.g-btn.next{ right:16px; }
.g-dots{ 
  display:flex; 
  justify-content:center; 
  gap:12px; 
  margin-top:24px; 
}
.g-dots button{ 
  width:12px; 
  height:12px; 
  padding:0; 
  border-radius:50%; 
  border:none; 
  background:rgba(108,43,217,.2); 
  cursor:pointer; 
  display:inline-block; 
  line-height:0; 
  box-sizing:border-box; 
  appearance:none; 
  -webkit-appearance:none; 
  flex:0 0 auto; 
  transition:all .3s ease;
}
.g-dots button[aria-current="true"]{ 
  background:var(--primary); 
  transform:scale(1.2);
}
.g-dots button:hover{
  background:rgba(108,43,217,.4);
  transform:scale(1.1);
}
.g-dots button:focus-visible{ 
  outline:2px solid var(--primary); 
  outline-offset:2px; 
}

/* 4) FAQ */
.talks-faq{ 
  padding:80px 0; 
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.talks-faq .wrap{ 
  max-width: var(--container-max, 1200px); 
  margin:0 auto; 
  padding:0 var(--container-pad,24px); 
}
.talks-faq h2{ 
  margin:0 0 48px; 
  font-size: clamp(28px, 4vw, 38px); 
  font-weight:700;
  text-align:center;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.faq{ 
  max-width:800px; 
  margin:0 auto; 
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:20px;
  padding:32px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.3);
}
.faq-item{ 
  margin:0 0 16px; 
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:16px; 
  border:1px solid rgba(108,43,217,.1); 
  overflow:hidden; 
  box-shadow: 0 4px 16px rgba(0,0,0,.06); 
  transition:all .3s ease;
}
.faq-item:hover{
  background:rgba(255,255,255,.8);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  transform:translateY(-1px);
}
.faq-item:last-child{
  margin-bottom:0;
}
.faq-q{ 
  width:100%; 
  padding:20px 24px; 
  background:none; 
  border:none; 
  text-align:left; 
  font-size:16px; 
  font-weight:600; 
  color:#1e293b; 
  cursor:pointer; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  transition:all .3s ease; 
}
.faq-q:hover{ 
  background:rgba(108,43,217,.02); 
  color:var(--primary);
}
.faq-q::after{ 
  content:"+"; 
  font-size:20px; 
  font-weight:bold; 
  color:var(--primary); 
  transition: all .3s ease; 
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(108,43,217,.1);
  border-radius:50%;
}
.faq-q[aria-expanded="true"]::after{ 
  content:"−"; 
  transform: rotate(0.001deg); 
  background:var(--primary);
  color:#fff;
}
.faq-a{ 
  padding:0 24px 20px; 
  color:#64748b; 
  line-height:1.6; 
  font-size:15px;
}
.faq-a[hidden]{ display:none; }

/* Responsive Design */
@media (max-width: 980px){
  .talks-recent{ padding:60px 0; }
  .talks-gallery{ padding:60px 0; }
  .talks-faq{ padding:60px 0; }
  .cards-carousel{
    padding:24px;
  }
}

@media (max-width: 900px){
  .c-card{ 
    flex:0 0 calc((100% - 24px) / 2); 
  }
  .cards-carousel .c-btn{ 
    display:none; 
  }
  .c-track{
    gap:16px;
  }
}

@media (max-width: 760px){
  .talks-hero .hero-inner{
    padding:60px var(--container-pad,20px);
  }
  .talks-hero h1{
    font-size: clamp(28px, 8vw, 40px);
  }
  .talks-hero .lead{
    font-size: clamp(16px, 4vw, 18px);
  }
  .talks-hero .btn-primary{
    padding:14px 24px;
    font-size:15px;
    min-width:180px;
  }
  .talks-recent h2{
    font-size: clamp(24px, 6vw, 28px);
  }
  .talks-gallery h2{
    font-size: clamp(24px, 6vw, 28px);
  }
  .talks-faq h2{
    font-size: clamp(24px, 6vw, 28px);
  }
  .gallery{
    padding:16px;
  }
  .g-btn{
    width:48px;
    height:48px;
    font-size:18px;
  }
  .g-btn.prev{ left:12px; }
  .g-btn.next{ right:12px; }
  .faq{
    padding:24px 20px;
  }
}

@media (max-width: 600px){
  .c-card{ 
    flex:0 0 100%; 
  }
  .c-track{
    gap:12px;
  }
  .c-body{
    padding:20px;
  }
  .c-body h3{
    font-size: clamp(16px, 4vw, 18px);
  }
  .faq-q{ 
    padding:16px 20px; 
    font-size:15px; 
  }
  .faq-a{ 
    padding:0 20px 16px; 
  }
}

@media (max-width: 480px){
  .talks-hero .hero-inner{
    padding:50px var(--container-pad,16px);
  }
  .talks-hero h1{
    font-size: clamp(24px, 10vw, 32px);
  }
  .talks-hero .lead{
    font-size: clamp(14px, 5vw, 16px);
  }
  .talks-hero .btn-primary{
    padding:12px 20px;
    font-size:14px;
    min-width:160px;
  }
  .cards-carousel{
    padding:16px;
  }
  .c-body{
    padding:16px;
  }
  .gallery{
    padding:12px;
  }
  .g-btn{
    width:40px;
    height:40px;
    font-size:16px;
  }
  .g-btn.prev{ left:8px; }
  .g-btn.next{ right:8px; }
  .faq{
    padding:20px 16px;
  }
  .faq-q{
    padding:14px 16px;
    font-size:14px;
  }
  .faq-a{
    padding:0 16px 14px;
    font-size:14px;
  }
}