/* ==========================================================================
   MOLDURA DE SEÇÃO — a dobra de tom vizinho, dissolvida nas bordas
   Prefixo: frame-
   Tokens usados: --bg --dark --dark-rgb --rule-2 --accent-2 --pad --max
   (a seção continua lendo o próprio escopo de tom; este componente nunca
   toca em --fg nem redefine --bg)

   Duas peças independentes, e é assim de propósito:

     .frame        a seção. Duas faixas de gradiente nas bordas, feitas de
                   camadas de background. Zero markup — é só a classe.
     .frame-edge   a cercadura chanfrada. Um <div> VAZIO por borda, opcional.

   POR QUE A FAIXA É BACKGROUND E NÃO ::before/::after
   A origem usava os dois pseudo-elementos da seção para as faixas, e por
   isso precisava de duas muletas: overflow:hidden na seção (que quebra
   position:sticky de qualquer componente colado dentro) e z-index:2 no
   .wrap — ou seja, o componente estilizava a primitiva do grid, o que o
   contrato proíbe. Camada de background resolve os dois de graça: fundo é
   fundo, sempre atrás do conteúdo, sem stacking context e sem clipe. De
   quebra, os dois pseudo-elementos da seção ficam livres para quem for
   colar outro componente no mesmo <section>.

   POR QUE A CERCADURA AINDA É MARKUP
   Ela tem 5 marcas por borda: dois chanfros, dois filetes e o losango do
   meio. Pseudo-elemento não tem pseudo-elemento, então a alternativa a um
   nó vazio seria empilhar 8 camadas de gradiente com listas de size e
   position casadas na unha — ilegível e frágil. Um <div> vazio com
   aria-hidden é mais barato de manter e de entender. A origem gastava 7 nós
   por borda (wrap + 2 SVG + 2 filetes + losango); aqui é 1, sem filhos.
   ========================================================================== */

/* ==========================================================================
   1. A FAIXA — a dissolução
   ==========================================================================
   Knobs:
     --frame-band      altura da faixa (as duas de uma vez)
     --frame-band-top  altura só da de cima  (0 = borda seca)
     --frame-band-bot  altura só da de baixo (0 = borda seca)
     --frame-tone      cor da vizinha, para onde a borda dissolve
     --frame-tone-rgb  a MESMA cor em canal separado, para o fim transparente

   --frame-tone e --frame-tone-rgb andam em par: o fim do gradiente tem de
   ser a mesma cor com alfa 0, senão a faixa passa por um cinza no meio do
   caminho. Trocou um, troque o outro. */
.frame{
  --frame-band:clamp(80px,13vh,180px);
  --frame-band-top:var(--frame-band);
  --frame-band-bot:var(--frame-band);
  --frame-tone:var(--dark);
  --frame-tone-rgb:var(--dark-rgb);

  /* a cercadura é absoluta e ancora aqui. O core já dá position:relative em
     <section>; repetir garante que a moldura também funcione num <div>. */
  position:relative;

  /* Mesmo motivo: sem fundo próprio, a faixa pinta escuro sobre escuro e o
     efeito some sem erro nenhum. O valor é o do escopo de tom da seção —
     não há redefinição de --bg aqui. */
  background-color:var(--bg);

  background-image:
    linear-gradient(to bottom,var(--frame-tone) 0%,rgba(var(--frame-tone-rgb),0) 100%),
    linear-gradient(to top,   var(--frame-tone) 0%,rgba(var(--frame-tone-rgb),0) 100%);
  background-repeat:no-repeat;
  background-size:100% var(--frame-band-top),100% var(--frame-band-bot);
  background-position:top,bottom;
}

/* Dissolve só uma das bordas. Zerar a altura do outro lado é o que mantém o
   par de gradientes único — não existe uma segunda declaração por variação. */
.frame--top{--frame-band-bot:0px}
.frame--bottom{--frame-band-top:0px}

