/* ====== BASE (grid + carrossel) ====== */
.card__image{
  position: relative;
  overflow: hidden;
  isolation: isolate;                /* garante z-index previsível (Swiper) */
}
.card__image::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index: 1;                        /* degradê atrás do overlay */
  transform: translateY(0);
  opacity: 1;
  transition: transform .3s ease, opacity .3s ease;
}
.card__overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px 14px;
  color:#fff;
  z-index: 2;                        /* overlay acima do degradê */
  transform: translateY(0);
  opacity: 1;
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;              /* clique passa pro <a> */
}
.card__heading--overlay{
  margin:0 0 6px;
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  line-height:1.15;
}
.card__meta{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 12px;
  font-size:.9rem;
}
.card__meta li + li::before{ content:"•"; margin-right:8px; opacity:.75; }

/* Hover: desce o overlay (grid + carrossel) */
@media (hover:hover){
  .card:hover .card__overlay{ transform: translateY(100%); opacity:0; }
  .card:hover .card__image::after{ transform: translateY(100%); opacity:0; }
}

/* ====== ESCOPOS ====== */
/* Esconde o heading "de baixo" (na lista do tema e no carrossel) */
.projects .card__content .card__heading,
.projects-carousel__item .card__content .card__heading{ display:none; }

/* …mas no seu template (.rc-list) pode mostrar se quiser */
.rc-list .card__content .card__heading{ display:block !important; }

/* ====== CARROSSEL ====== */
/* some com o painel laranja do tema no carrossel */
.projects-carousel__item.card--carousel .card__content,
.projects-carousel__item.card--carousel .card__bottom{
  display: none !important;
}

/* garante empilhamento correto no carrossel */
.projects-carousel__item .card__image::after{ z-index: 1; }
.projects-carousel__item .card__overlay{ z-index: 2; }

/* bullets sempre visíveis no carrossel */
.projects-carousel__item .card__meta{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px 12px;
  margin:0; padding:0;
}

/* (opcional) altura uniforme nos slides */
.projects-carousel__item .card__image{ aspect-ratio: 4 / 5; }
.projects-carousel__item .card__image img{ width:100%; height:100%; object-fit:cover; }

.projects-carousel__item .card__image::after{ z-index:1 !important; }
.projects-carousel__item .card__overlay{   z-index:2 !important; }

/* ------ Pills com borda para os itens de meta ------ */
.card__meta{
  list-style:none !important; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}

/* estilo padrão (fundo claro) */
.card__meta li{
  display:inline-flex; align-items:center;
  padding:6px 10px !important;
  border:1px solid rgba(0,0,0,.2) !important;
  border-radius:999px !important;
  font-size:.85rem; line-height:1; font-weight:500;
  color:#222 !important; background:rgba(0,0,0,.03) !important;
}

/* quando estiver sobre a imagem (dentro do overlay) */
.card__overlay .card__meta li{
  color:#fff !important;
  border-color:rgba(255,255,255,.75) !important;
  background:rgba(255,255,255,.08) !important;
  /* opcional, dá um “vidro” suave: */
  /* backdrop-filter: blur(2px); */
}

/* remove o separador antigo (•) entre os itens */
.card__meta li+li::before{ content:none !important; }

/* compacto em telas muito pequenas */
@media (max-width: 420px){
  .card__meta{ gap:6px; }
  .card__meta li{ padding:5px 9px; font-size:.8rem; }
}

/* ===== Pills (forçar nos CARDS: grid + carrossel) ===== */

/* garante que a lista apareça mesmo se o tema ocultar */
.projects__list .card__overlay .card__meta,
.projects__list .card__content .card__meta,
.projects-carousel__item .card__overlay .card__meta,
.projects-carousel__item .card__content .card__meta{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}

/* pills sobre a IMAGEM (overlay): branco com borda clara */
.projects__list .card__overlay .card__meta li,
.projects-carousel__item .card__overlay .card__meta li{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  font-size:.85rem; line-height:1; font-weight:500;
  color:#fff;
  background:rgba(255,255,255,.08);
}

