/* BLM Eventos — cartão 9:16 do convite (variante "Arte do convite" da capa).
   Extraído de template-engine.css sem os resets globais. */
/* =========================================================
   MOTOR VISUAL DO CONVITE
   ========================================================= */
.tpl-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: inherit;
  background: #06111d;
  color: var(--tpl-ink, #fff);
  isolation: isolate;
  container-type: inline-size;
  font-family: var(--tpl-body-font, Inter, sans-serif);
}
.tpl-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.tpl-bg { z-index: 0; }
.tpl-bg-overlay { position:absolute; z-index:1; inset:0; pointer-events:none; background:#020817; opacity:var(--tpl-bg-overlay,0); transition:opacity .18s ease; }
.tpl-vignette { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(2,10,16,.22) 0%, transparent 28%, transparent 52%, rgba(0,10,8,.24) 67%, rgba(1,13,9,.62) 100%); pointer-events: none; }
.tpl-foreground { z-index: 4; }
.tpl-content { position: absolute; z-index: 5; left: var(--title-x,50%); top: var(--title-y,8%); width: var(--title-w,84%); transform: translateX(-50%); text-align: center; text-shadow: 0 3px 18px rgba(0,0,0,.48); }
.tpl-kicker { display: block; font-size: clamp(7px,2.3cqw,13px); font-weight: 900; letter-spacing: .16em; color: var(--tpl-accent,#d8ff3e); }
.tpl-content h1 { font-family: var(--tpl-title-font,Montserrat,Inter,sans-serif); text-transform: uppercase; font-size: clamp(25px,10.6cqw,var(--title-max-size,64px)); line-height: .86; letter-spacing: -.065em; margin: 2.8% 0 1.8%; text-wrap: balance; overflow-wrap: anywhere; transition: font-size .16s ease, letter-spacing .16s ease; }
.tpl-title-fit-md .tpl-content h1 { font-size: clamp(24px,9.35cqw,58px); letter-spacing: -.058em; }
.tpl-title-fit-lg .tpl-content h1 { font-size: clamp(22px,8.25cqw,52px); letter-spacing: -.05em; line-height: .9; }
.tpl-title-fit-xl .tpl-content h1 { font-size: clamp(20px,7.25cqw,46px); letter-spacing: -.04em; line-height: .94; }
.tpl-no-subtitle .tpl-content h1 { margin-bottom: 0; }
.tpl-no-kicker .tpl-content h1 { margin-top: 0; }
.tpl-subtitle { display: inline-flex; padding: .5em 1.15em; border-radius: 999px; background: var(--tpl-accent,#d8ff3e); color: var(--tpl-accent-text,#102616); font-size: clamp(10px,3.35cqw,19px); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.tpl-photo-frame { position: absolute; z-index: 3; left: var(--photo-x,50%); top: var(--photo-y,39%); width: var(--photo-w,54%); height: var(--photo-h,30%); transform: translate(-50%,-50%); overflow: hidden; border: clamp(4px,var(--photo-border,1.7cqw),11px) solid rgba(255,255,255,.96); box-shadow: 0 22px 60px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.24); background: #dbe5ec; }
.tpl-photo-frame.tpl-shape-circle, .v4-crop-preview.tpl-shape-circle, .v4-crop-preview.tpl-shape-circle .tpl-crop-frame { border-radius: 50%; }
.tpl-photo-frame.tpl-shape-rounded, .v4-crop-preview.tpl-shape-rounded, .v4-crop-preview.tpl-shape-rounded .tpl-crop-frame { border-radius: 22%; }
.tpl-photo, .tpl-photo-empty { width: 100%; height: 100%; display: grid; place-items: center; }
.tpl-photo { object-fit: cover; transform-origin: center; will-change: transform; }
.tpl-photo-empty { align-content: center; gap: .3em; font-weight: 900; color: #5f7384; background: linear-gradient(135deg,#eff5f8,#cbd9df); }
.tpl-photo-empty i { font-style: normal; font-size: 2em; line-height: 1; }
.tpl-photo-empty b { font-size: .9em; }
.tpl-message { position: absolute; z-index: 5; left: var(--message-x,50%); top: var(--message-y,62%); width: var(--message-w,76%); transform: translateX(-50%); margin: 0; text-align: center; font-size: clamp(9px,2.9cqw,16px); font-weight: 700; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,.92), 0 0 24px rgba(0,0,0,.42); text-wrap: balance; isolation: isolate; }
.tpl-message::before { content:""; position:absolute; z-index:-1; inset:-.65em -1.15em; border-radius:999px; background:radial-gradient(ellipse at center,rgba(0,0,0,.30),rgba(0,0,0,.12) 48%,transparent 76%); filter:blur(3px); pointer-events:none; }
.tpl-no-message .tpl-message { display:none; }
.tpl-meta { position: absolute; z-index: 5; left: var(--details-x,50%); top: var(--details-y,71%); width: var(--details-w,84%); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 2.2%; font-size: clamp(8px,2.55cqw,14px); }
.tpl-meta > div { padding: 4.8% 6%; border: 1px solid rgba(255,255,255,.28); background: var(--tpl-panel,rgba(4,17,28,.66)); backdrop-filter: blur(12px); border-radius: 1.05em; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.tpl-meta .wide { grid-column: 1 / -1; }
.tpl-meta small { display: block; font-size: .7em; letter-spacing: .09em; color: var(--tpl-accent,#c8ff55); font-weight: 900; }
.tpl-meta b { display: block; margin-top: .34em; line-height: 1.2; overflow-wrap: anywhere; }
.tpl-countdown { position: absolute; z-index: 5; left: var(--countdown-x,50%); top: var(--countdown-y,84%); width: var(--countdown-w,84%); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4,1fr); gap: 2%; text-align: center; }
.tpl-countdown > span { display: grid; gap: .08em; padding: 4.6% 2%; border-top: 1px solid rgba(255,255,255,.32); border-bottom: 1px solid rgba(255,255,255,.18); background: rgba(1,16,12,.34); backdrop-filter: blur(9px); }
.tpl-countdown b { font-size: clamp(16px,5.5cqw,30px); line-height: .94; color: #fff; font-weight: 900; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.tpl-countdown > span:first-child b { font-size: clamp(18px,6.2cqw,34px); color: var(--tpl-accent,#d8ff3e); }
.tpl-countdown small { font-size: clamp(6px,1.7cqw,10px); text-transform: uppercase; letter-spacing: .09em; color: var(--tpl-muted,#cbd5e1); font-weight: 800; }

/* Public invite without duplicated location: keep date/time and countdown visually grouped. */
.tpl-canvas.tpl-public-compact { --details-y: 70.8% !important; --countdown-y: 78.45% !important; }
.tpl-canvas.tpl-public-compact .tpl-meta { gap: 1.65%; }
.tpl-canvas.tpl-public-compact .tpl-countdown { gap: 1.55%; }
.tpl-canvas.tpl-public-compact .tpl-countdown > span { padding-top: 4%; padding-bottom: 4%; }
.tpl-meta-compact { grid-template-columns: 1fr 1fr; }
.tpl-cta-hint { position: absolute; z-index: 6; left: var(--cta-x,50%); top: var(--cta-y,93%); transform: translate(-50%,-50%); width: var(--cta-w,68%); padding: 3.8% 5%; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; text-align: center; background: linear-gradient(180deg,var(--tpl-action,#155a35),var(--tpl-action-dark,#0f4c2e)); color: #fff; font-weight: 900; font-size: clamp(9px,2.9cqw,16px); box-shadow: 0 16px 38px rgba(4,22,12,.34); cursor: pointer; }
.tpl-cta-hint:active { transform: translate(-50%,-48%) scale(.99); }
.tpl-cta-hint span { margin-left: .5em; }
.tpl-crop-frame { width: 100%; height: 100%; position: relative; overflow: hidden; background: linear-gradient(135deg,#edf2f7,#cbd8e2); }
.tpl-crop-frame .tpl-photo, .tpl-crop-frame .tpl-photo-empty { width: 100%; height: 100%; }
.tpl-crop-frame .tpl-photo { object-fit: cover; transform-origin: center; will-change: transform; }
/* =========================================================
   V5 — personalização e novos segmentos
   ========================================================= */
.tpl-dynamic-tint {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--tpl-accent) 34%, transparent), transparent 36%),
    radial-gradient(circle at 12% 80%, color-mix(in srgb, var(--tpl-action) 42%, transparent), transparent 44%),
    linear-gradient(155deg, color-mix(in srgb, var(--tpl-action) 48%, transparent), transparent 54%, color-mix(in srgb, var(--tpl-accent) 18%, transparent));
  mix-blend-mode: screen;
  opacity: .88;
}
.tpl-has-custom-background .tpl-bg { filter: saturate(1.03) contrast(1.02); }
.tpl-has-custom-background .tpl-vignette { background: linear-gradient(180deg, rgba(2,8,14,.24) 0%, transparent 26%, transparent 49%, rgba(0,8,7,.22) 63%, rgba(1,10,8,.66) 100%); }

.tpl-photo-frame.tpl-shape-square,
.v4-crop-preview.tpl-shape-square,
.v4-crop-preview.tpl-shape-square .tpl-crop-frame { border-radius: 8%; }

.tpl-theme-elegant .tpl-content h1,
.tpl-theme-terracotta .tpl-content h1 { text-transform: none; letter-spacing: -.045em; line-height: .92; }
.tpl-theme-corporate .tpl-content h1,
.tpl-theme-tech .tpl-content h1 { letter-spacing: -.045em; line-height: .92; }
.tpl-theme-corporate .tpl-kicker,
.tpl-theme-tech .tpl-kicker { letter-spacing: .20em; }
.tpl-theme-custom .tpl-vignette { background: linear-gradient(180deg, rgba(4,8,16,.12), transparent 34%, transparent 52%, rgba(3,5,12,.48) 100%); }

/* V6.3 — Arte limpa: o controle "Escurecer" é a única fonte de overlay.
   0% = imagem original; 100% do controle = valor salvo pelo editor. */
.tpl-canvas.tpl-layout-clean {
  --details-y: 71.2% !important;
  --countdown-y: 79.2% !important;
}
.tpl-canvas.tpl-layout-clean .tpl-vignette {
  background: transparent;
  opacity: 0;
}
.tpl-canvas.tpl-layout-clean .tpl-bg-overlay {
  opacity: var(--tpl-bg-overlay, 0);
}
.tpl-canvas.tpl-layout-clean .tpl-meta,
.tpl-canvas.tpl-layout-clean .tpl-countdown { z-index: 8; }
.tpl-canvas.tpl-layout-clean .tpl-meta > div,
.tpl-canvas.tpl-layout-clean .tpl-countdown > span { backdrop-filter: blur(10px); }