/**
 * @file
 * SVF - Card de aviso (paragraph card_aviso).
 *
 * Franja de color a todo el ancho con una card interna que lleva icono,
 * titulo, texto y boton de enlace.
 *
 * Todo lo configurable llega como custom property desde el Twig:
 *   --cavi-sec      color de la franja
 *   --cavi-card     color de la card
 *   --cavi-titulo   color del titulo y del icono
 *   --cavi-tinta    #111111 o #ffffff, el que contrasta con la card
 *   --cavi-icono    url() del archivo del icono (solo si hay icono)
 */

.c-cavi {
  /* Ejes y franja */
  --cavi-eje: 1080px;
  --cavi-pad-lat: 20px;
  --cavi-franja-y: 44px;

  /* Card */
  --cavi-card-radio: 32px;
  --cavi-card-pad-y: 26px;
  --cavi-card-pad-x: 40px;
  --cavi-gap: 36px;

  /* Piezas */
  --cavi-icono-size: 48px;
  --cavi-titulo-size: 26px;
  --cavi-titulo-peso: 800;
  --cavi-texto-size: 15px;
  --cavi-boton-size: 12px;
  --cavi-boton-alto: 36px;
  --cavi-boton-pad-x: 26px;

  /* Respaldos por si el Twig no alcanza a escribir las variables */
  --cavi-acento: var(--svf-acento, #3d724d);

  position: relative;
  isolation: isolate;
}

/* Sin el reset de Bootstrap el boton mide 66px de alto en vez de 36. */
.c-cavi,
.c-cavi *,
.c-cavi *::before,
.c-cavi *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- Franja --
 * Full-bleed con la tecnica del resto de los componentes: el background-color
 * pinta la caja del componente y el box-shadow de 100vmax (no 100vw, que
 * incluye la barra de scroll) la prolonga hasta los bordes de la pantalla;
 * el clip-path evita que se derrame arriba y abajo.
 *
 * El background-color no es opcional: box-shadow solo pinta hacia afuera, asi
 * que sin el se ve el color en los costados y blanco detras de la card.
 */
.c-cavi {
  background-color: var(--cavi-sec, transparent);
  box-shadow: 0 0 0 100vmax var(--cavi-sec, transparent);
  clip-path: inset(0 -100vmax);
}

/* Sin color elegido no se crea contexto de recorte. */
.c-cavi--sin-fondo {
  background-color: transparent;
  box-shadow: none;
  clip-path: none;
}

/* ------------------------------------------------------------------- Eje --*/
.c-cavi__eje {
  position: relative;
  max-width: calc(var(--cavi-eje) + var(--cavi-pad-lat) * 2);
  margin: 0 auto;
  padding: var(--cavi-franja-y) var(--cavi-pad-lat);
}

/* ------------------------------------------------------------------ Card --*/
.c-cavi__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cavi-gap);
  padding: var(--cavi-card-pad-y) var(--cavi-card-pad-x);
  border-radius: var(--cavi-card-radio);
  background-color: var(--cavi-card, #efefef);
}

/* Sin icono o sin boton la rejilla se acomoda sola. */
.c-cavi__card--sin-icono {
  grid-template-columns: minmax(0, 1fr) auto;
}

.c-cavi__card--sin-boton {
  grid-template-columns: auto minmax(0, 1fr);
}

.c-cavi__card--sin-icono.c-cavi__card--sin-boton {
  grid-template-columns: minmax(0, 1fr);
}

/* ----------------------------------------------------------------- Icono --
 * Se pinta con mask + color del titulo, asi un SVG o un PNG monocromo con
 * transparencia toma el color elegido sin tocar el archivo.
 */
.c-cavi__icono {
  width: var(--cavi-icono-size);
  height: var(--cavi-icono-size);
  flex: none;
  background-color: var(--cavi-titulo, var(--cavi-acento));
  -webkit-mask: var(--cavi-icono) center / contain no-repeat;
  mask: var(--cavi-icono) center / contain no-repeat;
}

@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .c-cavi__icono {
    display: none;
  }
}

/* ----------------------------------------------------------------- Texto --*/
.c-cavi__titulo {
  margin: 0;
  font-size: var(--cavi-titulo-size);
  font-weight: var(--cavi-titulo-peso);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cavi-titulo, var(--cavi-acento));
}

.c-cavi__descripcion {
  margin: 8px 0 0;
  font-size: var(--cavi-texto-size);
  line-height: 1.45;
  color: var(--cavi-tinta, #111111);
}

/* Baja un poco la tinta para que el texto no compita con el titulo. */
@supports (color: color-mix(in srgb, #000 88%, #fff)) {
  .c-cavi__descripcion {
    color: color-mix(in srgb, var(--cavi-tinta, #111111) 86%, var(--cavi-card, #efefef));
  }
}

.c-cavi__titulo:only-child,
.c-cavi__descripcion:only-child {
  margin-top: 0;
}

/* ----------------------------------------------------------------- Boton --*/
.c-cavi__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cavi-boton-alto);
  padding: 0 var(--cavi-boton-pad-x);
  border: 1px solid var(--cavi-tinta, #111111);
  border-radius: 999px;
  background-color: transparent;
  color: var(--cavi-tinta, #111111);
  font-size: var(--cavi-boton-size);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* Hover: intercambio de contraste, como el resto del lote. */
.c-cavi__boton:hover,
.c-cavi__boton:focus-visible {
  background-color: var(--cavi-tinta, #111111);
  color: var(--cavi-card, #efefef);
  text-decoration: none;
}

.c-cavi__boton:focus-visible {
  outline: 2px solid var(--cavi-acento);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .c-cavi__boton {
    transition: none;
  }
}

/* ------------------------------------------------------------ Responsive --*/
@media (max-width: 1024px) {
  .c-cavi {
    --cavi-card-pad-x: 32px;
    --cavi-gap: 24px;
    --cavi-titulo-size: 24px;
    --cavi-icono-size: 44px;
  }
}

@media (max-width: 767px) {
  .c-cavi {
    --cavi-franja-y: 36px;
    --cavi-card-radio: 28px;
    --cavi-card-pad-y: 32px;
    --cavi-card-pad-x: 28px;
    --cavi-gap: 20px;
    --cavi-icono-size: 56px;
    --cavi-boton-alto: 46px;
    --cavi-boton-size: 13px;
  }

  .c-cavi__card,
  .c-cavi__card--sin-icono,
  .c-cavi__card--sin-boton,
  .c-cavi__card--sin-icono.c-cavi__card--sin-boton {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .c-cavi__icono {
    justify-self: center;
  }

  .c-cavi__boton {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .c-cavi {
    --cavi-card-radio: 22px;
    --cavi-card-pad-x: 22px;
    --cavi-titulo-size: 24px;
    --cavi-texto-size: 14px;
    --cavi-icono-size: 48px;
  }
}