/* pills em ÁREA CLARA (se algum card renderizar em .card__content) */
.projects__list .card__content .card__meta li,
.projects-carousel__item .card__content .card__meta li{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.2);
  border-radius:999px;
  font-size:.85rem; line-height:1; font-weight:500;
  color:#222;
  background:rgba(0,0,0,.03);
}

/* remove qualquer separador antigo (•) */
.projects__list .card__meta li+li::before,
.projects-carousel__item .card__meta li+li::before{
  content:none !important;
}

/* ===== Forçar as setas do Swiper a aparecer (grid/carrossel do tema) ===== */
.projects-carousel, .swiper, .swiper-container { position: relative; }

/* Mostrar sempre (alguns temas só mostram no :hover) */
.swiper-button-prev,
.swiper-button-next{
  display:flex !important;
  align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:50 !important;              /* acima de overlays/gradientes */
}

/* Ícones (usa pseudo-elemento padrão do Swiper) */
.swiper-button-prev::after,
.swiper-button-next::after{
  font-size:24px;                     /* tamanho do chevron */
  color:#fff;                         /* cor do chevron */
  font-weight:700;
}

/* Posição dentro do carrossel (ajuste se estiver “cortando”) */
.swiper-button-prev{ left:12px !important; }
.swiper-button-next{ right:12px !important; }

/* Se o tema desabilitar setas quando "não precisa", ainda permita clique */
.swiper-button-disabled{
  opacity:.35 !important;
  pointer-events:auto !important;
}

/* Se algum overlay/camada estiver por cima */
.card__overlay,
.card__image::after{
  z-index:2;                          /* setas estão com 50 */
}

.swiper, .swiper-container { position: relative; }

.swiper-button-prev,
.swiper-button-next{
  display:flex !important;
  align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important;
  z-index:50 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after{
  font-size:24px; color:#fff; font-weight:700;
}

.swiper-button-prev{ left:12px !important; }
.swiper-button-next{ right:12px !important; }

/* garantir referência de posicionamento */
.projects-carousel__item .card__image,
.swiper, .swiper-container { position: relative; }

/* SETAS – retângulo branco, meio da imagem */
.swiper-button-prev,
.swiper-button-next{
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%);
  width: 56px;
  height: 72px;
  border-radius: 10px;                 /* retângulo com cantos suaves */
  background: #fff;                    /* fundo branco */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  color: #ffb74d;                      /* cor do ícone */
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 50 !important;
}

/* posição horizontal */
.swiper-button-prev { left: 16px !important; }
.swiper-button-next { right: 16px !important; }

/* tamanho/cor do chevron (Swiper usa ::after) */
.swiper-button-prev::after,
.swiper-button-next::after{
  font-size: 26px;                     /* ajuste se quiser maior/menor */
  color: inherit;                      /* usa a cor definida no botão (#ffb74d) */
  font-weight: 700;
}

/* hover/active – invertido: fundo amarelo, ícone branco */
.swiper-button-prev:hover,
.swiper-button-next:hover{
  background: #ffb74d;
  color: #fff;
  border-color: #ffb74d;
}

/* estado "disabled" (quando não há slide anterior/seguinte) */
.swiper-button-disabled{
  opacity: .45 !important;
  pointer-events: none !important;
}

/* responsivo: um pouco menor em telas pequenas */
@media (max-width: 768px){
  .swiper-button-prev, .swiper-button-next{
    width: 46px; height: 60px; border-radius: 8px;
  }
  .swiper-button-prev::after, .swiper-button-next::after{ font-size: 22px; }
  .swiper-button-prev{ left: 10px !important; }
  .swiper-button-next{ right: 10px !important; }
}
/* === Setas do carrossel (seção .latest-projects) === */
.latest-projects .swiper-container { position: relative; }

.latest-projects .swiper-button-prev,
.latest-projects .swiper-button-next{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 72px !important;
  border-radius: 10px !important;
  background: #fff !important;                 /* retângulo branco */
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 50 !important;                       /* acima de overlays */
}

