/* assets/gallery.css
   Galeria pública /sigilos/ + single /sigilos/{slug}/. Paleta branco/preto/amarelo.
   Templates vivem em Caotizese/{archive,single}-sigilo.php — herdam estrutura
   #content > #main > article.block do tema. */

.czsig-gallery {
    max-width: 1200px; margin: 24px auto; padding: 0 16px; color: #111;
}

/* CTA banner: "+ Criar meu próprio sigilo" — antes do grid */
.czsig-gallery-cta {
    display: flex; flex-direction: column; align-items: center;
    background: #fff8c5; border: 2px solid #ffd600; border-radius: 16px;
    padding: 16px 20px; margin: 0 auto 24px; max-width: 480px;
    color: #111; text-decoration: none; text-align: center;
    transition: all 0.15s;
}
.czsig-gallery-cta:hover {
    background: #ffd600; transform: translateY(-1px);
    text-decoration: none; color: #111;
}
.czsig-gallery-cta strong { font-size: 1.05rem; font-weight: 800; }
.czsig-gallery-cta span { font-size: 0.85rem; color: #666; margin-top: 2px; }
.czsig-gallery-cta:hover span { color: #111; }

/* Filtros + busca */
.czsig-gallery-filters {
    margin-bottom: 24px;
}
.czsig-gallery-filters .czsig-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; justify-content: center;
}
.czsig-gallery-filters .czsig-filter {
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12); background: #fafafa; color: #111;
    cursor: pointer; font-family: inherit; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; transition: all 0.15s;
}
.czsig-gallery-filters .czsig-filter:hover { border-color: rgba(0,0,0,0.3); }
.czsig-gallery-filters .czsig-filter.is-active {
    background: #111; color: #fff; border-color: #111;
}
.czsig-gallery-search {
    display: flex; gap: 8px; max-width: 560px; margin: 0 auto;
}
.czsig-gallery-search input[type="search"] {
    flex: 1; padding: 10px 14px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #111;
    font-family: inherit; font-size: 0.95rem;
}
.czsig-gallery-search input[type="search"]:focus {
    outline: none; border-color: #ffd600;
    box-shadow: 0 0 0 3px rgba(255,214,0,0.25);
}

/* Grid usa o .czsig-grid (definido em account.css) — colunas e gaps
   já são compartilhados. CSS abaixo apenas overrides específicos. */
