/*
 * Sobre (story.php): linha do tempo como régua (o espaço entre marcos cresce
 * com os anos entre eles, via --salto), com régua de anos presa no topo e,
 * com JS em tela larga, a foto do marco em leitura fixa ao lado (sobre.js);
 * missão em seção escura, objetivos, parceiros com logos em cinza e contato
 * com o mapa da sede em Viçosa.
 */

@layer componentes {
  /* História: cabeçalho, régua de anos, palco (foto fixa) e linha do tempo */
  .historia__cabecalho { display: grid; gap: 1.25rem; }
  @media (min-width: 64em) {
    .historia__cabecalho { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: end; }
  }
  .historia__intro { max-width: 52ch; color: var(--basalto-suave); font-size: 1.0625rem; }

  /* Régua de anos: fica presa sob o cabeçalho enquanto a seção passa */
  .historia__anos {
    position: sticky;
    top: var(--altura-cabecalho);
    z-index: 2;
    margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--linha);
    background: var(--superficie);
  }
  .historia__anos-lista { display: flex; gap: 0.125rem; overflow-x: auto; scrollbar-width: thin; }
  .historia__ano {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.75rem;
    border-bottom: 3px solid transparent;
    color: var(--aco-texto);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color var(--dur-padrao, 320ms) ease, border-color var(--dur-padrao, 320ms) ease;
  }
  .historia__ano:hover { color: var(--marinho); }
  .historia__ano[aria-current] { border-bottom-color: var(--horizonte-ui); color: var(--marinho); font-weight: 600; }

  .historia__grade { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .historia__palco { display: none; }
  @media (min-width: 64em) {
    .js .historia__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .js .historia__palco { position: sticky; top: calc(var(--altura-cabecalho) + 5.5rem); display: grid; gap: 0.5rem; }
    .js .marco__foto { display: none; }
  }
  .historia__palco-ano { color: var(--marinho); font-size: clamp(3rem, 1.5rem + 3vw, 4.75rem); font-weight: 500; line-height: 0.95; }
  .historia__quadros { display: grid; }
  .historia__quadro {
    grid-area: 1 / 1;
    transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .historia__quadro--entrando { opacity: 0; transform: scale(1.03); }
  :is(.historia__quadro, .marco__foto) picture { display: block; overflow: hidden; border-radius: var(--raio); }
  :is(.historia__quadro, .marco__foto) img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
  :is(.historia__quadro, .marco__foto) .legenda { margin-top: 0.5rem; }
  .marco__foto { grid-column: 3; width: min(100%, 36rem); margin-top: 0.75rem; }
  @media (prefers-reduced-motion: reduce) {
    .historia__quadro, .historia__ano { transition: none; }
    .historia__quadro--entrando { transform: none; }
  }

  /* Linha do tempo: [ano][régua][texto] */
  .linha-tempo {
    --col-ano: 5.5rem;
    --col-regua: 2.5rem;
    position: relative;
    display: grid;
  }
  .linha-tempo::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 0;
    left: calc(var(--col-ano) + var(--col-regua) / 2);
    width: 1px;
    background: var(--aco);
  }
  .marco {
    position: relative;
    display: grid;
    grid-template-columns: var(--col-ano) var(--col-regua) minmax(0, 1fr);
    margin-top: calc(2rem + var(--salto, 0) * 0.875rem);
  }
  .marco:first-child { margin-top: 0; }
  .marco { scroll-margin-top: calc(var(--altura-cabecalho) + 6rem); }
  .js .marco--ativo .marco__ano { color: var(--marinho); }
  .js .marco--ativo::before { background: var(--horizonte-ui); }
  .marco::before {
    content: "";
    position: absolute;
    top: 0.875rem;
    left: calc(var(--col-ano) + var(--col-regua) / 2 - 0.5rem);
    width: 1rem;
    height: 2px;
    background: var(--marinho);
  }
  .marco__ano {
    grid-column: 1;
    color: var(--aco-texto);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
  }
  .marco__corpo { grid-column: 3; display: grid; gap: 0.5rem; justify-items: start; padding-bottom: 0.25rem; }
  .marco__titulo { font-size: var(--tam-h3); }
  .marco__texto {
    max-width: 60ch;
    font-family: var(--fonte-texto);
    font-size: var(--tam-texto);
    line-height: 1.65;
  }
  .marco__fonte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    color: var(--basalto-suave);
    font-size: 0.75rem;
  }
  .marco__fonte span { text-transform: uppercase; letter-spacing: 0.06em; }
  .marco__fonte a { color: var(--aco-texto); }
  .marco--inicio .marco__ano { color: var(--marinho); font-size: 2.25rem; line-height: 1; }
  .marco--inicio::before { top: 1rem; left: calc(var(--col-ano) + var(--col-regua) / 2 - 0.75rem); width: 1.5rem; height: 3px; background: var(--horizonte-ui); }
  /* Celular: o ano sobe para cima do título; a régua fica na margem */
  @media (max-width: 40em) {
    .linha-tempo { --col-ano: 0rem; --col-regua: 1.75rem; }
    .linha-tempo::before { left: 0; }
    .marco { grid-template-columns: var(--col-regua) minmax(0, 1fr); margin-top: calc(1.75rem + var(--salto, 0) * 0.5rem); }
    .marco__ano { grid-column: 2; font-size: 1.125rem; text-align: left; }
    .marco__corpo { grid-column: 2; margin-top: 0.25rem; }
    .marco__foto { grid-column: 2; }
    .marco--inicio .marco__ano { font-size: 1.5rem; }
    .marco::before { top: 0.7rem; left: 0; width: 0.75rem; }
    .marco--inicio::before { top: 0.75rem; left: 0; width: 1.125rem; }
  }

  .historia__hoje {
    display: grid;
    gap: 0.75rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    margin-left: calc(var(--col-ano, 5.5rem) + var(--col-regua, 2.5rem));
    padding-top: 1.5rem;
    border-top: 1px solid var(--linha);
  }
  .historia__hoje p { max-width: 60ch; font-family: var(--fonte-texto); font-size: var(--tam-texto); line-height: 1.65; }
  @media (max-width: 40em) { .historia__hoje { margin-left: 0; } }

  /* Missão (seção escura) */
  .missao__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (min-width: 60em) { .missao__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
  .missao__principal { display: grid; gap: 1.5rem; justify-items: start; }
  .missao__texto {
    max-width: 30ch;
    color: var(--marfim);
    font-family: var(--fonte-texto);
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
    line-height: 1.32;
    text-wrap: pretty;
  }
  .missao__lateral { display: grid; gap: 2rem; padding-top: 0.5rem; }
  .missao__lateral p { max-width: 46ch; color: var(--gelo); }
  .missao__subtitulo {
    margin-bottom: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(176 217 250 / 0.35);
    color: var(--gelo);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-stretch: var(--largura-etiqueta);
    font-weight: var(--peso-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .missao__valores { display: grid; gap: 0.875rem; }
  .missao__valores li {
    padding-left: 0.875rem;
    border-left: 2px solid rgb(176 217 250 / 0.45);
    color: var(--marfim);
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .missao__valores strong { display: block; color: var(--gelo); font-weight: 650; }

  /* Objetivos */
  .objetivos__lista { display: grid; gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
  @media (min-width: 40em) { .objetivos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 75em) { .objetivos__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .objetivo {
    display: grid;
    align-content: start;
    gap: 0.625rem;
    padding-block: 1.5rem 2rem;
    border-top: 1px solid var(--linha);
  }
  .objetivo .icone { width: 1.75rem; height: 1.75rem; color: var(--aco-texto); }
  .objetivo__titulo { font-size: var(--tam-h3); }
  .objetivo__texto { max-width: 42ch; color: var(--basalto-suave); }

  /* Parceiros e fomento */
  .parceiros__grupos { display: grid; gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
  @media (min-width: 60em) { .parceiros__grupos { grid-template-columns: 1fr 1fr 2fr; } }
  .parceiros__grupo-titulo {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--aco);
    color: var(--aco-texto);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-stretch: var(--largura-etiqueta);
    font-weight: var(--peso-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .parceiros__lista { display: grid; gap: 1rem 1.5rem; }
  @media (min-width: 60em) { .parceiros__grupo:last-child .parceiros__lista { grid-template-columns: 1fr 1fr; } }
  .parceiro { display: grid; gap: 0.15rem; justify-items: start; }
  .parceiro__nome {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--marinho);
    font-family: var(--fonte-titulo);
    font-size: 1.375rem;
    font-stretch: 74%;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
  }
  .parceiro__nome .icone { width: 0.875rem; height: 0.875rem; color: var(--aco-texto); }
  /* Logo em cinza (marcaParceiro): mesma altura para todos; cor só no foco e no hover */
  .parceiro--logo .parceiro__nome { min-height: 48px; gap: 0.5rem; }
  .parceiro--logo .marca-parceiro { flex: none; transition: opacity var(--dur-padrao, 320ms) ease; }
  .parceiro--logo a.parceiro__nome:hover .marca-parceiro { opacity: 0.75; }
  a.parceiro__nome:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .parceiro__completo { max-width: 40ch; color: var(--basalto-suave); font-size: 0.875rem; line-height: 1.4; }

  .parceiros__instituicoes {
    display: grid;
    gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
  }
  @media (min-width: 60em) { .parceiros__instituicoes { grid-template-columns: 1fr 2fr; } }
  .parceiros__nomes li { padding-block: 0.45rem; border-bottom: 1px solid var(--linha); font-size: 0.9375rem; }
  @media (min-width: 40em) { .parceiros__nomes--colunas { columns: 2; column-gap: 1.5rem; } .parceiros__nomes--colunas li { break-inside: avoid; } }
  .parceiros__capes {
    max-width: 72ch;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-left: 1rem;
    border-left: 2px solid var(--aco);
    color: var(--basalto-suave);
    font-size: 0.875rem;
  }

  /* Contato */
  .endereco__grade { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 60em) { .endereco__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
  .endereco__texto { display: grid; gap: 1.5rem; justify-items: start; }
  .endereco__dados { display: grid; gap: 0.875rem; font-style: normal; }
  .endereco__dados > p:first-child { max-width: 44ch; font-size: 1.125rem; }
  .endereco__coordenada { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--aco-texto); font-size: 0.875rem; }
  .endereco__coordenada .icone { width: 1.125rem; height: 1.125rem; }
  .endereco__contatos { display: grid; gap: 0.125rem; }
  .endereco__contatos a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  .endereco__contatos .icone { flex: none; width: 1.125rem; height: 1.125rem; color: var(--aco-texto); }
  .endereco__mapas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .endereco__mapas .icone { width: 1rem; height: 1rem; }

  /* Mapa da sede (assets/svg/mapa-vicosa.svg); cores dos tokens */
  .endereco__mapa { display: grid; gap: 0.5rem; }
  .mapa-vicosa { width: 100%; height: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
  .mv-fundo { fill: var(--papel); }
  .mv-agua { fill: var(--gelo); }
  .mv-corrego { fill: none; stroke: var(--aco); stroke-width: 1.5; }
  .mv-via { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .mv-via--4 { stroke: var(--linha); stroke-width: 2; }
  .mv-via--3 { stroke: var(--basalto-suave); stroke-width: 3; opacity: 0.45; }
  .mv-via--2 { stroke: var(--basalto-suave); stroke-width: 4.5; }
  .mv-via--1 { stroke: var(--marinho); stroke-width: 6; }
  .mapa-vicosa text {
    fill: var(--basalto-suave);
    font-family: var(--fonte-corpo);
    font-size: 20px;
    paint-order: stroke;
    stroke: var(--papel);
    stroke-linejoin: round;
    stroke-width: 6px;
  }
  .mapa-vicosa .mv-agua-rotulo { fill: var(--aco-texto); font-size: 16px; font-style: italic; }
  .mapa-vicosa .mv-sede__rotulo { fill: var(--basalto); font-family: var(--fonte-titulo); font-size: 28px; font-weight: 700; }
  .mapa-vicosa .mv-sede__sub { fill: var(--basalto-suave); font-size: 18px; }
  .mv-sede__anel { fill: none; stroke: var(--horizonte); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
  .mv-sede__ponto { fill: var(--horizonte); stroke: var(--basalto); stroke-width: 1.5; }
  .mv-escala path { fill: none; stroke: var(--basalto); stroke-width: 2; }
  .mv-norte path { fill: var(--basalto); }
  .mv-encarte rect { fill: var(--papel); stroke: var(--aco); }
  .mv-encarte__mg { fill: var(--nevoa); stroke: var(--aco); stroke-width: 1; }
  .mv-encarte__municipio, .mv-encarte circle { fill: var(--horizonte); }
  .mapa-vicosa .mv-encarte text { font-size: 14px; stroke-width: 4px; }
  @media (max-width: 40em) {
    .mapa-vicosa text { font-size: 30px; }
    .mapa-vicosa .mv-sede__rotulo { font-size: 38px; }
    .mapa-vicosa .mv-sede__sub, .mapa-vicosa .mv-agua-rotulo { font-size: 26px; }
  }
  /* O anel da sede pulsa três vezes quando o mapa entra (sobre.js põe a classe) */
  @media (prefers-reduced-motion: no-preference) {
    .endereco__mapa--visto .mv-sede__anel { animation: sede-pulso 1.6s ease-out 3; }
  }
  @keyframes sede-pulso {
    0% { transform: scale(0.6); opacity: 1; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .endereco__credito { color: var(--basalto-suave); font-size: 0.8125rem; }

  @media (max-width: 30em) { .endereco__mapas { flex-direction: column; align-self: stretch; } .endereco__mapas .botao { width: 100%; } }
}