/* =========================================================================
   page.css — CSS da PÁGINA renderizada. Carregado pelo VIEWER e pelo BUILDER.

   Regra de ouro: nada aqui pode depender de `.pg--edit` para definir
   posição, tamanho, margem, raio ou tipografia. Estilo exclusivo de edição
   (anéis de seleção, alças, grade) vive em builder.css, que o viewer nunca
   carrega. Se o WYSIWYG divergir, é aqui que a regra foi quebrada.

   Geometria vem toda em px LÓGICOS, inline, escrita pelo page-renderer.js.
   A adaptação ao viewport é feita por um único transform: scale() na .pg.
   ========================================================================= */

.pg {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--pg-bg-color, #fff);
  font-family: var(--font-sans);
  color: var(--c-text);
  /* width/height chegam inline em px lógicos (ex.: 800 × 1131) */
  transform-origin: 0 0;
}

/* Camada de background/marca d'água: fica sob tudo e nunca captura clique. */
.pg-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  z-index: 0;
}
.pg-bg[data-fit="cover"]   { background-size: cover; }
.pg-bg[data-fit="contain"] { background-size: contain; }
.pg-bg[data-fit="stretch"] { background-size: 100% 100%; }
.pg-bg[data-fit="tile"]    { background-repeat: repeat; background-size: auto; }

.pg-blocks, .pg-overlays { position: absolute; inset: 0; z-index: var(--z-page-content); }
.pg-overlays { z-index: var(--z-icons); pointer-events: none; }
.pg-overlays > * { pointer-events: auto; }

/* ---- Block ------------------------------------------------------------- */
.blk {
  position: absolute;
  box-sizing: border-box;
  /* left/top/width/height/z-index chegam inline */
}
.blk-inner {
  position: absolute;
  /* inset = gap/2, inline. É assim que o renderer e o GridStack (margin:gap/2)
     produzem retângulos idênticos ao pixel — por isso NÃO usamos gap de grid. */
  overflow: hidden;
  isolation: isolate;         /* stacking context próprio: ícone acima da mídia */
}
.blk-media {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}
.blk-link {
  position: absolute; inset: 0;
  z-index: 1;
  display: block;
}

.blk-text {
  position: absolute; inset: 0;
  display: flex;
  padding: 12px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}
.blk-text[data-align="left"]   { text-align: left; }
.blk-text[data-align="center"] { text-align: center; justify-content: center; }
.blk-text[data-align="right"]  { text-align: right;  justify-content: flex-end; }
.blk-text[data-valign="top"]    { align-items: flex-start; }
.blk-text[data-valign="middle"] { align-items: center; }
.blk-text[data-valign="bottom"] { align-items: flex-end; }

.blk-shape  { position: absolute; inset: 0; }
.blk-embed  { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.blk-placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 6px;
  border: 2px dashed var(--c-border-strong);
  border-radius: inherit;
  background: var(--c-surface-2);
  color: var(--c-text-3);
  font-size: 14px;
  text-align: center;
}

/* ---- Ícones ------------------------------------------------------------ */
.blk-icons {
  position: absolute; inset: 0;
  z-index: var(--z-icons);
  pointer-events: none;       /* só os ícones capturam clique, não a camada */
}
.blk-icons > .icn { pointer-events: auto; }

.icn {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;        /* height acompanha width (% da largura do block) */
  transform: translate(-50%, -50%);   /* âncora no CENTRO: mudar size não desloca */
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
  /* left/top/width/z-index chegam inline */
}
.icn > img, .icn > svg { width: 62%; height: 62%; display: block; pointer-events: none; }

/* Glifo monocromático: a máscara recorta a forma e a cor vem de `fg`.
   Um <img> é documento isolado e não herdaria currentColor. */
.icn-glyph {
  width: 62%; height: 62%;
  display: block;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-image: var(--icn-mask);
          mask-image: var(--icn-mask);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.icn--none    { background: transparent !important; }
.icn--circle  { border-radius: var(--r-full); }
.icn--rounded { border-radius: 22%; }
.icn--square  { border-radius: 0; }

.icn:hover { transform: translate(-50%, -50%) scale(1.06); }
.icn:focus-visible {
  outline: 3px solid var(--c-brand-600);
  outline-offset: 2px;
  /* o anel precisa sobreviver ao gradiente do turn.js */
  z-index: var(--z-page-ui);
}

/*  Alvo de toque desacoplado do visual.
    Numa página escalada a 0,68 um ícone de 44px lógicos vira 30px reais.
    O ::after invisível cresce em px LÓGICOS o suficiente para que, depois
    da escala, o alvo real fique >= 44px (WCAG 2.5.5).                     */
.icn::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width:  max(100%, calc(var(--touch-min) / var(--page-scale)));
  height: max(100%, calc(var(--touch-min) / var(--page-scale)));
}

@media (prefers-reduced-motion: reduce) {
  .icn, .icn:hover { transition: none; transform: translate(-50%, -50%); }
}

/* ---- Acoplamento com o turn.js ----------------------------------------- */
/* O #flipbook NUNCA é escalado: o turn.js opera 1:1 em px reais, senão o
   corner-peel ganha deriva proporcional a (escala - 1). Quem escala é a .pg. */
#flipbook .turn-page > .pg {
  transform: scale(var(--page-scale));
  transform-origin: 0 0;
}
/* Obrigatório: o gradiente/sombra do turn.js é injetado ACIMA do conteúdo e
   engoliria o clique nos ícones. */
#flipbook .gradient,
#flipbook .shadow { pointer-events: none; }

/* ---- Modo lista acessível (?a11y=1 ou prefers-reduced-motion) ----------- */
.fb-list-mode .pg {
  transform: scale(var(--page-scale));
  margin: 0 auto var(--sp-4);
  box-shadow: var(--sh-3);
}