/* === Hero Posts Addon (Styles) === */

/* --- Imagen: franja inferior visible por defecto --- */
.hero-posts-container .hero-posts-item .hero-posts-item-image,
.hero-posts-container .hero-posts-item .hero-posts-item-image-inner{
  position: relative;
  overflow: visible;
}

/* Método principal: pseudo-elemento */
.hero-posts-container .hero-posts-item .hero-posts-item-image-inner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:8px;                     /* valor por defecto */
  background:#FF7300;             /* naranja por defecto */
  border-bottom-left-radius: var(--hero-posts-item-image-border-radius);
  border-bottom-right-radius: var(--hero-posts-item-image-border-radius);
  pointer-events:none;
  z-index: 15;
}

/* Respaldo: inset box-shadow, por si algún overlay/stacking tapa el ::after */
.hero-posts-container .hero-posts-item .hero-posts-item-image-inner{
  box-shadow: inset 0 -8px 0 #FF7300;
}
.hero-posts-container .hero-posts-item .hero-posts-item-image{
  box-shadow: inset 0 -8px 0 #FF7300;
}

/* Si overlays del plugin quedan por encima, bajamos su z-index */
.hero-posts-container .hero-posts-item .hero-posts-item-image-content{ z-index: 5; }

/* --- Títulos: valores por defecto editables con variables CSS --- */
.hero-posts-container .hero-posts-item .hero-posts-item-content-title{
  text-align: var(--hp-title-align, left);
  margin-bottom: .35em;
}
.hero-posts-container .hero-posts-item .hero-posts-item-content-title-inner{
  color: var(--hp-title-color, #111);
  font-size: var(--hp-title-size, clamp(20px, 2.6vw, 36px));
  line-height: var(--hp-title-line, 1.15);
  font-weight: var(--hp-title-weight, 800);
  text-transform: var(--hp-title-transform, none);
  letter-spacing: var(--hp-title-tracking, .2px);
}

/* Subtítulos (opcional) */
.hero-posts-container .hero-posts-item .hero-posts-item-content-subtitle{
  text-align: var(--hp-subtitle-align, left);
}
.hero-posts-container .hero-posts-item .hero-posts-item-content-subtitle-inner{
  color: var(--hp-subtitle-color, #444);
  font-size: var(--hp-subtitle-size, clamp(14px, 1.4vw, 18px));
  line-height: var(--hp-subtitle-line, 1.3);
  font-weight: var(--hp-subtitle-weight, 500);
}

/* --- Presets por clase (para usar en "Custom class" del bloque) --- */
/* Portada llamativa en blanco centrado */
.hero-posts-container .preset-titular-portada .hero-posts-item-content-title{ text-align:center; }
.hero-posts-container .preset-titular-portada{
  --hp-title-color:#fff;
  --hp-title-size:clamp(26px, 4vw, 52px);
  --hp-title-weight:900;
  --hp-title-line:1.12;
}

/* Tarjeta compacta */
.hero-posts-container .preset-tarjeta{
  --hp-title-size:clamp(18px, 2vw, 24px);
  --hp-title-weight:700;
}

/* Desactivar barra en un bloque concreto */
.hero-posts-container .sin-barra .hero-posts-item-image-inner::after{ height:0; background:transparent; box-shadow:none; }
.hero-posts-container .sin-barra .hero-posts-item-image-inner,
.hero-posts-container .sin-barra .hero-posts-item-image{ box-shadow:none; }

@media (max-width: 768px){
  .hero-posts-container .hero-posts-item .hero-posts-item-content-title-inner{
    font-size: clamp(18px, 4.5vw, 26px);
  }
}