.latest-projects .swiper-button-prev{ left: 16px !important; }
.latest-projects .swiper-button-next{ right: 16px !important; }

/* Ícone do Swiper (chevron) */
.latest-projects .swiper-button-prev::after,
.latest-projects .swiper-button-next::after{
  font-size: 26px !important;                   /* tamanho do chevron */
  color: #ffb74d !important;                    /* amarelo desejado */
  font-weight: 700;
}

/* Hover: inverte (amarelo cheio com ícone branco) */
.latest-projects .swiper-button-prev:hover,
.latest-projects .swiper-button-next:hover{
  background: #ffb74d !important;
  color: #fff !important;
  border-color: #ffb74d !important;
}

/* Estado desabilitado mais clarinho */
.latest-projects .swiper-button-disabled{
  opacity: .45 !important;
  pointer-events: none !important;
}

/* Responsivo: reduz um pouco */
@media (max-width: 768px){
  .latest-projects .swiper-button-prev,
  .latest-projects .swiper-button-next{
    width: 46px !important;
    height: 60px !important;
    border-radius: 8px !important;
  }
  .latest-projects .swiper-button-prev::after,
  .latest-projects .swiper-button-next::after{
    font-size: 22px !important;
  }
  .latest-projects .swiper-button-prev{ left: 10px !important; }
  .latest-projects .swiper-button-next{ right: 10px !important; }
}

/* o widget do Elementor às vezes corta as setas */
.latest-projects .elementor-widget-container{
  overflow: visible !important;
}

/* use o próprio carrossel como referência para top/left */
.latest-projects .latest-projects__carousel{
  position: relative; /* novo contexto p/ absolute */
}

/* setas centralizadas pelo carrossel (e não pelo widget) */
.latest-projects .latest-projects__carousel .swiper-button-prev,
.latest-projects .latest-projects__carousel .swiper-button-next{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 72px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
  display: flex !important;
  align-items: center; justify-content: center;
  color: #ffb74d !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  opacity: 1 !important; visibility: visible !important;
}

/* deixa um tiquinho mais alto: ajuste o valor abaixo (ex.: 46%) */
.latest-projects .latest-projects__carousel .swiper-button-prev,
.latest-projects .latest-projects__carousel .swiper-button-next{
  top: 46% !important;                 /* subiu um pouco */
}

.latest-projects .latest-projects__carousel .swiper-button-prev{ left: 16px !important; }
.latest-projects .latest-projects__carousel .swiper-button-next{ right: 16px !important; }

.latest-projects .latest-projects__carousel .swiper-button-prev::after,
.latest-projects .latest-projects__carousel .swiper-button-next::after{
  font-size: 26px !important;
  color: inherit !important;           /* #ffb74d */
  font-weight: 700;
}

.latest-projects .latest-projects__carousel .swiper-button-prev:hover,
.latest-projects .latest-projects__carousel .swiper-button-next:hover{
  background: #ffb74d !important;
  color: #fff !important;
  border-color: #ffb74d !important;
}

/* disabled */
.latest-projects .latest-projects__carousel .swiper-button-disabled{
  opacity: .45 !important;
  pointer-events: none !important;
}

/* === PORTFÓLIO (grid) — garantir overlay acima do degradê === */
.projects__list .card__image,
.projects-masonry__item .card__image{
  position: relative;
  isolation: isolate;                 /* cria stacking context próprio */
}

/* degradê sempre atrás */
.projects__list .card__image::after,
.projects-masonry__item .card__image::after{
  z-index: 0 !important;
}

/* título + bullets sempre na frente */
.projects__list .card__overlay,
.projects-masonry__item .card__overlay{
  position: absolute;
  z-index: 1 !important;
  pointer-events: none;               /* clique vai para o <a> */
}

/* se algum CSS do tema estiver escondendo os bullets, força mostrar */
.projects__list .card__overlay .card__meta,
.projects-masonry__item .card__overlay .card__meta{
  display: flex !important;
}