/* Folhas para imprimir: convite e molde. Usar DEPOIS de site.css:
     <link rel="stylesheet" href="/css/site.css">
     <link rel="stylesheet" href="/css/impressao.css">
   No ecrã: a página segue o tema (claro ou escuro) e a folha aparece sempre como papel A4 (pré-visualização);
   no tema claro o papel ganha uma aresta e uma sombra quente para se destacar do fundo, que também é papel.
   Na impressão: só a folha, em claro, sem cabeçalho nem rodapé.

   Estrutura:
     <div class="barra-impressao so-ecra"> texto + <button class="botao botao--primario" data-imprimir>Imprimir</button> </div>
     <div class="folhas">
       <section class="folha-a4">               uma página A4 (210 × 297 mm)
         <div class="folha-a4__grelha folha-a4__grelha--4">  2 × 2 cartões (ou --2, --8)
           <article class="cartao-convite"> … </article>
         </div>
       </section>
     </div>
   O botão [data-imprimir] não tem handler inline: o módulo da página faz button.addEventListener('click', () => print()). */

:root {
  --p-papel: #FBF8F1;
  --p-tinta: #1A1814;
  --p-tinta-2: #4A463E;
  --p-linha: #B9B2A3;
  --p-luz: #C98A0E; /* luz escurecida para ler em papel */
}

.barra-impressao {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) 0; margin-bottom: var(--s-5); border-bottom: var(--line) solid var(--c-line);
}
.barra-impressao p { color: var(--c-text-2); max-width: var(--measure); }

.folhas { display: grid; gap: var(--s-6); justify-items: center; }
.folha-a4 {
  width: 210mm; height: 297mm; max-width: 100%; aspect-ratio: 210 / 297;
  background: var(--p-papel); color: var(--p-tinta);
  padding: 10mm; overflow: hidden; position: relative;
  font-family: var(--f-serif);
  outline: var(--line) solid var(--c-line); box-shadow: var(--sombra);
}
@media screen and (max-width: 840px) {
  /* no telemóvel a folha encolhe para caber; o texto é desenhado em mm, por isso escala junto */
  .folha-a4 { width: 100%; height: auto; }
}
.folha-a4__grelha { display: grid; height: 100%; gap: 0; }
.folha-a4__grelha--2 { grid-template-rows: 1fr 1fr; }
.folha-a4__grelha--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.folha-a4__grelha--8 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); }
.folha-a4__grelha > * { border: 0.3mm dashed var(--p-linha); padding: 6mm; position: relative; min-width: 0; }

/* Linhas e marcas de corte */
.linha-corte { border: 0; border-top: 0.3mm dashed var(--p-linha); margin: 0; }
.marca-corte { position: absolute; width: 4mm; height: 4mm; border-color: var(--p-tinta-2); border-style: solid; border-width: 0; }
.marca-corte--ne { top: 2mm; right: 2mm; border-top-width: .3mm; border-right-width: .3mm; }
.marca-corte--no { top: 2mm; left: 2mm; border-top-width: .3mm; border-left-width: .3mm; }
.marca-corte--se { bottom: 2mm; right: 2mm; border-bottom-width: .3mm; border-right-width: .3mm; }
.marca-corte--so { bottom: 2mm; left: 2mm; border-bottom-width: .3mm; border-left-width: .3mm; }

/* Texto em papel */
.papel-etiqueta { font-family: var(--f-ui); font-weight: 600; font-size: 3mm; letter-spacing: .1em; text-transform: uppercase; color: var(--p-tinta-2); }
.papel-titulo { font-family: var(--f-serif); font-weight: 600; font-size: 7mm; line-height: 1.1; color: var(--p-tinta); }
.papel-texto { font-family: var(--f-serif); font-size: 3.6mm; line-height: 1.45; color: var(--p-tinta); }
.papel-texto + .papel-texto { margin-top: 2mm; }
.papel-escrito { font-family: var(--f-hand); color: var(--p-tinta); line-height: 1.1; }
.papel-escrito--grande { font-size: 12mm; }
.papel-endereco { font-family: var(--f-hand); font-size: 5.5mm; color: var(--p-tinta); }
.papel-luz { color: var(--p-luz); }
.papel-qr { width: 24mm; height: 24mm; image-rendering: pixelated; }
.folha-a4 .n-pedra__abrev { color: var(--p-tinta-2); }
.folha-a4 .n-pedra__num { color: var(--p-tinta); }

/* Molde: contorno da pedra para recortar/decalcar, tracejado = por fazer */
.molde-contorno { fill: none; stroke: var(--p-tinta-2); stroke-width: .4; stroke-dasharray: 2 1.5; }
.molde-guia { fill: none; stroke: var(--p-linha); stroke-width: .25; }
.molde-texto { font-family: var(--f-hand); fill: var(--p-tinta); }

/* Folha em tamanho real, por cima da página (impressao.mjs): rola nas duas direções */
html.folha-real-aberta, html.folha-real-aberta body { overflow: hidden; }
.folha-real { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; background: var(--c-deep); color: var(--c-text); }
.folha-real__barra {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: calc(var(--s-2) + var(--sa-t, 0px)) var(--margem-d, var(--s-4)) var(--s-2) var(--margem-e, var(--s-4));
  border-bottom: var(--line) solid var(--c-line); background: var(--c-bg);
}
.folha-real__titulo { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-text-2); }
.folha-real__fechar { min-height: var(--tap); }
.folha-real__rolar { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; padding: var(--s-4) 0 calc(var(--s-4) + var(--sa-b, 0px)); }
.folha-real__folha { width: max-content; margin: 0 auto; padding: 0 var(--s-4); }
.folha-real .folha-a4 { width: 210mm; height: 297mm; max-width: none; aspect-ratio: auto; }

@page { size: A4 portrait; margin: 0; }

@media print {
  html, body { background: #fff !important; color: var(--p-tinta) !important; }
  body { display: block; min-height: 0; }
  .cabecalho, .rodape, .saltar, .so-ecra, .barra-impressao, .avisos, .folha__pega, .folha-real, .folha-moldura__ver { display: none !important; }
  html.folha-real-aberta, html.folha-real-aberta body { overflow: visible; }
  main, .pagina, .contentor { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .folhas { display: block; gap: 0; }
  .folha-a4 { width: 210mm; height: 297mm; max-width: none; aspect-ratio: auto; background: #fff; margin: 0; outline: 0; box-shadow: none; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .folha-a4:last-child { break-after: auto; page-break-after: auto; }
  a { color: inherit; text-decoration: none; }
}