/* DOBRA CRONOGRAMA — Timeline de etapas numeradas (design neutro com tokens)
   Estrutura: .view-hm2-lp-cronograma > .views-view-responsive-grid
   Modelos visuais (ex.: lp_eventos_mod001) sobrescrevem via createIfNotExists. */

body:not(.path-admin) .view-hm2-lp-cronograma {
  background-color: transparent;
  padding: 0;
}

body:not(.path-admin) .view-hm2-lp-cronograma .views-view-responsive-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  position: relative !important;
}
body:not(.path-admin) .h2-secao.text-center .view-hm2-lp-cronograma .views-view-responsive-grid {
  justify-content: center !important;
}
body:not(.path-admin) .h2-secao.text-end .view-hm2-lp-cronograma .views-view-responsive-grid {
  justify-content: flex-end !important;
}





/* Cada etapa ocupa 25% (máx 4 por linha) */
/* Com gap de 20px entre 4 itens: 3×20=60px de gap; cada item = (100%-60px)/4 */
body:not(.path-admin) .view-hm2-lp-cronograma .views-view-responsive-grid__item {
  flex: 0 0 calc(25% - 15px) !important;
  max-width: calc(25% - 15px) !important;
  padding: 0 !important;
}



@media (max-width: 767px) {
  body:not(.path-admin) .view-hm2-lp-cronograma .views-view-responsive-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 40px !important;
  }
}

body:not(.path-admin) .view-hm2-lp-cronograma .views-view-responsive-grid__item {
  display: flex;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

body:not(.path-admin) .view-hm2-lp-cronograma .views-view-responsive-grid__item-inner {
  background-color: var(--hm2-surface-light, #f8f9fa);
  border: 1px solid var(--hm2-color-primary, #1a56db);
  border-radius: 8px;
  padding: 28px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body:not(.path-admin) .view-hm2-lp-cronograma .views-view-responsive-grid__item-inner:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Badge com número da etapa */
body:not(.path-admin) .view-hm2-lp-cronograma .views-field-field-etapa-numero {
  width: 80px;
  height: 80px;
  border: 2px solid var(--hm2-color-primary, #1a56db);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background-color: #fff;
  flex-shrink: 0;
  position: relative;
  border-radius: 4px;
}

body:not(.path-admin) .view-hm2-lp-cronograma .views-field-field-etapa-numero .field-content {
  font-family: var(--hm2-font-heading, sans-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hm2-color-primary, #1a56db);
  line-height: 1;
}

/* Título da etapa */
body:not(.path-admin) .view-hm2-lp-cronograma .views-field-title {
  margin-bottom: 10px;
}

body:not(.path-admin) .view-hm2-lp-cronograma .views-field-title .field-content,
body:not(.path-admin) .view-hm2-lp-cronograma .views-field-title a {
  font-family: var(--hm2-font-heading, sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hm2-color-heading, #111827);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  line-height: 1.2;
}

/* Descrição */
body:not(.path-admin) .view-hm2-lp-cronograma .views-field-field-etapa-descricao {
  margin-bottom: 14px;
}

body:not(.path-admin) .view-hm2-lp-cronograma .views-field-field-etapa-descricao .field-content {
  font-size: 0.85rem;
  color: var(--hm2-on-surface-muted, #6b7280);
  line-height: 1.65;
}

/* Dado em destaque */
body:not(.path-admin) .view-hm2-lp-cronograma .views-field-field-etapa-destaque .field-content {
  font-family: var(--hm2-font-heading, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hm2-color-primary, #1a56db);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}