/* Atrações: destaques grandes com a placa de altura sobre a foto, o resto em lista compacta,
   filtro por tipo e a placa de regras. Mobile primeiro. */

/* Topo */
.parque-topo { padding-bottom: var(--e-4); }
.parque-topo__titulo span { color: var(--piscina-700); white-space: nowrap; }

/* Filtro: links sem JS, botões com aria-pressed com JS. No celular, grade 2 x 2 para os quatro caberem sem sobra. */
.parque-filtro { margin-top: var(--e-5); }
.parque-filtro .chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); overflow: visible; }
.parque-filtro .chip {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  text-decoration: none;
  transition: border-color 160ms var(--facil), background-color 160ms var(--facil), color 160ms var(--facil);
}
.parque-filtro .chip:hover { border-color: var(--mar-500); }
.parque-filtro .chip[aria-current="page"],
.parque-filtro .chip[aria-pressed="true"] { background: var(--mar-900); border-color: var(--mar-900); color: var(--areia-50); }

/* Grupos por tipo, separados pelo picote do ingresso */
.grupo { padding-block: var(--e-6); }
.grupo:not([hidden]) ~ .grupo:not([hidden]) { border-top: 2px dashed var(--linha); }
.grupo__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); font-size: var(--t-xl); }
.grupo__conta { font: 600 var(--t-sm)/1.2 var(--fonte-texto); letter-spacing: 0; color: var(--texto-suave); }

/* Atração: no HTML vem nome, altura, descrição e foto; o grid põe a foto em cima */
.atracao { display: grid; align-content: start; }
.atracao__foto {
  grid-area: foto; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-m); background: var(--piscina-100);
}
.atracao__nome { grid-area: nome; }
.atracao__desc { grid-area: desc; color: var(--texto-suave); }

.altura { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); grid-area: altura; }
.altura .icon { width: 1.125rem; height: 1.125rem; }
.altura__rotulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.altura__valor { font-weight: 700; }

/* Destaques: foto grande, placa de altura colada na foto como na entrada do brinquedo */
.destaques { display: grid; gap: var(--e-6); margin-top: var(--e-5); }
.atracao--destaque { grid-template-areas: "foto" "nome" "desc"; }
.atracao--destaque .atracao__foto { aspect-ratio: 3 / 2; }
.atracao--destaque .atracao__nome { margin-top: var(--e-4); font-size: var(--t-xl); }
.atracao--destaque .atracao__desc { margin-top: var(--e-2); max-width: 46ch; }
.atracao--destaque .altura {
  grid-area: foto; z-index: 1; align-self: start; justify-self: start;
  margin: var(--e-3); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-p); background: var(--superficie); color: var(--texto);
}
.atracao--destaque .altura--medida { background: var(--acao); color: var(--mar-950); }
.atracao--destaque .altura__valor { font: 800 var(--t-lg)/1.1 var(--fonte-titulo); }

/* Demais: linha compacta com miniatura */
.compactas { margin-top: var(--e-6); border-top: 2px solid var(--linha); }
.grupo__titulo + .compactas { margin-top: var(--e-5); }
.atracao--compacta {
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "foto nome" "foto altura" "foto desc";
  column-gap: var(--e-4);
  padding-block: var(--e-4);
  border-bottom: 2px solid var(--linha);
}
.atracao--compacta .atracao__foto { align-self: start; border-radius: var(--r-p); }
.atracao--compacta .atracao__nome { font-size: var(--t-lg); }
.atracao--compacta .altura { margin-top: var(--e-1); font-size: var(--t-sm); color: var(--texto); }
.atracao--compacta .altura .icon { color: var(--piscina-700); }
.atracao--compacta .altura__rotulo { color: var(--texto-suave); }
.atracao--compacta .atracao__desc { margin-top: var(--e-1); font-size: var(--t-sm); }

/* Categoria sem atração cadastrada */
.parque-vazio { padding-block: var(--e-6); }
.parque-vazio p:first-child { font: 700 var(--t-lg)/1.3 var(--fonte-titulo); }
.parque-vazio .link-seta { margin-top: var(--e-2); }

