/**
 * SVF · Banner destacado
 * Párrafo banner_destacado · plantilla comp-banner-destacado/
 *
 * - Franja opcional a todo el ancho (--bdest-bg, estilo en línea).
 * - Card con imagen a la izquierda o a la derecha (c-bdest--img-*).
 * - Color de la card en línea (--bdest-card-bg); el Twig decide el tono
 *   (c-bdest__card--oscuro / --claro) y aquí cada tono fija su tinta.
 * - 'acento' = var(--svf-acento), con el verde de Medellín de respaldo.
 */

.c-bdest {
  /* Eje y ritmo */
  --bdest-eje: 1080px;
  --bdest-pad-y: 56px;
  --bdest-sep-seccion: 28px;

  /* Card */
  --bdest-radio: 40px;
  --bdest-img-w: 37.5%;
  --bdest-min-h: 450px;
  --bdest-pad-card: 56px 52px 56px 44px;
  --bdest-img-respaldo: #2b3a45;

  /* Tipografía */
  --bdest-seccion-size: 34px;
  --bdest-titulo-size: 48px;
  --bdest-titulo-lh: 1.12;
  --bdest-titulo-max: 480px;
  --bdest-texto-size: 16px;
  --bdest-texto-max: 560px;

  /* Botón */
  --bdest-btn-size: 14px;
  --bdest-btn-h: 44px;

  /* Tintas */
  --bdest-tinta-oscura: #111111;
  --bdest-texto-oscuro: #2b2b2b;
  --bdest-seccion-color: var(--bdest-tinta-oscura);

  position: relative;
  padding: var(--bdest-pad-y) 0;
}

/* No depende del reset del tema: medidas iguales dentro y fuera de Bootstrap */
.c-bdest,
.c-bdest *,
.c-bdest *::before,
.c-bdest *::after {
  box-sizing: border-box;
}

/* Franja a todo el ancho (solo si se eligió color) */
.c-bdest--franja {
  background-color: var(--bdest-bg);
  box-shadow: 0 0 0 100vmax var(--bdest-bg);
  clip-path: inset(0 -100vmax);
}

.c-bdest--seccion-oscuro {
  --bdest-seccion-color: #ffffff;
}

.c-bdest__inner {
  width: 100%;
  max-width: var(--bdest-eje);
  margin: 0 auto;
}

/* Título de la sección */
.c-bdest .c-bdest__seccion {
  margin: 0 0 var(--bdest-sep-seccion);
  font-size: var(--bdest-seccion-size);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bdest-seccion-color);
  text-align: left;
}

/* ---------- Card ---------- */

.c-bdest__card {
  --bdest-card-bg: var(--svf-acento, #3d724d);

  display: grid;
  grid-template-columns: var(--bdest-img-w) minmax(0, 1fr);
  grid-template-areas: "media cuerpo";
  min-height: var(--bdest-min-h);
  border-radius: var(--bdest-radio);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bdest-card-bg);
}

.c-bdest--img-derecha .c-bdest__card {
  grid-template-columns: minmax(0, 1fr) var(--bdest-img-w);
  grid-template-areas: "cuerpo media";
}

.c-bdest__card--sin-imagen,
.c-bdest--img-derecha .c-bdest__card--sin-imagen {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cuerpo";
  min-height: 0;
}

/* Tonos: el Twig elige el que más contrasta con el color de la card */
.c-bdest__card--oscuro {
  --bdest-tinta: #ffffff;
  --bdest-texto: #ffffff;
  --bdest-btn-bg: #ffffff;
  --bdest-btn-fg: var(--bdest-tinta-oscura);
}

.c-bdest__card--claro {
  --bdest-tinta: var(--bdest-tinta-oscura);
  --bdest-texto: var(--bdest-texto-oscuro);
  --bdest-btn-bg: var(--bdest-tinta-oscura);
  --bdest-btn-fg: #ffffff;
}

/* Imagen: absoluta contra .c-bdest__media, así los envoltorios
   div.field > div.field__item de Drupal no afectan el alto. */
