/* ============================================================
   territorio.css — Constelação do Território (componente assinatura)
   Tela: /territorios/universo/<slug>  (base_territorio.html)
   Hero relacional: território como núcleo, entidades como estrelas,
   arestas tênues por propriedade Wikidata compartilhada.
   ============================================================ */


/* ── Variáveis locais ─────────────────────────────────────── */
:root {
    --cnst-sky-0:    #0B1118;  /* Céu Profundo  */
    --cnst-sky-1:    #111A24;  /* Azul Profundo */
    --cnst-gold:     var(--obs-gold-0, #D6B26D);
    --cnst-green:    var(--obs-green-0, #7EE0C1);
    --cnst-ivory:    var(--obs-ivory, #F2E9D6);
    --cnst-muted:    var(--color-muted, #8B95A1);
    --cnst-radius:   16px;
    --cnst-h-mobile: 420px;
    --cnst-h-desk:   clamp(480px, 56vh, 620px);
}


/* ── Palco ────────────────────────────────────────────────── */
.cnst {
    margin: 0;
}

.cnst-stage {
    position: relative;
    width: 100%;
    height: var(--cnst-h-mobile);
    border-radius: var(--cnst-radius);
    overflow: hidden;
    isolation: isolate;
    /* Profundidade atmosférica: horizonte que escurece nas bordas */
    background:
        radial-gradient(120% 90% at 50% 56%, rgba(126, 224, 193, 0.07), transparent 60%),
        radial-gradient(90% 70% at 50% 54%, var(--cnst-sky-1), var(--cnst-sky-0) 78%);
    border: 1px solid rgba(126, 224, 193, 0.10);
}

@media (min-width: 769px) {
    .cnst-stage { height: var(--cnst-h-desk); }
}

.cnst-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.cnst-canvas.is-empty { display: none; }

/* Véu: vinheta + reforço de contraste sob o cabeçalho (top-left) */
.cnst-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(7, 11, 16, 0.55) 100%),
        linear-gradient(160deg, rgba(7, 11, 16, 0.72) 0%, rgba(7, 11, 16, 0.18) 38%, transparent 60%);
}


/* ── Cabeçalho institucional sobreposto ───────────────────── */
.cnst-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    max-width: min(90%, 34ch);
    padding: var(--space-5, 24px);
    pointer-events: none;            /* deixa as estrelas clicáveis por baixo */
}

.cnst-overlay .eyebrow {
    color: var(--cnst-gold);
    margin-bottom: var(--space-2, 8px);
}

.cnst-overlay h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 var(--space-2, 8px);
    color: var(--cnst-ivory);
    text-shadow: 0 2px 24px rgba(7, 11, 16, 0.7);
}

.cnst-overlay p {
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.55;
    color: var(--cnst-muted);
    margin: 0 0 var(--space-3, 12px);
}

.cnst-legend {
    display: inline-block;
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cnst-green);
    opacity: 0.75;
}


/* ── Estado vazio institucional ───────────────────────────── */
.cnst-uncharted {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    text-align: center;
    padding: var(--space-6, 32px);
}

.cnst-uncharted.hidden { display: none; }

.cnst-uncharted-mark {
    font-size: 2.4rem;
    color: var(--cnst-gold);
    opacity: 0.5;
    margin-bottom: var(--space-2, 8px);
}

.cnst-uncharted strong {
    font-size: var(--text-lg, 1.25rem);
    font-weight: 600;
    color: var(--cnst-ivory);
}

.cnst-uncharted p {
    max-width: 38ch;
    font-size: var(--text-sm, 0.875rem);
    color: var(--cnst-muted);
    line-height: 1.55;
}


/* ── Núcleo (território) ──────────────────────────────────── */
.cnst-core-glow {
    fill: var(--cnst-gold);
    opacity: 0.12;
    filter: blur(8px);
}

.cnst-core-disc {
    fill: var(--cnst-sky-1);
    stroke: var(--cnst-gold);
    stroke-width: 1.5;
}

.cnst-core-mark {
    fill: var(--cnst-gold);
    font-weight: 700;
    pointer-events: none;
}


/* ── Arestas (Wikidata) ───────────────────────────────────── */
.cnst-edge {
    stroke: var(--cnst-green);
    stroke-width: 1;
    opacity: var(--edge-op, 0.12);
    transition: opacity 0.3s ease, stroke 0.3s ease;
}

