/*
 * A escola na tempestade — infografia.html
 * O cartaz é um SVG de 2970 × 4200 unidades (0,1 mm): A3 ao alto, à escala.
 * No ecrã ajusta-se à largura; «Ampliar» mostra-o maior, com scroll dentro da moldura.
 * Na impressão só sai o cartaz, em A3 sem margens (ou em A2, em infografia-a2.html).
 */
.pag-infografia { background: #121621; }
.info-topo { background: #121621; color: #f3ede2; padding: 1rem 1.25rem 2.2rem; }
.info-topo-dentro { max-width: 82rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.info-topo .marca { color: #fff; }
.info-abertura { max-width: 82rem; margin: 2.2rem auto 0; }
.info-abertura h1 { margin-top: .8rem; font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: .95; font-weight: 900; letter-spacing: -.02em; }
.info-abertura h1 em { font-style: normal; color: var(--brasa-noite); }
.info-intro { margin-top: 1.2rem; max-width: 46rem; font-size: 1.25rem; line-height: 1.5; color: #d9d3c7; }
.info-acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.info-acoes .botao-contorno[aria-pressed="true"] { background: #f3ede2; color: #121621; }
.info-nota { margin-top: 1rem; max-width: 46rem; color: #a9a499; font-size: 1.125rem; line-height: 1.45; }

.cartaz-moldura { position: relative; padding: 1.5rem 1rem 3rem; }
.cartaz { max-width: 82rem; margin: 0 auto; background: #f3ede2; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04); border-radius: 2px; }
.cartaz svg { display: block; width: 100%; height: auto; }
.cartaz-carregar { padding: 4rem 1rem; text-align: center; color: #5d6573; font-size: 1.25rem; }
.cartaz-moldura.ampliado { overflow: auto; max-height: 92vh; }
.cartaz-moldura.ampliado .cartaz { max-width: none; width: 2600px; }
@media (max-width: 40rem) { .cartaz-moldura { padding: 1rem .5rem 2rem; } }

.info-dica { position: absolute; z-index: 20; pointer-events: none; max-width: 22rem; padding: .7rem .9rem; border-radius: .5rem;
    background: #1b2438; color: #f3ede2; font-size: 1.125rem; line-height: 1.4; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
.info-dica b { display: block; font-size: 1.1875rem; color: #fff; }
.info-dica small { display: block; margin-top: .25rem; color: #c9c2b3; font-size: 1rem; }

/* Os elementos com pormenor reagem ao rato. */
.cartaz svg [data-dica] { cursor: pointer; }
.cartaz svg .fluxo { transition: stroke-opacity .2s; }
.cartaz svg .fluxos.foco .fluxo { stroke-opacity: .08; }
.cartaz svg .fluxos.foco .fluxo.ativo { stroke-opacity: .75; }

@media (prefers-reduced-motion: reduce) { .cartaz svg * { transition: none !important; } }

/* ── A3 ──────────────────────────────────────────────────────────────── */
@page { size: A3 portrait; margin: 0; }
@media print {
    html, body { background: #f3ede2 !important; margin: 0 !important; padding: 0 !important; width: 297mm !important; height: 420mm !important; overflow: hidden !important; }
    main { margin: 0 !important; padding: 0 !important; }
    .cartaz { overflow: hidden !important; border-radius: 0 !important; }
    .nao-imprimir, .info-dica { display: none !important; }
    .cartaz-moldura, .cartaz-moldura.ampliado { padding: 0 !important; overflow: visible !important; max-height: none !important; }
    .cartaz, .cartaz-moldura.ampliado .cartaz { max-width: none !important; width: 297mm !important; height: 420mm !important; margin: 0 !important; box-shadow: none !important; }
    .cartaz svg { width: 297mm !important; height: 420mm !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    /* Sem sessão de administração, a impressão não leva o cartaz. */
    html:not(.admin) .cartaz { visibility: hidden !important; }
    html:not(.admin) .cartaz-moldura::before { content: "A versão para impressão da infografia está reservada à administração do metaProf. Veja-a em metaprof.pt/alerta-escolas/infografia.html"; position: absolute; top: 0; left: 0; right: 0; padding: 40mm 30mm; font: 700 16pt/1.4 system-ui, sans-serif; color: #111214; }
}

/* ── A2 (infografia-a2.html: <html data-formato="A2">; o @page vem na própria página) ── */
html[data-formato="A2"] .cartaz-moldura.ampliado .cartaz { width: 3600px; }
@media print {
    html[data-formato="A2"], html[data-formato="A2"] body { width: 420mm !important; height: 594mm !important; }
    html[data-formato="A2"] .cartaz, html[data-formato="A2"] .cartaz-moldura.ampliado .cartaz,
    html[data-formato="A2"] .cartaz svg { width: 420mm !important; height: 594mm !important; }
}