/* ==========================================================================
   Conteúdo +18 — selo nos cards e modal de confirmação de idade.
   Cores vêm de theme.styles.css (var(--color-danger) etc.), então
   acompanham o tema automaticamente.
   ========================================================================== */

/* Selo "+18" sobre a miniatura do card, só informativo (a real barreira
   é o modal na página do post). */
.adult-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  background: var(--color-danger);
  box-shadow: 0 2px 6px var(--shadow-color);
  pointer-events: none;
}

/* Conteúdo do post enquanto a idade não foi confirmada: fica borrado e
   não pode ser selecionado/lido, mas continua no HTML (SSR/SEO). */
.adult-locked {
  filter: blur(22px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.4s ease;
}

/* ---- Modal de confirmação de idade ---- */
.age-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}

.age-gate-backdrop.active {
  display: flex;
}

.age-gate-modal {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 20px 50px var(--shadow-color);
  animation: age-gate-pop 0.3s var(--ease-bounce);
}

@keyframes age-gate-pop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.age-gate-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(var(--color-bg-deep-rgb) / 1);
  color: var(--color-danger);
  font-size: 1.6rem;
  font-weight: 700;
}

.age-gate-modal h2 {
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}

.age-gate-modal p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin: 0 0 1.5rem;
}

.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.age-gate-actions button {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.2s var(--ease-bounce), background 0.2s ease, filter 0.2s ease;
}

.age-gate-confirm {
  background: var(--color-accent);
  color: var(--color-bg);
}

.age-gate-confirm:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.age-gate-leave {
  background: transparent;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text);
}

.age-gate-leave:hover {
  background: var(--color-overlay);
}

body.age-gate-open {
  overflow: hidden;
}

/* ---- Seção +18 dentro de um post comum ----
   Bloqueio só do trecho (o modal de página inteira é para post +18). Usa a
   mesma confirmação de idade do modal: cookie age_verified +
   localStorage "cleb-dev-age-verified". */
.adult-section {
  position: relative;
}

.adult-section.is-locked .adult-section__content {
  filter: blur(22px);
  user-select: none;
  pointer-events: none;
  min-height: 160px;
}

.adult-section__content {
  transition: filter 0.4s ease;
}

.adult-section__overlay {
  display: none;
}

.adult-section.is-locked .adult-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
}

.adult-section__overlay p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.adult-section__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-danger);
  color: #ffffff;
  font-weight: 700;
}

.adult-section__confirm {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  background: var(--color-accent);
  color: var(--color-bg);
  transition: transform 0.2s var(--ease-bounce), filter 0.2s ease;
}

.adult-section__confirm:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}