/*
  rss-newssync - frontend.css (organizado, "theme-safe" e com fixes para GRID + CAROUSEL + HERO)
  - Mantém classes/HTML existentes.
  - Centraliza variáveis no topo para fácil override via Theme Customizer / Elementor.
  - Minimiza uso de !important (apenas onde temas costumam sobrepor).
  - Inclui regras para .rsp-no-underline (remover sublinhado visual mantendo <a>).
  - Garante textos do HERO sempre brancos via variável --rsp-hero-text-color.
  - Garante cartões/slides com altura visual consistente (CSS-first) e JS fallback opcional.
*/

/* ============================
   VARIÁVEIS & BASE (fáceis de sobrescrever)
   ============================ */
.rsp-container {
  /* Layout / spacing */
  --rsp-max-width: 1200px;
  --rsp-gutter: 12px;

  /* Tipografia */
  --rsp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rsp-base-font-size: 16px;
  --rsp-base-line-height: 1.45;
  --rsp-text-color: #222;

  /* Titles */
  --rsp-title-color: inherit;            /* herda do tema por defeito */
  --rsp-title-line-height: 1.2;
  --rsp-card-title-size: 1.03rem;
  --rsp-list-title-size: 1.00rem;
  --rsp-hero-title-size: 2.00rem;

  /* Links */
  --rsp-link-color: inherit;             /* deixa tema controlar cor normal */
  --rsp-link-hover: #1e73be;             /* fallback hover (pode ser sobrescrito no Customizer) */

  /* HERO text (override seguro via Customizer/Elementor) */
  --rsp-hero-text-color: #ffffff;

  /* Images / Grid sizing */
  --rsp-card-image-height: 220px;
  --rsp-card-image-height-mobile: 140px;
  --rsp-list-image-width: 160px;
  --rsp-list-image-height: 130px;

  --rsp-card-fixed-height: 420px; /* ajustar para testar: 380px, 420px, 480px, etc. */

  box-sizing: border-box;
}

/* Base container */
.rsp-container {
  max-width: var(--rsp-max-width);
  margin: 0 auto;
  padding: var(--rsp-gutter);
  font-family: var(--rsp-font-family);
  font-size: var(--rsp-base-font-size);
  line-height: var(--rsp-base-line-height);
  color: var(--rsp-text-color);
  box-sizing: border-box;
}

/* Accessibility focus */
.rsp-container a:focus-visible {
  outline: 3px solid rgba(30,115,190,0.12);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================
   LINK / COR (comportamento neutro)
   - Não forçamos cores do tema; usamos variáveis.
   - Deixamos o theme controlar :hover (evitar !important).
   ============================ */
.rsp-container a {
  color: var(--rsp-link-color);
  text-decoration: none; /* plugin remove underline por defeito; tema pode reintroduzir */
  transition: color .16s ease;
  pointer-events: auto;
  cursor: pointer;
}
.rsp-container a:hover,
.rsp-container a:focus {
  /* Não definimos color aqui para permitir que o tema aplique o seu :hover color.
     Mantemos um feedback visual por fallback (underline) para temas que não mudam cor. */
  text-decoration: underline;
}

/* Utility: remove sublinhado visual apenas quando classe presente,
   mantendo o <a> e a possibilidade do tema aplicar cor/hover. */
.rsp-container a.rsp-no-underline,
.rsp-container .rsp-card-desc a.rsp-no-underline,
.rsp-container .rsp-hero-readmore a.rsp-no-underline {
  text-decoration: none;
  border-bottom: none;
  background-image: none;
}
.rsp-container a.rsp-no-underline:focus-visible {
  outline: 3px solid rgba(255,255,255,0.16);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================
   HERO / CAROUSEL
   - Preserva o design mas deixa cores controláveis via variáveis
   ============================ */
.rsp-hero, .rsp-carousel { width: 100%; }

.rsp-hero-slide {
  position: relative;
  background-size: cover;
  background-position: top center;
  min-height: 500px;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 992px) { .rsp-hero-slide { min-height: 380px; } }
@media (max-width: 640px) { .rsp-hero-slide { min-height: 240px; } }

/* Overlay (keeps original gradient/design) */
.rsp-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  background: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.50) 55%, rgba(0,0,0,0) 100%);
  color: var(--rsp-title-color); /* herda do tema por omissão, hero textual color set abaixo */
  padding: 10px 20px;
  box-sizing: border-box;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  border-radius: 6px;
  margin: 0 12px;
}

