/* =====================================================================
   CIFP As Mercedes — tarxetas.css
   ÁMBITO      : GLOBAL (compoñentes reutilizables de tarxeta en listados)
   ENCOLADO EN : functions.php → cifp_custom_css()  [lista GLOBAIS]
   QUE FAI     : estilo das tarxetas-enlace de listado (ciclos, novas, e futuras).
                 O fondo/borde/radio/padding ponse en Elementor; aquí a
                 SOMBRA, o radio da imaxe e o :hover.
   ACTUALIZADO : 2026-08-26
   ===================================================================== */

/* ---------------------------------------------------------------------
   TARXETAS-ENLACE  .cifp-card-link  +  .cifp-nova-card
   Container tipo <a> (toda a tarxeta clicable) coa clase. Comparten o MESMO
   comportamento para seren coherentes:
     · .cifp-card-link → tarxeta de ciclo (Listing Grid en carrusel).
     · .cifp-nova-card → NOVA DESTACADA da sección "Novas do centro".
   Base: sombra tenue. Hover: sombra un pouco máis forte (SEN mover a card)
   + zoom suave da foto cun escurecido lixeiro. NON toca a cor de ningún texto.
   --------------------------------------------------------------------- */
.cifp-card-link,
.cifp-nova-card{
  /* spread negativo (-5) → sombra máis compacta na horizontal, cabe no oco do
     slide e non se corta nos extremos do carrusel. (!important: Elementor pon none) */
  box-shadow: 0 5px 16px -5px rgba(0, 43, 74, .11) !important;   /* sombra tenue base */
  transition: box-shadow .3s ease;
}

/* Marco da imaxe: esquinas SUPERIORES redondeadas (= radio da card, 16px) +
   overflow hidden para redondear a foto e recortar o zoom. A imaxe vai flush
   ao borde superior da card, por iso só as esquinas de arriba. */
.cifp-card-link .jet-listing-dynamic-image,
.cifp-nova-card .jet-listing-dynamic-image{
  overflow: hidden;
  border-radius: 16px 16px 0 0;   /* = radio da card; se cambias o radio da card, cambia aquí */
}
.cifp-card-link .jet-listing-dynamic-image__img,
.cifp-nova-card .jet-listing-dynamic-image__img{
  display: block;
  width: 100%;
  transition: transform .5s ease, filter .3s ease;
}

/* :hover — só a sombra na card (NON se move cara arriba). A foto fai zoom. */
.cifp-card-link:hover,
.cifp-nova-card:hover{
  /* máis potente subindo opacidade e offset, mantendo blur/spread (mesmo ancho
     horizontal → non volve cortar nos extremos do carrusel) */
  box-shadow: 0 13px 24px -8px rgba(0, 43, 74, .21) !important;
}
.cifp-card-link:hover .jet-listing-dynamic-image__img,
.cifp-nova-card:hover .jet-listing-dynamic-image__img{
  transform: scale(1.06);      /* zoom suave da foto */
  filter: brightness(.94);     /* escurece un chisco */
}

/* ---------------------------------------------------------------------
   ARRANXO da sombra recortada VERTICALMENTE polo carrusel:
   o slider (Swiper) ten overflow:hidden. Padding SÓ arriba/abaixo (o
   horizontal NON se pode porque metería dentro un anaco das slides veciñas).
   O corte lateral evítase coa sombra de spread negativo (arriba).
   --------------------------------------------------------------------- */
.jet-listing-grid__slider:has(.cifp-card-link){
  padding-top: 10px;
  padding-bottom: 24px;
}

/* ---------------------------------------------------------------------
   TARXETA DE FAMILIA  .familia-card
   Container <a> coa clase "familia-card" (icona + nome da familia).
   Base (fondo claro, texto azul escuro, icona azul) ponse en Elementor.
   :hover → INVÍRTESE: fondo azul escuro + texto e icona brancos + sombra.
   --------------------------------------------------------------------- */
.familia-card{
  transition: background-color .25s ease, box-shadow .25s ease;
}
.familia-card .elementor-heading-title{ transition: color .25s ease; }
.familia-card .elementor-icon svg{ transition: stroke .25s ease; }

