/* ==========================================================================
   SVF · Interna de evento
   Banner, ficha, Próximos eventos y Eventos más buscados.
   La agenda vive en su propio archivo (agenda.css).

   En móvil (≤767px) se conserva el orden de escritorio y, como en la
   maqueta móvil:
   - en la ficha, el título sube por encima de una imagen apaisada;
   - los dos listados pasan a carrusel con la pieza compartida
     svf_theme/carrusel (dependencia de la librería evento-interna).

   Colores por portal: Medellín y Home en verde (valores base), Rionegro en
   púrpura con una sola regla .portal-rionegro que cambia las variables.
   Rionegro queda idéntico a la maqueta; Medellín toma los mismos tonos en
   verde. Para ver la maqueta tal cual en Medellín, basta con copiar los
   valores de Rionegro en el bloque base.
   ========================================================================== */

.c-evi,
.c-evi-lista {
  --evi-eje: 1080px;
  --evi-fondo: #dfeac6;     /* franja de la ficha */
  --evi-oscuro: #004729;    /* título, textos, cifra y botones de la ficha */
  --evi-tinte: #f0f9f4;     /* fondo de Próximos eventos */
  --evi-texto: #1d1d1b;
  --evi-card: #efefef;      /* card de Más buscados */
  --evi-radio: 16px;
}

.portal-rionegro .c-evi,
.portal-rionegro .c-evi-lista {
  --evi-fondo: #e4e2ef;
  --evi-oscuro: #442864;
  --evi-tinte: #f4f3f9;
}

.c-evi__eje {
  max-width: var(--evi-eje);
  margin-inline: auto;
}

/* No depender de que el tema ponga border-box en todas partes. */
.c-evi *,
.c-evi *::before,
.c-evi *::after,
.c-evi-lista *,
.c-evi-lista *::before,
.c-evi-lista *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Banner: foto del evento con su nombre (<h1>) y la descripción corta
   La foto sale a los bordes de la ventana con un div absoluto
   (inset: 0 calc(50% - 50vw)), igual que en Banner de registro; el color de
   respaldo usa box-shadow + clip-path. El alto mínimo sigue la proporción
   3:1 del estilo de imagen y crece si el texto es largo; un degradado
   oscurece el lado izquierdo para leerlo.
   -------------------------------------------------------------------------- */
.c-evi-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(260px, 30vw, 480px);
  padding-block: 56px;
  background: #1f2b33;
  box-shadow: 0 0 0 100vmax #1f2b33;
  clip-path: inset(0 -100vmax);
  color: #fff;
}

.c-evi-hero__foto {
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
}

.c-evi-hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-evi-hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgb(12 22 30 / .70) 0%,
    rgb(12 22 30 / .45) 40%,
    rgb(12 22 30 / .05) 75%);
}

.c-evi-hero__texto {
  width: 100%;
}

.c-evi-hero__titulo {
  max-width: 18ch;
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: break-word;
  hyphens: auto;
  text-shadow: 0 1px 3px rgb(0 0 0 / .2);
}

.c-evi-hero__titulo:last-child {
  margin-bottom: 0;
}

.c-evi-hero__bajada {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / .2);
}

/* El banner lo imprime page.html.twig fuera del contenido (parcial
   content/_evento-hero.html.twig), así que ya ocupa todo el ancho: la foto
   no necesita salirse de su caja, y el texto lleva el mismo margen lateral
   que los .container de Bootstrap para alinearse con la ficha. */
.c-evi--hero .c-evi-hero {
  box-shadow: none;
  clip-path: none;
}

.c-evi--hero .c-evi-hero__foto {
  inset: 0;
}

.c-evi--hero .c-evi__eje {
  max-width: calc(var(--evi-eje) + 24px);
  padding-inline: 12px;
}

/* Sin espacio entre el banner y la ficha: la sección de page.html.twig
   que envuelve la interna (r-content--evento) no deja espacio arriba. */
.r-content.r-content--evento {
  margin-top: 0;
  padding-top: 0;
}

