/* =========================================================================
   Guidelyze · Biblioteca de Posts · biblio.css
   Reusa tokens livro + estrutura similar a page de midias (style.css).
   ========================================================================= */

/* Filter chips reutilizam style.css */
.biblio-filters{
  max-width:1400px;margin:0 auto;
  padding:var(--space-2) var(--pad-x) var(--space-6);
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
}

.biblio-grid{
  max-width:1400px;margin:0 auto;
  padding:0 var(--pad-x) var(--space-12);
  column-count:3;column-gap:var(--space-5);
}
@media (max-width:1100px){.biblio-grid{column-count:2}}
@media (max-width:680px){.biblio-grid{column-count:1}}

.biblio-card{
  break-inside:avoid;
  margin:0 0 var(--space-5);
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-soft);
  transition:transform var(--dur-fast),box-shadow var(--dur-fast);
}
.biblio-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.biblio-card[hidden]{display:none}
.biblio-card[data-card-type="org"]{border-left:3px solid var(--sage)}
.biblio-card[data-card-type="ads"]{border-left:3px solid #C9A87C}

.biblio-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-alt);
  font-size:11px;
}
.biblio-card__badge{
  font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;
  font-weight:700;padding:3px 8px;border-radius:var(--radius-pill);
  margin-right:6px;
}
.biblio-card__badge--org{background:rgba(92,143,122,.14);color:var(--sage-deep)}
.biblio-card__badge--ads{background:rgba(201,168,124,.18);color:#7A5A30}
.biblio-card__from{font-family:var(--font-mono);font-size:10px;color:var(--fg-softer);letter-spacing:var(--track-wide)}
.biblio-card__date{font-family:var(--font-mono);font-size:10px;color:var(--fg-softer)}

.biblio-card__visual{
  background:linear-gradient(135deg,#EFE6CE,#E3D8C8);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.biblio-card__visual[data-ar="1:1"],
.biblio-card__visual[data-ar="1/1"]{aspect-ratio:1/1}
.biblio-card__visual[data-ar="3:4"],
.biblio-card__visual[data-ar="3/4"]{aspect-ratio:3/4}
.biblio-card__visual[data-ar="4:5"],
.biblio-card__visual[data-ar="4/5"]{aspect-ratio:4/5}
.biblio-card__visual[data-ar="9:16"],
.biblio-card__visual[data-ar="9/16"]{aspect-ratio:9/16}
.biblio-card__visual[data-ar="4:3"],
.biblio-card__visual[data-ar="4/3"]{aspect-ratio:4/3}
.biblio-card__visual img,
.biblio-card__visual video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.biblio-card__visual--empty{
  aspect-ratio:1/1;background:repeating-linear-gradient(45deg,var(--paper-warm),var(--paper-warm) 12px,var(--paper-deep) 12px,var(--paper-deep) 24px);
}
.biblio-card__visual-hint{
  font-family:var(--font-mono);font-size:11px;color:var(--fg-softer);
  background:rgba(255,255,255,.84);padding:4px 10px;border-radius:var(--radius-pill);
}

.biblio-card__copy{
  padding:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-2);flex:1;
}
.biblio-card__hook{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-lg);line-height:var(--lead-snug);
  margin:0;color:var(--fg);
}
.biblio-card__body{
  font-size:var(--text-sm);line-height:var(--lead-normal);
  color:var(--fg-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.biblio-card__cta{
  display:inline-block;align-self:flex-start;
  font-size:var(--text-xs);font-weight:700;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--accent-deep);
  background:rgba(92,143,122,.10);padding:5px 10px;border-radius:var(--radius-pill);
  margin-top:auto;
}

.biblio-card__actions{
  display:flex;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--line-soft);
  background:var(--paper-warm);
  flex-wrap:wrap;
}
.biblio-card__actions .fb{font-size:11px;padding:6px 12px}

/* Empty state */
.biblio-empty{
  max-width:600px;margin:var(--space-12) auto;
  text-align:center;padding:var(--space-8);
  background:var(--paper);border:1.5px dashed var(--line);border-radius:var(--radius-lg);
}
.biblio-empty[hidden]{display:none}
.biblio-empty__frame{
  font-size:64px;color:var(--accent-soft);
  border:2px dashed var(--accent-soft);
  width:96px;height:120px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--space-4);
}
.biblio-empty__text{
  font-family:var(--font-display);font-size:var(--text-md);font-style:italic;
  color:var(--fg-soft);line-height:var(--lead-relaxed);margin:0;
}
.biblio-empty__text a{color:var(--accent-deep);text-decoration:underline}
.biblio-empty__text strong{font-style:normal;font-weight:700;color:var(--fg)}

/* Library link no topbar da pagina midias (definido em style.css quando inject roda) */