.c-bdest__media {
  grid-area: media;
  position: relative;
  min-height: 100%;
  background-color: var(--bdest-img-respaldo);
}

.c-bdest__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Texto */
.c-bdest__cuerpo {
  grid-area: cuerpo;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: var(--bdest-pad-card);
  color: var(--bdest-texto);
}

.c-bdest--img-derecha .c-bdest__cuerpo {
  padding: 56px 44px 56px 52px;
}

.c-bdest .c-bdest__titulo {
  max-width: var(--bdest-titulo-max);
  margin: 0 0 22px;
  font-size: var(--bdest-titulo-size);
  font-weight: 700;
  line-height: var(--bdest-titulo-lh);
  letter-spacing: -0.01em;
  color: var(--bdest-tinta);
  overflow-wrap: break-word;
}

.c-bdest .c-bdest__texto {
  max-width: var(--bdest-texto-max);
  margin: 0 0 20px;
  font-size: var(--bdest-texto-size);
  line-height: 1.35;
  color: var(--bdest-texto);
}

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

/* Botón: en el hover se intercambian relleno y texto */
.c-bdest .c-bdest__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--bdest-btn-h);
  padding: 10px 22px;
  border: 1.5px solid var(--bdest-btn-bg);
  border-radius: 999px;
  background-color: var(--bdest-btn-bg);
  color: var(--bdest-btn-fg);
  font-size: var(--bdest-btn-size);
  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-bdest .c-bdest__boton:hover,
.c-bdest .c-bdest__boton:focus-visible {
  background-color: transparent;
  color: var(--bdest-tinta);
  text-decoration: none;
}

.c-bdest .c-bdest__boton:focus-visible {
  outline: 3px solid var(--bdest-tinta);
  outline-offset: 3px;
}

.c-bdest__flecha {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.c-bdest__boton:hover .c-bdest__flecha,
.c-bdest__boton:focus-visible .c-bdest__flecha {
  transform: translateX(3px);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  .c-bdest {
    --bdest-pad-y: 48px;
    --bdest-seccion-size: 32px;
    --bdest-radio: 32px;
    --bdest-img-w: 38%;
    --bdest-min-h: 380px;
    --bdest-titulo-size: 36px;
    --bdest-titulo-max: 420px;
  }

  .c-bdest__cuerpo,
  .c-bdest--img-derecha .c-bdest__cuerpo {
    padding: 40px 36px;
  }
}

/* ---------- Móvil: la imagen sigue al lado, como en el diseño ---------- */

@media (max-width: 767px) {
  .c-bdest {
    --bdest-pad-y: 36px;
    --bdest-sep-seccion: 20px;
    --bdest-seccion-size: 28px;
    --bdest-radio: 20px;
    --bdest-img-w: 40%;
    --bdest-min-h: 200px;
    --bdest-titulo-size: 18px;
    --bdest-titulo-lh: 1.2;
    --bdest-titulo-max: none;
    --bdest-texto-size: 15px;
    --bdest-btn-size: 13px;
    --bdest-btn-h: 40px;
  }

  .c-bdest__cuerpo,
  .c-bdest--img-derecha .c-bdest__cuerpo {
    align-items: stretch;
    padding: 18px 16px;
  }

  .c-bdest .c-bdest__titulo {
    margin-bottom: 8px;
    letter-spacing: 0;
  }

  .c-bdest .c-bdest__texto {
    margin-bottom: 14px;
    line-height: 1.3;
  }

  .c-bdest .c-bdest__boton {
    width: 100%;
    padding: 8px 14px;
  }

  .c-bdest__flecha {
    display: none;
  }
}

@media (max-width: 379px) {
  .c-bdest {
    --bdest-seccion-size: 26px;
    --bdest-img-w: 36%;
    --bdest-titulo-size: 16px;
    --bdest-texto-size: 14px;
  }

  .c-bdest__cuerpo,
  .c-bdest--img-derecha .c-bdest__cuerpo {
    padding: 14px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-bdest .c-bdest__boton,
  .c-bdest__flecha {
    transition: none;
  }
}