/* ────────────────────────────────────────────────────────────────────────────
   Arte decorativa do lado direito dos heroes de seção do admin.

   O fragmento declara só o conteúdo — os ícones que têm a ver com a seção.
   Toda a geometria (tamanho, posição, recorte, tema) vive aqui, no mesmo
   espírito do comentário do `.admin-section-hero` em admin-v2.html:
   "fragments only provide content via data-hero-* hooks".

     <div data-hero-art="flow" aria-hidden="true">
       <span data-hero-art-ring></span>
       <span data-hero-art-ring="soft"></span>
       <span data-hero-art-tile="lead"><i data-lucide="bot"></i></span>
       <span data-hero-art-tile="mid"><i data-lucide="workflow"></i></span>
       <span data-hero-art-tile="trail"><i data-lucide="zap"></i></span>
     </div>

   O bloco é sempre o mesmo (2 formas de fundo + 3 ladrilhos); muda a variante
   e os ícones. Variantes:

     orbit  órbitas concêntricas  → catálogos, estúdios, coleções
     flow   trilha ligando peças  → roteamento, fluxos, filas, canais
     stack  camadas empilhadas    → registros, bancos, listas, cadastros
     pulse  ondas irradiando      → monitoramento, saúde, segurança, análise

   Nada aqui usa JS: o único requisito é `lucide.createIcons()` rodar depois do
   fragmento carregar (o loader em admin/app.js já faz isso pela seção inteira).
   ──────────────────────────────────────────────────────────────────────────── */

/* Hospedeiros que aceitam a arte. O `:has()` mantém os heroes que ainda não
   optaram exatamente como estavam — nenhuma regra vaza pra eles. */
.admin-section-hero:has(> [data-hero-art]),
.companies-hero:has(> [data-hero-art]),
.branding-hero:has(> [data-hero-art]),
.tutv2-hero:has(> [data-hero-art]) {
  --hero-art-w: 214px;
  position: relative;
  isolation: isolate;
}

/* A arte é absoluta (não entra no fluxo), então sem reservar a faixa da direita
   a coluna de ações passa por cima dos ladrilhos — eles ficam espiando por trás
   dos botões. O `padding-right` guarda a faixa pra ela; como o bloco absoluto
   se posiciona pela *padding box*, ele cai exatamente nesse espaço reservado.
   Só a partir de 1101px: abaixo disso a arte some e o padding original volta. */
@media (min-width: 1101px) {
  .admin-section-hero:has(> [data-hero-art]),
  .companies-hero:has(> [data-hero-art]),
  .branding-hero:has(> [data-hero-art]),
  .tutv2-hero:has(> [data-hero-art]) {
    min-height: 158px;
    padding-right: calc(var(--hero-art-pad, 24px) + var(--hero-art-w));
  }
}

