/* ============================================================
   album-layout.css — Layout das figurinhas Panini
   Reconstruído após perda acidental — versão funcional
   ============================================================ */

:root{
  --album-sticker-w:49mm;
  --album-sticker-h:65mm;
  --album-sticker-gap:3.5mm;
  --album-scene-sticker-w:calc((var(--album-sticker-w) * 2) + var(--album-sticker-gap));
  --album-scene-sticker-h:var(--album-sticker-h);
  --album-paper:var(--paper, #fffaf0);
  --album-paper-soft:var(--paper-soft, #f8efe1);
  --album-blue:var(--blue, #174f86);
  --album-blue-deep:var(--blue-deep, #0d3159);
  --album-gold:var(--gold, #e8b74b);
}

/* ============ COLLECTION ROWS (grid das figurinhas) ============ */
.collection-rows{
  display:flex;
  flex-direction:column;
  gap:var(--album-sticker-gap);
  align-items:center;
  margin:0 auto;
}
.crow{
  display:flex;
  gap:var(--album-sticker-gap);
  justify-content:center;
}

/* ============ SLOT (cada figurinha) ============ */
.slot{
  width:var(--album-sticker-w);
  height:var(--album-sticker-h);
  background:#f5f9fc;
  border:1.5px dashed #6a8db5;
  border-radius:3mm;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}
.slot .num{
  position:absolute;
  top:1.5mm;
  left:1.5mm;
  background:var(--album-blue);
  color:#fff;
  font-weight:800;
  font-size:9pt;
  padding:1mm 2.5mm;
  border-radius:2mm;
  z-index:2;
  font-family:var(--destaque, system-ui),sans-serif;
}
.slot .nome{
  background:var(--album-blue);
  color:#fff;
  font-weight:700;
  font-size:8.5pt;
  text-align:center;
  padding:1.5mm 2mm;
  border-radius:2mm;
  z-index:2;
  font-family:var(--destaque, system-ui),sans-serif;
  line-height:1.15;
}
.slot .ghost{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
}

/* Especiais */
.slot--foil{
  background:linear-gradient(135deg, #fff7d6, #ffe388, #fff7d6);
  border:1.5px dashed #b8901c;
}
.slot--foil .num{background:var(--album-gold); color:#3d2c08;}
.slot--foil .nome{background:var(--album-gold); color:#3d2c08;}

.slot--scene{
  width:var(--album-scene-sticker-w);
  height:var(--album-scene-sticker-h);
}
.slot--land{
  width:var(--album-scene-sticker-w);
  height:var(--album-sticker-h);
}

/* ============ PAGE--COLLECTION (colar) ============ */
.page--collection{padding:8mm;}
.page--collection .story-header{margin-bottom:5mm;}
.page--collection .collection-rows{flex:1 1 auto;}
.page--collection .rodape{font-size:9.5pt;text-align:center;margin-top:3mm;color:#445;}
.album-badge{
  margin-left:auto;
  background:var(--album-gold);
  color:#3d2c08;
  width:18mm;height:18mm;
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;font-size:14pt;text-align:center;line-height:1;
}
.album-badge span{font-size:7pt;margin-top:1mm;}

/* ============ PAGE--CARTELA (recortar com imagens) ============ */
.page--cartela{padding:8mm;background:#fff !important;}
.page--cartela::before,
.page--cartela::after{display:none !important;}
.page--cartela .cartela-head{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  margin-bottom:4mm;
}
.page--cartela .cartela-head h2{color:#000 !important;}
.page--cartela .cartela-head .eyebrow,
.page--cartela .cartela-head .tag{
  background:transparent !important;
  color:#000 !important;
  border:1px dashed #999 !important;
}
.page--cartela .rodape{
  background:transparent !important;
  color:#333 !important;
  text-align:center;font-size:9.5pt;margin-top:3mm;
}
.page--cartela .rodape .foil-k{color:#333 !important;}
.page--cartela .collection-rows{flex:1 1 auto;}

/* ============ APÓSTOLOS (grid 12) ============ */
.page--apostolos .collection-rows{
  display:grid;
  grid-template-columns:repeat(3, var(--album-sticker-w));
  gap:var(--album-sticker-gap);
  justify-content:center;
}
.page--apostolos .crow{display:contents;}

/* ============ LAYOUT NOVO: 4 figs em linha ============ */
.crow--4{
  display:flex !important;
  gap:var(--album-sticker-gap) !important;
  justify-content:center;
}
.crow--4 .slot{
  width:var(--album-sticker-w) !important;
  height:var(--album-sticker-h) !important;
}

/* ============ LAYOUT ÚNICO: lição + figurinhas em 1 página ============ */
.page--unica{
  padding:8mm;
  display:flex;
  flex-direction:column;
}
.page--unica .licao-head{margin-bottom:2mm;}
.page--unica .versiculo{margin-bottom:2.5mm;padding:2mm 5mm;}

/* Linha 1 (v2): cena (AG00) + figurinha foil (AG01) lado a lado */
.page--unica .unica-row--topo{
  display:flex;
  gap:var(--album-sticker-gap);
  align-items:flex-end;
  justify-content:center;
  margin-bottom:2.5mm;
}

/* Linha 2: história (full width) */
.page--unica .unica-historia{margin-bottom:2.5mm;}

/* Linha 3: 3 figurinhas */
.crow--3{
  display:flex !important;
  gap:var(--album-sticker-gap) !important;
  justify-content:center;
}
.crow--3 .slot{
  width:var(--album-sticker-w) !important;
  height:var(--album-sticker-h) !important;
}
.page--unica .crow--3{margin-bottom:2.5mm;}

/* Linha 1 (v1, legado): cena (esquerda) + história (direita) */
.page--unica .unica-row--cena-texto{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6mm;
  margin-bottom:4mm;
  align-items:start;
}
.page--unica .unica-row--cena-texto .slot--scene{
  width:var(--album-scene-sticker-w) !important;
  height:var(--album-scene-sticker-h) !important;
}
.page--unica .unica-row--cena-texto .bloco{margin:0;}

/* Linha 2 (v1): 4 figurinhas tamanho original */
.page--unica .crow--4{margin-bottom:4mm;}

/* Linha 3: O que aprendemos */
.page--unica .unica-aprendemos{margin-top:1mm;}

/* ============ PRINT ============ */
@media print{
  .print-fab{display:none !important;}
  button{display:none !important;}
}