/* Menú superpuesto ("Menu super-puesto sobre Slider" marcado en el evento):
   el header queda encima de la foto, así que el texto del banner baja lo
   que mide el header. Si el header cambia de alto, se ajusta la variable. */
.has-header-overlay .c-evi-hero {
  --evi-header-alto: 130px;
  min-height: calc(clamp(260px, 30vw, 480px) + var(--evi-header-alto));
  padding-top: calc(56px + var(--evi-header-alto));
}

@media (max-width: 1199.98px) {
  .has-header-overlay .c-evi-hero {
    --evi-header-alto: 96px;
  }
}

/* --------------------------------------------------------------------------
   2. Ficha
   -------------------------------------------------------------------------- */
.c-evi-ficha {
  padding-block: 40px 64px;
  background: var(--evi-fondo);
  box-shadow: 0 0 0 100vmax var(--evi-fondo);
  clip-path: inset(0 -100vmax);
  color: var(--evi-oscuro);
}

/* Migas: el bloque del sitio impreso con drupal_breadcrumb(). Se anulan
   los separadores del tema y se dibuja "Inicio" como casa. */
.c-evi-ficha__migas {
  margin-bottom: 20px;
}

.c-evi-ficha__migas .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  font-size: 13px;
  line-height: 1.4;
}

.c-evi-ficha__migas .breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--evi-texto);
}

.c-evi-ficha__migas .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--evi-texto);
}

.c-evi-ficha__migas .breadcrumb-item a {
  color: var(--evi-texto);
  text-decoration: none;
}

.c-evi-ficha__migas .breadcrumb-item a:hover {
  text-decoration: underline;
}

.c-evi-ficha__migas .breadcrumb-item:last-child,
.c-evi-ficha__migas .breadcrumb-item:last-child a {
  font-weight: 700;
  color: var(--evi-oscuro);
}

/* "Inicio": el texto sigue en el DOM para lectores de pantalla. */
.c-evi-ficha__migas .breadcrumb-item:first-child a {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

.c-evi-ficha__migas .breadcrumb-item:first-child a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-evi-ficha__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
}

.c-evi-ficha__rejilla--sin-foto {
  grid-template-columns: minmax(0, 1fr);
}

.c-evi-ficha__media {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--evi-radio);
  background: rgb(0 0 0 / .06);
}

.c-evi-ficha__media picture {
  display: block;
  height: 100%;
}

.c-evi-ficha__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Columna de texto: la cifra se centra en el espacio libre y el botón
   baja hasta el pie de la imagen. */
.c-evi-ficha__cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.c-evi-ficha__titulo {
  margin: 0 0 18px;
  font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--evi-oscuro);
  overflow-wrap: break-word;
  hyphens: auto;
}

