/* ==========================================================================
   components.css — nav, botões, cards, footer e componentes reutilizáveis
   ========================================================================== */

/* --- Section label (eyebrow com linha decorativa) ---------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono-light);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent);
}
.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.section--inverse .section-label { color: var(--color-paper-70); }

/* --- Buttons (.btn variantes) ------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono-regular);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-mono-sm);
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-sharp);   /* square-edged (Design.md) */
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary { /* default ink */ }
.btn--primary:hover { background: var(--color-rust); border-color: var(--color-rust); }

.btn--outlined {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--outlined:hover { background: var(--color-ink); color: var(--color-paper); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
  padding-inline: 0;
}
.btn--ghost:hover { color: var(--color-rust); }

/* Variantes sobre fundo escuro */
.on-inverse .btn--outlined,
.section--inverse .btn--outlined {
  color: var(--color-paper);
  border-color: var(--color-paper-45);
}
.on-inverse .btn--outlined:hover,
.section--inverse .btn--outlined:hover { background: var(--color-paper); color: var(--color-ink); }
.section--inverse .btn--primary { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.section--inverse .btn--primary:hover { background: var(--color-rust); border-color: var(--color-rust); color: var(--color-paper); }

/* Link com seta — padrão "Saiba mais →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-mono-sm);
  text-transform: uppercase;
  color: var(--color-ink);
  position: relative;
  padding-bottom: 2px;
}
.link-arrow::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover { color: var(--color-rust); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.section--inverse .link-arrow { color: var(--color-paper); }
.section--inverse .link-arrow:hover { color: var(--color-paper); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-gutter);
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: var(--color-vellum);
  backdrop-filter: var(--vellum-blur);
  -webkit-backdrop-filter: var(--vellum-blur);
  border-bottom-color: var(--color-border-soft);
  padding-block: var(--space-sm);
}
/* Em páginas internas sem hero escuro, nav inicia legível */
.nav--solid {
  background: var(--color-vellum);
  backdrop-filter: var(--vellum-blur);
  -webkit-backdrop-filter: var(--vellum-blur);
  border-bottom-color: var(--color-border-soft);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.nav__logo { height: 28px; width: auto; display: block; }
.nav__logo--white { display: none; }

/* Nav inicia em hero escuro → logo branco até rolar */
.nav--on-dark:not(.nav--scrolled) .nav__logo--color { display: none; }
.nav--on-dark:not(.nav--scrolled) .nav__logo--white { display: block; }
.nav--on-dark:not(.nav--scrolled) .nav__link { color: var(--color-paper-70); }
.nav--on-dark:not(.nav--scrolled) .nav__link:hover { color: var(--color-paper); }
.nav--on-dark:not(.nav--scrolled) .btn--outlined { color: var(--color-paper); border-color: var(--color-paper-45); }
.nav--on-dark:not(.nav--scrolled) .btn--outlined:hover { background: var(--color-paper); color: var(--color-ink); }
.nav--on-dark:not(.nav--scrolled) .nav__toggle-bar { background: var(--color-paper); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.nav__link {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono-light);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-mono-sm);
  text-transform: uppercase;
  color: var(--color-ink-60);
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--color-rust); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav--on-dark:not(.nav--scrolled) .nav__link[aria-current="page"] { color: var(--color-paper); }

.nav__cta { flex-shrink: 0; }

/* Hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
}
.nav__toggle-bar {
  width: 22px; height: 1.5px; background: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

/* Overlay mobile fullscreen */
.nav__overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--color-paper);
  display: flex; flex-direction: column;
  padding: calc(var(--space-xxl) + 20px) var(--space-gutter) var(--space-xl);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-inout);
  visibility: hidden;
}
.nav__overlay.is-open { transform: translateY(0); visibility: visible; }
.nav__overlay-links { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-xl); }
.nav__overlay-links a {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif-light);
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border-soft);
  padding-bottom: var(--space-md);
}
.nav__overlay-links a:hover { color: var(--color-rust); }
.nav__overlay-foot { margin-top: auto; }
.nav__overlay-close {
  position: absolute; top: var(--space-lg); right: var(--space-gutter);
  font-family: var(--font-mono); font-size: var(--type-label);
  letter-spacing: var(--tracking-mono-sm); text-transform: uppercase;
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--space-lg);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; } }

