/* Páginas institucionais: Sobre Nós, Quem Somos, Seja Membro, Por Que GB.
   Só blocos que o site.css não tem. Usa os tokens de :root. */

/* .roster: equipe em linhas tipográficas (nome à esquerda, cargo + texto à direita). */
.roster { border-top: 1px solid var(--c-line); }
.roster__item { display: grid; gap: var(--sp-2); padding-block: var(--sp-4); border-bottom: 1px solid var(--c-line-soft); }
.roster__item .title { margin: 0; }
.roster__role { font-family: var(--f-mono); font-size: var(--fs-ui); letter-spacing: .12em; color: var(--c-ink-2); line-height: 1.7; margin: 0 0 var(--sp-2); }
.roster__item p:last-child { margin: 0; line-height: 1.85; }
@media (min-width: 60rem) { .roster__item { grid-template-columns: 1fr 1.6fr; gap: var(--sp-5); } }

/* .lineage: parede do legado, nome grande + descrição. */
.lineage { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.lineage li { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line-soft); line-height: 1.85; }
.lineage .title { margin: 0; }
@media (min-width: 60rem) { .lineage li { grid-template-columns: 1fr 1.6fr; gap: var(--sp-5); align-items: baseline; } }

/* .tri: três colunas curtas (visão, missão, valores). */
.tri { display: grid; gap: var(--sp-4); }
.tri > div { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
.tri .title { margin-bottom: var(--sp-2); }
.tri p { margin: 0; line-height: 1.85; }
@media (min-width: 48rem) { .tri { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

/* Tabelas: célula vazia e versão que empilha no celular (planos). */
.table td.is-empty { color: var(--c-ink-2); }
.table small { display: block; color: var(--c-ink-2); letter-spacing: var(--ls-ui); }
.table tr.is-featured td, .table tr.is-featured th { border-bottom-color: var(--c-line); }
.badge { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; background: var(--c-accent); color: #fff; font-size: var(--fs-ui); letter-spacing: .1em; line-height: 1.6; }

@media (max-width: 47.99rem) {
  .plans-wrap { border: 0; overflow: visible; }
  .table--plans { min-width: 0; display: block; }
  .table--plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--plans tbody, .table--plans tr, .table--plans th, .table--plans td { display: block; }
  .table--plans tr { border: 1px solid var(--c-line); margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .table--plans th { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 400; padding: .25rem 0; border: 0; white-space: normal; }
  .table--plans td { padding: .25rem 0; border: 0; }
  .table--plans td::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
}

/* .countries: lista de países em fluxo corrido. */
.countries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; line-height: 1.6; }
.countries li { white-space: nowrap; }
.countries li:not(:last-child)::after { content: "·"; margin-left: 1.1rem; color: var(--c-accent); }

.table-wrap { position: relative; } /* contém os .visually-hidden das células */

.section--dark .quote cite { color: rgba(255, 255, 255, .8); }
.lineage { margin-top: var(--sp-5); }

/* .reveal-row + .reveal-photo: foto de uma pessoa na linha da Parede do Legado
   (.lineage li) e da equipe (.roster__item). Com mouse (desktop) a foto aparece
   ao lado da descrição no hover ou no foco do teclado (a linha tem tabindex="0");
   em toque, ou em tela estreita, fica sempre visível como miniatura à esquerda.
   .reveal-photo--pending: espaço reservado enquanto a foto não chega. */
.reveal-photo { margin: 0; width: 5.5rem; background: var(--c-soft); overflow: hidden; }
.reveal-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.reveal-photo--pending { position: relative; aspect-ratio: 4 / 5; }
.reveal-photo--pending::after {
  content: ""; position: absolute; inset: 0; opacity: .12;
  background: url("/assets/img/logo/escudo-gracie-barra.svg") center / 42% no-repeat; filter: grayscale(1);
}
.reveal-row { position: relative; }
.reveal-row:focus { outline: none; }
.reveal-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.lineage li.reveal-row, .roster__item.reveal-row { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--sp-3); }
.reveal-row > .reveal-photo { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.reveal-row > :not(.reveal-photo) { grid-column: 2; }

@media (hover: hover) and (min-width: 60rem) {
  /* todas as linhas com a mesma grade, tenham foto ou não (ex.: Alysson) */
  .lineage li, .roster__item, .lineage li.reveal-row, .roster__item.reveal-row {
    grid-template-columns: 1fr 1.6fr; column-gap: var(--sp-5);
    padding-inline: var(--sp-2) 14rem; transition: background-color var(--dur-ui);
  }
  .reveal-row > :not(.reveal-photo) { grid-column: auto; }
  .reveal-row > .reveal-photo {
    position: absolute; right: var(--sp-2); top: 50%; z-index: 2; width: 12rem;
    opacity: 0; transform: translateY(-50%) scale(.88); transform-origin: 50% 50%; pointer-events: none;
    transition: opacity var(--dur-ui) var(--ease-out-slow), transform .35s var(--ease-out-slow);
  }
  .reveal-row:hover, .reveal-row:focus-visible, .reveal-row:focus-within { background: var(--c-soft); }
  .reveal-row:hover > .reveal-photo, .reveal-row:focus-visible > .reveal-photo, .reveal-row:focus-within > .reveal-photo {
    opacity: 1; transform: translateY(-50%) scale(1);
  }
  .reveal-photo--pending { background: #ececec; }
}

/* .orgs: organizações da rede GB (Sobre Nós), card preto com o logo oficial em cima.
   5 cards: 3 + 2 no desktop largo (grade de 6 colunas). */
.orgs { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
@media (min-width: 48rem) { .orgs { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }
@media (min-width: 72rem) {
  .orgs { grid-template-columns: repeat(6, 1fr); }
  .orgs > li { grid-column: span 2; }
  .orgs > li:nth-child(n+4) { grid-column: span 3; }
}
.org-card {
  background: var(--c-ink); color: var(--c-on-dark); padding: var(--sp-4) var(--sp-3);
  border-top: 3px solid var(--c-accent); line-height: 1.85;
}
.org-card__logo { margin: 0 0 var(--sp-3); height: 52px; display: flex; align-items: center; }
.org-card__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.org-card p { margin: 0; }

/* .seal: selo Escola Premium (Quem Somos), acima do título da seção. */
.seal { width: clamp(9rem, 28vw, 13rem); height: auto; margin: 0 auto var(--sp-4); }

/* .legend: legenda das turmas com o ícone oficial de cada turma (coluna fixa,
   para os nomes alinharem mesmo quando a turma não tem ícone próprio). */
.legend { list-style: none; margin: 0; padding: 0; }
.legend li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-2); align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--c-line-soft); line-height: 1.7;
}
.legend li:last-child { border-bottom: 1px solid var(--c-line-soft); }
.legend__icon { display: flex; align-items: center; }
.legend__icon img { height: 22px; width: auto; }
.legend__icon:empty::before { content: ""; width: 6px; height: 6px; background: var(--c-ink); margin-left: 2px; }

/* .grade-tabs: seletor discreto entre a imagem oficial da grade e a grade em HTML.
   Sem JS os dois painéis aparecem; o site.js esconde o painel não selecionado. */
.grade-tabs__list { display: flex; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.grade-tabs__tab {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; min-height: 44px; padding: .5rem .25rem;
  font-family: var(--f-body); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--c-ink-2);
  transition: color var(--dur-ui), border-color var(--dur-ui);
}
.grade-tabs__tab:hover { color: var(--c-ink); }
.grade-tabs__tab[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.grade-tabs__panel[hidden] { display: none; }
.grade-tabs__panel + .grade-tabs__panel { margin-top: var(--sp-4); } /* sem JS, os dois aparecem */
.js .grade-tabs__panel + .grade-tabs__panel { margin-top: 0; }

/* .grade: imagem oficial (abre em tamanho cheio ao tocar). */
.grade { margin: 0 auto; max-width: 44rem; }
.grade a { display: block; cursor: zoom-in; }
.grade img { width: 100%; height: auto; border: 1px solid var(--c-line-soft); }
.grade figcaption { margin-top: var(--sp-2); text-align: center; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--c-ink-2); }

/* .gn: grade nativa, reproduz a arte oficial (painel cinza, células claras com
   espaço entre elas, logos das turmas). No celular rola dentro do bloco com a
   coluna de horário fixa; a página não rola para o lado. */
.gn { --gn-panel: #e6e6e6; --gn-cell: #f7f7f7; background: var(--gn-panel); padding: var(--sp-2); max-width: 62rem; margin-inline: auto; }
@media (min-width: 48rem) { .gn { padding: var(--sp-3); } }
.gn-hint { margin: 0 0 var(--sp-1); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--c-ink-2); text-align: center; }
@media (min-width: 60rem) { .gn-hint { display: none; } }
.gn-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; } /* relative: contém os .visually-hidden das células */
.gn-scroll:focus-visible { outline-offset: 0; }
.gn-table { border-collapse: separate; border-spacing: 5px; width: 100%; min-width: 40rem; table-layout: fixed; text-transform: uppercase; }
.gn-table .gn-corner { width: 4.5rem; }
.gn-table th, .gn-table td { background: var(--gn-cell); text-align: center; vertical-align: middle; padding: .6rem .4rem; }
.gn-table thead th { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; letter-spacing: .04em; line-height: 1; padding-block: .85rem; }
.gn-table tbody th { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; width: 4.5rem; }
.gn-table .gn-corner { background: none; }
.gn-table tbody th, .gn-table .gn-corner { position: sticky; left: 0; z-index: 1; box-shadow: -5px 0 0 var(--gn-panel), 5px 0 0 var(--gn-panel); }
.gn-table .gn-corner { background: var(--gn-panel); }
.gn-cell { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gn-cell li { display: flex; flex-direction: column; align-items: center; }
.gn-cell li.gn-word { flex-direction: row; align-items: flex-start; }
.gn-cell img { height: 20px; width: auto; max-width: 100%; object-fit: contain; }
.gn-note { font-family: var(--f-display); font-size: .95rem; letter-spacing: .03em; line-height: 1.1; margin-top: 2px; }
.gn-note:first-child { margin: 0 0 2px; }
.gn-word { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; letter-spacing: .02em; line-height: 1; display: inline-flex; align-items: flex-start; gap: 2px; }
.gn-tri { width: .55em; height: .5em; color: var(--c-accent); margin-top: .1em; }
.gn-foot { display: grid; gap: 5px; margin-top: 5px; }
@media (min-width: 48rem) { .gn-foot { grid-template-columns: auto 1fr 1fr; align-items: start; } }
.gn-table--sat { min-width: 0; width: auto; margin-inline: auto; table-layout: auto; }
.gn-table--sat td { min-width: 9rem; }
.gn-legend { background: var(--gn-cell); padding: var(--sp-2) var(--sp-3); margin: 5px; }
@media (min-width: 48rem) { .gn-legend { margin: 5px 5px 5px 0; } }
.gn-legend h4 { margin: 0 0 var(--sp-1); font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; letter-spacing: .04em; }
.gn-legend ul { list-style: none; margin: 0; padding: 0; }
.gn-legend li { display: grid; grid-template-columns: 5.25rem 1fr; align-items: center; gap: var(--sp-1); padding-block: .2rem; font-size: var(--fs-ui); letter-spacing: .06em; line-height: 1.5; }
.gn-legend li img { height: 18px; width: auto; }
.gn-legend .gn-word { font-size: 1.05rem; }

/* .method: Nosso Método. Celular: título, texto, triângulo. Desktop: título e
   triângulo na coluna da esquerda (alinhados à direita, junto do texto), texto
   à direita; o triângulo desce até a base do texto para as colunas fecharem juntas. */
.method { display: grid; gap: var(--sp-3); grid-template-areas: "title" "text" "fig"; }
.method__title { grid-area: title; margin: 0; }
.method__text { grid-area: text; }
.method__figure { grid-area: fig; margin: var(--sp-3) 0 0; }
.method__figure img { display: block; width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
@media (min-width: 60rem) {
  .method { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; grid-template-areas: "title text" "fig text"; column-gap: var(--sp-6); row-gap: var(--sp-4); align-items: start; }
  .method__title { text-align: right; }
  .method__figure { margin: 0; align-self: end; }
  .method__figure img { max-width: none; }
}