/* Pagina Projetos. Prefixo: projetos-. Depende de site.css (tokens e componentes). */

/* Hero */
.projetos-hero { padding-block: var(--space-8); }
.projetos-hero .eyebrow { margin-bottom: var(--space-4); }
.projetos-hero__title { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.projetos-hero__tagline { margin-top: var(--space-5); }
.projetos-hero__sub { margin-top: var(--space-3); color: var(--ink-500); max-width: 52ch; }

/* Indice de projetos (links reais para as ancoras) */
.projetos-index ul { border-top: 1px solid var(--line); }
.projetos-index li { border-bottom: 1px solid var(--line); }
.projetos-index__link {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: 64px; padding-block: var(--space-3); text-decoration: none; color: var(--navy-900);
  transition: color var(--dur) ease, padding var(--dur) var(--ease);
}
.projetos-index__year { color: var(--ink-500); font-size: 0.9375rem; }
.projetos-index__name { font-weight: 500; }
.projetos-index__link i { font-size: 1.25rem; color: var(--navy-700); transition: transform 300ms var(--ease); }
.projetos-index__link:hover { color: var(--navy-700); padding-left: var(--space-2); }
.projetos-index__link:hover i { transform: translate(3px, 3px); }

/* Lista de projetos: linhas editoriais, logo e ano na lateral */
.projetos-list > * + * { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.projetos-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-6) var(--space-8); scroll-margin-top: calc(var(--nav-h) + 24px); }
.projetos-item__side { display: flex; flex-direction: column; gap: var(--space-4); align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
.projetos-item__logo { height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.projetos-item__year { font-size: 2rem; letter-spacing: -0.02em; color: var(--navy-700); line-height: 1; }
.projetos-item__main > * + * { margin-top: var(--space-4); }
.projetos-item__main h3 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.02em; }
.projetos-item__short { font-size: 1.25rem; line-height: 1.45; color: var(--navy-900); max-width: 52ch; }
.projetos-item__main > p { max-width: 65ch; }
.projetos-item__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-6) var(--space-7); padding-top: var(--space-4); }
.projetos-item__cols h4 { margin-bottom: var(--space-4); font-size: 0.9375rem; color: var(--ink-500); font-weight: 500; }
.projetos-item__tags { gap: var(--space-2); }
.projetos-item__tags .tag { transition: background-color var(--dur) ease, border-color var(--dur) ease; }
.projetos-item:hover .projetos-item__tags .tag { border-color: var(--navy-500); }
@media (max-width: 860px) {
  .projetos-item { grid-template-columns: minmax(0, 1fr); }
  .projetos-item__side { position: static; flex-direction: row; align-items: center; justify-content: space-between; }
  .projetos-item__cols { grid-template-columns: minmax(0, 1fr); }
}

/* Numeros: sem caixas, divisores verticais finos */
.projetos-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.projetos-stats__item { padding: 0 var(--space-5); border-left: 1px solid rgb(255 255 255 / 0.2); }
.projetos-stats__item:first-child { padding-left: 0; border-left: 0; }
.projetos-stats__item .stat__value { display: block; font-size: clamp(2.5rem, 4.6vw, 4rem); color: #fff; font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.projetos-stats__item h3 { margin-top: var(--space-4); font-size: 1.0625rem; }
.projetos-stats__item p { margin-top: var(--space-1); font-size: var(--text-small); }
@media (max-width: 860px) {
  .projetos-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
  .projetos-stats__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 460px) {
  .projetos-stats { grid-template-columns: minmax(0, 1fr); }
  .projetos-stats__item { padding: 0; border-left: 0; }
}

/* Areas: bento 3 celulas, a primeira ocupa as 2 linhas */
.projetos-areas { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--space-5); }
.projetos-areas__item {
  padding: var(--space-6); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.projetos-areas__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.projetos-areas__item > i { display: block; font-size: 2rem; color: var(--navy-700); margin-bottom: var(--space-4); }
.projetos-areas__item h3 { margin-bottom: var(--space-2); }
.projetos-areas__item p { max-width: 44ch; }
.projetos-areas__tags { margin-top: var(--space-4); gap: var(--space-2); }
.projetos-areas__item--main { grid-row: span 2; background: var(--navy-700); border-color: var(--navy-700); display: flex; flex-direction: column; }
.projetos-areas__item--main > i { font-size: 3rem; color: #fff; margin-bottom: auto; padding-bottom: var(--space-8); }
.projetos-areas__item--main h3 { color: #fff; font-size: var(--text-h2); }
.projetos-areas__item--main p { color: #DCE6F8; }
.projetos-areas__item--main .check-list { margin-top: var(--space-5); color: #fff; }
.projetos-areas__item--main .check-list > li::before { background: #fff; }
@media (max-width: 860px) {
  .projetos-areas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .projetos-areas__item--main { grid-row: auto; }
  .projetos-areas__item--main > i { padding-bottom: var(--space-4); }
}