/* Slider scroll-snap dentro do card da biblioteca (quando post é carrossel) */
.biblio-card__visual.is-carousel{
  padding:0;background:#1c1c1a;overflow:hidden;
  position:relative;display:block;
}
.biblio-card__slider-track{
  display:flex;width:100%;height:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.biblio-card__slider-track::-webkit-scrollbar{display:none}
.biblio-card__slider-slide{
  flex:0 0 100%;width:100%;height:100%;object-fit:cover;
  scroll-snap-align:start;display:block;
}
.biblio-card__slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;
  border:none;cursor:pointer;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast);z-index:2;
}
.biblio-card__slider-arrow:hover{background:rgba(0,0,0,.78);transform:translateY(-50%) scale(1.08)}
.biblio-card__slider-arrow--prev{left:6px}
.biblio-card__slider-arrow--next{right:6px}
.biblio-card__slider-arrow.is-disabled{opacity:.25;cursor:default;pointer-events:none}
.biblio-card__slider-counter{
  position:absolute;top:8px;right:8px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  background:rgba(0,0,0,.7);color:#fff;
  padding:3px 8px;border-radius:var(--radius-pill);
  z-index:2;letter-spacing:.04em;
}

/* View mode 3 tamanhos */
body[data-view-mode="xl"] .biblio-grid{column-count:1}
body[data-view-mode="m"]  .biblio-grid{column-count:2}
body[data-view-mode="s"]  .biblio-grid{column-count:3}
@media (max-width:1100px){
  body[data-view-mode="xl"] .biblio-grid,
  body[data-view-mode="m"]  .biblio-grid,
  body[data-view-mode="s"]  .biblio-grid{column-count:2}
}
@media (max-width:680px){
  body[data-view-mode="xl"] .biblio-grid,
  body[data-view-mode="m"]  .biblio-grid,
  body[data-view-mode="s"]  .biblio-grid{column-count:1}
}

/* Botão "✏ Editar carrossel" — deep-link pra LP de mídias com hash */
.biblio-card__slider-edit{
  position:absolute;top:10px;left:10px;z-index:3;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  background:rgba(255,255,255,.92);color:var(--fg);
  padding:4px 10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-pill);
  cursor:pointer;opacity:0;transition:opacity var(--dur-fast);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.biblio-card__visual:hover .biblio-card__slider-edit{opacity:1}
.biblio-card__slider-edit:hover{background:var(--accent);color:var(--paper)}

/* Painel flutuante igual ao das LPs */
.view-mode-ctl{
  position:fixed;bottom:20px;left:20px;z-index:900;
  display:flex;gap:4px;padding:5px 7px;
  background:rgba(250,246,236,.95);backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  box-shadow:0 6px 20px rgba(28,28,26,.18);
  font-family:var(--font-mono);font-size:11px;
}
.view-mode-ctl__btn{
  width:32px;height:30px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid transparent;
  font-size:13px;font-weight:700;color:var(--fg-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast);
}
.view-mode-ctl__btn:hover{background:var(--paper-deep);color:var(--fg)}
.view-mode-ctl__btn.is-active{background:var(--accent);color:var(--paper);border-color:var(--accent)}


/* ---- Botão calendário ---- */
.fb--cal { font-size: 15px; padding: 4px 8px; background: none; border: 1px solid var(--sand-soft, #E5D9C6); border-radius: 6px; cursor: pointer; }
.fb--cal:hover { background: var(--paper-warm, #F5EDD8); }

/* ---- Date picker modal ---- */
.bdp-overlay { position: fixed; inset: 0; background: rgba(28,28,26,.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.bdp-overlay[hidden] { display: none !important; }
.bdp-modal { background: var(--paper, #FAF6EC); border-radius: 14px; padding: 20px; width: 320px; max-width: 95vw; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.bdp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bdp-month-label { flex: 1; text-align: center; font-weight: 600; font-size: 15px; }
.bdp-nav { background: none; border: 1px solid var(--sand-soft, #E5D9C6); border-radius: 6px; width: 28px; height: 28px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bdp-close { background: none; border: none; font-size: 20px; cursor: pointer; margin-left: auto; color: var(--fg-soft, #888); }
.bdp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10px; color: var(--fg-soft, #888); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.bdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 16px; }
.bdp-cell { aspect-ratio: 1; border: none; background: none; border-radius: 6px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bdp-cell--empty { pointer-events: none; }
.bdp-cell--past { color: var(--fg-soft, #CCC); cursor: not-allowed; }
.bdp-cell:not(.bdp-cell--empty):not(.bdp-cell--past):hover { background: var(--paper-warm, #F5EDD8); }
.bdp-cell--today { font-weight: 700; color: var(--sage, #5C8F7A); outline: 1px solid var(--sage, #5C8F7A); }
.bdp-cell--selected { background: var(--sage, #5C8F7A) !important; color: #fff !important; }
.bdp-foot { display: flex; align-items: center; gap: 12px; }
.bdp-selected-label { flex: 1; font-size: 13px; color: var(--fg-soft, #888); }
.bdp-confirm { background: var(--sage, #5C8F7A); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bdp-confirm:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Time picker no date picker modal ---- */
.bdp-foot { flex-wrap: wrap; gap: 8px; }
.bdp-time-wrap { display: flex; align-items: center; gap: 6px; width: 100%; }
.bdp-time-label { font-size: 12px; color: var(--fg-soft, #888); white-space: nowrap; }
.bdp-time-input {
  border: 1px solid var(--sand-soft, #E5D9C6); border-radius: 6px;
  padding: 5px 8px; font-size: 13px; font-family: var(--font-body, sans-serif);
  background: var(--paper, #FAF6EC); color: var(--ink, #1C1C1A);
  outline: none; cursor: pointer;
}
.bdp-time-input:focus { border-color: var(--sage, #5C8F7A); }