.cnst-edge.is-lit {
    stroke: var(--cnst-gold);
    opacity: 0.9;
    stroke-width: 1.4;
}


/* ── Nós (entidades = estrelas) ───────────────────────────── */
.cnst-node {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Glow sem filter: halos se movem a cada frame; blur rasterizaria por frame
   e travaria no mobile. Suavidade vem de raio amplo + opacidade baixa. */
.cnst-node-halo {
    opacity: 0.08;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cnst-node-dot {
    stroke: rgba(11, 17, 24, 0.6);
    stroke-width: 1;
    transition: transform 0.25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.cnst-node:hover .cnst-node-dot,
.cnst-node:focus .cnst-node-dot,
.cnst-node.is-active .cnst-node-dot {
    transform: scale(1.35);
}

.cnst-node:hover .cnst-node-halo,
.cnst-node:focus .cnst-node-halo,
.cnst-node.is-active .cnst-node-halo {
    opacity: 0.4;
}

.cnst-node-label {
    fill: var(--cnst-ivory);
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(7, 11, 16, 0.85);
    stroke-width: 3px;
    stroke-linejoin: round;
    transition: opacity 0.2s ease;
}

.cnst-node:hover .cnst-node-label,
.cnst-node:focus .cnst-node-label,
.cnst-node.is-active .cnst-node-label,
.cnst-node.is-linked .cnst-node-label {
    opacity: 1;
}

/* Foco: o resto da constelação recua para dar contemplação */
.cnst-stage.is-focused .cnst-node:not(.is-active):not(.is-linked) {
    opacity: 0.22;
    transition: opacity 0.3s ease;
}

.cnst-stage.is-focused .cnst-edge:not(.is-lit) {
    opacity: 0.03;
}


/* ── Acessibilidade: respeitar redução de movimento ───────── */
@media (prefers-reduced-motion: reduce) {
    .cnst-node-dot { transition: none; }
}


/* ============================================================
   REDESENHO DA PÁGINA DE TERRITÓRIO  (.terr-page)
   ------------------------------------------------------------
   Sistema cromático com significado, contínuo do hero ao rodapé:
     · DOURADO  = o próprio território (núcleo, eyebrows, números,
                  chip ativo, anos de evento)
     · --type-rgb = a entidade por tipo. Pintado via JS com a MESMA
                  cor que a estrela tem na constelação → a legenda do
                  hero "vaza" para facetas, pills e cards.
     · VERDE    = conexão / interação (links, foco, hover, hairlines)
   Tudo escopado em .terr-page para não vazar às telas que reusam
   classes compartilhadas (evento.html, ano_eventos.html).
   ============================================================ */

/* Eyebrows da tela em dourado — assinatura do território */
.terr-page .base-section .eyebrow {
    color: var(--cnst-gold);
}

/* Caixas de seção mais atmosféricas e menos "painel": borda tênue
   verde + leve gradiente de profundidade em vez da superfície chapada */
.terr-page .base-section.c-surface {
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(126, 224, 193, 0.04), transparent 55%),
        linear-gradient(180deg, rgba(23, 32, 48, 0.45), rgba(17, 26, 36, 0.12));
    border-color: rgba(126, 224, 193, 0.09);
}


/* ── 1. Resumo — painel de leitura editorial ──────────────────
   De 4 caixas iguais para um único instrumento: leituras separadas
   por hairlines (o gap revela o fundo do painel), números grandes
   em dourado sobre o céu profundo. */
.terr-page .knowledge-summary-grid {
    grid-template-columns: repeat(2, 1fr);      /* mobile: 2×2 */
    gap: 1px;                                   /* o gap vira a hairline */
    background: rgba(126, 224, 193, 0.10);
    border: 1px solid rgba(126, 224, 193, 0.10);
    border-radius: var(--cnst-radius);
    overflow: hidden;
}

@media (min-width: 768px) {
    .terr-page .knowledge-summary-grid { grid-template-columns: repeat(4, 1fr); }
}

.terr-page .knowledge-card.c-surface {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(214, 178, 109, 0.05), transparent 60%),
        var(--cnst-sky-1);
    border: 0;
    border-radius: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
}

.terr-page .knowledge-icon {
    width: 26px;
    height: 26px;
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
}

.terr-page .knowledge-card > div {
    gap: var(--space-1);
}

.terr-page .knowledge-card strong {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--cnst-gold);
    line-height: 0.9;
}

