/**
 * @file
 * SVF - Banner de registro.
 *
 * Componente de párrafo: `banner_registro` (una sola pieza, sin cards).
 * Librería: svf_theme/banner-registro (NO va en global-styling).
 *
 * Estructura:
 *   section.c-breg                 -> franja a todo el ancho con la foto de fondo
 *     div.c-breg__media            -> imagen (campo del párrafo)
 *     div.c-breg__inner            -> eje de 1080px centrado
 *       div.c-breg__panel          -> panel translúcido
 *         h2.c-breg__titulo        -> título, alineado a la derecha en escritorio
 *         div.c-breg__cuerpo       -> texto + botón
 *
 * Colores: el título y el botón toman el acento del portal (token --svf-acento,
 * con el verde de Medellín como respaldo). La imagen y el botón se editan desde
 * el CMS; el resto es fijo.
 *
 * Color por portal: el acento sale del token --svf-acento de la capa de color
 * (css/rionegro-colors.css), con el valor de Medellín como respaldo. En
 * Medellín y en Home el token no está declarado y se usa el respaldo; en
 * Rionegro la capa lo redefine a Rebecca Purple. Aquí no hay reglas
 * .portal-*: ese es el patrón del tema.
 */

/* -------------------------------------------------------------------------
 * 1. Contenedor
 * ---------------------------------------------------------------------- */

.c-breg {
  /* Colores */
  --breg-acento: var(--svf-acento, #3d724d);  /* Rionegro lo cambia a morado por token */
  --breg-acento-texto: #ffffff;
  --breg-texto: #2b2b2b;
  --breg-panel: rgba(255, 255, 255, 0.62);
  --breg-panel-borde: rgba(255, 255, 255, 0.5);

  /* Medidas tomadas del diseño (eje de 1080px) */
  --breg-radio-panel: 40px;
  --breg-panel-padding: 44px 48px 40px;
  --breg-gap: 56px;
  --breg-titulo-size: 32px;
  --breg-texto-size: 18px;
  --breg-py: 50px;

  position: relative;
  z-index: 0;
  padding-block: var(--breg-py);
  background-color: #2b3a45; /* respaldo mientras carga la foto */

  /* Full-bleed: box-shadow + clip-path (no 100vw, que incluye la barra de
     scroll). Falla si algún ancestro tiene overflow: hidden. */
  box-shadow: 0 0 0 100vmax #2b3a45;
  clip-path: inset(0 -100vmax);
}

.c-breg,
.c-breg *,
.c-breg *::before,
.c-breg *::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * 2. Imagen de fondo
 *
 * La foto se imprime como <img> (respeta el estilo de imagen y la carga
 * diferida de Drupal) y se estira con object-fit, no como background-image.
 * El clip-path del contenedor la recorta a la franja.
 * ---------------------------------------------------------------------- */

.c-breg__media {
  position: absolute;
  /* La foto acompaña al full-bleed: se estira hasta los bordes de la ventana,
     no hasta los del contenedor de Bootstrap Barrio. El clip-path del padre
     recorta lo que sobre, así que no aparece scroll horizontal. */
  inset: 0 calc(50% - 50vw);
  z-index: -1;
}

/* Drupal envuelve la imagen en div.field > div.field__item: esos envoltorios
   también tienen que medir el alto de la franja. */
.c-breg__media div,
.c-breg__media picture {
  display: block;
  height: 100%;
}

.c-breg__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -------------------------------------------------------------------------
 * 3. Panel translúcido
 * ---------------------------------------------------------------------- */

.c-breg__inner {
  max-width: 1120px; /* 1080 del eje del diseño + 20px de aire a cada lado */
  margin-inline: auto;
  padding-inline: 20px;
}

.c-breg__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--breg-gap);
  align-items: center;
  padding: var(--breg-panel-padding);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 0.52)
  );
  border: 1px solid var(--breg-panel-borde);
  border-radius: var(--breg-radio-panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Navegadores sin backdrop-filter: se sube la opacidad para que el texto se
   siga leyendo sobre la foto. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .c-breg__panel {
    background: var(--breg-panel);
    background: rgba(255, 255, 255, 0.88);
  }
}

.c-breg__titulo {
  margin: 0;
  color: var(--breg-acento);
  font-size: var(--breg-titulo-size);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: right; /* como en el diseño de escritorio */
  overflow-wrap: anywhere;
}

.c-breg__texto {
  margin: 0;
  color: var(--breg-texto);
  font-size: var(--breg-texto-size);
  font-weight: 400;
  line-height: 1.4;
  text-align: left; /* anula el text-align: justify heredado del tema */
}

/* -------------------------------------------------------------------------
 * 4. Botón
 * ---------------------------------------------------------------------- */

.c-breg__cta {
  margin-top: 18px;
}

.c-breg .c-breg__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 24px;
  color: var(--breg-acento-texto);
  background-color: var(--breg-acento);
  background-image: none;
  border: 1px solid var(--breg-acento);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c-breg__cta a::before {
  content: none; /* el tema agrega flechas con ::before en algunos botones */
}

/* Flecha con máscara: toma currentColor y se invierte sola en el hover. */
.c-breg__cta a::after {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 8h19M15 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 8h19M15 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.2s ease;
}

.c-breg .c-breg__cta a:hover,
.c-breg .c-breg__cta a:focus-visible {
  color: var(--breg-acento);
  background-color: #ffffff;
}

.c-breg__cta a:hover::after,
.c-breg__cta a:focus-visible::after {
  transform: translateX(3px);
}

.c-breg__cta a:focus-visible {
  outline: 2px solid var(--breg-acento);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 5. Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1024.98px) {
  .c-breg {
    --breg-gap: 32px;
    --breg-panel-padding: 36px 36px 32px;
    --breg-titulo-size: 30px;
    --breg-texto-size: 17px;
  }
}

/* Móvil: una sola columna, título a la izquierda y botón a todo el ancho. */
@media (max-width: 767.98px) {
  .c-breg {
    --breg-py: 40px;
    --breg-radio-panel: 28px;
    --breg-panel-padding: 28px 24px 24px;
    --breg-gap: 20px;
    --breg-texto-size: 17px;
  }

  .c-breg__inner {
    padding-inline: 16px;
  }

  .c-breg__panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .c-breg__titulo {
    text-align: left;
  }

  .c-breg__cta {
    margin-top: 24px;
  }

  .c-breg__cta a {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 380px) {
  .c-breg {
    --breg-titulo-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-breg__cta a,
  .c-breg__cta a::after {
    transition: none;
  }
}