/* ======================================================================
   CARTÃO DO CULTO (o mesmo em todo lugar): seção Cultos do site da igreja, quadro do culto, prévia do editor no painel e
   cartões do assistente nos dois sites (montado por /culto-cartao.js). A altura do cartão e da área do texto vêm de quem o
   usa (--aberto e --info: .cultos-grid no style.css do site, .assistente-cultos no assistente.css). No celular (até 680px)
   e na classe "compacto" (assistente), os textos ficam menores, com as mesmas medidas.
   ====================================================================== */
.culto{position:relative;height:var(--aberto);border:2px solid var(--borda,rgba(94,232,255,.55));border-radius:26px;background:linear-gradient(180deg,#30333a,#24272d 70%,#1f2227);box-shadow:0 18px 50px rgba(0,0,0,.28);transition:height 1s var(--ease,cubic-bezier(.2,.75,.2,1)),border-color .35s,transform .35s var(--ease,cubic-bezier(.2,.75,.2,1))}
.culto:hover{border-color:var(--borda,rgba(94,232,255,.85));transform:translateY(-4px)}
.culto-foto{--ini:var(--fade-ini,68);--fim:var(--fade-fim,100);position:absolute;left:10px;right:10px;bottom:var(--info);height:calc(var(--aberto) - var(--info) - 12px);clip-path:inset(-60% -12% 0 -12%);pointer-events:none;
  /* degradê (névoa) embaixo da pessoa: --ini é onde começa a sumir e --fim onde some de vez, em % da altura da área da foto.
     A máscara tem o dobro da altura da área, presa embaixo, para a cabeça continuar aparecendo quando passa da borda. */
  -webkit-mask-image:linear-gradient(to top,transparent calc((100 - var(--fim)) * .5%),#000 calc((100 - var(--ini)) * .5%));mask-image:linear-gradient(to top,transparent calc((100 - var(--fim)) * .5%),#000 calc((100 - var(--ini)) * .5%));
  -webkit-mask-size:140% 200%;mask-size:140% 200%;-webkit-mask-position:50% 100%;mask-position:50% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.culto-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 100%;scale:calc(var(--foto-zoom,100) / 100);translate:calc(var(--foto-x,0) * 1%) calc(var(--foto-y,0) * 1%);transition:transform 1s var(--ease,cubic-bezier(.2,.75,.2,1)),opacity .7s ease}
.culto-foto.quadro{--ini:var(--fade-ini,100);--fim:var(--fade-fim,100);clip-path:inset(0 round 18px)}
/* foto com fundo: a moldura (área da foto) tem os cantos arredondados, então eles continuam redondos com qualquer tamanho e posição */
.culto-foto.quadro img{object-fit:cover;object-position:50% 30%}
/* foto com fundo muito mais alta que o quadro (captura de tela, por exemplo; culto-cartao.js, encaixar): inteira, com a própria
   foto desfocada atrás, preenchendo as sobras */
.culto-foto.quadro.inteira{background:#14181f}
.culto-foto.quadro.inteira::before{content:"";position:absolute;inset:-24px;background:var(--foto-fundo) center/cover no-repeat;filter:blur(16px) brightness(.55)}
.culto-foto.quadro.inteira img{position:relative;object-fit:contain;object-position:50% 50%}
/* textos em lugares fixos em todos os cartões: dia no alto da área do texto, nome logo abaixo (até 2 linhas, começando
   sempre na mesma altura) e horário embaixo; assim dias, nomes e horários ficam alinhados mesmo com nomes de tamanhos diferentes */
.culto-info{position:absolute;left:0;right:0;bottom:0;height:var(--info);padding:16px 18px 18px;display:grid;grid-template-columns:1fr auto;grid-template-rows:23px 1fr auto;align-content:stretch;column-gap:8px}
/* --dia-auto: tamanho do dia e do ícone conforme a palavra (calculado no script: "DOMINGO" maior, "QUARTA-FEIRA" menor);
   --dia-tam: ajuste do editor do admin, por cima. A 1ª linha da grade tem altura fixa (a do maior ícone), para o nome do
   culto começar na mesma altura em todos os cartões */
.culto-dia{grid-column:1;grid-row:1;align-self:center;color:var(--cyan,#5ee8ff);font-size:calc(9.5px * var(--dia-auto,1) * var(--dia-tam,100) / 100);font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.culto-info>i{grid-column:2;grid-row:1;align-self:center;color:var(--cyan,#5ee8ff);font-size:calc(17px * var(--dia-auto,1) * var(--dia-tam,100) / 100)}
.culto-info h3{grid-column:1/3;grid-row:2;align-self:start;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:5px 0 0;color:#e7edf5;font-family:var(--body,'DM Sans',sans-serif);font-size:calc(16px * var(--titulo-tam,100) / 100);font-weight:600;line-height:1.18;letter-spacing:-.01em}
.culto-info strong{grid-column:1/3;grid-row:3;align-self:end;margin-top:6px;font-family:var(--display,'Manrope',sans-serif);font-size:calc(28px * var(--hora-tam,100) / 100);line-height:1;letter-spacing:-.04em;color:#fff}
/* altura e tamanho de cada texto, ajustados no editor do admin (o ícone acompanha o dia) */
.culto-dia,.culto-info>i{translate:0 calc(var(--dia-y,0) * 1px)}
.culto-info h3{translate:0 calc(var(--titulo-y,0) * 1px)}
.culto-info strong{translate:0 calc(var(--hora-y,0) * 1px)}
@media(prefers-reduced-motion:reduce){.culto,.culto-foto img{transition:none!important}}
.culto-info{z-index:1}
@media(max-width:680px){
  .culto{border-radius:22px}
  .culto-foto{left:8px;right:8px}
  .culto-info{padding:12px 14px 14px;grid-template-rows:20px 1fr auto}
  .culto-dia{font-size:calc(8.5px * var(--dia-auto,1) * var(--dia-tam,100) / 100)}
  .culto-info>i{font-size:calc(15px * var(--dia-auto,1) * var(--dia-tam,100) / 100)}
  .culto-info h3{font-size:calc(14px * var(--titulo-tam,100) / 100)}
  .culto-info strong{font-size:calc(23px * var(--hora-tam,100) / 100)}
}
/* botão de assistir no cartão com vídeos (campo "Vídeos do YouTube" no admin) */
.culto.com-videos{cursor:pointer}
.culto.com-videos:focus-visible{outline:2px solid var(--cyan,#5ee8ff);outline-offset:4px}
.culto-play{position:absolute;z-index:2;right:14px;bottom:16px;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(94,232,255,.45);border-radius:50%;background:rgba(94,232,255,.12);color:var(--cyan,#5ee8ff);font-size:11px;transition:background .3s,color .3s,transform .3s var(--ease,cubic-bezier(.2,.75,.2,1)),box-shadow .3s}
.culto-play i{translate:1px 0}
.culto.com-videos:hover .culto-play,.culto.com-videos:focus-visible .culto-play{background:var(--cyan,#5ee8ff);color:#06121c;transform:scale(1.08);box-shadow:0 0 22px rgba(94,232,255,.45)}
@media(max-width:680px){.culto-play{right:11px;bottom:12px;width:28px;height:28px;font-size:9px}}
/* compacto (assistente): as mesmas medidas do celular, em qualquer tela */
.culto.compacto .culto-play{right:11px;bottom:12px;width:28px;height:28px;font-size:9px}
.culto.compacto{border-radius:22px}
.culto.compacto .culto-foto{left:8px;right:8px}
.culto.compacto .culto-info{padding:12px 14px 14px;grid-template-rows:20px 1fr auto}
.culto.compacto .culto-dia{font-size:calc(8.5px * var(--dia-auto,1) * var(--dia-tam,100) / 100)}
.culto.compacto .culto-info>i{font-size:calc(15px * var(--dia-auto,1) * var(--dia-tam,100) / 100)}
.culto.compacto .culto-info h3{font-size:calc(14px * var(--titulo-tam,100) / 100)}
.culto.compacto .culto-info strong{font-size:calc(23px * var(--hora-tam,100) / 100)}