/* Hero title: mantemos tamanho/weight; cor controlada por variável --rsp-hero-text-color */
.rsp-hero-title {
  margin: 0;
  font-size: var(--rsp-hero-title-size);
  line-height: var(--rsp-title-line-height);
  font-weight: 700;
}
.rsp-hero-title a {
  color: var(--rsp-hero-text-color);
  text-decoration: none;
  transition: color .16s ease;
}
.rsp-hero-title a:hover,
.rsp-hero-title a:focus {
  color: var(--rsp-hero-text-color);  /* manter branco no hover do hero */
  text-decoration: underline;
}

/* hero meta/readmore */
.rsp-hero-date { font-size: 1.0rem; color: rgba(255,255,255,0.95); margin: 0; }
.rsp-hero-readmore a {
  display: inline-block;
  margin-top: 6px;
  background: rgba(255,255,255,0.08);
  color: var(--rsp-hero-text-color);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 0.95rem;
  text-decoration: none;
}

/* Keep slides/cards rounded */
.rsp-hero .rsp-hero-slide,
.rsp-carousel .rsp-card { border-radius: 8px; overflow: hidden; }

/* ============================
   GRID (3 colunas) — seção dedicada
   - Código fix para imagens alinhadas e cards da mesma altura
   - Cobre <img>, <picture> e background-image slides
   ============================ */
.rsp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch; /* equaliza alturas */
}
@media (max-width: 992px) { .rsp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rsp-grid { grid-template-columns: 1fr; } }

