/* =========================================================
   POPUPS DOS CARDS — js/detalhes.js · textos em js/detalhes-dados.js
   ========================================================= */

/* indicador "+" nos cards que abrem popup (os do Laboratório já têm "Ver detalhes →") */
[data-detail]:not(.tool-card) { cursor: pointer; }
[data-detail]:not(.tool-card)::after {
  content: '+'; position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 1rem; line-height: 1; color: var(--gray);
  border: 1px solid var(--border); background: var(--mid);
  transition: transform .2s var(--ease-out), color .2s, border-color .2s, background .2s;
}
[data-detail]:not(.tool-card):hover::after,
[data-detail]:not(.tool-card):focus-visible::after {
  color: #08090b; background: var(--accent); border-color: var(--accent); transform: rotate(90deg);
}
[data-detail]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.light-theme [data-detail]:not(.tool-card):hover::after { color: #fff; }

/* ---------- popup ---------- */
/* a barra de rolagem some ao abrir: reservar o espaço evita a página "pular" */
html { scrollbar-gutter: stable; }
html.detail-open, html.detail-open body { overflow: hidden; }

.detail-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(8, 9, 11, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .18s ease;
}
.detail-overlay[hidden] { display: none; }
.detail-overlay.is-open { opacity: 1; transition: opacity .25s ease; }
.detail-overlay.por-teclado { transition: none; }
.detail-overlay.por-teclado * { animation: none !important; }
body.light-theme .detail-overlay { background: rgba(243, 241, 234, .75); }

/* janela em duas partes: painel visual e conteúdo */
.detail-dialog {
  position: relative; width: min(1040px, 100%); height: min(660px, 90vh);
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  --hl: #e5a963;   /* destaque legível sobre o fundo escuro */
  background: var(--card-bg); color: var(--cream);
  border: 1px solid var(--border); border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  will-change: transform, opacity;
}
body.light-theme .detail-dialog { --hl: var(--accent); box-shadow: 0 30px 80px rgba(30, 50, 45, .2); }

.detail-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--mid); color: var(--cream); border: 1px solid var(--border);
  font-size: .95rem; transition: background .2s, border-color .2s;
}
.detail-close:hover { border-color: var(--accent); }
.detail-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- painel visual ---------- */
.detail-visual {
  position: relative; display: flex; flex-direction: column; min-height: 0; padding: 1.5rem; overflow: hidden;
  border-right: 1px solid var(--border); color: var(--accent);
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--gray) 11%, transparent) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, color-mix(in srgb, var(--gray) 11%, transparent) 27px 28px),
    var(--mid);
}
/* linha de luz varrendo o painel */
.detail-visual::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--hl) 7%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--hl) 22%, transparent);
  animation: detail-scan 6s ease-in-out infinite;
}
@keyframes detail-scan { 0% { transform: translateY(-100px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(680px); opacity: 0; } }

.detail-count { position: relative; z-index: 1; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--gray); }
.detail-visual .detail-art {
  position: relative; z-index: 1; flex: 1; min-height: 0; height: auto; margin: .5rem 0;
  background: none; border: 0; border-radius: 0; color: var(--hl);
}
.detail-visual .detail-art svg { width: 100%; height: 100%; max-height: 300px; }
.detail-overlay.is-open .detail-art > * { animation: detail-art-in .32s var(--ease-out) both; }
@keyframes detail-art-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* experiências: o período é o destaque */
.detail-period { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.detail-period strong { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1; color: var(--cream); letter-spacing: -.02em; }
.detail-period i { width: 2px; height: 44px; background: linear-gradient(var(--accent), transparent); }
.detail-period small { margin-top: 1rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hl); }

.detail-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .4rem; min-height: 1px; }
.detail-overlay.is-open .detail-tags .tag { animation: detail-in .25s var(--ease-out) both; animation-delay: calc(.1s + var(--i) * .03s); }

/* ---------- conteúdo ---------- */
.detail-main { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline-offset: -2px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gray) 45%, transparent) transparent; }
/* sombra indicando que há mais texto para rolar */
.detail-main::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 77px; height: 56px; pointer-events: none;
  background: linear-gradient(to top, var(--card-bg), transparent); opacity: 0; transition: opacity .25s;
}
.detail-main.has-more::after { opacity: 1; }