/* ==========================================================================
   2. A CERCADURA — o acabamento chanfrado
   ==========================================================================
   Knobs:
     --frame-cap   lado do chanfro (é a altura da tira também)
     --frame-gap   meio vão em volta do losango, do centro para fora
     --frame-dm    lado do losango (0 esconde; zere o --frame-gap junto)

   As cores não têm knob de propósito: o filete lê --rule-2 e o losango lê
   --accent-2, os dois vindos do escopo de tom. É o que faz a mesma cercadura
   funcionar numa .sec-deep e numa .sec-paper sem uma linha de ajuste. */
.frame-edge{
  --frame-cap:30px;
  --frame-gap:17px;   /* 14px de respiro + metade do losango */
  --frame-dm:6px;

  position:absolute;z-index:2;pointer-events:none;
  height:var(--frame-cap);

  /* A tira ocupa exatamente a coluna. É a conta do .wrap refeita aqui, em
     inset — o componente não encosta na primitiva do grid nem herda o
     padding dela: quando a tela é menor que --max, a coluna começa em --pad;
     acima disso, na margem que centraliza --max. */
  left:max(var(--pad),calc(50% - var(--max)/2 + var(--pad)));
  right:max(var(--pad),calc(50% - var(--max)/2 + var(--pad)));

  /* Quatro camadas: chanfro esquerdo, chanfro direito, filete esquerdo,
     filete direito. Os chanfros são gradientes a 45° e não SVG porque
     data-URI não enxerga var() — um SVG inline cravaria a cor da linha no
     componente, e a cor tem de vir do escopo de tom. Em caixa quadrada o
     "to top right" cai exatamente na diagonal, com 1px de espessura. */
  background-repeat:no-repeat;
  background-image:
    linear-gradient(to top right,
      transparent calc(50% - .5px),var(--rule-2) calc(50% - .5px),
      var(--rule-2) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to bottom right,
      transparent calc(50% - .5px),var(--rule-2) calc(50% - .5px),
      var(--rule-2) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(var(--rule-2),var(--rule-2)),
    linear-gradient(var(--rule-2),var(--rule-2));
  background-size:
    var(--frame-cap) var(--frame-cap),
    var(--frame-cap) var(--frame-cap),
    calc(50% - var(--frame-cap) - var(--frame-gap)) 1px,
    calc(50% - var(--frame-cap) - var(--frame-gap)) 1px;
  background-position:
    left top,
    right top,
    left var(--frame-cap) bottom 0,
    right var(--frame-cap) bottom 0;
}

/* O losango do meio: quadrado girado, centrado no fio do filete.
   -3px o sobe para o centro do próprio corpo, +.5px o desce para o meio da
   linha de 1px. Só ele justifica um pseudo-elemento aqui — as outras quatro
   marcas cabem em camada de background, esta não: forma girada não existe
   em gradiente sem virar quatro triângulos. */
.frame-edge::before{
  content:"";position:absolute;left:50%;bottom:0;
  width:var(--frame-dm);height:var(--frame-dm);
  margin-left:calc(var(--frame-dm) / -2);
  margin-bottom:calc(var(--frame-dm) / -2 + .5px);
  background:var(--accent-2);
  transform:rotate(45deg);
}

.frame-edge--top{top:0}

/* A borda de baixo é a de cima espelhada. scaleY(-1) na tira inteira faz o
   filete subir para o topo dela e os chanfros mergulharem para os cantos,
   sem uma segunda lista de gradientes. O losango girado espelhado continua
   sendo o mesmo losango. */
.frame-edge--bottom{bottom:0;transform:scaleY(-1)}

/* ---- mobile ----
   Abaixo de 640px a coluna fica estreita e o vão em volta do losango come
   metade do filete: a cercadura passa a ler como quatro riscos soltos.
   Some com o losango e feche o vão — os dois filetes viram uma linha só. */
@media(max-width:640px){
  .frame-edge{--frame-gap:0px;--frame-dm:0px}
  .frame-edge::before{display:none}
}