/* ==========================================================================
   pages/internal.css — padrões compartilhados das páginas internas
   ========================================================================== */

/* --- Page hero (cabeçalho de página interna) --------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--space-section) + 48px);
  padding-bottom: var(--space-section);
  overflow: hidden;
  z-index: var(--z-content);
}
.page-hero--media { color: var(--color-paper); min-height: 72svh; display: flex; align-items: flex-end; }
.page-hero__media { position: absolute; inset: -12% 0; z-index: 0; }
.page-hero__media img, .page-hero__media video { width: 100%; height: 124%; object-fit: cover; }
.page-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28,25,23,0.55), rgba(28,25,23,0.8)); }
.page-hero__inner { position: relative; z-index: 2; width: 100%; }
.page-hero__title {
  font-size: var(--type-display-lg); font-weight: var(--weight-serif-light);
  max-width: 18ch; margin-top: var(--space-lg);
}
.page-hero--media .page-hero__title { color: var(--color-paper); }
.page-hero__sub { margin-top: var(--space-lg); max-width: 56ch; }
.page-hero--media .page-hero__sub { color: var(--color-paper-70); }

/* Breadcrumb mono */
.crumb {
  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);
}
.page-hero--media .crumb { color: var(--color-paper-45); }

/* --- Two-column prose --------------------------------------------------- */
.prose-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-xxl); align-items: start; }
.prose-split p + p { margin-top: var(--space-md); }
@media (max-width: 860px) { .prose-split { grid-template-columns: 1fr; gap: var(--space-lg); } }

.prose p { color: var(--color-ink-60); line-height: var(--leading-relaxed); }
.prose p + p { margin-top: var(--space-md); }
.prose h2 { font-size: var(--type-display-md); font-weight: var(--weight-serif-light); margin-bottom: var(--space-md); }
.prose h3 { font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); margin-bottom: var(--space-sm); }

/* --- Timeline ----------------------------------------------------------- */
.timeline { border-left: var(--border-hairline); margin-left: var(--space-sm); }
.timeline__item { position: relative; padding: 0 0 var(--space-xl) var(--space-xl); }
.timeline__item::before {
  content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px;
  background: var(--color-rust); border-radius: 50%;
}
.timeline__year { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: var(--tracking-mono-sm); color: var(--color-sepia); }
.timeline__title { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); margin: var(--space-xs) 0 var(--space-sm); }
.timeline__text { color: var(--color-ink-60); font-size: var(--type-body-sm); max-width: 56ch; }

/* --- Team grid ---------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.team-card__photo { aspect-ratio: 3/4; overflow: hidden; background: var(--color-stone); filter: grayscale(1) contrast(1.05); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); margin-top: var(--space-md); }
.team-card__role { 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); margin-top: var(--space-xs); }
.team-card__link { display: inline-block; margin-top: 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-rust); }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

/* --- Process steps (horizontais) --------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); counter-reset: step; }
.step { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); }
.step__num { font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: var(--tracking-mono); color: var(--color-rust); }
.step h3 { font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); margin: var(--space-sm) 0; }
.step p { font-size: var(--type-body-sm); color: var(--color-ink-60); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* --- Detailed solution rows -------------------------------------------- */
.sol-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: center; padding-block: var(--space-section); border-top: var(--border-hairline); }
.sol-row:nth-child(even) .sol-row__media { order: 2; }
.sol-row__media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-stone); }
.sol-row__media img { width: 100%; height: 100%; object-fit: cover; }
.sol-row__specs { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); }
.sol-row__spec { display: flex; flex-direction: column; gap: 2px; }
.sol-row__spec dt { 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); }
.sol-row__spec dd { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
@media (max-width: 860px) { .sol-row { grid-template-columns: 1fr; gap: var(--space-lg); } .sol-row:nth-child(even) .sol-row__media { order: 0; } }

/* --- Filter bar --------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); border-bottom: var(--border-hairline); padding-bottom: var(--space-md); }
.filter-bar button {
  font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: var(--tracking-mono-sm);
  text-transform: uppercase; color: var(--color-ink-45); padding: var(--space-sm) var(--space-md);
  border: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.filter-bar button:hover { color: var(--color-ink); }
.filter-bar button[aria-pressed="true"] { color: var(--color-ink); border-color: var(--color-ink); }

/* --- Progress bars (ESG) ------------------------------------------------ */
.goal { padding-block: var(--space-lg); border-bottom: var(--border-hairline); }
.goal__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-sm); }
.goal__title { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.goal__pct { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: var(--tracking-mono-sm); color: var(--color-rust); }
.goal__track { height: 4px; background: var(--color-stone); position: relative; overflow: hidden; }
.goal__fill { position: absolute; inset: 0 auto 0 0; background: var(--color-ink); width: 0; transition: width 1.4s var(--ease-out); }
.goal.is-visible .goal__fill { width: var(--pct, 0%); }

/* --- Docs list ---------------------------------------------------------- */
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--border-hairline); }
.doc-row__name { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.doc-row__meta { 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); }

