/*
 * Página de um sítio (sitio.php?id=). Mapa de localização com o sítio em
 * destaque e a ficha ao lado (abaixo no celular), instalação e sensores com a
 * régua de profundidade (o mesmo vocabulário do perfil de solo da Pesquisa),
 * notícias e publicações que citam o sítio.
 *
 * No SVG (posto por sitio.php): .sitio--destaque no sítio da página e
 * .sitio--outro nos demais. Na régua: --y em % da profundidade desenhada.
 */

@layer componentes {
  /* Localização: mapa e ficha */
  .sitio-local__grade { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  @media (min-width: 64em) {
    .sitio-local__grade { grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); }
    .sitio-local__grade--sem-mapa { grid-template-columns: minmax(0, 40rem); }
  }

  .sitio-mapa { min-width: 0; container-type: inline-size; }
  .sitio-mapa__svg { --escala-sitio: 1.5; display: block; width: 100%; height: auto; overflow: visible; }
  .sitio-mapa__svg--antartica-continente { --escala-sitio: 1.1; max-width: 38rem; }
  .sitio-mapa__svg .legenda > :not(.escala) { display: none; }
  .sitio-mapa__svg .sitio > * { transform: scale(var(--escala-sitio)); }
  .sitio-mapa__svg .sitio--outro { opacity: 0.45; }
  .sitio-mapa__svg .sitio--destaque > * { transform: scale(calc(var(--escala-sitio) * 1.5)); }
  .sitio-mapa__svg .sitio--destaque .sitio-anel { stroke: var(--geleira); stroke-width: 1.6; fill: var(--papel); }
  .sitio-mapa__svg .sitio--destaque circle.sitio-ponto { fill: var(--horizonte); stroke: var(--marinho); stroke-width: 0.8; }
  .sitio-mapa__svg .sitio--destaque .sitio-nome { fill: var(--marinho-fundo); font-weight: 600; }
  @container (max-width: 44rem) {
    .sitio-mapa__svg { --escala-sitio: 1.9; }
    .sitio-mapa__svg .sitio--outro .sitio-nome { display: none; }
  }
  @container (max-width: 30rem) {
    .sitio-mapa__svg { --escala-sitio: 2.8; }
    .sitio-mapa__svg--antartica-continente { --escala-sitio: 1.6; }
    .sitio-mapa__svg .nomes-ilha { display: none; }
    .sitio-mapa__svg .area-nome { font-size: 18px; }
  }

  .sitio-mapa__rodape { display: grid; gap: 0.625rem; margin-top: 1rem; color: var(--basalto-suave); font-size: 0.875rem; }
  .sitio-mapa__legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .sitio-mapa__legenda li { display: inline-flex; align-items: center; gap: 0.6rem; }
  .sitio-mapa__atribuicao { font-size: 0.75rem; }
  .sitio-mapa__simbolo {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    background: var(--marinho);
    border-radius: 50%;
    opacity: 0.45;
  }
  .sitio-mapa__simbolo--destaque {
    width: 10px;
    height: 10px;
    background: var(--horizonte);
    outline: 2px solid var(--geleira);
    outline-offset: 2px;
    opacity: 1;
  }
  .sitio-mapa__simbolo--livre { width: 14px; height: 9px; background: var(--horizonte); border-radius: 0; opacity: 1; }
  .sitio-mapa__simbolo--area { width: 14px; height: 10px; background: color-mix(in srgb, var(--horizonte) 25%, transparent); border: 1.5px solid var(--horizonte); border-radius: 0; opacity: 1; }

  .sitio-ficha {
    display: grid;
    gap: 1.25rem;
    align-content: start;
    padding-top: 0.75rem;
    border-top: 2px solid var(--marinho);
  }
  .sitio-ficha__titulo { font-size: var(--tam-h3); }
  .sitio-ficha__dados { display: grid; gap: 1rem; }
  .sitio-ficha__dados dt {
    color: var(--aco-texto);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .sitio-ficha__dados dd { margin-top: 0.25rem; color: var(--basalto); line-height: 1.45; }
  .sitio-ficha__dados dd.dados { font-size: 0.9375rem; }
  .sitio-ficha__dados a .icone { width: 1rem; height: 1rem; margin-left: 0.25rem; vertical-align: -0.125em; }
  .sitio-ficha__confianca { font-weight: var(--peso-forte); }
  .sitio-ficha__confianca--aproximada,
  .sitio-ficha__confianca--indicativa { color: var(--horizonte-texto); }
  .sitio-ficha__nota { display: block; color: var(--basalto-suave); }
  .sitio-ficha__voltar { justify-self: start; font-size: 0.9375rem; }

  /* Instalação e sensores */
  .sitio-instalacao__grade { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  @media (min-width: 64em) { .sitio-instalacao__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
  .sitio-instalacao__texto { display: grid; gap: 1.75rem; }

  /* Régua de profundidade: escala | coluna de solo | sensores */
  .regua { --col-escala: 2.75rem; --col-solo: clamp(4rem, 14vw, 6rem); min-width: 0; }
  .regua__ar {
    position: relative;
    display: grid;
    gap: 0.75rem;
    padding: 0.5rem 0 0 var(--col-escala);
  }
  .regua__ar::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0;
    left: calc(var(--col-escala) + var(--col-solo) / 2);
    width: 1px;
    background: var(--basalto-suave);
  }
  .regua__corte {
    display: block;
    width: var(--col-solo);
    height: 0.75rem;
    background: repeating-linear-gradient(135deg, var(--aco) 0 1px, transparent 1px 6px);
  }
  .regua__solo {
    display: grid;
    grid-template-columns: var(--col-escala) var(--col-solo) minmax(0, 1fr);
    height: clamp(20rem, 60vw, 26rem);
    margin-block: 0.75rem 1.5rem;
  }
  .regua__escala, .regua__coluna, .regua__sensores { position: relative; grid-row: 1; min-width: 0; }
  .regua__escala { grid-column: 1; }
  .regua__coluna { grid-column: 2; }
  .regua__sensores { grid-column: 2 / -1; }
  .regua__tique {
    position: absolute;
    top: var(--y);
    right: 0.5rem;
    color: var(--basalto-suave);
    font-size: 0.75rem;
    line-height: 1;
    transform: translateY(-50%);
  }
  .regua__unidade { position: absolute; top: -1.5rem; right: 0.5rem; color: var(--aco-texto); font-size: 0.75rem; }
  .regua__coluna {
    background:
      repeating-linear-gradient(to bottom, color-mix(in srgb, var(--solo-turfa) 30%, transparent) 0 1px, transparent 1px var(--passo)),
      color-mix(in srgb, var(--solo-byers) 22%, var(--papel));
    border-top: 2px solid var(--basalto);
    border-inline: 1px solid color-mix(in srgb, var(--solo-turfa) 35%, transparent);
  }
  .regua__permafrost {
    position: absolute;
    inset: var(--y) 0 0;
    background:
      repeating-linear-gradient(45deg, color-mix(in srgb, var(--geleira) 35%, transparent) 0 1px, transparent 1px 7px),
      color-mix(in srgb, var(--gelo) 55%, var(--papel));
    border-top: 1.5px solid var(--geleira);
  }
  .regua__sensor {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25;
  }
  /* A primeira linha do rótulo fica na altura do sensor; o resto desce. */
  .regua__sensores .regua__sensor {
    position: absolute;
    top: var(--y);
    left: 0;
    right: 0;
    padding-left: calc(var(--col-solo) + 1.75rem);
    transform: translateY(-0.625em);
  }
  .regua__sensores .regua__sensor::before {
    content: "";
    position: absolute;
    top: 0.625em;
    left: calc(var(--col-solo) / 2 + 0.75rem);
    width: calc(var(--col-solo) / 2 + 0.5rem);
    height: 1px;
    background: var(--aco);
  }
  .regua__marca {
    position: absolute;
    top: 0.625em;
    left: calc(var(--col-solo) / 2 - 0.75rem);
    width: 1.5rem;
    height: 0.5rem;
    background: var(--papel);
    border: 1.5px solid var(--marinho);
    border-radius: 1rem;
    transform: translateY(-50%);
  }
  .regua__sensor--ar { position: relative; padding-left: calc(var(--col-solo) + 1.75rem); }
  .regua__sensor--ar .regua__marca { left: calc(var(--col-solo) / 2 - 0.75rem); }
  .regua__sensores .regua__sensor--permafrost { color: var(--geleira-texto); }
  .regua__sensores .regua__sensor--permafrost::before { left: 0; width: calc(var(--col-solo) + 1.25rem); background: var(--geleira); }
  .regua__cm { color: var(--marinho); font-weight: 500; white-space: nowrap; }
  .regua__sensor--permafrost .regua__cm { color: inherit; }
  .regua__grandeza { color: var(--basalto); }
  .regua__legenda { color: var(--basalto-suave); font-size: 0.875rem; line-height: 1.45; max-width: 40rem; }

  /* Notícias: cartaz ou logotipo cabe inteiro na moldura (como em noticias.css) */
  .sitio-noticias__item--inteira .cartao__midia { background: var(--nevoa); }
  .sitio-noticias__item--inteira .cartao__midia img { object-fit: contain; padding: clamp(0.75rem, 2vw, 1.25rem); }

  /* Publicações; logo depois da localização (mesmo fundo), um filete separa */
  .sitio-local + .sitio-publicacoes { border-top: 1px solid var(--linha); }
  .sitio-publicacoes__lista .publicacao:last-child { border-bottom: 1px solid var(--linha); }
}