/* ============================================================
   ROTARY CLUB OF LAKE NONA — Custom CSS
   Estiliza os widgets NATIVOS para combinar com a home:
   Club News (Stories) · Upcoming Events · See What's Happening (RSS)
   ------------------------------------------------------------
   Como usar: Website > Website Settings > Upload CSS
   Envie este arquivo e marque "Make Active".
   Paleta: azul #17458f · azul claro #0a7bc0 · dourado #f7a81b
   ============================================================ */

/* ---- Títulos de seção (todos os widgets) ---- */
.widget-title{
  color:#17458f !important;
  font-weight:800 !important;
  font-size:24px !important;
  letter-spacing:-.01em;
  padding-bottom:10px !important;
  margin-bottom:18px !important;
  border-bottom:3px solid #f7a81b !important;
  display:inline-block !important;
}
.widget-title:empty{ display:none !important; }

/* ================= CLUB NEWS (Stories) ================= */
.MainWidgetWrapper.story .storyItemContainer1,
.MainWidgetWrapper.story .storyItemaltContainer1{
  background:#ffffff !important;
  border:1px solid #e7ebf2 !important;
  border-radius:16px !important;
  padding:20px 22px !important;
  margin-bottom:16px !important;
  box-shadow:0 1px 2px rgba(16,32,74,.06);
  transition:transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s ease;
}
.MainWidgetWrapper.story .storyItemContainer1:hover,
.MainWidgetWrapper.story .storyItemaltContainer1:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(16,32,74,.12);
}
.MainWidgetWrapper.story .storyHeader,
.MainWidgetWrapper.story .storyHeader a{
  color:#17458f !important;
  font-weight:800 !important;
  font-size:18px !important;
  line-height:1.25 !important;
  text-decoration:none !important;
}
.MainWidgetWrapper.story .storyDateAuthor{
  color:#8b93a3 !important;
  font-size:12.5px !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:4px 0 8px !important;
}
.MainWidgetWrapper.story .storyBrief,
.MainWidgetWrapper.story .storyBody{
  color:#5a6577 !important;
  font-size:14.5px !important;
  line-height:1.6 !important;
}
.MainWidgetWrapper.story .cktemplate-image img{
  border-radius:10px !important;
  max-width:100% !important;
  height:auto !important;
}
.MainWidgetWrapper.story .readMore a{
  display:inline-block;
  margin-top:10px;
  color:#17458f !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  text-decoration:none !important;
}
.MainWidgetWrapper.story .readMore a:hover{ color:#0a7bc0 !important; }

/* ================= UPCOMING EVENTS ================= */
.upcoming-event-list{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.upcoming-event-list li{
  background:#ffffff !important;
  border:1px solid #e7ebf2 !important;
  border-left:4px solid #f7a81b !important;
  border-radius:12px !important;
  padding:16px 20px !important;
  margin-bottom:14px !important;
  list-style:none !important;
  /* mobile: garante largura total do item (não encolhe) */
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  transition:transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease;
}
.upcoming-event-list li:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(16,32,74,.10); }
.upcoming-event-list .event-name{
  color:#17458f !important;
  font-weight:800 !important;
  font-size:16px !important;
  line-height:1.3 !important;          /* linhas do título não coladas */
  text-decoration:none !important;
  display:block;
  margin:0 0 7px !important;
  word-break:break-word;
  overflow-wrap:break-word;
}
.upcoming-event-list .event-name:hover{ color:#0a7bc0 !important; }
.upcoming-event-list .event-location{
  color:#5a6577 !important;
  font-size:13.5px !important;
  line-height:1.4 !important;
  margin:0 0 7px !important;           /* respiro entre local e data */
}
.upcoming-event-list .event-date{
  color:#0a7bc0 !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.35 !important;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.ViewEventsList, .ViewEventsList a{
  color:#17458f !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  text-decoration:none !important;
}

/* ============ SEE WHAT'S HAPPENING (RSS) ============ */
.MainWidgetWrapper.rss .rssItemContainer1,
.MainWidgetWrapper.rss .rssItemaltContainer1{
  background:#ffffff !important;
  border:1px solid #e7ebf2 !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  margin-bottom:12px !important;
  transition:transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease;
}
.MainWidgetWrapper.rss .rssItemContainer1:hover,
.MainWidgetWrapper.rss .rssItemaltContainer1:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(16,32,74,.10);
}
.MainWidgetWrapper.rss .rssItemContainer1 a,
.MainWidgetWrapper.rss .rssItemaltContainer1 a{
  color:#17458f !important;
  font-weight:800 !important;
  font-size:15.5px !important;
  line-height:1.3 !important;
  text-decoration:none !important;
}
.MainWidgetWrapper.rss a:hover{ color:#0a7bc0 !important; }
.MainWidgetWrapper.rss .rssBrief{
  color:#5a6577 !important;
  font-size:13.5px !important;
  line-height:1.55 !important;
  margin-top:6px !important;
}
/* remove os <br> extras que o FetchRSS injeta */
.MainWidgetWrapper.rss .rssBrief br{ display:none !important; }

/* CORRIGE TÍTULO DUPLICADO: o FetchRSS injeta 2 links <a> iguais (mesmo texto,
   href diferente) antes do corpo. O RSS ALTERNA os contêineres dos itens
   (Container3 nos ímpares, altContainer3 nos pares) — por isso precisa dos dois.
   Escondemos do 2º link em diante e mantemos só o 1º. */
.MainWidgetWrapper.rss .rssItemContainer3 > a:nth-of-type(n+2),
.MainWidgetWrapper.rss .rssItemaltContainer3 > a:nth-of-type(n+2){ display:none !important; }

/* ============ IMAGENS MENORES + ESPAÇAMENTO ============ */

/* CLUB NEWS — miniaturas ~230px de altura, com respiro entre elas e entre posts */
.MainWidgetWrapper.story img{
  max-width:calc(50% - 12px) !important;   /* no máximo 2 por linha, com respiro */
  max-height:230px !important;
  width:auto !important;
  height:auto !important;
  border-radius:10px !important;
  margin:6px 12px 12px 0 !important;         /* gap horizontal e vertical entre imagens */
}
.MainWidgetWrapper.story .storyItemContainer1,
.MainWidgetWrapper.story .storyItemaltContainer1{ margin-bottom:22px !important; }

/* RSS (See What's Happening) — vira uma TIRA de miniaturas (~130px, várias
   por linha) em vez de imagens gigantes empilhadas; mais espaço entre posts */
.MainWidgetWrapper.rss img{
  max-height:130px !important;
  max-width:calc(33.333% - 10px) !important;
  width:auto !important;
  height:auto !important;
  border-radius:8px !important;
  display:inline-block !important;
  vertical-align:top;
  margin:6px 10px 10px 0 !important;         /* gap entre miniaturas (H e V) */
}
.MainWidgetWrapper.rss .rssItemContainer1,
.MainWidgetWrapper.rss .rssItemaltContainer1{ margin-bottom:18px !important; }
.MainWidgetWrapper.rss .rssBrief{ margin-top:8px !important; }

/* ============ MOBILE — largura total dos widgets ============ */
/* No celular, o tema trava alguns containers numa largura fixa e o
   conteúdo fica espremido (títulos quebrando em 3 linhas). Aqui forçamos
   os containers desses widgets a ocupar a largura toda — só no mobile,
   o desktop fica intacto. */
/* IMPORTANTE: SEM :has(). Se um seletor :has() falhar num Safari antigo, o
   navegador descarta a media query INTEIRA — foi por isso que os eventos
   continuavam apertados no celular. Aqui forçamos a cadeia toda de contêineres
   (band > container > coluna > box > widget > lista) a ocupar 100% no mobile.
   Escopado em .HomeContentWrapper pra afetar só a home. */
/* CAUSA RAIZ DO APERTO NO MOBILE (validado renderizando a home a 384px):
   o widget de eventos tinha um padding lateral de 80px EMBUTIDO no próprio
   widget (estilo inline, feito pro desktop). Em uma tela de ~384px isso deixava
   só ~184px pro conteúdo — por isso os cards ficavam espremidos e centralizados.
   No celular, zeramos o padding horizontal dos widgets. Os widgets full-bleed
   (carrossel) já têm padding 0, então não são afetados. */
@media (max-width: 768px){
  section.PageWidget{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* garante que a lista de eventos e os cards ocupem a largura toda */
  .upcoming-event-list,
  .upcoming-event-list > li{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ============ IMAGENS "PREFORMATTED" (flyers/pôsteres) ============ */
/* Limita a ALTURA das imagens inseridas pela ferramenta de imagem, para
   pôsteres verticais (ex.: flyer de evento) não virarem um paredão full-width.
   Só afeta imagens altas — banners largos ficam intactos. Centralizado. */
.preformatted-image img,
.predefined-image img{
  max-height:760px !important;
  max-width:100% !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
  border-radius:12px !important;
}