/* Bloco 5: Nona College Prep (azul-marinho com listras da bandeira) */

.prep { background: var(--marinho); color: var(--creme); }

.prep::before,
.prep::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.125rem;
  background: repeating-linear-gradient(to bottom, var(--vermelho) 0 3px, var(--creme-claro) 3px 6px);
}
.prep::before { top: 0; }
.prep::after { bottom: 0; }

.prep { padding-block: calc(var(--secao) + 1.125rem); }

.prep-intro { display: grid; gap: 1.5rem; align-items: end; }
.prep-intro .corpo { color: var(--creme); }

.prep-foto { margin-top: clamp(2rem, 5vw, 3.5rem); overflow: hidden; border-radius: 0.25rem; aspect-ratio: 16 / 9; }
.prep-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* Faixa de dados */

.faixa { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.5rem; border-block: 2px solid var(--creme-claro); }
.faixa li { padding: 1.25rem 1rem 1.25rem 0; font: 400 clamp(1.25rem, 5vw, 1.875rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.faixa li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--linha); }
.faixa li:nth-child(n + 3) { border-top: 1px solid var(--linha); }
.faixa b { font-weight: 400; color: var(--pessego); }

/* Pilares e vídeos */

.prep-corpo { display: grid; gap: 3rem; margin-top: clamp(3rem, 7vw, 5rem); align-items: start; }

.pilares li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--linha);
  font: 700 1.125rem/1.25 var(--painel);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.pilares li:last-child { border-bottom: 1px solid var(--linha); }
.pilares svg { flex: none; width: 2.25rem; height: 2.25rem; color: var(--laranja); }
.pilares small { display: block; margin-top: 0.15rem; font: 500 0.8125rem/1.3 var(--texto); letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--creme) 78%, var(--marinho)); }

.abas-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }

.aba {
  flex: 1 1 11rem;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  background: transparent;
  color: var(--creme);
  border: 2px solid var(--linha);
  border-radius: 0.25rem;
  font: 700 0.8125rem/1.25 var(--painel);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.aba[aria-selected="true"] { background: var(--creme); color: var(--marinho-fundo); border-color: var(--creme); }
@media (hover: hover) { .aba[aria-selected="false"]:hover { border-color: var(--creme); } }

.painel-vertical { display: grid; place-items: center; padding: 1rem; background: var(--marinho-fundo); border-radius: 0.25rem; }
.painel-vertical video {
  width: auto;
  height: min(32rem, 70svh);
  aspect-ratio: 9 / 16;
  border: 5px solid var(--preto);
  border-radius: 1.25rem;
}

@media (min-width: 768px) {
  .faixa { grid-template-columns: repeat(4, 1fr); }
  .faixa li { padding: 1.5rem 1.25rem; border-left: 1px solid var(--linha); }
  .faixa li:first-child { padding-left: 0; border-left: 0; }
  .faixa li:nth-child(n + 3) { border-top: 0; }
  .prep-foto { aspect-ratio: 2.6 / 1; }
}

@media (min-width: 960px) {
  .prep-intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); }
  .prep-corpo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); }
}

/* Galeria que desliza */

.galeria { margin-top: clamp(3rem, 7vw, 5rem); }

.galeria-btns { display: none; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1rem; }

.galeria-btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: transparent;
  color: var(--creme);
  border: 2px solid var(--creme);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s, transform 0.25s var(--ease);
}
.galeria-btn svg { width: 1.375rem; height: 1.375rem; }
.galeria-btn:active:not(:disabled) { transform: scale(0.94); }
.galeria-btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .galeria-btn:hover:not(:disabled) { background: var(--creme); color: var(--marinho-fundo); } }

.galeria-trilho {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2)) 1rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.galeria-trilho li { flex: 0 0 min(78vw, 26rem); scroll-snap-align: start; }
.galeria figure { position: relative; overflow: hidden; border-radius: 0.25rem; aspect-ratio: 4 / 3; background: var(--marinho-fundo); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.5rem 0.85rem;
  background: var(--preto);
  font: 700 0.75rem/1.2 var(--painel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .galeria-btns { display: flex; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
}