.czsig-gallery-grid {
    /* sobrescreve .czsig-grid pra colunas um pouco maiores na galeria.
       justify-content: center centraliza o conjunto de cards visíveis —
       importante quando o filtro de técnica deixa poucos cards na grade. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    justify-content: center;
}

/* Cards do archive público NÃO têm botões de ação (Detalhes/Privado/etc) —
   visualmente idênticos aos do account-tab fora isso. .czsig-card-name
   também NÃO é editável aqui (sem contenteditable no markup). */

.czsig-empty {
    text-align: center; padding: 64px 16px; color: #666;
}
.czsig-empty a { color: #111; text-decoration: underline; }

.czsig-gallery-pagination {
    text-align: center; margin: 32px 0;
}
.czsig-gallery-pagination .nav-links {
    display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.czsig-gallery-pagination .page-numbers {
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12); background: #fff;
    color: #111; text-decoration: none; font-weight: 600;
}
.czsig-gallery-pagination .page-numbers.current {
    background: #111; color: #fff; border-color: #111;
}
.czsig-gallery-pagination .page-numbers:hover:not(.current) {
    background: #fff8c5; border-color: #ffd600;
}

/* ========================================================================
   Single — página individual de sigilo público (/sigilos/{slug}/)
   Layout: voltar → h1/h2/h3 → meditador → ativador → share → nav → CTA
   ======================================================================== */

/* .czsig-single envolve apenas o conteúdo abaixo do bloco h1/h2/h3
   (meditador + ativador + share + nav + cta). H1/h2/h3 ficam fora desse
   wrapper, direto em article.block, pra herdar estilização do tema
   (#main h1.titulo, #main h2.subtitulo). */
.czsig-single {
    max-width: 720px; margin: 24px auto; color: #111;
}

.czsig-single-back {
    margin: 0 0 16px; font-size: 0.85rem;
}
.czsig-single-back a { color: #666; text-decoration: none; }
.czsig-single-back a:hover { color: #111; text-decoration: underline; }

/* Mantra (h2.subtitulo.czsig-single-mantra): override do .subtitulo do tema
   pra deixar monoespaçado, reforçando caráter "código mágico". Selector
   #main vence a especificidade de #main h2 do tema. */
#main h2.czsig-single-mantra {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    opacity: 0.85;
}
/* Estilo (h3): linha discreta com técnica + planeta. */
#main h3.czsig-single-style {
    font-size: 0.85rem; color: rgba(255,255,255,0.65); font-weight: 400;
    text-transform: lowercase; letter-spacing: 0.04em;
    margin: 0 0 24px; padding: 0 10px;
    text-align: center;
}
#main h3.czsig-single-style strong { color: #fff; font-weight: 700; }

/* Bloco do meditador: imagem grande, clicável, centralizada.
   Largura externa (~408px) bate com a do .czsig-single-ativador abaixo
   pra eles parecerem do mesmo "tamanho" empilhados. */
.czsig-single-meditator {
    text-align: center; margin: 20px auto 32px;
    max-width: 408px;
}
.czsig-single-meditator .sigilo {
    display: block; padding: 24px;
    background: #fff; border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px; cursor: pointer;
    transition: all 0.15s;
    box-sizing: border-box;
}
.czsig-single-meditator .sigilo:hover {
    border-color: #ffd600; transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.czsig-single-meditator .sigilo img {
    max-width: 360px; width: 100%; display: block; margin: 0 auto;
}
.czsig-single-meditator-hint {
    font-size: 0.85rem; color: #666; margin: 12px 0 0; font-style: italic;
}

/* Ativador inline — mesmo max-width do meditador acima pra alinhar
   visualmente. 408px é também a largura mínima onde a UI "Alimentar
   usando [N] créditos por [dia/semana]" cabe inline (sem quebrar
   linha entre os controles). */
.czsig-single-ativador {
    max-width: 408px;
    margin: 32px auto;
}
.czsig-single-ativador > #ativacao {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
/* NÃO forçar aspect-ratio em .fundoAtivacao — em estado .desativado
   o #ativacao não tem altura própria, e dar aspect-ratio aqui faria
   o <video> (position:absolute; height:100%) aparecer atrás do bloco
   de UI antes do user clicar em "Ativar". Quando .ativado, o próprio
   #ativacao já vira aspect-ratio:1/1 (regra de ativacao.css), então a
   .fundoAtivacao herda altura naturalmente. */

/* Compartilhar */
.czsig-single-share {
    text-align: center; margin: 24px 0;
}
.czsig-share-btn { font-weight: 600; }

/* Nav prev/next */
.czsig-single-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin: 32px 0; padding: 16px 0; border-top: 1px solid rgba(0,0,0,0.08);
}
.czsig-single-nav-prev,
.czsig-single-nav-next {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 16px;
    background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
    color: #111; text-decoration: none; transition: all 0.15s;
}
.czsig-single-nav-prev:hover,
.czsig-single-nav-next:hover {
    background: #fff8c5; border-color: #ffd600;
}
.czsig-single-nav-next { text-align: right; }
.czsig-single-nav .is-disabled {
    /* Slot vazio quando não há prev ou next — preserva grid layout */
    visibility: hidden;
}
.czsig-single-nav .czsig-nav-label {
    font-size: 0.72rem; color: #666; font-weight: 600;
    text-transform: lowercase; letter-spacing: 0.04em;
}
.czsig-single-nav .czsig-nav-title {
    font-size: 0.95rem; font-weight: 700; color: #111;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* CTA: criar próprio sigilo (amarelo destaque, sempre visível) */
.czsig-single-cta {
    text-align: center; margin: 32px 0; padding: 28px;
    background: #fff8c5; border: 1px solid #ffd600; border-radius: 18px;
}
.czsig-single-cta p { margin: 0 0 12px; color: #111; font-weight: 600; }
.czsig-single-cta a.czsig-btn-primary {
    display: inline-block; background: #ffd600; color: #111;
    padding: 12px 24px; border-radius: 14px; text-decoration: none;
    font-weight: 700; border: 0;
}
.czsig-single-cta a.czsig-btn-primary:hover { background: #ffea4d; }