/* =================================================================
   SITES SIMPLES CMS - blocos.css
   Versao:    KIMERA-016
   Data:      13/06/2026
   Autor:     Arte nas Redes - artenasredes.com.br
   Projeto:   Sites Simples CMS - Flat File WYSIWYG
   Arquivo:   blocos.css
   Papel:     Estilo PUBLICO dos Custom Blocks (todos os 9 da beta:
              equipe, logos, galeria_cb, cardapio/Lista de Precos, video,
              mapa, faq, grade, agenda). Estrutura/layout/identidade visual;
              as CORES herdam o tema (var(--primary) etc.) e sao
              customizaveis por elemento/bloco via ssx (.ssx-blocos-...).
              Controles de admin (faixa +, lixeira, moldura) ficam no
              editor.css. Este arquivo vale no publico E no admin.
              KIMERA-016: Equipe/Galeria refinados; 5 novos blocos com
              identidade propria; tudo editavel pelo Kimera.
   ================================================================= */

/* Container comum de todo bloco */
.ss-cb {
    /* RESPIRO: o bloco nao deve estrangular o site. Margem vertical
       generosa (separa de secoes e de outros blocos) + margem lateral
       (afasta das bordas). Usamos MARGIN, nao padding, para o fundo
       (degrade) NAO pintar a area de respiro. */
    margin: 40px auto;
    max-width: 1140px;
    box-sizing: border-box;
}
.ss-cb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px;
}
.ss-cb-title {
    text-align: center;
    font-size: 2rem;
    margin: 0 0 36px;
    color: var(--dark, #2c3e50);
}

/* ---------- EQUIPE ---------- */
.ss-cbk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px;
}
.ss-cbk-card {
    text-align: center;
    background: var(--white, #fff);
    border-radius: 18px;
    padding: 32px 20px 26px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
    transition: transform .28s ease, box-shadow .28s ease;
}
.ss-cbk-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.13);
}
/* anel decorativo atras da foto (usa a cor primaria do tema) */
.ss-cbk-foto-wrap {
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, var(--primary, #FF6B9D), var(--accent, #6C5CE7));
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.ss-cbk-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 3px solid var(--white, #fff);
}
.ss-cbk-nome { font-size: 1.18rem; margin: 0 0 4px; font-weight: 700; color: var(--dark, #2c3e50); }
.ss-cbk-cargo {
    font-size: 0.82rem; margin: 0; color: var(--primary, #FF6B9D);
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
}

/* ---------- LOGOS ---------- */
.ss-cbk-logos-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.ss-cbk-logo-item { flex: 0 0 auto; }
.ss-cbk-logo-img {
    max-width: 140px;
    max-height: 70px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}
.ss-cbk-logo-img:hover { filter: grayscale(0); opacity: 1; }

/* modo carrossel: faixa que rola lentamente (sem JS, animacao CSS) */
.ss-cbk-logos-carrossel .ss-cbk-logos-track {
    flex-wrap: nowrap;
    overflow: hidden;
}
.ss-cbk-logos-carrossel .ss-cbk-logo-item {
    animation: ss-cbk-logos-scroll 30s linear infinite;
}
@keyframes ss-cbk-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---------- GALERIA CB (sem lightbox) ---------- */
.ss-cbk-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.ss-cbk-galeria-item {
    margin: 0; position: relative; border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.ss-cbk-galeria-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ss-cbk-galeria-item:hover .ss-cbk-galeria-img { transform: scale(1.08); }
.ss-cbk-galeria-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 14px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
    transform: translateY(8px);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.ss-cbk-galeria-item:hover .ss-cbk-galeria-cap { transform: translateY(0); opacity: 1; }
/* legenda vazia some no publico (igual a galeria padrao) */
.ss-cbk-galeria-cap:empty { display: none; }

/* ---------- CARDAPIO (por categoria) — visual caprichado ----------
   BUG#2 FIX: o degrade default mora na CLASSE DE TIPO do bloco
   (.ss-cb-cardapio), que esta no MESMO elemento <section.ss-cb> onde o
   Kimera aplica a classe ssx-blocos-{id}. Assim a edicao de fundo pelo
   Kimera (regra ssx com !important) VENCE o default. Antes o default
   estava no filho .ss-cbk-cardapio e vencia o ssx do pai. */
.ss-cb-cardapio {
    background: linear-gradient(160deg, #1f1147 0%, #2d1b5e 55%, #3a1c4d 100%);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(31,17,71,0.35);
}
.ss-cbk-cardapio {
    border-radius: 20px;
    padding: 48px 40px;
}
.ss-cbk-card-head { text-align: center; margin-bottom: 34px; }
.ss-cbk-card-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c471ed;
    font-weight: 700;
    margin-bottom: 6px;
}
.ss-cbk-card-titulo {
    color: #ffffff;
    font-size: 2rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.ss-cbk-card-divisor {
    display: block;
    width: 60px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: #c471ed;
}
.ss-cbk-cardapio-lista {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.ss-cbk-cardapio-item { padding: 0; border: none; }
.ss-cbk-cardapio-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ss-cbk-cardapio-nome {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 500;
}
.ss-cbk-cardapio-fill {
    flex: 1 1 auto;
    border-bottom: 1px dotted rgba(196,113,237,0.5);
    transform: translateY(-5px);
}
.ss-cbk-cardapio-preco {
    color: #FFD93D;
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}
.ss-cbk-cardapio-desc {
    margin: 5px 0 0;
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    font-style: italic;
}
/* PUBLICO: descricao vazia some. ADMIN: nunca some (ver editor.css) -
   a regra :empty abaixo vale para o site publico; no admin o editor.css
   reverte com placeholder clicavel (BUG#1). */
.ss-cbk-cardapio-desc:empty { display: none; }

/* ================================================================
   VIDEO — moldura cinematografica 16:9, sombra forte, cantos suaves
   ================================================================ */
.ss-cbk-video-frame {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #0b0b12;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.ss-cbk-video-iframe,
.ss-cbk-video-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* placeholder (sem URL ainda / aviso) */
.ss-cbk-video-aviso {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7); font-size: 0.95rem; padding: 24px; text-align: center;
}
.ss-cbk-video-ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; color: #fff; text-align: center; padding: 24px;
}
.ss-cbk-video-ph > i {
    font-size: 2rem;
    width: 76px; height: 76px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary, #FF6B9D);
    box-shadow: 0 0 0 0 rgba(255,107,157,0.6);
    animation: ss-cbk-pulse 2.2s ease-out infinite;
}
@keyframes ss-cbk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,107,157,0.55); }
    70%  { box-shadow: 0 0 0 22px rgba(255,107,157,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,157,0); }
}

/* ================================================================
   MAPA — moldura arredondada com borda de destaque
   ================================================================ */
.ss-cbk-mapa-frame {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #e8eef3;
    box-shadow: 0 16px 44px rgba(0,0,0,0.18);
    border: 4px solid var(--white, #fff);
    outline: 1px solid rgba(0,0,0,0.06);
}
.ss-cbk-mapa-iframe,
.ss-cbk-mapa-preview iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.ss-cbk-mapa-aviso {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--gray, #7f8c8d); font-size: 0.95rem; padding: 24px; text-align: center;
}
.ss-cbk-mapa-ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; color: var(--dark, #2c3e50); text-align: center; padding: 24px;
}
.ss-cbk-mapa-ph > i {
    font-size: 2.4rem; color: var(--primary, #FF6B9D);
}

/* ================================================================
   FAQ — acordeao com risco lateral de cor; chevron gira; resposta desliza
   No ADMIN os itens ficam abertos para edicao (ver editor.css).
   ================================================================ */
.ss-cbk-faq-lista {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ss-cbk-faq-item {
    background: var(--white, #fff);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-left: 4px solid var(--primary, #FF6B9D);
    overflow: hidden;
    transition: box-shadow .25s ease;
}
.ss-cbk-faq-item:hover { box-shadow: 0 8px 26px rgba(0,0,0,0.10); }
.ss-cbk-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    user-select: none;
}
.ss-cbk-faq-pergunta {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark, #2c3e50);
    flex: 1 1 auto;
}
.ss-cbk-faq-icone {
    flex: 0 0 auto;
    color: var(--primary, #FF6B9D);
    transition: transform .3s ease;
    font-size: 0.95rem;
}
.ss-cbk-faq-item.is-open .ss-cbk-faq-icone { transform: rotate(180deg); }
.ss-cbk-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.ss-cbk-faq-item.is-open .ss-cbk-faq-a { max-height: 600px; }
.ss-cbk-faq-resposta {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--gray, #5b6770);
    font-size: 0.98rem;
    line-height: 1.6;
}

/* ================================================================
   GRADE — cards de servico com icone em "selo" circular; hover levanta
   ================================================================ */
.ss-cbk-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 26px;
}
.ss-cbk-grade-card {
    text-align: center;
    background: var(--white, #fff);
    border-radius: 18px;
    padding: 36px 24px 30px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.07);
    transition: transform .28s ease, box-shadow .28s ease;
}
.ss-cbk-grade-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.13);
}
.ss-cbk-grade-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    font-size: 1.7rem;
    color: var(--white, #fff);
    background: linear-gradient(135deg, var(--primary, #FF6B9D), var(--accent, #6C5CE7));
    box-shadow: 0 8px 20px rgba(108,92,231,0.25);
}
.ss-cbk-grade-titulo { font-size: 1.18rem; margin: 0 0 8px; font-weight: 700; color: var(--dark, #2c3e50); }
.ss-cbk-grade-texto { margin: 0; color: var(--gray, #7f8c8d); font-size: 0.96rem; line-height: 1.55; }

/* ================================================================
   AGENDA — timeline; coluna de data em "ticket" colorido
   ================================================================ */
.ss-cbk-agenda-lista {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ss-cbk-agenda-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--white, #fff);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.ss-cbk-agenda-item:hover { transform: translateX(4px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); }
.ss-cbk-agenda-quando {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 10px;
    color: var(--white, #fff);
    background: linear-gradient(160deg, var(--primary, #FF6B9D), var(--accent, #6C5CE7));
    text-align: center;
}
.ss-cbk-agenda-data { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1.15; }
.ss-cbk-agenda-hora { font-size: 0.82rem; opacity: 0.9; }
.ss-cbk-agenda-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 22px;
}
.ss-cbk-agenda-evento { font-size: 1.12rem; margin: 0 0 4px; font-weight: 700; color: var(--dark, #2c3e50); }
.ss-cbk-agenda-local { margin: 0; color: var(--gray, #7f8c8d); font-size: 0.92rem; }
.ss-cbk-agenda-local::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; opacity: 0.6; font-size: 0.85em; }

/* ---------- responsivo ---------- */
@media (max-width: 600px) {
    .ss-cb-inner { padding: 40px 16px; }
    .ss-cb-title { font-size: 1.6rem; }
    .ss-cbk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
    /* BUG#6 cardapio mobile */
    .ss-cbk-cardapio { padding: 32px 20px; }
    .ss-cb-cardapio { border-radius: 14px; }
    .ss-cbk-card-titulo { font-size: 1.5rem; }
    .ss-cbk-cardapio-nome, .ss-cbk-cardapio-preco { font-size: 1.05rem; }
    /* novos blocos no mobile */
    .ss-cbk-grade-grid { grid-template-columns: 1fr; gap: 16px; }
    .ss-cbk-faq-q { padding: 16px 18px; }
    .ss-cbk-faq-pergunta { font-size: 0.98rem; }
    .ss-cbk-faq-resposta { padding: 0 18px 16px; }
    .ss-cbk-agenda-quando { flex-basis: 88px; }
    .ss-cbk-agenda-info { padding: 14px 16px; }
    .ss-cbk-video-frame, .ss-cbk-mapa-frame { border-radius: 14px; }
}
@media (max-width: 380px) {
    /* telas muito estreitas: nome em cima, preco embaixo, sem linha */
    .ss-cbk-cardapio-head { flex-wrap: wrap; }
    .ss-cbk-cardapio-fill { display: none; }
    .ss-cbk-cardapio-preco { width: 100%; margin-top: 2px; }
    /* agenda empilha data em cima do conteudo */
    .ss-cbk-agenda-item { flex-direction: column; }
    .ss-cbk-agenda-quando { flex-basis: auto; flex-direction: row; gap: 10px; padding: 12px; }
}