/**
 * @file
 * SVF - Cards de contacto (paragraph cards_contacto + card_contacto).
 *
 * Hasta 3 cards de igual alto, centradas (1, 2 o 3). Icono, titulo y texto
 * del color oscuro del portal sobre un fondo suave del mismo tono.
 *
 * Color por portal, sin reglas .portal-*: usa los tokens que ya declara
 * css/rionegro-colors.css para estos mismos verdes, asi que ese archivo
 * no se toca.
 *   --svf-primario  #004628 -> Rionegro #452964 (English Violet)
 *   --svf-tinte     #f0f9f4 -> Rionegro #F2F4FB (Columbia Blue aclarado)
 * Medellin y Home toman el respaldo verde de abajo.
 *
 * Margen negativo: el Twig pone --ccont-sube (0, .25, .5) y la clase
 * .c-ccont--sube. El porcentaje es sobre --ccont-alto, el alto de diseno de
 * la card, porque un margin-top en % se calcula contra el ANCHO del
 * contenedor, no contra el alto. Aplica en escritorio y tablet; en movil
 * no hay margen negativo (asi viene la maqueta movil).
 *
 * Medidas tomadas de la maqueta contra el eje de 1080px.
 */

.c-ccont {
  /* Color (portal) */
  --ccont-tinta: var(--svf-primario, #004628);
  --ccont-fondo: var(--svf-tinte, #f0f9f4);

  /* Rejilla */
  --ccont-max: 1080px;
  --ccont-gap: 36px;
  --ccont-card-max: 336px; /* ancho de la card en escritorio */
  --ccont-col: calc((100% - 2 * var(--ccont-gap)) / 3);
  --ccont-franja: 40px;

  /* Card */
  --ccont-alto: 260px;
  --ccont-radio: 28px;
  --ccont-pad-top: 28px;
  --ccont-pad-x: 28px;
  --ccont-pad-bottom: 40px;
  --ccont-sombra: 0 6px 18px rgba(0, 0, 0, .10);
  --ccont-sombra-hover: 0 14px 30px rgba(0, 0, 0, .14);

  /* Icono (la imagen con sus colores usa el mismo alto, para que los
     titulos de todas las cards queden a la misma altura) */
  --ccont-ico: 48px;
  --ccont-img: var(--ccont-ico);
  --ccont-img-max: 120px;

  /* Tipografia */
  --ccont-titulo: 32px;
  --ccont-titulo-lh: 1.2;
  --ccont-titulo-mt: 20px; /* entre el icono y el titulo */
  --ccont-texto: 18px;
  --ccont-texto-lh: 1.35;

  /* Capa sobre el componente de arriba cuando hay margen negativo */
  --ccont-capa: 2;

  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: var(--ccont-max);
  margin: 0 auto;
  padding: var(--ccont-franja) 0;
}

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

/**
 * Margen negativo. Sin padding arriba: el borde superior de la card es el
 * que se monta sobre el componente anterior.
 */
.c-ccont--sube {
  z-index: var(--ccont-capa);
  margin-top: calc(var(--ccont-alto) * var(--ccont-sube, 0) * -1);
  padding-top: 0;
}

/**
 * Rejilla. Columnas de ancho fijo (un tercio del eje) centradas: con 1 o 2
 * cards no se estiran, quedan al centro como en la maqueta.
 * grid-auto-rows: 1fr iguala el alto de todas las cards, incluso cuando
 * pasan a dos filas.
 */
.c-ccont__lista {
  display: grid;
  grid-template-columns: repeat(3, var(--ccont-col));
  grid-auto-rows: 1fr;
  justify-content: center;
  gap: var(--ccont-gap);
}

.c-ccont--n2 .c-ccont__lista {
  grid-template-columns: repeat(2, var(--ccont-col));
}

.c-ccont--n1 .c-ccont__lista {
  grid-template-columns: var(--ccont-col);
}

/* Card */
.c-ccont .c-ccont__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: var(--ccont-alto);
  margin: 0;
  padding: var(--ccont-pad-top) var(--ccont-pad-x) var(--ccont-pad-bottom);
  border-radius: var(--ccont-radio);
  background-color: var(--ccont-fondo);
  box-shadow: var(--ccont-sombra);
  color: var(--ccont-tinta);
  text-align: center;
  text-decoration: none;
}

/* Icono */
.c-ccont .c-ccont__icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ccont-ico);
  height: var(--ccont-ico);
  color: var(--ccont-tinta);
}