.terr-page .knowledge-card span {
    color: var(--cnst-muted);
}


/* ── 2. Trocar território — grade de 2 colunas, links coloridos ─
   Cada território é um link com cor própria (paleta rotativa);
   o território atual fica em destaque dourado. */
.terr-page .territory-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: 0;
}

/* Paleta rotativa — valoriza cada link com uma cor distinta */
.terr-page .territory-chip:nth-child(6n+1) { --chip-rgb: 126, 224, 193; }
.terr-page .territory-chip:nth-child(6n+2) { --chip-rgb: 214, 178, 109; }
.terr-page .territory-chip:nth-child(6n+3) { --chip-rgb: 155, 184, 224; }
.terr-page .territory-chip:nth-child(6n+4) { --chip-rgb: 201, 166, 220; }
.terr-page .territory-chip:nth-child(6n+5) { --chip-rgb: 224, 174, 139; }
.terr-page .territory-chip:nth-child(6n)   { --chip-rgb: 143, 215, 176; }

.terr-page .territory-chip {
    --chip-rgb: 126, 224, 193;                  /* fallback */
    justify-content: flex-start;
    padding: var(--space-2) var(--space-3);
    background: rgba(var(--chip-rgb), 0.08);
    border: 1px solid rgba(var(--chip-rgb), 0.28);
    color: rgb(var(--chip-rgb));
    transition: background var(--transition), border-color var(--transition);
}

.terr-page .territory-chip:hover {
    background: rgba(var(--chip-rgb), 0.16);
    border-color: rgba(var(--chip-rgb), 0.5);
    text-decoration: none;
}

/* Território atual em destaque dourado */
.terr-page .territory-chip.active {
    background: var(--obs-gold-2, #3D2E12);
    border-color: rgba(214, 178, 109, 0.55);
    color: var(--cnst-gold);
    font-weight: 600;
}


/* ── 3. Destaques — colunas editoriais com ranking ────────────
   Colunas abertas (sem caixa), itens como linhas com hairline e
   numeral de posição em dourado. */
.terr-page .universe-highlight-grid {
    grid-template-columns: 1fr;             /* mobile; cresce nos breakpoints (≥640: 2, ≥1024: 3) */
}

.terr-page .universe-highlight-column.c-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.terr-page .universe-highlight-column > h3 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cnst-gold);
    border-bottom-color: rgba(214, 178, 109, 0.18);
}

.terr-page .universe-highlight-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(126, 224, 193, 0.06);
    border-radius: 0;
    align-items: baseline;
    padding: var(--space-3) var(--space-1);
    gap: var(--space-3);
}

.terr-page .universe-highlight-item:hover {
    background: rgba(126, 224, 193, 0.04);
    border-bottom-color: rgba(126, 224, 193, 0.22);
}

.terr-page .terr-rank {
    flex-shrink: 0;
    min-width: 1.5em;
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--cnst-gold);
    opacity: 0.5;
}

.terr-page .terr-hl-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.terr-page .terr-hl-text strong {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--cnst-ivory);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terr-page .terr-hl-text > span {
    font-size: var(--text-xs);
    color: var(--cnst-muted);
}


/* ── 4. Entidades ─────────────────────────────────────────────
   Toolbar reunida num bloco translúcido; cards "catálogo estelar"
   com acento lateral na cor do tipo e brilho ao acender (= nó). */
.terr-page .territory-toolbar {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(23, 32, 48, 0.4);
    border: 1px solid rgba(126, 224, 193, 0.08);
    border-radius: var(--radius-lg);
}

.terr-page .territory-search {
    flex: 1 1 240px;
}

.terr-page .exploration-entity-card.c-card {
    --type-rgb: 126, 224, 193;                  /* fallback até o JS pintar */
    position: relative;
    padding-left: var(--space-5);
    background: var(--cnst-sky-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

/* Acento lateral — fio na cor do tipo */
.terr-page .exploration-entity-card.c-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgb(var(--type-rgb)), transparent 85%);
    opacity: 0.45;
    transition: opacity var(--transition);
}

