/* =========================================================
   Agenda Mega – CSS Único (Tema Claro • v2025-08-26b)
   Fixes: hero principal SEM corte + fundo blur clipado
   ========================================================= */

/* --------- Variáveis & Base --------- */
:root{
  --bg:#f7f7fb; --bg-elev:#ffffff; --ink:#1b1b1f; --muted:#4a4a58; --line:#e7e7ef;
  --accent:#ff6b00; --violet:#7b1fa2; --violet-2:#b86bff; --ring: rgba(123,31,162,.35);
  --header-h:72px; --maxw:1200px; --radius:14px;
    :root{ --gc-cover-maxw: 400px; }
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font: 500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}
a{ color:inherit; }
.container{ max-width: var(--maxw); margin:0 auto; padding: 0 18px; }
.has-fixed-header{ padding-top: var(--header-h); }
.page{ min-height: calc(100dvh - var(--header-h)); display:flex; flex-direction:column; }
main{ flex:1; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* =========================================================
   HEADER (fixo) + Busca + Ações
   ========================================================= */
.am-header{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 9999;
  background: rgba(255,255,255,.88); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.am-inner{
  max-width: var(--maxw); margin: 0 auto; height: 100%;
  display: grid; align-items: center; gap: 16px; padding: 0 18px;
  grid-template-columns: auto 1fr auto auto;
}
.am-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.am-logo img{ height:34px; width:auto; display:block; }
.am-logo span{ color:var(--ink); font-weight:700; font-size:18px; letter-spacing:.3px; }

/* Busca */
.am-search{
  display:flex; align-items:center; gap:8px; min-width:340px;
  background: var(--bg-elev); border:1px solid var(--line);
  border-radius:14px; padding:6px 8px;
}
.am-search input{ flex:1; background:transparent; border:none; color:var(--ink); outline:none; padding:8px 6px; font-weight:500; }
.am-search input::placeholder{ color:#8c8ca3; }
.am-search button{
  border:0; background: linear-gradient(90deg, var(--accent), var(--violet-2));
  color:#101014; border-radius:10px; padding:8px 10px; font-weight:700; cursor:pointer;
  transition: transform .15s ease, filter .2s ease;
}
.am-search button:hover{ transform: translateY(-1px); filter: brightness(1.05); }
@media (max-width:1160px){ .am-search{ min-width:260px; } }
@media (max-width:1024px){ .am-search{ display:none; } }
.am-search-mobile{ display:flex; margin:10px; }

/* Ações */
.am-actions{ display:flex; align-items:center; gap:10px; }
.am-btn{
  border:1px solid var(--line); background: var(--bg-elev); color:var(--ink);
  padding:10px 14px; border-radius:14px; text-decoration:none; font-weight:600;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.am-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.am-btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--ring); }
.am-btn-accent{ border:none; background: linear-gradient(90deg, var(--accent), var(--violet-2)); color:#111; text-shadow: 0 1px 0 rgba(255,255,255,.35); }

/* =========================================================
   NAV (desktop) + DROPDOWNS em cascata (anti-gap)
   ========================================================= */
.am-nav > ul{ list-style:none; display:flex; align-items:center; gap:18px; margin:0; padding:0; }
.am-nav > ul > li{ position:relative; }
.am-nav a, .submenu-toggle{
  color:var(--ink); text-decoration:none; padding:10px 12px; border-radius:10px;
  display:inline-flex; align-items:center; gap:8px; font-weight:600; background:transparent; border:none; cursor:pointer;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.am-nav a:hover, .submenu-toggle:hover, .submenu-toggle:focus-visible{
  background:#f1eef9; box-shadow: inset 0 0 0 1px #e6ddfa; outline:none;
}
.has-submenu{ position:relative; }
.has-submenu::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; } /* ponte anti-gap */

.submenu{
  position:absolute; top: calc(100% + 8px); left:0; min-width:240px; padding:8px; background:#fff;
  border:1px solid var(--line); border-radius:14px; box-shadow: 0 16px 36px rgba(33,25,45,.12);
  display:flex; flex-direction:column; gap:4px;
  visibility:hidden; opacity:0; transform:translateY(6px);
  pointer-events:none; transition: opacity .18s, transform .18s, visibility 0s linear .18s; z-index:10000;
}
.submenu li{ list-style:none; }
.submenu a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink); font-weight:500; }
.submenu a:hover{ background:#f6f3ff; }
.has-submenu.open > .submenu,
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.has-submenu > .submenu:hover{
  visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; transition-delay:0s;
}

/* =========================================================
   Burger (mobile) + Drawer + Backdrop
   ========================================================= */
.am-burger{
  display:none; position:relative; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background: var(--bg-elev); cursor:pointer;
}
.am-burger span{
  position:absolute; left:10px; right:10px; height:2px; background:#2a2a34;
  transition: transform .25s, opacity .2s, top .25s, bottom .25s;
}
.am-burger span:nth-child(1){ top:13px; }
.am-burger span:nth-child(2){ top:21px; }
.am-burger span:nth-child(3){ bottom:13px; }
.am-burger.is-open span:nth-child(1){ top:21px; transform: rotate(45deg); }
.am-burger.is-open span:nth-child(2){ opacity:0; }
.am-burger.is-open span:nth-child(3){ bottom:auto; top:21px; transform: rotate(-45deg); }

@media (max-width:1024px){ .am-inner{ grid-template-columns: auto 1fr auto; } .am-actions{ display:none; } }
@media (max-width:820px){ .am-nav{ display:none; } .am-burger{ display:block; } }

.am-drawer{
  position: fixed; top: var(--header-h); left:0; right:0; background:#ffffff;
  min-height: calc(100dvh - var(--header-h));
  transform: translateY(-8px); opacity:0; pointer-events:none;
  transition: transform .25s, opacity .2s; z-index: 9999; border-top:1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.am-drawer.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
.am-nav-mobile{ padding:8px 10px 16px; }
.am-nav-mobile .m-subtoggle{
  width:100%; text-align:left; padding:12px; border-radius:12px; border:1px solid var(--line);
  background: var(--bg-elev); color:var(--ink); font-weight:700; margin-top:8px; cursor:pointer;
  transition: background .18s, box-shadow .18s;
}
.am-nav-mobile .m-subtoggle:hover{ background:#f7f5ff; box-shadow: inset 0 0 0 1px #e6ddfa; }
.am-nav-mobile ul{ list-style:none; padding:6px 8px 10px 10px; margin:0; }
.am-nav-mobile ul a{ display:block; padding:10px 10px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:500; }
.am-nav-mobile ul a:hover{ background:#f6f3ff; }

.am-backdrop{
  position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,.35); backdrop-filter: blur(1px);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s;
}
.am-backdrop.is-open{ opacity:1; visibility: visible; transition-delay: 0s; }
html.am-lock, body.am-lock{ overflow:hidden; height:100%; }

/* =========================================================
   FAB – Cadastrar Evento (mobile)
   ========================================================= */
.am-fab{
  position: fixed; right:16px; bottom:16px; z-index: 9998; width:56px; height:56px; line-height:56px;
  text-align:center; border-radius:18px; font-size:26px; font-weight:900; text-decoration:none;
  background: linear-gradient(90deg, var(--accent), var(--violet-2)); color:#111;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
@media (min-width:821px){ .am-fab{ display:none; } }

/* =========================================================
   Seções genéricas (Hero / Cards / Footer) – opcionais
   ========================================================= */
.hero{
  position:relative; padding: 56px 0 48px; overflow:hidden;
  background:
    radial-gradient(1200px 400px at 50% -200px, #f0eaff, transparent 70%),
    radial-gradient(1000px 380px at -10% 120%, #f7e9ff, transparent 70%),
    radial-gradient(1000px 380px at 110% 120%, #ffe9db, transparent 70%),
    #fff;
  border-bottom: 1px solid var(--line);
}
.hero h1{ font-size: clamp(28px, 3vw, 42px); margin:0 0 10px; letter-spacing:.4px; color:var(--ink); }
.hero p{ color: var(--muted); margin:0 0 18px; }
.hero .cta{ display:flex; gap:10px; flex-wrap:wrap; }

.grid{ display:grid; gap:16px; padding: 24px 0 40px; grid-template-columns: repeat(3, 1fr); }
@media (max-width:980px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.card .card-body{ padding:16px; }
.card .thumb{
  aspect-ratio: 16/9; width:100%; display:block; background:#f1eef9;
  background-image: linear-gradient(135deg, rgba(123,31,162,.16), rgba(184,107,255,.12));
}
.card h3{ margin:6px 0 6px; font-size:18px; color:var(--ink); }
.card p{ margin:0; color: var(--muted); font-size:14px; }

/* Footer */
footer{ background:#faf9fe; border-top:1px solid var(--line); position: relative; z-index: 1; color:var(--ink); }
.footer-top{ padding: 28px 0; display:grid; gap:20px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width:980px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }
.f-brand{ display:flex; gap:12px; align-items:center; }
.f-brand img{ height:36px; width:auto; }
.f-brand h4{ margin:0; font-size:18px; color:var(--ink); }
.footer-col h5{ margin:0 0 10px; font-size:15px; color:#3b3b47; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-col a{ color: var(--muted); text-decoration:none; border-radius:10px; padding:6px 8px; display:inline-block; transition: background .2s, color .2s; }
.footer-col a:hover{ background:#efe9ff; color:#2a2340; }
.footer-bottom{
  border-top:1px solid var(--line); padding: 14px 0; color: #5a5a68; font-size: 14px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:12px;
  background:#ffffff; border:1px solid var(--line); text-decoration:none;
  transition: background .15s, box-shadow .15s;
}
.footer-social a:hover{ background:#f6f3ff; box-shadow: 0 4px 10px rgba(0,0,0,.06); }

/* =========================================================
   PÁGINA DE EVENTO – HERO MODERNO (principal INTEIRA + BG blur)
   ========================================================= */
/* Use: <section class="event-hero modern" style="--hero-img:url('/capa.webp')"> */

/* =========================================================
   BACKGROUND BLUR FLUID (cobre a página toda)
   - Aplique no <body class="gc-fluid" style="--page-bg:url('/...')">
   ========================================================= */
body.gc-fluid{
  isolation: isolate; /* cria um stacking context próprio */
}

/* camada da imagem desfocada por trás de tudo */
body.gc-fluid::before{
  content:"";
  position: fixed;
  inset: -24px;               /* overscan para não mostrar bordas do blur */
  z-index: -2;                /* fica atrás de todo o conteúdo */
  pointer-events: none;

  background-image: var(--page-bg);
  background-size: cover;     /* cover = pode cortar NO FUNDO */
  background-position: center;

  filter: blur(28px) saturate(1.15) brightness(.93);
  transform: scale(1.18);     /* expande para esconder as bordas pós-blur */
  will-change: transform, filter;
}

/* véu/vignette para legibilidade (desbota para o fundo claro do site) */
body.gc-fluid::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,.55) 60%, var(--bg) 100%),
    radial-gradient(60% 60% at 50% 10%, rgba(255,255,255,.35), transparent 70%);
}

/* =========================================================
   HERO (capa) – poster central SEM corte
   ========================================================= */
.gc-hero{
  padding: clamp(18px, 6vw, 36px) 18px 18px; /* topo maior, base menor */
  display: grid;
  justify-items: center;
  gap: 14px;
  /* se tiver header fixo translúcido, pode aumentar o topo acima */
}

/* Moldura do poster – estilo clean similar ao Geek Calendar */
.gc-hero__cover{
  width: min(40%, var(--gc-cover-maxw));  /* <= 700px ou 800px */
  display: grid;
  place-items: center;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  overflow: hidden; /* só para os cantos arredondados */
}

/* IMAGEM PRINCIPAL: sempre inteira, centralizada, responsiva */
.gc-hero__cover > img,
.gc-hero__cover > picture > img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 40% !important;
  max-height: var(--gc-cover-maxh) !important;
  object-fit: contain !important;   /* SEM corte no poster */
  object-position: center !important;
}

/* Título/sub e chips abaixo, centralizados */
.gc-hero__title{
  text-align: center;
  padding-inline: 12px;
}
.gc-hero__title h1{
  margin: 8px 0 6px;
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.15;
  color: var(--ink);
}
.gc-hero__chips{
  margin-top: 6px;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: 14px;
}
.gc-hero__chips .chip{
  padding: 6px 10px; border-radius: 999px;
  background: #fff; border:1px solid var(--line); color:#3b3b47;
}

/* utilitários opcionais (para o restante da página) */
.container{ max-width: 1200px; margin: 0 auto; padding-inline: 18px; }
.section{ padding-block: 18px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.card .body{ padding: 16px; }

/* Responsividade */
@media (max-width: 720px){
  :root{ --gc-cover-maxh: 68vh; }     /* dá respiro em celulares */
  .gc-hero{ padding-top: clamp(14px, 8vw, 28px); }
}

/* Hardening contra CSS legado que force corte no poster */
.gc-hero img{ height: auto !important; }
/* ---------- Utilitários sugeridos ---------- */
.container{ max-width: 1200px; margin: 0 auto; padding-inline: 18px; }
.section{ padding-block: 18px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.card .body{ padding: 16px; }

/* ---------- Responsividade mínima ---------- */
@media (max-width: 720px){
  :root{ --cover-maxh: 68vh; }
  .hero-center{ padding-block: clamp(14px, 6vw, 28px); }
}

/* ---------- Hardening contra CSS legado que force corte ---------- */
/* Se existir algum .classe antiga impondo height fixa na imagem, anulamos aqui. */
.hero-center img{ height: auto !important; }

/* TÍTULO/META abaixo do hero */
.event-header{ margin: -6px 0 12px; }
.event-header h1{ margin: 0 0 6px; font-size: clamp(22px, 3.6vw, 36px); line-height: 1.15; color: var(--ink); }
.event-header .meta-chips{ display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.event-header .chip{
  background: #fff; border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 999px; color: #3b3b47;
}

/* =========================================================
   PÁGINA DE EVENTO – Conteúdo, Detalhes, Mapa, Sidebar
   ========================================================= */
.breadcrumb{ font-size:14px; color:#6a6a79; margin:14px 0; }
.breadcrumb a{ text-decoration:none; color:#5a5a88; }
.breadcrumb a:hover{ text-decoration:underline; }

.event-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:18px; margin: 10px 0 30px; }
@media (max-width:1020px){ .event-grid{ grid-template-columns: 1fr; } }
.event-main{ min-width:0; }
.event-sidebar{ min-width:0; }
@media (min-width:1021px){ .event-sidebar{ position:sticky; top: calc(var(--header-h) + 16px); } }

.event-meta .card-body{ padding:16px; }
.event-meta{ display:grid; gap:14px; align-items:start; }
.meta-rows{ display:grid; gap:10px; }
.meta-row{ display:flex; gap:10px; align-items:flex-start; }
.meta-icon{
  width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  background:#f7f5ff; border:1px solid #e9e3ff; flex:0 0 auto; color:#3a2a5a; font-weight:900;
}
.meta-content strong{ display:block; font-size:15px; }
.meta-content span{ display:block; color:var(--muted); font-size:14px; }
.event-ctas{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700;
  padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.08); }
.btn-accent{ border:none; background:linear-gradient(90deg,var(--accent),var(--violet-2)); color:#111; text-shadow:0 1px 0 rgba(255,255,255,.35); }

.event-description .card-body{ padding:18px; }
.event-description h2{ margin:0 0 8px; font-size:20px; }
.event-description .content{ color:var(--muted); }
.event-description .content p{ margin:0 0 10px; }

.event-details .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:720px){ .event-details .grid{ grid-template-columns:1fr; } }
.detail{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.detail dt{ font-weight:700; font-size:13px; color:#3b3b47; margin:0 0 6px; }
.detail dd{ margin:0; color:var(--ink); }

.event-map .map-head{
  padding:12px 16px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.event-map .card-body{ padding:0; }
.event-map iframe{
  width:100%; height:340px; border:0; display:block;
  border-radius:0 0 var(--radius) var(--radius);
}

.sharebar{
  display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--line); background:#faf9ff;
}
.sharebar a{ text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid #e6ddfa; background:#fff; }

.sidebar-section{ margin-bottom:16px; }
.sidebar-section .title{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:800; }
.ad-box{
  height:250px; display:grid; place-items:center; color:#6a6a79;
  background:#fff; border:1px dashed #cfcfe6; border-radius:12px; margin:12px; font-size:14px;
}
.ad-box[data-size="300x250"]{ height:250px; }
.ad-box[data-size="300x600"]{ height:600px; }

.widget-events .list{ display:grid; gap:10px; padding:12px; }
.we-item{
  display:grid; grid-template-columns: 84px 1fr; gap:10px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.we-thumb{ width:84px; height:64px; object-fit:cover; display:block; }
.we-body{ padding-right:10px; }
.we-title{ font-weight:700; font-size:15px; margin:0 0 4px; }
.we-meta{ font-size:13px; color:var(--muted); }