/* =================================================
   0) Variáveis opcionais (cores e sombras)
   ================================================= */
:root {
  /* ajuste se quiser reaproveitar suas próprias cores */
  --promo-border-color: var(--color-link);
  --promo-banner-bg:    var(--color-link);
  --promo-bg:           #ffffff;
  --promo-text-color:   #222;
  --promo-excerpt-bg:   rgba(0, 0, 0, 0.03);
  --promo-shadow:       rgba(0, 0, 0, 0.1);
}

/* =================================================
   1) BARRA DE PROGRESSO (sempre no footer – sem mudanças)
   ================================================= */
#promo-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1200px;
  z-index: 10000;
  pointer-events: none;
}
#promo-bar .promo-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
}
#promo-bar .promo-progress__fill {
  width: 0;
  height: 100%;
  background: var(--color-link);
  transition: width 0.1s ease-out;
}

/* =================================================
   2) CTA FIXED (rodapé – sem alterações)
   ================================================= */
#promo-cta-fixed {
  position: fixed;
  bottom: calc(4px + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 95%;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #c62828;
  color: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: auto;
  z-index: 10001;
}
#promo-cta-fixed.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#promo-cta-fixed .promo-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}
#promo-cta-fixed .promo-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}
#promo-cta-fixed .promo-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
/* Garante que o texto/link do fixed fique branco */
#promo-cta-fixed .promo-link,
#promo-cta-fixed .promo-text {
  color: #fff !important;
}

/* =================================================
   3) CTA INLINE – MOBILE (≤ 600px)
   ================================================= */
@media (max-width: 600px) {
  /* 3.1) Faz a <div class="promo-text-container"> sumir do grid,
         deixando apenas os filhos como grid-items diretos */
  #promo-cta-inline .promo-text-container {
    display: contents;
  }

  /* 3.2) Cria o grid em 4 linhas: banner, title, thumb, excerpt */
  #promo-cta-inline {
    display: grid;
    grid-template-areas:
      "banner"
      "title"
      "thumb"
      "excerpt";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    width:100%;
    max-width: 100%;
    margin: 1.5rem auto;
    padding: 1rem;
    background: var(--promo-bg);
    border-radius: 4px;
    transform: none !important;
    opacity: 1 !important;
    box-sizing: border-box;
  }

  /* 3.3) Faixa “Leia agora” (grid-area: banner) */
  #promo-cta-inline::before {
    content: "Leia agora";
    grid-area: banner;
    background: var(--promo-banner-bg);
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    border-radius: 4px 4px 0 0;
    margin: 0 -1rem 1rem -1rem; /* expande até as bordas do mobile */
    box-sizing: border-box;
  }

  /* 3.4) Título (grid-area: title) */
  #promo-cta-inline .promo-link {
    grid-area: title;
    color: var(--promo-text-color);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 0.75rem;
    white-space: normal;
    word-break: break-word;
  }

  /* 3.5) Imagem (grid-area: thumb) */
  #promo-cta-inline .promo-thumb {
    grid-area: thumb;
    width: 100%;
    height: auto;
    max-height: 180px;
    margin-bottom: 0.75rem;
    border-radius: 4px;
    object-fit: cover;
  }

  /* 3.6) Excerpt (grid-area: excerpt) */
  #promo-cta-inline .promo-excerpt {
    grid-area: excerpt;
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #555;
    background: var(--promo-excerpt-bg);
    padding: 0.75rem;
    border-radius: 4px;
    white-space: normal;
    box-sizing: border-box;
  }

  /* 3.7) Esconde o botão fechar no mobile */
  #promo-cta-inline .promo-close {
    display: none !important;
  }

  /* 3.8) Ajusta #promo-bar e #promo-cta-fixed para full‐width no mobile */
  #promo-bar,
  #promo-cta-fixed {
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
  #promo-cta-fixed {
    bottom: 0;
    padding: 1rem;
  }
}

/* =================================================
   4) CTA INLINE – DESKTOP (≥ 601px)
   Aqui usamos flex para ficar imagem à esquerda + 
   à direita título em cima e excerpt logo abaixo
   ================================================= */
@media (min-width: 601px) {
  /* 4.1) Container geral em flex */
  #promo-cta-inline {
    position: relative;
    display: flex;
    align-items: flex-start;
    width:100%;
    max-width: 900px;
    margin: 0.2rem auto;
    padding: 0; /* sem padding extra */
    background: var(--promo-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--promo-shadow);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 10002;
  }
  #promo-cta-inline.show {
    transform: translateY(0);
    opacity: 1;
  }

  /* 4.2) Faixa “Leia agora” via ::before */
  #promo-cta-inline::before {
    content: "Leia agora";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--promo-banner-bg);
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
  }

  /* 4.3) Espaço acima do conteúdo para não ficar embaixo da faixa */
  #promo-cta-inline {
    padding-top: 3rem; /* ajuste se a faixa tiver altura diferente */
  }

  /* 4.4) Thumbnail fixa à esquerda */
  #promo-cta-inline .promo-thumb {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    margin-left: 1rem; /* gap interno esquerda */
    margin-top: 1rem;  /* alinha abaixo da faixa */
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* 4.5) Container textual: título + excerpt em coluna */
  #promo-cta-inline .promo-text-container {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;   /* gap entre thumb e texto */
    margin-top: 1rem;    /* alinha texto abaixo da faixa */
    margin-bottom: 1rem; /* espaço final no card */
    flex: 1;             /* ocupa todo espaço horizontal restante */
    box-sizing: border-box;
  }

  /* 4.6) Título (link) */
  #promo-cta-inline .promo-link {
    color: var(--promo-text-color);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    margin: 0;             /* sem margem extra */
    word-break: break-word;/* quebra texto longo */
  }

  /* 4.7) Excerpt (logo abaixo do título) */
  #promo-cta-inline .promo-excerpt {
    margin: 0.5rem 0 0 0;  /* gap pequeno entre título e excerpt */
    padding: 0.75rem;
    background: var(--promo-excerpt-bg);
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.4;
    color: #555;
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
  }

  /* 4.8) Esconde o botão fechar no desktop */
  #promo-cta-inline .promo-close {
    display: none !important;
  }
}

/* =================================================
   5) Animações (opcionais, você pode remover se não quiser)
   ================================================= */
@keyframes popIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulse {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.02); }
}