.familia-card:hover{
  background-color: var(--e-global-color-secondary, #002B4A) !important;   /* azul escuro */
  box-shadow: 0 12px 30px -4px rgba(0, 43, 74, .18) !important;
}
.familia-card:hover .elementor-heading-title{ color: #fff !important; }    /* texto branco */
.familia-card:hover .elementor-icon svg{ stroke: #fff !important; }        /* icona branca */


/* ---------------------------------------------------------------------
   NOVAS MINI  .cifp-nova-mini
   O estilo (fila thumb+texto, separador, tipografía…) faino o cliente en
   Elementor. Aquí: a IMAXE CADRADA (aspect 1:1 + cover) coma o thumb da
   maqueta (.nova-mini__thumb, radio 10px), MÁIS un hover suave (zoom da foto).
   A imaxe é a dinámica de JetEngine, envolta nun <a> .jet-listing-dynamic-image__link.
   --------------------------------------------------------------------- */
.cifp-nova-mini .jet-listing-dynamic-image,
.cifp-nova-mini .jet-listing-dynamic-image__link{
  display: block;
  line-height: 0;              /* quita o oco inline debaixo da imaxe */
}
.cifp-nova-mini .jet-listing-dynamic-image{
  overflow: hidden;            /* recorta o zoom */
  border-radius: 10px;         /* = --radio-sm da maqueta (o redondeo faino o CSS, non fai falta poñelo no widget) */
}
.cifp-nova-mini .jet-listing-dynamic-image__img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;         /* cadrada: a altura iguala o ancho que poñas en Elementor */
  object-fit: cover;           /* recorta a foto (aínda que sexa vertical) sen deformar */
  transition: transform .5s ease, filter .3s ease;
}
/* :hover na fila mini → zoom + escurecido lixeiro da foto (mesma linguaxe que as cards) */
.cifp-nova-mini:hover .jet-listing-dynamic-image__img{
  transform: scale(1.06);
  filter: brightness(.94);
}

/* Separador horizontal entre as novas mini (coma o border-bottom de .nova-mini
   na maqueta). Faise cun PSEUDO no ITEM do grid (non na última), en vez dun
   border no item: así pódese meter INSET 16px a cada lado e non sobresae do
   contido (aliñado ao thumb/texto). Queda centrado no oco porque o item leva
   24px de padding vertical (o "gap" do grid). Token de cor "Borde" do Kit. */
.jet-listing-grid__item:has(.cifp-nova-mini):not(:last-child){
  position: relative;
}
.jet-listing-grid__item:has(.cifp-nova-mini):not(:last-child)::after{
  content: "";
  position: absolute;
  left: 16px;                 /* = padding lateral do item → aliña co contido */
  right: 16px;
  bottom: 0;                  /* no medio do oco (24px por riba, 24px por baixo) */
  border-top: 1px solid var(--e-global-color-cmborde, #E6E8EB);
}

/* ---------------------------------------------------------------------
   FILA DE META (data + categoría)  .cifp-meta-row
   Causa do desaxuste: os dous widgets teñen alturas distintas (o icono da
   data mide 24px) e nunha fila flex co align-items por defecto (stretch), o
   texto da categoría estírase e queda pegado arriba → parece que ten máis
   oco abaixo. Isto CÉNTRAOS na vertical e quita marxes verticais.
   Poñer a clase no CONTAINER da fila de meta (o pai flex de data+categoría).
   NOTA: no FRONTEND xa saen aliñadas (o container ten flex-direction:row +
   align-items:center postos en Elementor, e o icono renderiza a 1em=16px).
   Onde se ve descompensado é o EDITOR de Elementor: alí o icono debúxase ao
   seu tamaño cru (24px) e infla a fila. Esta clase deixa igual os dous
   contextos: nowrap, centrado, e o icono limitado a 1em.
   --------------------------------------------------------------------- */
.cifp-meta-row{
  align-items: center !important;
  flex-wrap: nowrap !important;         /* nunca partir data/categoría a dúas liñas */
}
.cifp-meta-row > *{ align-self: center; margin-block: 0 !important; }
.cifp-meta-row .jet-listing-dynamic-field__inline-wrap{ align-items: center; }
/* icono do calendario á escala do texto (no editor sae a 24px → aquí a 1em) */
.cifp-meta-row .jet-listing-dynamic-field__icon.is-svg-icon{ display: inline-flex; align-items: center; }
.cifp-meta-row .jet-listing-dynamic-field__icon.is-svg-icon svg{ width: 1em; height: 1em; }


/* ---------------------------------------------------------------------
   EVENTO (axenda de actividades)  .cifp-evento  +  .cifp-evento-data
   Tarxeta de evento en fila: [cadro de data azul] [info: título + hora/lugar].
   O borde/fondo/radio/padding/flex/gap da tarxeta ponse en Elementor; aquí
   só o :hover (coma .evento:hover da maqueta) e o CADRO DE DATA (o difícil de
   cadrar no editor). Clases en Avanzado → Clases CSS.
   --------------------------------------------------------------------- */
.cifp-evento{
  box-shadow: 0 5px 16px -5px rgba(0, 43, 74, .11) !important;       /* sombra tenue base (coma as outras cards) */
  transition: box-shadow .25s ease, border-color .25s ease;
}
.cifp-evento:hover{
  box-shadow: 0 10px 30px -6px rgba(0, 43, 74, .14) !important;      /* ~ --sombra-md */
  border-color: var(--e-global-color-cmazul25, #BFDEF0) !important;   /* borde azul claro */
}

/* Cadro de data: 76x76, azul, día grande + mes, todo branco e centrado.
   Poñer a clase no CONTAINER que agrupa os dous campos (día e mes). Os tamaños
   de tipografía do día (1.9rem/700) e mes (0.8rem, MAIÚS, tracking .08em) ponse
   en Elementor nos dynamic fields; aquí só a caixa e a cor branca. */
.cifp-evento-data{
  flex: none !important;
  width: 76px; height: 76px;
  border-radius: 10px;                                 /* --radio-sm */
  background: var(--e-global-color-primary, #007BC4);
  display: grid; place-content: center; text-align: center; line-height: 1;
}
.cifp-evento-data,
.cifp-evento-data *{ color: #fff !important; }         /* día e mes brancos */

/* En móbil, o cadro de data un chisco máis pequeno */
@media (max-width: 767px){
  .cifp-evento-data{ width: 64px; height: 64px; }
}