.detail-body { padding: 2.25rem 2.5rem 1.75rem; }
.detail-kind {
  display: block; padding-right: 3rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hl);
}
.detail-body h3 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 4.2vw, 3rem); line-height: 1.08; margin: .5rem 0 1rem; padding-right: 2rem;
}
.detail-lead { color: var(--cream); line-height: 1.7; font-size: 1.04rem; }

.detail-body h4 {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray); margin: 1.75rem 0 .85rem;
}
.detail-body > h4::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* itens em blocos com ícone */
.detail-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .6rem; }
.detail-list li {
  display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .85rem;
  background: var(--mid); border: 1px solid var(--border); border-radius: .85rem;
  color: var(--cream); font-size: .88rem; line-height: 1.5;
  transition: border-color .2s, transform .2s;
}
.detail-list li:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); }
.detail-list i {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: .45rem;
  background: color-mix(in srgb, var(--hl) 16%, transparent); color: var(--hl);
}
.detail-list svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* texto corrido em destaque (ex.: "Quando faz sentido") */
.detail-callout {
  margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: .85rem;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.detail-callout h4 { margin: 0 0 .5rem; color: var(--hl); }
.detail-callout p { color: var(--cream); line-height: 1.65; font-size: .92rem; }

/* entrada escalonada do conteúdo (também ao trocar de card pelas setas) */
.detail-overlay.is-open .detail-body > *:not(.detail-list),
.detail-overlay.is-open .detail-list li {
  animation: detail-in .25s var(--ease-out) both;
  animation-delay: calc(.05s + var(--i, 0) * .03s);
}
@keyframes detail-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- rodapé: setas e chamada ---------- */
.detail-actions {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 2.5rem; border-top: 1px solid var(--border); background: var(--card-bg);
}
.detail-nav { display: flex; gap: .4rem; }
.detail-nav button {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: var(--cream); background: transparent; border: 1px solid var(--border);
  transition: color .2s, border-color .2s, background .2s;
}
.detail-nav button[hidden] { display: none; }
.detail-nav button:hover { color: var(--hl); border-color: var(--hl); }
.detail-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.detail-cta { white-space: nowrap; }
body.light-theme .detail-cta { color: #fff; }

/* ---------- telas menores: painel em cima, sobe da parte de baixo ---------- */
@media (max-width: 820px) {
  .detail-overlay { padding: 0; place-items: end stretch; }
  .detail-dialog {
    width: 100%; height: auto; max-height: 92vh; max-height: 92dvh;
    display: flex; flex-direction: column; border-radius: 1.25rem 1.25rem 0 0; border-width: 1px 0 0;
  }
  .detail-visual { flex: 0 0 auto; height: 136px; padding: .85rem 1rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .detail-visual .detail-art { margin: 0; }
  .detail-visual .detail-art svg { max-height: 100%; }
  .detail-tags { display: none; }
  .detail-period { flex-direction: row; gap: .8rem; flex-wrap: wrap; justify-content: center; }
  .detail-period strong { font-size: 2rem; }
  .detail-period i { width: 28px; height: 2px; background: var(--accent); }
  .detail-period small { width: 100%; margin-top: 0; }
  .detail-main { flex: 1 1 auto; }
  .detail-body { padding: 1.4rem 1.25rem 1.25rem; }
  .detail-body h3 { font-size: 2rem; }
  .detail-list { grid-template-columns: 1fr; }
  .detail-actions { padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom)); }
  .detail-main::after { bottom: 66px; }
  .detail-cta { padding: .7rem 1.1rem; font-size: .85rem; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-overlay { transition: none; }
  .detail-visual::after { display: none; }
  .detail-overlay.is-open .detail-body > *:not(.detail-list),
  .detail-overlay.is-open .detail-list li,
  .detail-overlay.is-open .detail-tags .tag,
  .detail-overlay.is-open .detail-art > * { animation: none; }
}