.c-evi-ficha__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.c-evi-ficha__dato {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.c-evi-ficha__dato svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-evi-ficha__resumen {
  max-width: 62ch;
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}

.c-evi-ficha__resumen p,
.c-evi-ficha__resumen li {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}

.c-evi-ficha__resumen > :last-child {
  margin-bottom: 0;
}

/* Choque con sv-styles.css: `.l-content p { font-size: … !important;
   line-height: 26px }` fija el tamaño de todos los <p> del contenido (en
   ≥1440px 18px). Los textos propios de este archivo ya no usan <p>; el
   Resumen sí, porque viene del editor, así que se corrige aquí con más
   especificidad (0-2-1 contra 0-1-1) y también !important. */
.c-evi .c-evi-ficha__resumen p,
.c-evi .c-evi-ficha__resumen li {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.c-evi-ficha__cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: auto 0;
  padding-block: 32px;
  text-align: center;
}

.c-evi-ficha__cifra-num {
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.c-evi-ficha__cifra-txt {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

.c-evi-ficha__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: auto;
  padding: 10px 24px;
  border: 2px solid var(--evi-oscuro);
  border-radius: 999px;
  background: var(--evi-oscuro);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

/* Con cifra, el espacio libre se reparte arriba y abajo de ella. */
.c-evi-ficha__cifra + .c-evi-ficha__boton {
  margin-top: 0;
}

/* Hover: intercambio de contraste (el relleno pasa al texto). */
.c-evi-ficha__boton:hover,
.c-evi-ficha__boton:focus-visible {
  background: transparent;
  color: var(--evi-oscuro);
  text-decoration: none;
}

.c-evi-ficha__boton:focus-visible {
  outline: 3px solid var(--evi-oscuro);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Contenido libre del nodo (párrafos anteriores)
   -------------------------------------------------------------------------- */
.c-evi-contenido {
  padding-block: 40px;
}

/* --------------------------------------------------------------------------
   4. Listados: Próximos eventos y Eventos más buscados
   -------------------------------------------------------------------------- */
.c-evi-lista {
  padding-block: 56px 64px;
}

.c-evi-lista--proximos {
  background: var(--evi-tinte);
  box-shadow: 0 0 0 100vmax var(--evi-tinte);
  clip-path: inset(0 -100vmax);
}

.c-evi-lista__titulo {
  margin: 0 0 24px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #111111;
}

.c-evi-lista__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.c-evi-lista__item {
  display: flex;
  min-width: 0;
}

.c-evi-lista__item > * {
  flex: 1 1 auto;
  min-width: 0;
}

/* "Ver todo" (enlace "más" de Views). */
.c-evi-lista__pie {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.c-evi-lista__pie .more-link {
  margin: 0;
}

.c-evi-lista__pie a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 44px;
  padding: 10px 28px;
  border: 1.5px solid var(--evi-texto);
  border-radius: 999px;
  background: transparent;
  color: var(--evi-texto);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.c-evi-lista__pie a:hover,
.c-evi-lista__pie a:focus-visible {
  background: var(--evi-texto);
  color: #fff;
  text-decoration: none;
}

.c-evi-lista__pie a:focus-visible {
  outline: 3px solid var(--evi-oscuro);
  outline-offset: 3px;
}

/* Card de Próximos eventos --------------------------------------------- */
.c-evp {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.c-evp__media {
  aspect-ratio: 5 / 3;
  background: #d9d9d9;
}

.c-evp__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-evp__cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 14px 18px 18px;
}

/* Etiqueta del portal: el Twig imprime las dos; se ve la del portal
   activo. Medellín y Home muestran "Hospital Medellín". */
.c-evp__portal {
  margin: 0 0 8px;
  color: var(--svf-acento, #3d724d);
  font-size: 12px;
  line-height: 1.3;
}

.c-evp__portal-item--rionegro,
.portal-rionegro .c-evp__portal-item--medellin {
  display: none;
}

.portal-rionegro .c-evp__portal-item--rionegro {
  display: inline;
}

.c-evp__titulo {
  margin: 0 0 16px;
  color: var(--evi-texto);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.c-evp__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: auto;
}

.c-evp__fecha {
  color: #666;
  font-size: 12px;
  line-height: 1.3;
}

.c-evp__boton {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 14px;
  border: 1.5px solid var(--evi-texto);
  border-radius: 999px;
  background: #fff;
  color: var(--evi-texto);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

/* Flecha del botón. */
.c-evp__boton::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.c-evp__boton:hover,
.c-evp__boton:focus-visible,
.c-evp:hover .c-evp__boton {
  background: var(--evi-texto);
  color: #fff;
  text-decoration: none;
}

.c-evp:hover .c-evp__boton::after,
.c-evp__boton:hover::after {
  transform: translateX(2px) rotate(45deg);
}

.c-evp__boton:focus-visible {
  outline: 3px solid var(--evi-oscuro);
  outline-offset: 3px;
}

/* Enlace superpuesto: toda la card lleva al evento. */
.c-evp__enlace {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Flechas del carrusel: solo en móvil. La pieza compartida ya las oculta;
   esta regla es un refuerzo por si cambia el orden de carga. */
.c-evi-lista .svf-flechas {
  display: none;
}

/* Card de Más buscados --------------------------------------------------- */
.c-evmb {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--evi-card);
}

.c-evmb__media {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 700 / 620;
  padding: 20px 22px;
  background: #2b2b2b;
}

.c-evmb__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradado para leer el título blanco sobre cualquier foto. */
.c-evmb__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .62) 100%);
}

.c-evmb__titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / .25);
}

.c-evmb__pie {
  margin-top: auto;
  padding: 16px 20px 20px;
}

.c-evmb__boton {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--evi-oscuro);
  border-radius: 999px;
  background: var(--evi-oscuro);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.c-evmb__boton:hover,
.c-evmb__boton:focus-visible,
.c-evmb:hover .c-evmb__boton {
  background: #fff;
  color: var(--evi-oscuro);
  text-decoration: none;
}

.c-evmb__boton:focus-visible {
  outline: 3px solid var(--evi-oscuro);
  outline-offset: 3px;
}

/* Enlace superpuesto: toda la card lleva al evento. */
.c-evmb__enlace {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .c-evi-lista__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .c-evi-ficha__rejilla {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 32px;
  }

  .c-evi-ficha__titulo {
    font-size: 40px;
  }

  .c-evi-lista__titulo {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  /* Banner: más compacto y degradado parejo. */
  .c-evi-hero {
    min-height: 240px;
    padding-block: 40px;
  }

  .has-header-overlay .c-evi-hero {
    min-height: calc(240px + var(--evi-header-alto));
    padding-top: calc(40px + var(--evi-header-alto));
  }

  .c-evi-hero__foto::after {
    background: linear-gradient(90deg, rgb(12 22 30 / .72), rgb(12 22 30 / .40));
  }

  .c-evi-hero__titulo {
    font-size: 32px;
  }

  /* Ficha: título → imagen apaisada → datos → resumen → cifra → botón.
     El cuerpo se "abre" con display: contents para ordenar sus hijos
     junto con la imagen en una sola columna. */
  .c-evi-ficha {
    padding-block: 28px 44px;
  }

  .c-evi-ficha__rejilla {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .c-evi-ficha__cuerpo {
    display: contents;
  }

  .c-evi-ficha__titulo {
    order: -2;
    margin-bottom: 20px;
    font-size: 34px;
  }

  .c-evi-ficha__media {
    order: -1;
    aspect-ratio: 9 / 4;
    margin-bottom: 20px;
  }

  .c-evi-ficha__meta {
    margin-bottom: 16px;
  }

  .c-evi-ficha__resumen {
    margin-bottom: 8px;
  }

  .c-evi-ficha__cifra {
    margin: 0;
    padding-block: 20px 24px;
  }

  /* Sin cifra, el botón queda a 16px del resumen; con cifra, el
     margen lo pone la cifra. */
  .c-evi-ficha__boton {
    margin-top: 16px;
  }

  /* Listados: carrusel con la pieza compartida. La rejilla cambia a flex;
     cada card mide el 82% para que asome la siguiente. */
  .c-evi-lista {
    padding-block: 40px 44px;
  }

  .c-evi-lista__titulo {
    font-size: 28px;
    margin-bottom: 18px;
  }

  .c-evi-lista__rejilla {
    display: flex;
    gap: 16px;
  }

  .c-evi-lista__item {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .c-evi-lista .svf-flechas {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
  }

  .c-evi-lista__pie {
    margin-top: 20px;
  }

  .c-evi-lista__pie .more-link,
  .c-evi-lista__pie a {
    width: 100%;
  }
}

@media (max-width: 379px) {
  .c-evi-hero__titulo {
    font-size: 28px;
  }

  .c-evi-ficha__titulo {
    font-size: 30px;
  }

  .c-evi-lista__titulo {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-evi-ficha__boton,
  .c-evi-lista__pie a,
  .c-evp__boton,
  .c-evp__boton::after,
  .c-evmb__boton {
    transition: none;
  }
}