.instructors {
  background: black;
  color: white;
  scroll-margin-top: 120px;
  padding-bottom: 120px;
  padding-left: 60px;
  padding-right: 60px;
}
.instructors h2 {
  font-size: 28px;
  margin-bottom: 40px;
  font-weight: bold;
}

.instructors h2 span {
  border-left: 4px solid #e11b22;
  padding-left: 10px;
}

.section-title .subtitle {
  letter-spacing: 3px;
  font-size: 12px;
  margin-bottom: 10px;
}

.instructors-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 70px;
}

.portrait-card {
  background: #111;
  width: 300px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease;
}

.portrait-card:hover {
  transform: scale(1.03);
}

.portrait-card img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.instructor-details {
  padding: 15px;
  text-align: left;
}

.instructor-details h3{
  position: relative;
  font-size:16px;
  line-height:1.15;
  margin:0 0 6px 0;
  font-weight:700;

  /* espaço para a barra */
  padding-left:12px;

  /* ellipsis em 1 linha (desktop) */
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* barra vermelha à esquerda */
.instructor-details h3::before{
  content:"";
  position:absolute;
  left:0;
  top:0.18em;
  bottom:0.18em;
  width:3px;
  background:#e11b22;
  border-radius:2px;
}

.instructor-details h3 > span{ display:none; }

.instructor-details h3 span {
  color: #e11b22;
  margin-right: 6px;
}

.instructor-details p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

@media (max-width: 600px) {
  .instructors { padding: 44px 16px; }

  /* 2 colunas no mobile */
  .instructors-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; /* reduz o espaçamento para caber bem */
    margin-top: 24px; /* opcional: menos espaço acima */
  }

  /* o card deixa de ter largura fixa */
  .portrait-card {
    width: 100%;
    max-width: none;
  }

  /* imagem responsiva sem altura fixa */
  .portrait-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; /* mantém proporção agradável */
    object-fit: cover;
    display: block;
  }

  .instructors h2 {
    font-size: 22px;
    margin-bottom: 27px;
  }

  .instructors h2 span {
    border-left-width: 3px;
    padding-left: 8px;
  }

   .instructor-details h3{
    font-size:14px;
    line-height:1.35;
    padding-left:10px;

    /* ellipsis em 2 linhas no mobile */
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  
}