/* =========================================================================
   Guidelyze · LP Texto · Mídias (variantes de criativo)
   Tokens vêm de ../../../assets/css/tokens/livro.css
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100dvh;
  background:radial-gradient(ellipse at 50% 0%, var(--paper-warm), var(--paper) 60%);
  color:var(--fg);
  font-family:var(--font-body);font-size:var(--text-md);line-height:var(--lead-relaxed);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ===== Topbar / header ===== */
.topbar{
  max-width:1400px;margin:0 auto;
  padding:var(--space-8) var(--pad-x) var(--space-4);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand__logo{height:32px;width:auto}
.brand__txt{display:flex;flex-direction:column;gap:2px}
.brand__eyebrow{
  font-size:var(--text-xs);letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:600;margin:0;
}
.brand__title{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);
  line-height:1;margin:0;letter-spacing:var(--track-tight);
}
.back{
  font-size:var(--text-xs);font-weight:600;letter-spacing:var(--track-wide);
  text-transform:uppercase;text-decoration:none;color:var(--fg-soft);
  border:1px dashed var(--line);padding:6px 12px;border-radius:var(--radius-pill);
  transition:border-color var(--dur-fast),color var(--dur-fast);
}
.back:hover{color:var(--accent-deep);border-color:var(--accent);border-style:solid}

