/* ============================================================
   index.css — Observatório / Home
   Mobile-first: base mobile → expand desktop (min-width)
   Complementa style.css sem reescrever tokens ou globais.
   ============================================================ */


/* ---- Hero: Campo Observável ---- */

.obs-field {
  min-height: 280px;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  justify-content: flex-end;
  isolation: isolate;
}

.obs-field::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 15%, rgba(11, 17, 24, 0.9) 88%);
  pointer-events: none;
}

.obs-field-inner {
  z-index: 1;
  max-width: 760px;
}

.obs-field-constellation {
  position: absolute;
  top: -8px;
  right: -34px;
  width: min(66vw, 260px);
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}

.obs-field-horizon {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 224, 193, 0.34), transparent);
}

.obs-field-horizon span {
  position: absolute;
  top: 50%;
  left: 72%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--obs-marfim);
  box-shadow: 0 0 18px 5px rgba(214, 178, 109, 0.55);
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  .obs-field {
    min-height: 360px;
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-2xl);
  }

  .obs-field-constellation {
    top: 50%;
    right: clamp(24px, 6vw, 96px);
    width: min(34vw, 430px);
    opacity: 0.5;
    transform: translateY(-50%);
  }

  .obs-field-horizon span { left: 78%; }
}

/* Texto editorial: ligeiramente menor no mobile */
.obs-field-prose {
  max-width: 19ch;
  font-size: clamp(1.75rem, 8vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .obs-field-prose {
    max-width: 22ch;
    font-size: clamp(2.35rem, 4.4vw, 4rem);
    line-height: 1.12;
  }
}

.obs-field-sub {
  max-width: 38rem;
  margin-top: var(--space-4);
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* Métricas: grid 3 colunas no mobile → flex no desktop */
.obs-field-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-4);
}

@media (min-width: 640px) {
  .obs-field-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-top: var(--space-5);
  }
}

/* Números das métricas: menores no mobile */
.obs-field-metric strong {
  font-size: var(--text-xl);   /* 24px */
}

@media (min-width: 768px) {
  .obs-field-metric strong {
    font-size: var(--text-2xl); /* 32px */
  }
}


/* ---- Espaçamento de seções ---- */

.obs-section {
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .obs-section {
    margin-bottom: var(--space-10);
  }
}


/* ---- Sinais: 2×2 no mobile ---- */

/* Sobrescreve auto-fit do core: mantém 2 colunas em telas pequenas */
.obs-signals {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .obs-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .obs-signals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Números dos sinais/horizonte: menores no mobile */
.obs-signal-card strong,
.obs-horizon-card strong {
  font-size: var(--text-2xl);  /* 32px */
}

@media (min-width: 768px) {
  .obs-signal-card strong,
  .obs-horizon-card strong {
    font-size: var(--text-3xl); /* 44px */
  }
}


/* ---- Constelações: mínimo seguro no mobile ---- */

/* Garante que 1 coluna funcione bem em telas até 360px */
.obs-constellation-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}



/* ---- Horizonte: padding reduzido no mobile ---- */

.obs-horizon-card {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .obs-horizon-card {
    padding: var(--space-5);
  }
}


/* ---- Pipeline: padding ajustado no mobile ---- */

.obs-pipeline-stage {
  padding: var(--space-4);
}

@media (min-width: 640px) {
  .obs-pipeline-stage {
    padding: var(--space-4) var(--space-5);
  }
}