/* Regras das atrações */
.parque-restricoes { border-top: 2px dashed var(--linha); }
.restricoes { display: grid; gap: var(--e-5); }
.restricoes__texto > p:not(.rotulo) { margin-top: var(--e-3); color: var(--texto-suave); max-width: 46ch; }
.restricoes__texto .link-seta { color: var(--link); }
.placa { padding: var(--e-5); border-radius: var(--r-g); background: var(--mar-900); color: var(--areia-100); }
.placa > * + * { margin-top: var(--e-4); }
.placa__pesos { display: grid; gap: var(--e-3); padding-bottom: var(--e-4); border-bottom: 2px dashed var(--mar-700); }
.placa__pesos li { display: flex; align-items: baseline; gap: var(--e-3); }
.placa__pesos strong { font: 800 var(--t-2xl)/1 var(--fonte-titulo); letter-spacing: -0.02em; color: var(--sol-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.placa__pesos span { font-weight: 600; line-height: 1.35; color: var(--areia-50); }
.placa__regra {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-p);
  background: var(--mar-700); color: var(--areia-50); font-weight: 700;
}
.placa__regra .icon { margin-top: 0.15em; color: var(--sol-400); }

/* Fechamento: canhoto de ingresso. O picote fica na altura do bloco do botão (6rem). */
.parque-comprar { display: grid; gap: var(--e-6); }
.parque-comprar__texto > p { margin-top: var(--e-3); }
.parque-comprar__texto > p:first-of-type { color: var(--texto-suave); max-width: 40ch; }
.ingresso { --picote: calc(100% - 6rem - 1px); width: 100%; max-width: 26rem; }
.ingresso__topo { padding: var(--e-5) var(--e-5) var(--e-4); }
.ingresso__rotulo { font: 700 var(--t-sm)/1.2 var(--fonte-titulo); letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto-suave); }
.ingresso .preco { margin-top: var(--e-2); }
.ingresso__apartir { font-weight: 600; color: var(--texto-suave); }
.ingresso__nota { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--texto-suave); }
.ingresso__acao { padding: var(--e-5); }

@media (min-width: 48rem) {
  .parque-filtro .chips { display: flex; flex-wrap: wrap; }
  .parque-filtro .chip { width: auto; }

  .atracao--destaque .atracao__foto { aspect-ratio: 16 / 10; }
  .destaques { grid-template-columns: 1fr 1fr; column-gap: var(--e-6); row-gap: var(--e-7); }
  /* Número ímpar de destaques: o primeiro vira faixa larga, foto de um lado e texto do outro */
  .atracao--destaque:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "foto ." "foto nome" "foto desc" "foto .";
    column-gap: var(--e-6);
  }
  .atracao--destaque:first-child:nth-last-child(odd) .atracao__foto { aspect-ratio: 4 / 3; }
  .atracao--destaque:first-child:nth-last-child(odd) .atracao__nome { margin-top: 0; font-size: var(--t-2xl); }
  .atracao--destaque:first-child:nth-last-child(odd) .atracao__desc { margin-top: var(--e-3); font-size: var(--t-lg); }

  .compactas { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-6); border-top: 0; }
  .atracao--compacta { grid-template-columns: 8rem 1fr; }
  .compactas > :nth-child(-n + 2) { border-top: 2px solid var(--linha); }

  .ingresso { justify-self: start; }
}

@media (min-width: 64rem) {
  .parque-topo { padding-bottom: var(--e-5); }
  .grupo { padding-block: var(--e-7); }
  .grupo__titulo { font-size: var(--t-2xl); }
  .atracao--compacta { grid-template-columns: 9rem 1fr; }

  .restricoes { grid-template-columns: 1fr 1.15fr; gap: var(--e-7); align-items: start; }

  .parque-comprar { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e-8); }
  .ingresso { width: 26rem; transform: rotate(-1.5deg); }
}