/* Solution card */
.solution-card {
  border: var(--border-hairline);
  background: var(--color-paper);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.solution-card:hover { border-color: var(--color-ink); transform: translateY(-4px); }
.solution-card__icon { width: 40px; height: 40px; color: var(--color-sepia); }
.solution-card__index {
  font-family: var(--font-mono); font-size: var(--type-label-sm);
  letter-spacing: var(--tracking-mono); color: var(--color-ink-45);
}
.solution-card h3 { font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.solution-card p { color: var(--color-ink-60); font-size: var(--type-body-sm); line-height: var(--leading-relaxed); }
.solution-card .link-arrow { margin-top: auto; }

/* Metric card */
.metric-card { display: flex; flex-direction: column; gap: var(--space-xs); }
.metric-card__value {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif-light);
  font-size: var(--type-display-md);
  line-height: 1;
  color: var(--color-ink);
}
.section--inverse .metric-card__value { color: var(--color-paper); }
.metric-card__label {
  font-family: var(--font-mono); font-size: var(--type-label);
  letter-spacing: var(--tracking-mono-sm); text-transform: uppercase;
  color: var(--color-accent);
}
.section--inverse .metric-card__label { color: var(--color-accent-light); }
.metric-card__sublabel { font-size: var(--type-body-sm); color: var(--color-ink-60); }
.section--inverse .metric-card__sublabel { color: var(--color-paper-70); }

/* Project card */
.project-card {
  display: flex; flex-direction: column;
  border: var(--border-hairline);
  background: var(--color-paper);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}
.project-card:hover { border-color: var(--color-ink); }
.project-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-stone); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.project-card__meta { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.project-card__meta span {
  font-family: var(--font-mono); font-size: var(--type-label-sm);
  letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--color-ink-45);
}
.project-card h3 { font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.project-card__status {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--type-label-sm);
  letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--color-ink-60);
  margin-top: auto;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-rust);
  box-shadow: 0 0 0 4px rgba(154, 52, 18, 0.15);   /* soft-glow status dot */
}
.status-dot--operational { background: #4D7C3A; box-shadow: 0 0 0 4px rgba(77, 124, 58, 0.15); }
.status-dot--construction { background: var(--color-sepia); box-shadow: 0 0 0 4px rgba(120, 53, 15, 0.15); }
.status-dot--development { background: var(--color-ink-45); box-shadow: 0 0 0 4px rgba(28, 25, 23, 0.10); }

/* News card */
.news-card {
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: var(--border-hairline);
}
.news-card__meta { display: flex; gap: var(--space-md); align-items: center; }
.news-card__date, .news-card__tag {
  font-family: var(--font-mono); font-size: var(--type-label-sm);
  letter-spacing: var(--tracking-mono-sm); text-transform: uppercase;
}
.news-card__tag { color: var(--color-rust); }
.news-card__date { color: var(--color-ink-45); }
.news-card h3 {
  font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular);
  transition: color var(--dur-fast) var(--ease-out);
}
.news-card a:hover h3 { color: var(--color-rust); }

/* Pillar item */
.pillar-item { display: flex; flex-direction: column; gap: var(--space-sm); }
.pillar-item__icon { width: 32px; height: 32px; color: var(--color-sepia); }
.section--inverse .pillar-item__icon { color: var(--color-paper-70); }
.pillar-item h4 { font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.pillar-item p { font-size: var(--type-body-sm); color: var(--color-ink-60); }
.section--inverse .pillar-item p { color: var(--color-paper-70); }

/* Divisores verticais entre métricas */
.metric-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: var(--space-xl);
}
.metric-row > * { position: relative; }
.metric-row > * + *::before {
  content: ""; position: absolute; left: calc(var(--space-xl) / -2); top: 4px; bottom: 4px;
  width: 1px; background: var(--color-border);
}
.section--inverse .metric-row > * + *::before { background: var(--color-paper-45); }
@media (max-width: 860px) {
  .metric-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .metric-row > * + *::before { display: none; }
}
@media (max-width: 440px) { .metric-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--color-ink);
  color: var(--color-paper-70);
  position: relative;
  z-index: var(--z-content);
  padding-top: var(--space-section);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.footer__brand-mark { display: inline-flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.footer__logo { height: 26px; width: auto; display: block; }
.footer__tagline {
  font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-serif-light);
  font-size: var(--type-display-sm); color: var(--color-paper); max-width: 22ch; line-height: var(--leading-snug);
}
.footer__col h5 {
  font-family: var(--font-mono); font-weight: var(--weight-mono-regular);
  font-size: var(--type-label-sm); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--color-paper-45); margin-bottom: var(--space-md);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__col a { font-size: var(--type-body-sm); color: var(--color-paper-70); transition: color var(--dur-fast) var(--ease-out); }
.footer__col a:hover { color: var(--color-paper); }
.footer__base {
  border-top: 1px solid var(--color-paper-45);
  padding-block: var(--space-lg) var(--space-xl);
  display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg);
  align-items: center; justify-content: space-between;
}
.footer__legal {
  font-family: var(--font-mono); font-size: var(--type-label-sm);
  letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--color-paper-45);
  display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center;
}
.footer__legal a:hover { color: var(--color-paper); }
.footer__langs { display: flex; gap: var(--space-md); }
.footer__langs button {
  font-family: var(--font-mono); font-size: var(--type-label-sm);
  letter-spacing: var(--tracking-mono-sm); color: var(--color-paper-45);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__langs button:hover, .footer__langs button[aria-pressed="true"] { color: var(--color-paper); }
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-lg); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 440px) { .footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Form controls (contact)
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-sm); }
.field label {
  font-family: var(--font-mono); font-size: var(--type-label-sm);
  letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--color-ink-60);
}
.field input, .field select, .field textarea {
  background: var(--color-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-control);
  padding: 0.85rem var(--space-md);
  font-weight: var(--weight-sans-light);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-ink); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 140px; }