/* portfolio.css — estilos do portfólio P&D usando os tokens do design system.
   Pré-requisito: linkar antes os tokens do design system (colors.css, typography.css,
   spacing.css, fonts.css) — copiados em static/css/tokens/. Todas as cores/raios/sombras
   abaixo são var(--*) do sistema; não há hex inventado fora dos acentos por área. */

/* ---------- Seção / cabeçalho ---------- */
.pd-section { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) 24px; }
.pd-section__head { margin-bottom: 32px; }
.pd-eyebrow { font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 500;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary-deep, #127864); }
.pd-h1 { font-family: var(--font-body, 'Prompt', sans-serif); font-weight: 800;
  font-size: clamp(28px, 4vw, 44px); color: var(--text-heading, #1A2733); margin: 8px 0 12px; line-height: 1.1; }
.pd-lead { font-family: var(--font-body, 'Prompt', sans-serif); font-size: 17px;
  color: var(--text-muted, #5A6872); max-width: 640px; line-height: 1.6; }

/* ---------- Filtros ---------- */
.pd-filterbar { display: flex; flex-direction: column; gap: 14px; background: var(--neutral-50, #F8F9FA);
  border: 1px solid var(--border-subtle, #E9ECEF); border-radius: var(--radius-lg, 16px); padding: 18px 20px; margin-bottom: 24px; }
.pd-filterbar__search { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--border-default, #DEE2E6); border-radius: var(--radius-md, 12px); padding: 10px 14px; }
.pd-filterbar__search i { color: var(--text-muted, #8A94A6); }
.pd-filterbar__search input { border: 0; outline: 0; flex: 1; font: 15px var(--font-body, 'Prompt', sans-serif); background: transparent; }
.pd-filterbar__groups { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pd-select { display: flex; flex-direction: column; gap: 4px; font: 12px var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #5A6872); }
.pd-select select { border: 1px solid var(--border-default, #DEE2E6); border-radius: var(--radius-md, 12px);
  padding: 9px 12px; font: 14px var(--font-body, 'Prompt', sans-serif); background: #fff; color: var(--text-body, #2C3E50); }
.pd-select select:focus { outline: 0; border-color: var(--color-primary, #85D8C8); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(133,216,200,.35)); }

/* ---------- Botões ---------- */
.pd-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-md, 12px);
  padding: 10px 18px; font: 600 14px var(--font-body, 'Prompt', sans-serif); cursor: pointer; border: 1px solid transparent;
  text-decoration: none; transition: all .3s ease; }
.pd-btn--primary { background: var(--gradient-brand, linear-gradient(135deg, #85D8C8, #127864)); color: #fff; }
.pd-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta, 0 10px 24px rgba(133,216,200,.30)); }
.pd-btn--ghost { background: #fff; border-color: var(--border-default, #DEE2E6); color: var(--text-body, #2C3E50); }
.pd-btn--ghost:hover { border-color: var(--color-primary, #85D8C8); }

.pd-result-count { font: 13px var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #8A94A6); margin: 0 0 16px; }

/* ---------- Grid + Card ---------- */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 22px; }
.pd-case-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-subtle, #E9ECEF);
  border-radius: var(--radius-lg, 16px); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-card, 0 15px 35px rgba(133,216,200,.10));
  transition: all .3s ease; }
.pd-case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover, 0 20px 40px rgba(133,216,200,.20)); }
/* acento por área terapêutica — variável compartilhada pela barra (compacto) e pelo hero (editorial) */
.pd-case-card { --card-accent: var(--gradient-brand, linear-gradient(135deg, #85D8C8, #127864)); }
.pd-case-card[data-area="oncologia"]      { --card-accent: linear-gradient(135deg, #127864, #5FBFAD); }
.pd-case-card[data-area="neurologia"]     { --card-accent: linear-gradient(135deg, #0E5A4B, #4DA793); }
.pd-case-card[data-area="saude-publica"]  { --card-accent: linear-gradient(135deg, #2E9080, #85D8C8); }
.pd-case-card[data-area="acesso"]         { --card-accent: linear-gradient(135deg, #4DA793, #85D8C8); }
.pd-case-card[data-area="dermatologia"]   { --card-accent: linear-gradient(135deg, #5FBFAD, #85D8C8); }
.pd-case-card__accent { height: 5px; background: var(--card-accent); }

.pd-case-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pd-case-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-case-card__top .pd-badge { margin-left: auto; }
.pd-case-card__title { font: 800 19px var(--font-body, 'Prompt', sans-serif); color: var(--text-heading, #1A2733); margin: 0; }
.pd-case-card__stat { display: flex; align-items: baseline; gap: 6px; padding: 8px 0;
  border-top: 1px solid var(--border-subtle, #E9ECEF); border-bottom: 1px solid var(--border-subtle, #E9ECEF); }
.pd-stat__value { font: 700 30px/.9 var(--font-display, 'Oswald', sans-serif); color: var(--color-primary-deep, #127864); letter-spacing: -.5px; }
.pd-stat__unit { font: 500 14px var(--font-display, 'Oswald', sans-serif); color: var(--color-primary-deep, #127864); }
.pd-stat__label { font: 12px var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #8A94A6); margin-left: 4px; }
.pd-case-card__sub { font: 14px/1.55 var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #5A6872); margin: 0; flex: 1; }
.pd-case-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pd-case-card__cta { margin-left: auto; font: 600 13px var(--font-body, 'Prompt', sans-serif); color: var(--text-link, #127864); display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Card — variante editorial (hero com estatística) ---------- */
.pd-case-card--editorial .pd-case-card__hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 152px;
  padding: 18px 20px; color: #fff; background: var(--card-accent); }
.pd-case-card__hero-pattern { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1.4px, transparent 1.4px); background-size: 18px 18px; }
.pd-case-card__hero-icon { position: absolute; right: 16px; bottom: 14px; font-size: 30px; color: rgba(255,255,255,.85); }
.pd-case-card__hero-eyebrow { position: relative; font: 500 11px var(--font-display, 'Oswald', sans-serif);
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.pd-case-card__hero-stat { position: relative; display: flex; align-items: baseline; gap: 5px; margin-top: auto; }
.pd-case-card__hero-value { font: 700 40px/.9 var(--font-display, 'Oswald', sans-serif); color: #fff; letter-spacing: -1px; }
.pd-case-card__hero-unit { font: 500 16px var(--font-display, 'Oswald', sans-serif); color: rgba(255,255,255,.85); }
.pd-case-card__hero-label { position: relative; font: 11px var(--font-body, 'Prompt', sans-serif); color: rgba(255,255,255,.8); margin-top: 4px; }
.pd-case-card--editorial .pd-case-card__body { gap: 10px; padding: 18px 20px; }
.pd-case-card--editorial .pd-case-card__title { font-size: 18px; }
.pd-case-card--editorial .pd-case-card__sources { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ---------- Chips / Badges ---------- */
.pd-chip { font: 500 10.5px var(--font-body, 'Prompt', sans-serif); padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-default, #DEE2E6); color: var(--text-muted, #5A6872); }
.pd-chip--solid { background: var(--surface-tint, #EAF7F3); color: var(--color-primary-deep, #127864); border-color: transparent; }
.pd-badge { font: 500 11px var(--font-body, 'Prompt', sans-serif); padding: 3px 10px; border-radius: 999px; }
.pd-badge--published   { background: rgba(25,135,84,.12);  color: #198754; }
.pd-badge--poster      { background: rgba(13,202,240,.14);  color: #0AA5C2; }
.pd-badge--confidential{ background: var(--neutral-100, #EEF1F3); color: var(--text-muted, #5A6872); }

/* ---------- Vazio ---------- */
.pd-empty { text-align: center; padding: 64px 24px; color: var(--text-muted, #8A94A6); }
.pd-empty i { font-size: 40px; opacity: .5; }

/* ---------- Página de análise / modal ---------- */
.pd-analysis { max-width: 760px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) 24px; }
.pd-analysis__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.pd-findings { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.pd-finding { background: var(--neutral-50, #F8F9FA); border: 1px solid var(--border-subtle, #E9ECEF);
  border-radius: var(--radius-md, 12px); padding: 14px 18px; min-width: 120px; }
.pd-finding__value { display: block; font: 700 24px var(--font-display, 'Oswald', sans-serif); color: var(--color-primary-deep, #127864); }
.pd-finding__metric { font: 12px var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #8A94A6); }
.pd-analysis__body { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.pd-analysis__h { font: 800 13px var(--font-body, 'Prompt', sans-serif); text-transform: uppercase; letter-spacing: .7px;
  color: var(--color-primary-deep, #127864); margin: 0; }
.pd-analysis__p { font: 16px/1.65 var(--font-body, 'Prompt', sans-serif); color: var(--text-body, #2C3E50); margin: 0; text-align: justify; }
.pd-figure { margin: 0; background: var(--neutral-50, #F8F9FA); border: 1px solid var(--border-subtle, #E9ECEF);
  border-radius: var(--radius-md, 12px); padding: 20px 18px 16px; }
.pd-figure figcaption { font: 12px/1.5 var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #8A94A6);
  text-align: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle, #E9ECEF); }
.pd-chart { width: 100%; min-height: 280px; } /* alvo do D3 */
.pd-figframe { width: 100%; border: 0; display: block; min-height: 300px; background: transparent; overflow: hidden; }
.pd-tryform { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; margin-top: 6px;
  background: var(--surface-tint, #EAF7F3); border: 1px solid var(--border-subtle, #E9ECEF); border-radius: var(--radius-md, 12px); }
.pd-tryform__hint { font: 12.5px var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #5A6872); }
.pd-value__list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.pd-value__list li { display: flex; gap: 13px; align-items: flex-start; }
.pd-value__list i { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-tint, #EAF7F3); color: var(--color-primary-deep, #127864); align-items: center; justify-content: center; }
.pd-value__list strong { font: 700 15px var(--font-body, 'Prompt', sans-serif); color: var(--text-heading, #1A2733); }
.pd-value__list p { font: 14px/1.55 var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #5A6872); margin: 2px 0 0; }
.pd-callout { background: var(--surface-tint, #EAF7F3); border-left: 3px solid var(--teal-500, #127864);
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0; padding: 18px 20px; }
.pd-callout__label { font: 700 13px var(--font-body, 'Prompt', sans-serif); color: var(--color-primary-deep, #127864); display: block; margin-bottom: 6px; }
.pd-callout p { font: 16px/1.65 var(--font-body, 'Prompt', sans-serif); color: var(--text-body, #2C3E50); margin: 0; text-align: justify; }
.pd-refs { padding-top: 14px; border-top: 1px solid var(--border-subtle, #E9ECEF); }
.pd-refs__label { font: 600 11px var(--font-body, 'Prompt', sans-serif); text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted, #8A94A6); }
.pd-refs p { font: 12px/1.5 var(--font-body, 'Prompt', sans-serif); color: var(--text-muted, #5A6872); margin: 8px 0 0; }
.pd-refs p i { color: var(--color-primary-deep, #127864); }
.pd-publication { display: flex; align-items: center; gap: 10px; font: 13px var(--font-body, 'Prompt', sans-serif);
  color: var(--text-muted, #8A94A6); padding-top: 14px; border-top: 1px solid var(--border-subtle, #E9ECEF); }
.pd-publication i { color: var(--color-primary-deep, #127864); }

/* ---------- Modal (projeto completo carregado via fetch) ---------- */
body.pd-modal-open { overflow: hidden; }
.pd-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 5vh, 56px) 16px; overflow-y: auto; }
.pd-modal[hidden] { display: none; }
.pd-modal__backdrop { position: fixed; inset: 0; background: rgba(14, 14, 39, .55); }
.pd-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 820px; margin: auto; background: #fff;
  border-radius: var(--radius-lg, 16px); box-shadow: 0 30px 60px rgba(14, 14, 39, .32); }
.pd-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--border-default, #DEE2E6); background: #fff; color: var(--text-body, #2C3E50); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: all .2s ease; }
.pd-modal__close:hover { border-color: var(--color-primary, #85D8C8); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(133,216,200,.35)); }
.pd-modal__content .pd-analysis { padding-top: 48px; }
.pd-modal__loading { display: flex; align-items: center; justify-content: center; min-height: 220px; color: var(--text-muted, #8A94A6); font-size: 28px; }
.pd-modal__loading i { animation: pd-spin 1s linear infinite; }
@keyframes pd-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) { .pd-grid { grid-template-columns: 1fr; } }