.terr-page .exploration-entity-card:hover {
    border-color: rgba(var(--type-rgb), 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(var(--type-rgb), 0.08);
}

.terr-page .exploration-entity-card:hover::before {
    opacity: 1;
}

.terr-page .exploration-entity-card h3 a:hover {
    color: rgb(var(--type-rgb));
}

/* Pill herda a cor do tipo (sobrescreve as variações .type-*) */
.terr-page .exploration-entity-card .type-pill {
    align-self: flex-start;
    background: rgba(var(--type-rgb), 0.12);
    color: rgb(var(--type-rgb));
    border-color: rgba(var(--type-rgb), 0.28);
}

.terr-page .exploration-entity-card .entity-discovery-link {
    color: rgb(var(--type-rgb));
}


/* ── 5. Eventos — linhas editoriais com ano em dourado ────────
   Sem caixas: hairlines, ano grande dourado ancorando cada
   acontecimento ao território. */
.terr-page .terr-event-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(126, 224, 193, 0.07);
    border-radius: 0;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-2);
    transition: background var(--transition);
}

.terr-page .terr-event-item:hover {
    background: rgba(126, 224, 193, 0.03);
}

.terr-page .terr-event-year {
    font-size: var(--text-2xl);
    min-width: 64px;
}


/* ── 6. Hero ───────────────────────────────────────────────── */
.terr-page .terr-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.terr-page .cnst-territory-icon {
    width: 38px;
    height: 38px;
    margin-bottom: var(--space-3);
    color: var(--cnst-mint, #7EE0C1);
    opacity: 0.92;
}

@media (min-width: 768px) {
    .terr-page .cnst-territory-icon {
        width: 46px;
        height: 46px;
    }
}


/* ── 7. Entidades — visualização em lista resumida ────────────
   Alterna com a visão em cards (botão "Lista"); cada entidade vira
   uma linha compacta: pill · nome · nº de frases. */
.terr-page .exploration-entity-grid.is-list {
    grid-template-columns: 1fr;
    gap: var(--space-1);
}

.terr-page .exploration-entity-grid.is-list .exploration-entity-card.c-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.terr-page .is-list .exploration-entity-card:hover {
    transform: none;
}

/* Some o que é verboso demais para uma linha */
.terr-page .is-list .exploration-entity-card p,
.terr-page .is-list .exploration-entity-card > small,
.terr-page .is-list .exploration-entity-card .entity-discovery-link {
    display: none;
}

.terr-page .is-list .exploration-entity-card .type-pill {
    order: -1;                                  /* pill abre a linha */
    align-self: center;
    flex-shrink: 0;
}

.terr-page .is-list .exploration-entity-card h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terr-page .is-list .exploration-entity-card .entity-discovery-footer {
    margin: 0;
    padding: 0;
    border: 0;
    flex-shrink: 0;
    gap: var(--space-3);
}


/* ── Responsivo (mobile-first) ─────────────────────────────────
   Base = mobile: tudo empilhado / 1 coluna. Cada breakpoint
   min-width ADICIONA colunas e respiro conforme a tela cresce. */

/* Entidades: base 1 coluna no mobile (sobrescreve o auto-fill do core) */
.terr-page .exploration-entity-grid { grid-template-columns: 1fr; }

/* Entidades: 2 colunas a partir de ≥560px */
@media (min-width: 560px) {
    .terr-page .exploration-entity-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Destaques: 2 colunas a partir de ≥640px */
@media (min-width: 640px) {
    .terr-page .universe-highlight-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≥1024px — telas largas: 3 colunas nos grids de conteúdo, hero em
   2 colunas (grafo+totais | troca) e mais respiro entre seções. */
@media (min-width: 1024px) {
    .terr-page .base-section { margin-bottom: var(--space-12); }
    .terr-page .base-section.c-surface { padding: var(--space-8); }

    .terr-page .exploration-entity-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .terr-page .exploration-entity-card.c-card { padding: var(--space-5); padding-left: var(--space-6); }

    .terr-page .universe-highlight-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

    .terr-page .terr-hero { margin-bottom: var(--space-12); }
}

/* Eventos: ano compacto em telas pequenas */
@media (max-width: 480px) {
    .terr-page .terr-event-item { gap: var(--space-4); }
    .terr-page .terr-event-year { font-size: var(--text-xl); min-width: 48px; }
}