.c-ccont__icono svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/**
 * Icono propio pintado: el archivo es la mascara y currentColor el relleno.
 * La mascara toma el canal alfa: sirve para SVG y para PNG/WEBP con fondo
 * transparente; un PNG con fondo solido sale como un cuadrado lleno.
 */
.c-ccont__ico-mask {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--ccont-ico-url) center / contain no-repeat;
  mask: var(--ccont-ico-url) center / contain no-repeat;
}

/* Icono propio con sus colores originales (un logo, por ejemplo). */
.c-ccont .c-ccont__icono--img {
  width: auto;
  max-width: var(--ccont-img-max);
  height: var(--ccont-img);
}

.c-ccont__icono--img img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Titulo */
.c-ccont .c-ccont__titulo {
  max-width: 100%;
  margin: var(--ccont-titulo-mt) 0 0;
  padding: 0;
  color: var(--ccont-tinta);
  font-size: var(--ccont-titulo);
  font-weight: 800;
  line-height: var(--ccont-titulo-lh);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* Sin icono, el titulo arranca arriba. */
.c-ccont .c-ccont__titulo:first-child {
  margin-top: 0;
}

/**
 * Texto. margin-top:auto lo pega abajo: con titulos de una o dos lineas,
 * los textos de todas las cards quedan a la misma altura.
 */
.c-ccont .c-ccont__texto {
  max-width: 100%;
  margin: auto 0 0;
  padding-top: 16px;
  color: var(--ccont-tinta);
  font-size: var(--ccont-texto);
  font-weight: 700;
  line-height: var(--ccont-texto-lh);
  overflow-wrap: anywhere;
}

/**
 * Card con enlace. Los colores van con selector de clase + elemento para
 * ganarle a las reglas generales de a / a:hover del tema.
 */
.c-ccont a.c-ccont__card,
.c-ccont a.c-ccont__card:hover,
.c-ccont a.c-ccont__card:focus,
.c-ccont a.c-ccont__card:visited {
  color: var(--ccont-tinta);
  text-decoration: none;
}

.c-ccont a.c-ccont__card {
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-ccont a.c-ccont__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ccont-sombra-hover);
  }
}

.c-ccont a.c-ccont__card:focus-visible {
  outline: 3px solid var(--ccont-tinta);
  outline-offset: 4px;
}

/**
 * Tablet: dos columnas con las mismas medidas de escritorio (la card no
 * pasa de 336px); la tercera card baja centrada. El margen negativo sigue
 * activo.
 */
@media (max-width: 1024px) {
  .c-ccont {
    --ccont-gap: 24px;
    --ccont-col: min(var(--ccont-card-max), calc((100% - var(--ccont-gap)) / 2));
  }

  .c-ccont--n3 .c-ccont__lista {
    grid-template-columns: repeat(2, var(--ccont-col));
  }

  .c-ccont--n3 .c-ccont__card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(var(--ccont-card-max), calc((100% - var(--ccont-gap)) / 2));
  }
}

/**
 * Movil (maqueta movil): una columna al ancho del contenedor, mismos
 * tamanos de titulo, texto e icono que en escritorio, y SIN margen
 * negativo: las cards van debajo de lo que tengan encima.
 */
@media (max-width: 767.98px) {
  .c-ccont {
    --ccont-gap: 30px;
    --ccont-col: minmax(0, 420px);
    --ccont-franja: 24px;
    --ccont-pad-top: 30px;
    --ccont-pad-x: 24px;
    --ccont-pad-bottom: 48px;
    --ccont-titulo-mt: 24px;
  }

  .c-ccont--sube {
    margin-top: 0;
    padding-top: var(--ccont-franja);
  }

  .c-ccont .c-ccont__lista {
    grid-template-columns: var(--ccont-col);
  }

  .c-ccont--n3 .c-ccont__card:nth-child(3) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

/* Pantallas muy angostas: el titulo baja un poco para no partir palabras. */
@media (max-width: 379.98px) {
  .c-ccont {
    --ccont-radio: 24px;
    --ccont-pad-x: 20px;
    --ccont-titulo: 28px;
  }
}

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

  .c-ccont a.c-ccont__card:hover {
    transform: none;
  }
}