/* ==========================================================================
   SEÇÃO "O MINERAL" — arquivo único, copiado igual para todas as LPs.

   Não assume a paleta de nenhuma LP: declara os próprios tokens com fallback
   em cadeia. 24 das 34 LPs não têm --foam/--gold/--warm-gray, e usá-las
   direto deixaria texto invisível (foi o que aconteceu no Sunset).
   LP de tema escuro: marcar data-tema="escuro" na <section>.
   ========================================================================== */

.mineral {
  --m-bg:   var(--foam, var(--ivory, var(--bg, #faf7ef)));
  --m-ink:  var(--ink, #221a10);
  --m-dim:  var(--warm-gray, var(--ink-2, var(--ink-dim, rgba(34, 26, 16, 0.68))));
  --m-line: var(--line, rgba(34, 26, 16, 0.16));
  --m-acc:  var(--gold, var(--accent, var(--jade, #b0832f)));
  --m-acc2: var(--gold-soft, var(--sand, var(--gold-lt, #d8b066)));
  --m-surf: var(--white, var(--surface, #ffffff));
  --m-2nd:  var(--moss-vein, var(--line-warm, #cbb894));
  --m-foto: #e7d8c4;                      /* fundo real das fotos de espécime */

  background: var(--m-bg);
  padding: clamp(80px, 12vw, 160px) 0;     /* mesmo ritmo das demais seções */
}

/* Grid próprio: as LPs do template padrão usam .two-col e as bespoke usam
   .material-grid, com classes e nomes diferentes. A seção traz o seu para
   ficar idêntica nas duas famílias e não depender do CSS de cada LP. */
.min-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px); align-items: start;
}
.min-col-img { position: relative; }
.min-cap {
  display: block; margin-top: 14px; font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--m-dim);
}
.min-cap[hidden] { display: none !important; }
@media (max-width: 980px) { .min-grid { grid-template-columns: 1fr; } }
.mineral[data-tema="escuro"] {
  --m-ink:  var(--cream, var(--ivory, #f2ece1));
  --m-dim:  var(--cream-dim, rgba(242, 236, 225, 0.66));
  --m-line: rgba(255, 255, 255, 0.15);
  --m-surf: rgba(255, 255, 255, 0.06);
  --m-2nd:  rgba(255, 255, 255, 0.34);
  --m-bg:   var(--bg-2, var(--bg, #14171a));
}

/* ---- Barra de composição (proporções do laudo) ---- */
.min-comp { margin: clamp(26px, 3.2vw, 38px) 0 0; }
.min-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--m-line); }
.min-bar span { display: block; height: 100%; }
.min-bar .c1 { background: linear-gradient(90deg, var(--m-acc2), var(--m-acc)); }
.min-bar .c2 { background: var(--m-2nd); }
.min-bar .c3 { background: color-mix(in srgb, var(--m-acc) 40%, transparent); }
.min-bar .c4 { background: color-mix(in srgb, var(--m-2nd) 60%, transparent); }
.min-bar .c5 { background: color-mix(in srgb, var(--m-ink) 22%, transparent); }
/* fração que o laudo não quantifica: hachura, para não parecer mineral identificado */
.min-bar .cr {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--m-ink) 13%, transparent) 0 4px, transparent 4px 8px);
}

.min-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.min-tab {
  display: flex; align-items: baseline; gap: 8px; font: inherit; font-size: 13px;
  color: var(--m-dim); background: transparent; border: 1px solid var(--m-line);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.min-tab:hover { border-color: var(--m-acc); }
.min-tab.is-active { border-color: var(--m-acc); background: var(--m-surf); color: var(--m-ink); }
.min-tab i { width: 9px; height: 9px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.min-tab i.c1 { background: var(--m-acc); }
.min-tab i.c2 { background: var(--m-2nd); }
.min-tab i.c3 { background: color-mix(in srgb, var(--m-acc) 55%, transparent); }
.min-tab i.c4 { background: color-mix(in srgb, var(--m-2nd) 70%, transparent); }
.min-tab i.c5 { background: color-mix(in srgb, var(--m-ink) 30%, transparent); }
.min-tab strong { font-family: var(--serif, Georgia, serif); font-size: 1.22rem; color: var(--m-ink); line-height: 1; }

/* laudo sem contagem modal: aba só com o nome do mineral, sem percentual */
.min-tab--nopct { align-items: center; font-size: 13.5px; padding: 10px 17px; }
.min-tab--nopct.is-active { color: var(--m-ink); }

/* sem a barra, a lista de abas não precisa do respiro que vinha dela */
.min-comp > .min-legend:first-child { margin-top: 0; }

/* legenda da fração não quantificada — sem cursor, sem aba */
.min-rest {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--m-dim);
  border: 1px dashed var(--m-line); border-radius: 999px; padding: 9px 16px; cursor: default;
}
.min-rest i {
  width: 9px; height: 9px; border-radius: 50%; flex: none; transform: translateY(-1px);
  background: color-mix(in srgb, var(--m-ink) 16%, transparent);
}
.min-rest strong { font-family: var(--serif, Georgia, serif); font-size: 1.22rem; color: var(--m-dim); line-height: 1; }

.min-painel[hidden] { display: none !important; }

/* ---- Propriedades ---- */
.min-props { list-style: none; margin: clamp(26px,3.2vw,36px) 0 0; padding: 0; }
.min-props li { padding: 15px 0; border-top: 1px solid var(--m-line); }
.min-props li:last-child { border-bottom: 1px solid var(--m-line); }
.min-props strong {
  display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--m-acc); margin-bottom: 5px;
}
.min-props span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--m-ink); opacity: .88; }

/* ---- Origem da jazida (omitida quando o laudo não informa) ---- */
.min-origem {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: clamp(22px, 2.6vw, 30px); padding-top: 16px; border-top: 1px solid var(--m-line);
}
.min-origem b {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--m-dim); font-weight: 500;
}
.min-origem span { font-family: var(--serif, Georgia, serif); font-size: 1.25rem; color: var(--m-ink); }

.min-fonte { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--m-dim); }

/* ---- Palco da foto ---- */
.crystal-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 4px; overflow: hidden; background: var(--m-foto);
  box-shadow: 0 30px 80px -30px rgba(10, 6, 2, 0.45);
}
.mineral[data-tema="escuro"] .crystal-stage { box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.crystal-stage .min-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.min-foto[hidden] { display: none !important; }

@media (max-width: 860px) { .crystal-stage { aspect-ratio: 1/1; max-width: 420px; margin-inline: auto; } }

/* ---- Imagem fixa enquanto o texto rola (só no layout de 2 colunas) ---- */
@media (min-width: 981px) {
  .mineral .min-col-img { position: sticky; top: clamp(84px, 9vh, 112px); }
  /* .reveal termina em translateY(0) — transform ativo atrapalha o sticky */
  .mineral .min-col-img.reveal, .mineral .min-col-img.reveal.in { transform: none; }
  /* cap na LARGURA mantém o 4:5; capar altura quebraria a proporção */
  .mineral .crystal-stage { max-width: calc((100svh - 210px) * 0.8); margin-inline: auto; }
}