/* ===== Filtros ===== */
.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;
}
.chip{
  font-size:var(--text-xs);font-weight:600;letter-spacing:var(--track-wide);
  text-transform:uppercase;
  background:var(--paper);border:1px solid var(--line-soft);
  padding:8px 14px;border-radius:var(--radius-pill);
  cursor:pointer;color:var(--fg-soft);
  transition:all var(--dur-fast);
}
.chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.chip.is-active{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.chip__count{opacity:.7;margin-left:6px;font-weight:500}

/* ===== Grid masonry (column-count) — alturas naturais, sem igualar linhas ===== */
.creatives{
  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){.creatives{column-count:2}}
@media (max-width:680px){.creatives{column-count:1}}

/* ===== Card de criativo ===== */
.creative{
  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;
  box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.creative:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.creative[data-type="org"]{border-left:3px solid var(--sage)}
.creative[data-type="ads"]{border-left:3px solid #C9A87C}

/* Filtro de tipo */
.creatives[data-filter="org"] .creative[data-type="ads"],
.creatives[data-filter="ads"] .creative[data-type="org"]{display:none}

/* Header do card */
.creative__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);
}
.creative__badge{
  font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;
  font-weight:700;padding:3px 8px;border-radius:var(--radius-pill);
}
.creative__badge--org{background:rgba(92,143,122,.14);color:var(--sage-deep)}
.creative__badge--ads{background:rgba(201,168,124,.18);color:#7A5A30}
.creative__plat{
  font-family:var(--font-mono);font-size:10px;color:var(--fg-softer);
  letter-spacing:var(--track-wide);
}

/* Placeholder de mídia (imagem/vídeo) */
.creative__visual{
  position:relative;
  background:linear-gradient(135deg, #EFE6CE 0%, #E3D8C8 100%);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-softer);
  overflow:hidden;
}
.creative__visual img,.creative__visual video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.creative__visual[data-ar="1/1"]   {aspect-ratio:1/1}
.creative__visual[data-ar="3/4"]   {aspect-ratio:3/4}
.creative__visual[data-ar="4/5"]   {aspect-ratio:4/5}
.creative__visual[data-ar="9/16"]  {aspect-ratio:9/16}
.creative__visual-ico{
  font-size:42px;opacity:.32;
}
.creative__visual-hint{
  position:absolute;bottom:8px;right:10px;
  font-family:var(--font-mono);font-size:10px;
  background:rgba(255,255,255,.78);color:var(--fg-soft);
  padding:3px 8px;border-radius:var(--radius-pill);
  letter-spacing:var(--track-wide);
}

/* Copy do card */
.creative__copy{
  padding:var(--space-4) var(--space-4) var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.creative__hook{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-lg);line-height:var(--lead-snug);
  margin:0;color:var(--fg);
}
.creative__body{
  font-size:var(--text-sm);line-height:var(--lead-normal);
  color:var(--fg-soft);margin:0;
}
.creative__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:var(--space-1);
}

/* Footer do card */
.creative__foot{
  padding:var(--space-3) var(--space-4);
  border-top:1px dashed var(--line-soft);
  font-size:11px;line-height:var(--lead-normal);color:var(--fg-softer);
  display:flex;flex-direction:column;gap:4px;
}
.creative__foot--ads{background:rgba(201,168,124,.06)}
.creative__tags{font-family:var(--font-mono);color:var(--sage-deep);opacity:.78}
.creative__targeting{font-family:var(--font-mono)}
.creative__cpc{font-weight:700;color:#7A5A30}

/* ===== Footer geral ===== */
.ftr{
  max-width:1400px;margin:0 auto;
  padding:var(--space-6) var(--pad-x) var(--space-12);
  border-top:1px solid var(--line-soft);
  font-size:var(--text-sm);color:var(--fg-softer);
}
.ftr p{margin:0 0 var(--space-2)}
.ftr code{font-family:var(--font-mono);font-size:11px;background:var(--bg-alt);padding:1px 6px;border-radius:6px}

/* =========================================================================
   Reposicionar botões do .creative pra COLUNA LATERAL DIREITA
   (em vez de empilhar pra baixo). Via CSS grid + grid-area — sem alterar HTML.
   ========================================================================= */
.creative{
  display:grid !important;
  grid-template-columns:1fr 156px;
  grid-template-areas:
    "head    head"
    "visual  visual"
    "copy    actions"
    "foot    foot";
  gap:0;
}
.creative__head   { grid-area: head; }
.creative__visual { grid-area: visual; }
.creative__copy   { grid-area: copy; }
.creative__foot   { grid-area: foot; }

/* Container virtual da coluna actions — usa um pseudo-grid pra empilhar
   os botões com gap consistente, paddding consistente. */
.creative > .creative__forja-btn,
.creative > .creative__copy-btn,
.creative > .creative__save-btn,
.creative > .creative__carousel-btn{
  grid-area: actions;
  margin:0;        /* zera o margin antigo (era horizontal+vertical) */
  align-self: start;
  width: 100%;
  text-align: center;
}
/* Empilha os botões na mesma cell — usando block stacking nativo. Pra ter
   o gap consistente, dá padding+gap via wrapper alternativo. */
.creative{position:relative}
.creative__actions-pad{
  grid-area: actions;
  padding:var(--space-3) var(--space-3) var(--space-3) 0;
  display:flex;flex-direction:column;gap:8px;
}
.creative__actions-pad button{margin:0;width:100%}

/* Botão Carrossel novo */
.creative__carousel-btn{
  font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:var(--track-wide);
  text-transform:uppercase;
  padding:8px 14px;border-radius:var(--radius-pill);
  background:transparent;color:#5A4079;
  border:1.5px dashed #B49ACF;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:all var(--dur-fast);
}
.creative__carousel-btn:hover{
  background:#8A6FB0;color:var(--paper);border-style:solid;border-color:#8A6FB0;
  box-shadow:0 3px 12px rgba(138,111,176,.28);
}
.creative__carousel-btn::before{content:"🎞";font-size:13px}

/* Em telas pequenas, volta pra coluna única embaixo */
@media (max-width:680px){
  .creative{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "visual"
      "copy"
      "actions"
      "foot";
  }
  .creative__actions-pad{padding:var(--space-3)}
}

/* =========================================================================
   VIEW MODE — 3 tamanhos via data-view-mode no body
   xl = 1 coluna (grande), m = 2 colunas, s = 3 colunas (default)
   ========================================================================= */
body[data-view-mode="xl"] .creatives{column-count:1}
body[data-view-mode="m"]  .creatives{column-count:2}
body[data-view-mode="s"]  .creatives{column-count:3}
@media (max-width:1100px){
  body[data-view-mode="xl"] .creatives,
  body[data-view-mode="m"]  .creatives,
  body[data-view-mode="s"]  .creatives{column-count:2}
}
@media (max-width:680px){
  body[data-view-mode="xl"] .creatives,
  body[data-view-mode="m"]  .creatives,
  body[data-view-mode="s"]  .creatives{column-count:1}
}

/* Painel flutuante dos botões — bottom-left (não esquerda do zoom da timeline) */
.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);-webkit-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);font-family:var(--font-mono);
}
.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ÕES DE FORMATO POR CARD (canto superior direito do .creative__visual)
   3 formatos: Timeline (1:1) · Reels (4:5) · Stories|TikTok (9:16)
   ========================================================================= */
.card-format-ctl{
  position:absolute;top:8px;right:8px;z-index:3;
  display:flex;gap:2px;
  padding:3px 4px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-pill);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  opacity:0;transition:opacity var(--dur-fast);
  pointer-events:auto;
}
.creative:hover .card-format-ctl,
.card-format-ctl:focus-within{opacity:1}
.card-format-ctl__btn{
  width:26px;height:22px;border-radius:var(--radius-pill);
  background:transparent;border:none;
  font-size:13px;color:var(--fg-soft);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast);padding:0;line-height:1;
}
.card-format-ctl__btn:hover{background:var(--paper-deep);color:var(--fg)}
.card-format-ctl__btn.is-active{background:var(--accent);color:var(--paper)}

/* Biblioteca também */
.biblio-card{position:relative}
.biblio-card .card-format-ctl{top:6px;right:6px}