/* ==========================================================================
   sec-cursos.css — Secao Cursos (grade e single)
   Tokens: Camada 2/3 apenas. Sem hex hardcoded.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BLOCO WRAPPER
   -------------------------------------------------------------------------- */
.cursos-block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   2. HEADER DO BLOCO
   -------------------------------------------------------------------------- */
.cursos-block__header {
  margin-bottom: var(--space-10);
  text-align: center;
}

.cursos-block__subtitulo {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.cursos-block__titulo {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--fw-heading);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
}

.cursos-block__descricao {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: var(--container-narrow);
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   3. GRID DE CURSOS
   -------------------------------------------------------------------------- */
.cursos-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

.cursos-grid[data-cols-mobile="1"] { grid-template-columns: repeat(1, 1fr); }
.cursos-grid[data-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .cursos-grid[data-cols-tablet="1"] { grid-template-columns: repeat(1, 1fr); }
  .cursos-grid[data-cols-tablet="2"] { grid-template-columns: repeat(2, 1fr); }
  .cursos-grid[data-cols-tablet="3"] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .cursos-grid[data-cols-desktop="1"] { grid-template-columns: repeat(1, 1fr); }
  .cursos-grid[data-cols-desktop="2"] { grid-template-columns: repeat(2, 1fr); }
  .cursos-grid[data-cols-desktop="3"] { grid-template-columns: repeat(3, 1fr); }
  .cursos-grid[data-cols-desktop="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   4. CARD DE CURSO (MODO GRADE)
   -------------------------------------------------------------------------- */
.cursos-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--card-transition), transform var(--card-transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cursos-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.cursos-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
}

.cursos-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.cursos-card:hover .cursos-card__img {
  transform: scale(1.04);
}

.cursos-card__body {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.cursos-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
  margin: 0;
}

.cursos-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cursos-card__title-link:hover {
  color: var(--color-accent);
}

.cursos-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.cursos-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-fw);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--badge-radius);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cursos-card__badge--nivel {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.cursos-card__badge--carga {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.cursos-card__badge--formato {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.cursos-card__resumo {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  flex: 1;
}

.cursos-card__objetivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cursos-card__objetivo {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding-left: var(--space-4);
  position: relative;
  line-height: var(--lh-snug);
}

.cursos-card__objetivo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.cursos-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--divider-thickness) solid var(--divider-color);
  flex-wrap: wrap;
}

.cursos-card__preco {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  white-space: nowrap;
}

.cursos-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  text-decoration: none;
  transition: background var(--btn-transition), color var(--btn-transition);
  white-space: nowrap;
}

.cursos-card__cta:hover {
  background: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
  border-color: var(--btn-primary-hover-border);
}

/* --------------------------------------------------------------------------
   5. CARD SINGLE (MODO DESTAQUE)
   -------------------------------------------------------------------------- */
.cursos-single-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cursos-single-card { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .cursos-single-card { grid-template-columns: 5fr 4fr; }
}

.cursos-single-card__media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  min-height: 240px;
}

.cursos-single-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cursos-single-card__body {
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cursos-single-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-heading);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  margin: 0;
}

.cursos-single-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cursos-single-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-fw);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--badge-radius);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.cursos-single-card__resumo {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  flex: 1;
}

.cursos-single-card__objetivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cursos-single-card__objetivo {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding-left: var(--space-4);
  position: relative;
  line-height: var(--lh-snug);
}

.cursos-single-card__objetivo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.cursos-single-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--divider-thickness) solid var(--divider-color);
  flex-wrap: wrap;
  margin-top: auto;
}

.cursos-single-card__preco {
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.cursos-single-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  text-decoration: none;
  transition: background var(--btn-transition), color var(--btn-transition);
}

.cursos-single-card__cta:hover {
  background: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
  border-color: var(--btn-primary-hover-border);
}

.cursos-single-card__link {
  font-size: var(--font-size-sm);
  color: var(--color-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.cursos-single-card__link:hover {
  color: var(--color-link-hover);
}

/* --------------------------------------------------------------------------
   6. DARK MODE
   -------------------------------------------------------------------------- */
[data-bg="dark"] .cursos-card {
  background: var(--color-surface-dark);
  border-color: var(--color-border-subtle);
}

[data-bg="dark"] .cursos-card__title,
[data-bg="dark"] .cursos-card__preco {
  color: var(--color-text-inverse);
}

[data-bg="dark"] .cursos-card__resumo,
[data-bg="dark"] .cursos-card__objetivo {
  color: var(--color-text-muted);
}

[data-bg="dark"] .cursos-single-card {
  background: var(--color-surface-dark);
  border-color: var(--color-border-subtle);
}

[data-bg="dark"] .cursos-single-card__title,
[data-bg="dark"] .cursos-single-card__preco {
  color: var(--color-text-inverse);
}