/* ADN Racing: layout das páginas do site. Cores e fontes vêm de tokens.css. */

/* Topo --------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cor-topo);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 64px;
}
.topo__logo img {
  height: 30px;
  width: auto;
}
.topo__menu {
  display: flex;
  gap: var(--esp-5);
  align-items: center;
}
.topo__menu a {
  font-family: var(--fonte-numero);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--cor-texto-suave);
  transition: color var(--transicao);
}
.topo__menu a:hover { color: var(--cor-texto); }
.topo__menu .botao { color: var(--cor-texto); }

@media (max-width: 760px) {
  .topo__menu a:not(.botao) { display: none; }
}

/* Abertura ----------------------------------------------------------- */

.abertura {
  padding-block: var(--esp-7) var(--esp-8);
  background: linear-gradient(180deg, var(--cor-abertura) 0%, var(--adn-preto) 85%);
  overflow: hidden;
}
.abertura .quadriculado--grande {
  margin-bottom: var(--esp-6);
}
.abertura__rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
}
.abertura__rodape img { height: 26px; width: auto; }
.abertura__linha {
  flex: 1;
  height: 2px;
  background: var(--cor-borda);
}
.abertura__acoes {
  display: flex;
  gap: var(--esp-4);
  flex-wrap: wrap;
  margin-top: var(--esp-6);
}

/* Seções ------------------------------------------------------------- */

.secao {
  padding-block: var(--esp-8);
  border-top: 1px solid var(--cor-borda);
}
.secao__cabeca {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  margin-bottom: var(--esp-6);
  flex-wrap: wrap;
}
.secao__cabeca .quadriculado {
  flex: 1;
  min-width: 140px;
}

/* Sobre nós ---------------------------------------------------------- */

.sobre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-7);
  align-items: center;
}
.sobre__texto p { margin: 0 0 var(--esp-4); text-align: justify; hyphens: auto; }
.sobre__marca {
  display: grid;
  gap: var(--esp-5);
  justify-items: start;
}
.sobre__marca img { width: min(100%, 360px); }

@media (max-width: 860px) {
  .sobre { grid-template-columns: 1fr; gap: var(--esp-6); }
}

/* Experiência -------------------------------------------------------- */

.experiencia {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--esp-7);
  align-items: center;
}
.experiencia__grupos {
  display: grid;
  gap: var(--esp-5);
}
.experiencia__foto {
  border-radius: var(--raio);
}
@media (max-width: 860px) {
  .experiencia { grid-template-columns: 1fr; }
}

/* Carros ------------------------------------------------------------- */

.carros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--esp-5);
}

/* Calendário --------------------------------------------------------- */

.calendario__aviso {
  display: flex;
  gap: var(--esp-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--esp-6);
  color: var(--cor-texto-suave);
}
.calendario__estado {
  margin-bottom: var(--esp-7);
}
.calendario__estado h3 {
  margin-bottom: var(--esp-4);
}
.calendario__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--esp-4);
}

/* Rodapé ------------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--cor-borda);
  padding-block: var(--esp-7) var(--esp-6);
  color: var(--cor-texto-suave);
  font-size: var(--tipo-pequeno);
}
.rodape__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-4);
  flex-wrap: wrap;
}
.rodape img { height: 26px; width: auto; }

/* Página de evento ----------------------------------------------------- */

