/* ===================================================================
   EL RIU — Plantillas de encabezado de artículo
   estandar  -> sin cambios (la que ya había)
   opinion   -> ficha de autor (avatar + kicker) por encima del titular
   reportaje -> hero a pantalla completa con imagen + panel oscuro

   NOTA: el site ya trae ".article-hero h1{color:#101010}" (pub.css) con
   más especificidad que una simple clase, así que aquí los selectores
   de titular van con el selector del contenedor + h1 + !important para
   que ganen siempre, sea cual sea el orden de carga del CSS.
   =================================================================== */

/* ---------- OPINIÓ ---------- */
.dde-article-hero-opinion{padding:36px 0 18px;max-width:760px;margin:0 auto}
.dde-opinion-byline{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dde-opinion-byline img.dde-author-avatar.opinion-avatar,
.dde-opinion-byline span.dde-author-avatar.opinion-avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--elriu-soft,#edf4fb);display:flex;align-items:center;justify-content:center;
  font:800 20px/1 Inter,Arial,sans-serif;color:var(--elriu-ink,#001f42);flex:0 0 auto;
}
.dde-opinion-byline-text{display:flex;flex-direction:column;gap:2px}
.dde-opinion-kicker{
  font-family:Inter,Arial,sans-serif;font-weight:900;font-size:15px;
  color:var(--elriu-red,#c40018);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px;width:fit-content;
}
.dde-opinion-author-name{font-family:Merriweather,Georgia,serif;font-size:19px;color:#111}
.dde-article-hero-opinion h1.dde-opinion-title{
  font-family:Merriweather,Georgia,serif!important;font-weight:900!important;font-size:46px!important;
  line-height:1.08!important;letter-spacing:-.02em!important;margin:0 0 18px!important;color:#111!important;
}
.dde-opinion-standfirst{font-family:Georgia,serif;font-size:19px;line-height:1.5;color:#333;margin:0 0 14px}
.dde-opinion-date{font-family:Inter,Arial,sans-serif;font-size:14px;color:#767676}
@media(max-width:760px){.dde-article-hero-opinion h1.dde-opinion-title{font-size:32px!important}}

/* ---------- REPORTATGE ---------- */
.dde-article-hero-reportaje{
  display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr;
  height:100vh!important;min-height:100vh!important;max-height:none!important;
  width:100%;overflow:hidden;background:#0b0b0b;box-sizing:border-box;
}
.dde-article-hero-reportaje .dde-reportaje-media,
.dde-article-hero-reportaje .dde-reportaje-panel{
  height:100%!important;box-sizing:border-box;
}
.dde-reportaje-media{
  background-image:var(--dde-hero-img);background-size:cover;background-position:center;
  filter:brightness(.75);
}
.dde-reportaje-panel{
  background:#0b0b0b;color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:48px 5vw;text-align:center;
}
.dde-reportaje-panel .dde-reportaje-kicker{
  border-bottom:0!important;margin-bottom:8px!important;padding-bottom:0!important;
}
.dde-reportaje-kicker a{
  font-family:Inter,Arial,sans-serif!important;font-weight:900!important;font-size:12px!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--elriu-red,#df281e)!important;text-decoration:none!important;
  border-bottom:0!important;
}
.dde-article-hero-reportaje h1.dde-reportaje-title{
  font-family:Merriweather,Georgia,serif!important;font-style:italic!important;font-weight:400!important;
  font-size:44px!important;line-height:1.16!important;margin:18px 0 20px!important;color:#fff!important;
}
.dde-reportaje-standfirst{font-family:Georgia,serif;font-size:18px;line-height:1.55;color:rgba(255,255,255,.86)!important;margin:0 auto;max-width:520px}
.dde-reportaje-caption{max-width:900px;margin:10px auto 0;padding:0 5vw;font:500 13px/1.4 Inter,Arial,sans-serif;color:#767676;text-align:right}
@media(max-width:900px){
  .dde-article-hero-reportaje{grid-template-columns:1fr;height:auto!important;min-height:auto!important}
  .dde-article-hero-reportaje .dde-reportaje-media,
  .dde-article-hero-reportaje .dde-reportaje-panel{height:auto!important}
  .dde-reportaje-media{min-height:260px}
  .dde-article-hero-reportaje h1.dde-reportaje-title{font-size:30px!important}
}