/* course-archive.css — Catálogo de cursos (Tutor LMS)
   Hero réplica de Website/web/src/pages/cursos/index.astro (.page-header) */

/* Fundo da página: mesmo padrão escuro com gradiente radial usado no hero */
body.post-type-archive-courses {
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, oklch(35% 0.15 302 / 0.18) 0%, transparent 65%),
    var(--color-bg-dark);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.palatine-courses-hero {
  position: relative;
  padding-top: 130px;
  padding-bottom: var(--space-lg);
  overflow: hidden;
}

/* Transição gradual entre a imagem do hero e o fundo da página */
.palatine-courses-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--color-bg-dark));
  pointer-events: none;
  z-index: 1;
}

.palatine-courses-hero-bg {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at center, oklch(22% 0.06 302 / 0.25) 0%, transparent 75%),
    url('../images/cursos-list-concept.png');
  background-size: cover;
  background-position: center 75%;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}

.palatine-courses-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.palatine-courses-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.palatine-courses-title {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text-primary-dark);
  line-height: 1;
  margin: 0 0 var(--space-sm);
}

.palatine-courses-lead {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--color-text-secondary-dark);
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: 0;
}

/* ── Catálogo: filtros, ordenação e cards ─────────────────────────────────
   Aplica os tokens visuais da Palatine ao markup nativo do Tutor LMS
   (.tutor-course-filter, .tutor-form-select, .tutor-card), sem alterar
   estrutura, classes ou comportamento. */

/* Coluna de filtros: estica até a altura da grade de cursos e empurra
   "Limpar todos os filtros" para o final */
.course-archive-page .tutor-row {
  align-items: stretch;
}

.course-archive-page .tutor-course-filter-container {
  display: flex;
  flex-direction: column;
}

.course-archive-page .tutor-course-filter {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-archive-page .tutor-course-filter-form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-archive-page .tutor-widget-course-filter {
  margin-top: auto;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

/* Títulos dos widgets (Categoria, Tag, Nível, Preço) */
.course-archive-page .tutor-widget-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary-dark);
  letter-spacing: -0.01em;
}

/* Itens de filtro (checkboxes) */
.course-archive-page .tutor-list-item,
.course-archive-page .tutor-list-item label {
  color: var(--color-text-secondary-dark);
}

.course-archive-page .tutor-form-check-input {
  accent-color: var(--color-gold);
}

/* Dropdown de ordenação (.tutor-js-form-select) */
.course-archive-page .tutor-form-select,
.course-archive-page select.tutor-form-control {
  background-color: var(--color-bg-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
  color: var(--color-text-primary-dark) !important;
}

.course-archive-page .tutor-form-select-dropdown {
  background-color: var(--color-surface-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
}

/* Campo de busca — mesma identidade visual do dropdown de ordenação
   (compartilha a classe .tutor-form-control, então herda o mesmo
   padding/altura; aqui igualamos fundo, borda e cor do texto) */
.course-archive-page .tutor-widget-search .tutor-form-control {
  background-color: var(--color-bg-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
  color: var(--color-text-primary-dark) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 16px !important;
  line-height: 22.4px !important;
}

.course-archive-page .tutor-widget-search .tutor-form-control::placeholder {
  color: var(--color-text-secondary-dark);
}

.course-archive-page .tutor-widget-search .tutor-form-icon {
  color: var(--color-text-secondary-dark);
}

/* Botões: tipografia da identidade Palatine (Cinzel, uppercase) */
.course-archive-page .tutor-btn {
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

/* "Limpar todos os filtros" — estilo secundário (contorno) */
.course-archive-page .tutor-course-filter-form .tutor-btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--color-border-dark) !important;
  color: var(--color-text-primary-dark) !important;
}

.course-archive-page .tutor-course-filter-form .tutor-btn-outline-primary:hover {
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}

/* Badge de categoria sobre a thumbnail do card, à esquerda do botão de
   favoritos — réplica de .badge-categoria do site Astro */
.course-archive-page .tutor-course-thumbnail {
  position: relative;
}

.course-archive-page .palatine-card-badge-categoria {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid oklch(76% 0.14 80 / 0.35);
  background: oklch(76% 0.14 80 / 0.08);
  color: var(--color-gold);
}

/* Cards de curso — réplica do efeito hover de .curso-card do site Astro */
.course-archive-page .tutor-card {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.course-archive-page .tutor-card:hover {
  border-color: var(--color-gold);
  background-color: oklch(16% 0.02 302 / 0.8);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px oklch(76% 0.14 80 / 0.2),
    0 0 20px oklch(76% 0.14 80 / 0.12),
    0 8px 28px oklch(0% 0 0 / 0.35);
}

.course-archive-page .tutor-card-footer {
  border-top: 1px solid var(--color-border-dark);
}

.course-archive-page .tutor-course-name a {
  font-family: var(--font-serif);
  color: var(--color-text-primary-dark);
  text-decoration: none;
}

.course-archive-page .tutor-meta,
.course-archive-page .tutor-meta-icon,
.course-archive-page .tutor-meta-value,
.course-archive-page .tutor-meta a {
  color: var(--color-text-secondary-dark);
}

.course-archive-page .tutor-color-black {
  color: var(--color-text-primary-dark) !important;
}

/* "Comece a estudar" / "Enroll Course" — estilo primário (dourado) */
.course-archive-page .tutor-card-footer .tutor-btn {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-bg-dark) !important;
}

.course-archive-page .tutor-card-footer .tutor-btn:hover {
  background-color: var(--color-gold-hover) !important;
  border-color: var(--color-gold-hover) !important;
  transform: translateY(-1px);
}