.evento-capa {
  position: relative;
  min-height: clamp(420px, 70vh, 640px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--esp-8) var(--esp-7);
  background:
    linear-gradient(180deg, transparent 0%, var(--cor-fundo) 92%),
    var(--foto) center / cover no-repeat,
    var(--cor-superficie);
}
.evento-capa__conteudo {
  display: grid;
  gap: var(--esp-2);
  justify-items: start;
}
.evento-capa__etiqueta { margin-bottom: var(--esp-3); }
.evento-capa__dia {
  font-family: var(--fonte-titulo);
  font-size: var(--tipo-display);
  line-height: 1;
  color: var(--cor-destaque);
}
.evento-detalhes {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--esp-7);
  align-items: start;
}
.evento-pista {
  display: grid;
  gap: var(--esp-5);
  padding: var(--esp-6);
  background: var(--cor-superficie);
  border-radius: var(--raio);
}
.evento-pista__tracado {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}
.evento-fatos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
}
.evento-fatos dd { margin: 0; }
.evento-incluso {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin-top: var(--esp-5);
}
.evento-passos {
  display: grid;
  gap: var(--esp-3);
  padding-left: var(--esp-5);
  margin: var(--esp-5) 0 var(--esp-6);
  max-width: 70ch;
}
.evento-passos li::marker {
  font-family: var(--fonte-numero);
  font-weight: 700;
  color: var(--cor-destaque);
}
@media (max-width: 860px) {
  .evento-detalhes { grid-template-columns: 1fr; gap: var(--esp-6); }
}

/* Posicionamento: frase da abertura, equipe campeã e resenha ------------ */

.abertura__texto {
  max-width: 46ch;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--cor-texto-suave);
  margin: var(--esp-5) 0 0;
}
.experiencia .lista-check,
.pilares .lista-check { margin-block: var(--esp-4) var(--esp-2); }
.pilares {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--esp-7);
  align-items: start;
}
.resenha { background: var(--cor-superficie); }
.resenha .container { display: grid; gap: var(--esp-4); max-width: 900px; }
.resenha p { max-width: 62ch; font-size: 1.15rem; margin: 0; }
@media (max-width: 860px) {
  .pilares { grid-template-columns: 1fr; gap: var(--esp-6); }
}

/* Página de carro ------------------------------------------------------ */

.carro-capa {
  position: relative;
  padding-block: var(--esp-6) var(--esp-7);
  background: linear-gradient(180deg, var(--cor-abertura) 0%, var(--cor-fundo) 90%);
  overflow: hidden;
}
.carro-capa .container { position: relative; }
.carro-capa__marca-dagua {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: clamp(3rem, 15vw, 11rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cor-marca-dagua);
  pointer-events: none;
}
.carro-galeria { position: relative; }
.carro-galeria__grande {
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  filter: drop-shadow(0 30px 24px var(--sombra-carro));
}
.carro-galeria__tira {
  display: flex;
  gap: var(--esp-3);
  justify-content: center;
  margin-top: var(--esp-3);
}
.carro-galeria__mini {
  width: 96px;
  padding: var(--esp-1);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio);
  cursor: pointer;
}
.carro-galeria__mini[aria-pressed="true"] { border-color: var(--cor-destaque); }
.carro-capa__titulo {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--esp-5);
  flex-wrap: wrap;
  margin-top: var(--esp-5);
}
.carro-capa__titulo > div { display: grid; gap: var(--esp-2); }
.carro-detalhes {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--esp-7);
  align-items: start;
}
.carro-detalhes .evento-fatos { margin-top: var(--esp-5); }
.carro-valores { display: flex; flex-wrap: wrap; gap: var(--esp-5); }
.carro-correr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--esp-6);
  margin-block: var(--esp-5);
}
.carro-datas {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
  display: grid;
  gap: var(--esp-2);
}
.carro-datas a {
  display: block;
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-superficie);
  border-left: 4px solid var(--cor-destaque);
  border-radius: var(--raio);
  text-decoration: none;
  font-family: var(--fonte-numero);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.carro-datas a:hover { background: var(--cor-borda); }
.evento-proposta { display: grid; gap: var(--esp-4); }
.evento-proposta > p { max-width: 70ch; margin: 0; }
.evento-triagem { display: flex; gap: var(--esp-3); align-items: baseline; flex-wrap: wrap; color: var(--cor-texto-suave); }
@media (max-width: 860px) {
  .carro-detalhes { grid-template-columns: 1fr; gap: var(--esp-6); }
}