/* =============================================
   Interview Detail Page
   ============================================= */

/* --- Interview Hero --- */
.iv-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.iv-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.iv-hero .iv-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.iv-hero .iv-hero-text {
  position: absolute;
  bottom: 10%;
  left: 60px;
  z-index: 2;
  color: #fff;
}

.iv-hero .iv-hero-text h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.8;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  margin: 0;
  color: #fff;
}

.mark {
  background: linear-gradient(transparent 60%, #20B2D3 60%);
  color: #fff;
}

/* --- Interview Profile --- */
.iv-profile {
  background: #E8F6FA;
  padding: 33px;
  border: 1px solid #e0e0e0;
  margin-bottom: 40px;
}

.iv-profile .iv-name {
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 8px;
}

.iv-profile .iv-meta {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}

/* --- Interview Body --- */
.iv-body {
  padding-bottom: 80px;
  background: #E8F6FA;
  padding: 80px 0;
}

.iv-content {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  padding: 2.5rem;
  box-shadow: 5px 5px 20px rgb(0 0 0/.25);
}

.iv-question {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 48px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.6;
}

.iv-answer {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 2;
  margin-bottom: 0;
}

.iv-answer+.iv-answer {
  margin-top: 8px;
}

.iv-photo {
  margin: 40px 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.iv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.cta-section {
  background: #E8F6FA;
}

.cta-section .container {
  background: linear-gradient(to bottom, #E8F6FA 0%, #E8F6FA 20%, var(--primary) 20%, var(--primary) 100%);
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .iv-hero {
    height: 350px;
  }

  .iv-hero .iv-hero-text {
    bottom: 24px;
    left: 20px;
  }

  .iv-hero .iv-hero-text h1 {
    font-size: 28px;
  }

  .iv-question {
    font-size: 16px;
    margin-top: 36px;
  }

  .iv-content {
    padding: 8px 8px 30px;
  }

  .cta-section .container {
    background: linear-gradient(to bottom, #E8F6FA 0%, #E8F6FA 10%, var(--primary) 10%, var(--primary) 100%);
  }
}