/* Each grid child uses flex column so inner card can stretch */
.rsp-grid > * {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

/* Ensure cards fill grid cells */
.rsp-grid .rsp-card,
.rsp-grid > .rsp-card,
.rsp-grid .rsp-card-wrapper,
.rsp-grid .swiper-slide > .rsp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Normalize image wrapper(s) */
.rsp-card .rsp-card-media,
.rsp-card .rsp-card-image,
.rsp-card .rsp-card-img,
.rsp-card > .rsp-card-media,
.rsp-card > .rsp-card-image,
.rsp-card > img,
.rsp-grid .rsp-hero-slide,
.rsp-grid .rsp-card .image {
  overflow: hidden;
  box-sizing: border-box;
}

/* Force images to consistent visual box.
   Keep some !important for properties themes often override (width/height/object-fit). */
.rsp-card img,
.rsp-card picture img,
.rsp-card > img,
.rsp-card .rsp-card-media img,
.rsp-card .rsp-card-image img {
  display: block !important;
  width: 100% !important;
  height: var(--rsp-card-image-height) !important; /* main GRID fix: consistent height */
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  box-sizing: border-box;
}

/* Background-image based slides/cards should match same height */
.rsp-card .rsp-card-media[data-bg],
.rsp-card .rsp-card-image[data-bg],
.rsp-grid .rsp-hero-slide,
.rsp-grid .rsp-card-background {
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  min-height: var(--rsp-card-image-height) !important;
  height: var(--rsp-card-image-height) !important;
}

/* Optional aspect-ratio mode (activate by adding .use-aspect-ratio to .rsp-card) */
.rsp-card.use-aspect-ratio .rsp-card-media,
.rsp-card.use-aspect-ratio .rsp-card-image,
.rsp-card.use-aspect-ratio img {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Card content stretch + footer stick */
.rsp-card .rsp-card-content,
.rsp-card .rsp-card-body,
.rsp-card .rsp-card-footer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.rsp-card .rsp-card-footer { margin-top: auto; }

/* Mobile height adjust */
@media (max-width: 480px) {
  .rsp-card img,
  .rsp-card .rsp-card-media,
  .rsp-grid .rsp-hero-slide {
    height: var(--rsp-card-image-height-mobile) !important;
    min-height: var(--rsp-card-image-height-mobile) !important;
  }
}

/* ============================
   CARD / CONTENT
   - Mantive teu design visual; referencia as variáveis onde apropriado
   ============================ */
.rsp-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  height: 100%;
  box-sizing: border-box;
}

.rsp-card-content { padding: 12px; flex: 1 1 auto; box-sizing: border-box; }
.rsp-card-title { margin: 0 0 8px 0; font-size: var(--rsp-card-title-size); line-height: var(--rsp-title-line-height); font-weight: 600; color: var(--rsp-title-color); }
.rsp-card-title a { color: inherit; text-decoration: none; transition: color .16s ease; }
.rsp-card-title a:hover { color: var(--rsp-link-hover); text-decoration: underline; }
.rsp-card-date { font-size: 0.85rem; color: #666; margin-bottom: 8px; }
.rsp-card-desc { font-size: 0.95rem; color: #333; margin: 0; }

/* ============================
   LIST / MINIMAL
   ============================ */
.rsp-list .rsp-list-item { display: flex; gap: 16px; padding: 16px; border-bottom: 1px solid #f0f0f0; align-items: flex-start; }
.rsp-list-image { flex: 0 0 var(--rsp-list-image-width); }
.rsp-list-image img { width: var(--rsp-list-image-width); height: var(--rsp-list-image-height); object-fit: cover; object-position: top center; border-radius: 6px; display:block; }
.rsp-list-content { flex: 1 1 auto; }
.rsp-list-title { margin: 0 0 6px 0; font-size: var(--rsp-list-title-size); line-height: var(--rsp-title-line-height); font-weight: 600; color: var(--rsp-title-color); }
.rsp-list-meta { font-size: 0.85rem; color:#666; margin-bottom:8px; }
.rsp-list-desc { margin:0; color:#333; font-size:0.95rem; }

/* Minimal normalization */
.rsp-list.rsp-list-minimal,
ul.rsp-list.rsp-list-minimal { list-style: none; padding-left: 0; margin: 0; }
.rsp-list.rsp-list-minimal > li,
.rsp-list.rsp-list-minimal .rsp-item {
  display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start;
}
.rsp-list.rsp-list-minimal .rsp-list-image,
.rsp-list.rsp-list-minimal .rsp-image { flex: 0 0 var(--rsp-list-image-width); }
.rsp-list.rsp-list-minimal .rsp-list-content,
.rsp-list.rsp-list-minimal .rsp-content { flex:1 1 auto; display:flex; flex-direction:column; gap:6px; }

/* ============================
   SWIPER / ARROWS / CAROUSEL
   ============================ */
.swiper-button-next, .swiper-button-prev {
  z-index: 9;
  color: #fff;
  bottom: 90px;
  top: auto;
  opacity: 0.78;
  transition: transform .12s ease, opacity .12s ease;
  transform: scale(1.2);
  background: rgba(0,0,0,0.16);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 22px; line-height: 1; opacity: 1; color: #fff; }
.swiper-button-next:hover, .swiper-button-prev:hover { opacity: 0.96; transform: scale(1.24); }

.swiper-pagination { z-index: 7; position: absolute; bottom: 36px; left: 0; right: 0; text-align: center; pointer-events: none; }

/* Carousel cards */
.rsp-carousel .swiper-slide > .rsp-card,
.rsp-carousel .swiper-slide > .rsp-hero-slide { display: flex; flex-direction: column; height: 100%; min-height: 200px; }
.rsp-carousel .rsp-card img,
.rsp-carousel .rsp-hero-slide img {
  width: 100%; height: var(--rsp-card-image-height); object-fit: cover; object-position: top center; display: block;
}
.rsp-carousel .rsp-card .rsp-card-desc,
.rsp-carousel .rsp-card .excerpt,
.rsp-carousel .rsp-card .rsp-excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-height: 1.4; margin: 0 0 8px 0;
}
.rsp-carousel .rsp-card .rsp-card-footer,
.rsp-carousel .rsp-hero-slide .rsp-card-footer { margin-top: auto; }

/* ============================
   RESPONSIVO / SMALL SCREEN
   ============================ */
@media (max-width: 480px) {
  .rsp-hero-title { font-size: 1.15rem; }
  .rsp-hero-overlay { padding: 10px; bottom: 8px; margin: 0 8px; }
  .swiper-button-next, .swiper-button-prev { width: 40px; height: 40px; transform: scale(1.05); bottom: 78px; }
  .rsp-card img { height: var(--rsp-card-image-height-mobile); }
  .rsp-list-image { flex: 0 0 100px; }
  .rsp-list-image img { width: 100px; height: 72px; }
}

/* ============================
   TWEAKS (shadows / focus)
   ============================ */
.rsp-card:focus-within, .rsp-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transform: translateY(-1px);
  transition: all 160ms ease;
}

/* ===== CAROUSEL: garantir que todos os slides/cartões têm a mesma altura ===== */

/* Faz o wrapper do swiper usar flex e esticar os slides à mesma altura (igual ao maior) */
.rsp-carousel .swiper-wrapper {
  display: flex;
  align-items: stretch; /* faz slides terem a altura do elemento mais alto */
}

/* Cada slide torna-se um flex-item que estica verticalmente */
.rsp-carousel .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  height: var(--rsp-card-fixed-height);
  min-height: var(--rsp-card-fixed-height);
  max-height: var(--rsp-card-fixed-height);
  overflow: hidden; /* garante que conteúdo extra não expande a caixa */
}

/* O cartão dentro do slide ocupa 100% da altura do slide */
.rsp-carousel .swiper-slide > .rsp-card,
.rsp-carousel .swiper-slide > .rsp-hero-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Conteúdo do cartão ocupa o espaço restante (footer empurrado para baixo) */
.rsp-carousel .rsp-card .rsp-card-content,
.rsp-carousel .rsp-hero-slide .rsp-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* Força imagens / áreas de media a ter a mesma caixa visual (mesma altura) */
.rsp-carousel .rsp-card img,
.rsp-carousel .rsp-card picture img,
.rsp-carousel .rsp-hero-slide img,
.rsp-carousel .rsp-card .rsp-card-media,
.rsp-carousel .rsp-card-background {
  width: 100%;
  height: var(--rsp-card-image-height); /* usa a variável já presente no frontend.css */
  object-fit: cover;
  object-position: top center;
  display: block;
  box-sizing: border-box;
}

/* Limitar título/excerpt — já tens clamps, confirma os valores (ajusta se necessário) */
.rsp-carousel .rsp-card .rsp-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* lines of excerpt: adjust to taste */
  overflow: hidden;
  line-height: 1.4;
  margin: 0 0 8px 0;
}
.rsp-carousel .rsp-card-title,
.rsp-carousel .rsp-hero-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* title lines */
  overflow: hidden;
}


/* Background-image slides/cards: garantir mesma altura */
.rsp-carousel .rsp-hero-slide,
.rsp-carousel .rsp-card-background {
  min-height: var(--rsp-card-image-height);
  height: var(--rsp-card-image-height);
  background-size: cover;
  background-position: top center;
}

/* Mobile: usa a variável móvel definida no CSS principal */
@media (max-width: 480px) {
  .rsp-carousel .rsp-card img,
  .rsp-carousel .rsp-hero-slide img,
  .rsp-carousel .rsp-hero-slide,
  .rsp-carousel .rsp-card-background {
    height: var(--rsp-card-image-height-mobile);
    min-height: var(--rsp-card-image-height-mobile);
  }
}


/* ============================
   NOTES:
   - This file tries to avoid using !important except where necessary to beat theme inline or aggressive rules
     (images height/cover are kept with !important to ensure consistent boxes).
   - If a specific theme still forces a different hover color with very high specificity or !important,
     tell me the exact selector from DevTools (selector + file) and I will provide a minimal, safe override.
   - If visual heights still vary at runtime due to late-loading fonts/images, use the optional JS equalizer:
     includes/assets/js/rsp-equalize-carousel.js (provided separately) — enqueue only if needed.
   ============================ */