/* --- Offices ------------------------------------------------------------ */
.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.office h3 { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.office__tag { font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--color-rust); }
.office address { font-style: normal; color: var(--color-ink-60); font-size: var(--type-body-sm); line-height: var(--leading-relaxed); margin-top: var(--space-sm); }
@media (max-width: 860px) { .office-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* --- Contact layout ----------------------------------------------------- */
.contact-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-xxl); align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.form-grid .field--full { grid-column: 1 / -1; }
.form-status { font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: var(--tracking-mono-sm); color: var(--color-sepia); min-height: 1.2em; }
.contact-channels { display: flex; flex-direction: column; gap: var(--space-lg); }
.channel { padding: var(--space-lg); border: var(--border-hairline); }
.channel h3 { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.channel p { font-size: var(--type-body-sm); color: var(--color-ink-60); margin: var(--space-xs) 0 var(--space-sm); }
.channel a { font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: var(--tracking-mono-sm); color: var(--color-rust); }
@media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; gap: var(--space-xl); } .form-grid { grid-template-columns: 1fr; } }

/* --- Map placeholder ---------------------------------------------------- */
.map-frame { position: relative; aspect-ratio: 16/8; background: var(--color-surface-alt); border: var(--border-hairline); overflow: hidden; }
.map-frame svg { width: 100%; height: 100%; }
.map-dot { fill: var(--color-rust); }
.map-pulse { fill: none; stroke: var(--color-rust); opacity: 0.5; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: var(--type-display-lg); font-weight: var(--weight-serif-light); max-width: 20ch; margin-inline: auto; }
.cta-band .btn { margin-top: var(--space-lg); }

/* --- Awards ------------------------------------------------------------- */
.awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.award { border-top: var(--border-hairline); padding-top: var(--space-md); }
.award__year { font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: var(--tracking-mono-sm); color: var(--color-rust); }
.award h4 { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); margin: var(--space-xs) 0; }
.award p { font-size: var(--type-body-sm); color: var(--color-ink-60); }
@media (max-width: 860px) { .awards { grid-template-columns: 1fr; } }

/* --- Job list ----------------------------------------------------------- */
.job-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-bottom: var(--border-hairline); }
.job-row__title { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); }
.job-row__meta { 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); }
@media (max-width: 720px) { .job-row { grid-template-columns: 1fr; gap: var(--space-xs); } }

/* --- FAQ ---------------------------------------------------------------- */
.faq details { border-bottom: var(--border-hairline); padding-block: var(--space-md); }
.faq summary { font-family: var(--font-serif); font-size: var(--type-display-sm); font-weight: var(--weight-serif-regular); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-rust); }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--color-ink-60); margin-top: var(--space-sm); line-height: var(--leading-relaxed); max-width: 70ch; }