[data-hero-art] {
  --hero-art-rgb: var(--accent-rgb, 37, 99, 235);
  --hero-art-accent: var(--accent, #2563eb);
  --hero-art-surface: var(--admin-hero-bg, var(--surface, #ffffff));
  --hero-art-radius: 21px;
  --hero-art-line: rgba(var(--hero-art-rgb), .16);
  --hero-art-cool: rgba(14, 165, 233, .14);

  position: absolute;
  /* Fica acima do fundo do hero e abaixo de todo o conteúdo, sem precisar
     mexer no z-index dos filhos existentes (o `isolation` acima segura o -1). */
  z-index: -1;
  inset: 0 0 0 auto;
  width: var(--hero-art-w, 214px);
  overflow: hidden;
  border-radius: 0 var(--hero-art-radius) var(--hero-art-radius) 0;
  pointer-events: none;
}

/* ── Formas de fundo ─────────────────────────────────────────────────────── */

[data-hero-art] [data-hero-art-ring] {
  position: absolute;
  border: 1px solid var(--hero-art-line);
  border-radius: 50%;
}

[data-hero-art] [data-hero-art-ring="soft"] { border-color: var(--hero-art-cool); }

/* orbit — duas órbitas concêntricas atravessando o canto */
[data-hero-art="orbit"] [data-hero-art-ring] {
  right: -84px;
  bottom: -128px;
  width: 220px;
  height: 220px;
  box-shadow: 0 0 0 27px rgba(var(--hero-art-rgb), .026), 0 0 0 56px rgba(var(--hero-art-rgb), .016);
}
[data-hero-art="orbit"] [data-hero-art-ring="soft"] {
  top: -74px;
  left: 44px;
  width: 120px;
  height: 120px;
  box-shadow: 0 0 0 18px rgba(14, 165, 233, .022);
}

/* flow — órbita discreta ao fundo + a trilha tracejada dos ::before/::after */
[data-hero-art="flow"] [data-hero-art-ring] {
  right: -92px;
  bottom: -136px;
  width: 224px;
  height: 224px;
  box-shadow: 0 0 0 30px rgba(var(--hero-art-rgb), .022);
}
[data-hero-art="flow"] [data-hero-art-ring="soft"] {
  top: -82px;
  right: 154px;
  width: 128px;
  height: 128px;
}
/* Dois segmentos ligando ladrilho a ladrilho (lead → mid → trail).
   Os ângulos saem da geometria fixa dos ladrilhos mais abaixo. */
[data-hero-art="flow"]::before,
[data-hero-art="flow"]::after {
  content: "";
  position: absolute;
  height: 2px;
  margin-top: -1px;
  border-radius: 999px;
  transform-origin: right center;
  background: repeating-linear-gradient(
    90deg,
    rgba(var(--hero-art-rgb), .30) 0 6px,
    transparent 6px 13px
  );
}
[data-hero-art="flow"]::before {
  top: calc(50% + 23px);
  right: 53px;
  width: 78px;
  transform: rotate(-38.8deg);
}
[data-hero-art="flow"]::after {
  top: calc(50% - 26px);
  right: 114px;
  width: 75px;
  transform: rotate(41.8deg);
}

/* stack — camadas de cartão recuando pro canto */
[data-hero-art="stack"] [data-hero-art-ring] {
  right: -52px;
  bottom: -34px;
  width: 196px;
  height: 124px;
  border-radius: 24px;
  transform: rotate(-9deg);
}
[data-hero-art="stack"] [data-hero-art-ring="soft"] {
  right: -22px;
  bottom: -60px;
  width: 196px;
  height: 124px;
  border-radius: 24px;
  transform: rotate(6deg);
}

/* pulse — ondas irradiando de trás do ladrilho principal */
[data-hero-art="pulse"] [data-hero-art-ring] {
  right: -30px;
  bottom: -26px;
  width: 152px;
  height: 152px;
  box-shadow:
    0 0 0 22px rgba(var(--hero-art-rgb), .030),
    0 0 0 46px rgba(var(--hero-art-rgb), .020),
    0 0 0 72px rgba(var(--hero-art-rgb), .012);
}
[data-hero-art="pulse"] [data-hero-art-ring="soft"] {
  right: 8px;
  bottom: 12px;
  width: 84px;
  height: 84px;
  border-style: dashed;
}

/* ── Ladrilhos ───────────────────────────────────────────────────────────── */

/* Ancorados no meio vertical, então a geometria não depende da altura do hero
   (que varia de seção pra seção conforme métricas e subtítulo). */
[data-hero-art] [data-hero-art-tile] {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--hero-art-rgb), .18);
  border-radius: 14px;
  color: var(--hero-art-accent);
  background: color-mix(in srgb, var(--hero-art-surface) 88%, transparent);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .09);
}

[data-hero-art] [data-hero-art-tile="lead"]  { right: 28px;  margin-top:  -2px; width: 50px; height: 50px; transform: rotate(6deg); }
[data-hero-art] [data-hero-art-tile="mid"]   { right: 92px;  margin-top: -48px; width: 44px; height: 44px; transform: rotate(-7deg); }
[data-hero-art] [data-hero-art-tile="trail"] { right: 150px; margin-top:   4px; width: 40px; height: 40px; transform: rotate(5deg); }

[data-hero-art] [data-hero-art-tile] i,
[data-hero-art] [data-hero-art-tile] svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}
[data-hero-art] [data-hero-art-tile="trail"] i,
[data-hero-art] [data-hero-art-tile="trail"] svg { width: 16px; height: 16px; }

/* ── Ajustes por hospedeiro ──────────────────────────────────────────────── */

/* `--hero-art-pad` = o padding-right original do hospedeiro, pra reserva da
   faixa não mudar o respiro entre o conteúdo e a arte. */
.companies-hero:has(> [data-hero-art]) { --hero-art-pad: 28px; }
.companies-hero > [data-hero-art] {
  --hero-art-surface: var(--co-surface, #ffffff);
  --hero-art-radius: 19px;
}
.branding-hero > [data-hero-art] { --hero-art-radius: 15px; }
.tutv2-hero > [data-hero-art] {
  --hero-art-surface: #10121b;
  --hero-art-radius: 17px;
}
[data-theme="light"] .tutv2-hero > [data-hero-art] { --hero-art-surface: #ffffff; }

/* No tema escuro o ladrilho precisa de menos sombra e mais contraste de borda. */
[data-theme="dark"] [data-hero-art] [data-hero-art-tile] {
  border-color: rgba(var(--hero-art-rgb), .26);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}
[data-theme="dark"] [data-hero-art] { opacity: .88; }

/* ── Responsivo ──────────────────────────────────────────────────────────── */

/* Abaixo de 1320px o conteúdo do hero já fica apertado com a faixa cheia:
   encolhe a reserva e fica só o ladrilho principal + o do meio. */
@media (max-width: 1320px) {
  .admin-section-hero:has(> [data-hero-art]),
  .companies-hero:has(> [data-hero-art]),
  .branding-hero:has(> [data-hero-art]),
  .tutv2-hero:has(> [data-hero-art]) { --hero-art-w: 150px; }
  [data-hero-art] [data-hero-art-tile="trail"] { display: none; }
  [data-hero-art="flow"]::after { display: none; }
}

/* Abaixo de 1101px a arte sai de cena e o padding original do hero volta
   sozinho (a regra de reserva vive num @media min-width: 1101px). */
@media (max-width: 1100px) {
  [data-hero-art] { display: none; }
}