/**
 * Ebre Hero — hero editorial 2 cols con slider.
 * Usa design tokens (--brand-primary, --brand-accent, --radius-*).
 */

.ebre-hero .eh-eyebrow { color: rgb(var(--brand-accent)); }

/* El !important és necessari: la mida dels titulars ve d'un <style> en línia
   que injecta la configuració del tema amb !important a tots els h1, i sense
   això la mida del component no s'aplica mai.

   La mida està calculada perquè hi càpiga la paraula més llarga que fem servir
   («GASTRONÒMIQUES»); hyphens i overflow-wrap són la xarxa per si algun dia
   arriba un títol encara més llarg. */
.ebre-hero h1.eh-title {
  color: rgb(var(--brand-primary));
  font-size: clamp(2.25rem, 4.5vw, 5rem) !important;
  overflow-wrap: break-word;
  hyphens: auto;
}

.ebre-hero .eh-subtitle {
  color: rgb(var(--neutral-text-muted, 90 92 79));
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
}

.ebre-hero .eh-rule { background: rgb(var(--brand-accent)); }
.ebre-hero .eh-footer-label { color: rgb(var(--brand-primary) / 0.55); }

/* Redes sociales */
.ebre-hero .eh-social-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgb(var(--neutral-border, 224 228 234));
  color: rgb(var(--brand-primary));
  transition: all .3s ease;
}
.ebre-hero .eh-social-icon .material-icons-outlined { font-size: 18px; }
.ebre-hero .eh-social-icon:hover {
  background: rgb(var(--brand-accent));
  border-color: rgb(var(--brand-accent));
  color: #fff;
  transform: scale(1.1);
}
.ebre-hero .eh-readtime { color: rgb(var(--brand-primary) / 0.5); }

/* Slider */
.ebre-hero .eh-slider {
  height: clamp(420px, 55vh, 620px);
  border-radius: var(--radius-lg, 2rem);
  border: 1px solid rgb(var(--neutral-border, 224 228 234) / 0.4);
  transition: transform .5s ease;
}
.ebre-hero .eh-slider:hover { transform: scale(1.01); }

.ebre-hero .eh-slide {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity .7s ease, transform 1.6s ease;
}
.ebre-hero .eh-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}
.ebre-hero .eh-slide-grad {
  background: linear-gradient(to top, rgb(var(--neutral-text-main, 40 40 40) / 0.65), rgb(var(--neutral-text-main, 40 40 40) / 0.1) 40%, transparent);
}

/* Dots */
.ebre-hero .eh-dot {
  width: 9px; height: 9px; border-radius: 9999px;
  background: rgb(255 255 255 / 0.55);
  transition: width .3s ease, background .3s ease;
}
.ebre-hero .eh-dot.is-active { width: 28px; background: rgb(var(--brand-accent)); }

/* Contador */
.ebre-hero .eh-counter {
  border-radius: 9999px;
  background: rgb(var(--brand-primary));
  color: #fff;
}

/* Flechas */
.ebre-hero .eh-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20;
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgb(255 255 255 / 0.9);
  color: rgb(var(--brand-primary));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.2);
  transition: all .3s ease;
}
.ebre-hero .eh-nav:hover { background: rgb(var(--brand-accent)); color: #fff; }
.ebre-hero .eh-prev { left: 16px; }
.ebre-hero .eh-next { right: 16px; }

/* Caption box */
.ebre-hero .eh-caption-box {
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(6px);
  padding: 1rem;
  border-radius: var(--radius-md, 1rem);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
}
.ebre-hero .eh-caption-title { color: rgb(var(--brand-primary)); }
.ebre-hero .eh-caption-box [data-eh-caption] { color: rgb(var(--neutral-text-main, 40 40 40) / 0.7); }
.ebre-hero .eh-caption-icon {
  width: 32px; height: 32px; border-radius: 9999px;
  background: rgb(var(--brand-primary) / 0.1);
  color: rgb(var(--brand-primary));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* Pulse */
.ebre-hero .eh-pulse span { position: absolute; inset: 0; border-radius: 9999px; background: rgb(var(--brand-accent)); }
.ebre-hero .eh-pulse span:first-child { animation: eh-ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
@keyframes eh-ping { 75%, 100% { transform: scale(2); opacity: 0; } }