.courses-view-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin:-32px 0 28px;
}

.courses-view-toolbar-label{
  color:#667085;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.courses-view-toggle{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid rgba(11,15,20,.14);
  border-radius:10px;
  background:#f7f8fa;
}

.courses-view-toggle button{
  width:38px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#667085;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}

.courses-view-toggle button:hover{
  color:#101828;
}

.courses-view-toggle button.is-active{
  background:#fff;
  color:#101828;
  box-shadow:0 2px 8px rgba(16,24,40,.10);
}

.courses-view-toggle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.course-card-image-link{
  display:block;
  overflow:hidden;
  background:#eef1f4;
}

.course-card-image-link img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .28s ease;
}

.course-card-image-link:hover img{
  transform:scale(1.025);
}

/* Grelha: mantém a apresentação atual, mas com a imagem clicável. */
.courses-catalog-section[data-courses-view="grid"] .course-card-image-link{
  aspect-ratio:16 / 9;
}

.courses-catalog-section[data-courses-view="grid"] .course-list-placeholder{
  min-height:100%;
}

/* Lista: linha com a mesma altura da imagem; o CTA fica fora do fluxo. */
.courses-catalog-section[data-courses-view="list"] .courses-grid{
  display:grid;
  grid-template-columns:1fr!important;
  gap:10px;
}

.courses-catalog-section[data-courses-view="list"] .course-list-card{
  position:relative;
  display:grid!important;
  grid-template-columns:176px minmax(0,1fr);
  height:128px!important;
  min-height:128px!important;
  max-height:128px!important;
  overflow:hidden;
  border-radius:16px;
}

.courses-catalog-section[data-courses-view="list"] .course-card-image-link{
  width:176px;
  min-height:128px;
  height:128px;
  align-self:stretch;
}

.courses-catalog-section[data-courses-view="list"] .course-list-card > div{
  min-width:0;
  height:128px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9px 180px 9px 18px!important;
  box-sizing:border-box;
  overflow:hidden;
}

.courses-catalog-section[data-courses-view="list"] .course-list-card > div > span{
  flex:0 0 auto;
  font-size:9.5px;
  line-height:1.15;
}

.courses-catalog-section[data-courses-view="list"] .course-list-card h3{
  flex:0 0 auto;
  margin:2px 0 0;
  font-size:18px;
  line-height:1.06;
}

.courses-catalog-section[data-courses-view="list"] .course-list-card p{
  flex:0 0 auto;
  display:-webkit-box;
  max-width:none;
  max-height:31px;
  margin:4px 0 0;
  overflow:hidden;
  color:#667085;
  font-size:12px;
  line-height:1.3;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.courses-catalog-section[data-courses-view="list"] .course-meta{
  flex:0 0 auto;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:5px;
  min-height:23px;
  margin-top:5px;
  overflow:hidden;
}

.courses-catalog-section[data-courses-view="list"] .course-meta small{
  flex:0 0 auto;
  padding:4px 8px;
  font-size:9.5px;
  line-height:1.2;
  white-space:nowrap;
}

.courses-catalog-section[data-courses-view="list"] .course-card-actions{
  position:absolute;
  top:50%;
  right:18px;
  margin:0!important;
  transform:translateY(-50%);
  z-index:2;
}

.courses-catalog-section[data-courses-view="list"] .course-card-actions .btn{
  min-width:132px;
  min-height:38px;
  justify-content:center;
  padding:8px 14px;
  font-size:11px;
  white-space:nowrap;
}

.courses-catalog-section[data-courses-view="list"] .course-category-group{
  padding-top:26px;
}

.courses-catalog-section[data-courses-view="list"] .course-category-group .courses-grid{
  gap:10px;
}

@media(max-width:900px) and (min-width:761px){
  .courses-catalog-section[data-courses-view="list"] .course-list-card > div{
    padding-right:158px!important;
  }

  .courses-catalog-section[data-courses-view="list"] .course-card-actions{
    right:14px;
  }

  .courses-catalog-section[data-courses-view="list"] .course-card-actions .btn{
    min-width:116px;
  }
}

@media(max-width:760px){
  .courses-view-toolbar{
    justify-content:space-between;
    margin:-24px 0 22px;
  }

  .courses-catalog-section[data-courses-view="list"] .course-list-card{
    grid-template-columns:96px minmax(0,1fr);
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
  }

  .courses-catalog-section[data-courses-view="list"] .course-card-image-link{
    width:96px;
    min-height:112px;
    height:112px;
  }

  .courses-catalog-section[data-courses-view="list"] .course-list-card > div{
    height:112px;
    padding:10px 14px!important;
  }

  .courses-catalog-section[data-courses-view="list"] .course-list-card p{
    display:none;
  }

  .courses-catalog-section[data-courses-view="list"] .course-card-actions{
    display:none;
  }

  .courses-catalog-section[data-courses-view="list"] .course-list-card h3{
    font-size:16px;
  }
}