/* ==========================================================================
   BLOCK: CARDS GRID (Missions)
   ========================================================================== */

.c-cards-grid {
  position: relative;
  z-index: 1;
  background-color: var(--bg-out);
  margin: var(--mar-out-d);
  padding: var(--pad-out-d);
  width: 100%;
}

.c-cards-grid__max-width {
  max-width: var(--max-w, 1440px);
  margin: 0 auto;
}

.c-cards-grid__wrap {
  display: flex;
  flex-direction: column;
}

.c-cards-grid__wrap[class*="col-start-auto"] {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */
.c-cards-grid__header {
  order: var(--o-head-d, 1);
  text-align: var(--al-h-txt-d, left);
  margin-bottom: var(--mb-head-d);
}

.c-cards-grid__titol {
  font-family: var(--ff-htit);
  font-size: var(--fs-htit-d);
  font-weight: var(--fw-htit);
  line-height: var(--lh-htit-d);
  color: var(--c-htit);
  margin: 0 0 16px 0;
}

.c-cards-grid__descripcio {
  font-family: var(--ff-hdesc);
  font-size: var(--fs-hdesc-d);
  font-weight: var(--fw-hdesc);
  line-height: var(--lh-hdesc-d);
  color: var(--c-hdesc);
  max-width: 800px;
}
.c-cards-grid__descripcio p { margin: 0; }
.c-cards-grid__descripcio p:not(:last-child) { margin-bottom: 1em; }

/* --------------------------------------------------------------------------
   GRAELLA TARGETES
   -------------------------------------------------------------------------- */
.c-cards-grid__grid {
  order: var(--o-grid-d, 2);
  display: grid;
  grid-template-columns: repeat(var(--cols-d), 1fr);
  gap: var(--gap-grid-d);
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   TARGETA INDIVIDUAL (CARD)
   -------------------------------------------------------------------------- */
.c-cards-grid__card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-cbg);
  text-decoration: none;
  overflow: hidden; 
}

/* IMATGE TARGETA */
.c-cards-grid__img-wrap {
  width: 100%;
  aspect-ratio: calc(var(--ar-img));
  border-radius: var(--rad-img);
  overflow: hidden;
  margin-bottom: 24px;
}

.c-cards-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.c-cards-grid__img--placeholder {
  background-color: #E5E9FF;
}

/* CONTINGUT TARGETA */
.c-cards-grid__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* WRAPPER DEL TEXT */
.c-cards-grid__text-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  transition: transform 0.4s ease;
}

/* TAG */
.c-cards-grid__tag {
  align-self: flex-start;
  background-color: var(--c-tag-bg);
  color: var(--c-tag-txt);
  padding: 8px 16px;
  font-family: var(--ff-ctag);
  font-size: var(--fs-ctag-d);
  font-weight: var(--fw-ctag);
  line-height: var(--lh-ctag-d);
  margin-bottom: var(--mb-ctag-d);
}

.c-cards-grid__ctit {
  font-family: var(--ff-ctit);
  font-size: var(--fs-ctit-d);
  font-weight: var(--fw-ctit);
  line-height: var(--lh-ctit-d);
  color: var(--c-ctit);
  margin: 0 0 var(--mb-ctit-d) 0;
}

.c-cards-grid__cdesc {
  font-family: var(--ff-cdesc);
  font-size: var(--fs-cdesc-d);
  font-weight: var(--fw-cdesc);
  line-height: var(--lh-cdesc-d);
  color: var(--c-cdesc);
  margin: 0 0 var(--mb-cdesc-d) 0;
}

.c-cards-grid__cdesc p { margin: 0; }
.c-cards-grid__cdesc p:not(:last-child) { margin-bottom: 1em; }

/* ENLLAÇ / BOTÓ TARGETA */
.c-cards-grid__link {
  align-self: flex-start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--c-clink);
  padding-bottom: var(--pb-link-d, 4px);
}

.c-cards-grid__link-txt {
  font-family: var(--ff-clink);
  font-size: var(--fs-clink-d);
  font-weight: var(--fw-clink);
  line-height: var(--lh-clink-d);
}

.c-cards-grid__link-arrow {
  color: currentColor;
  transition: transform 0.3s ease;
}

.c-cards-grid__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--c-cline-h);
  transform: scaleX(0);
  transform-origin: left; 
  transition: transform 0.4s ease;
}

/* ANIMACIONS GLOBALS TARGETA (HOVER) */
.c-cards-grid__card:hover .c-cards-grid__img {
  transform: scale(1.1); 
}

.c-cards-grid__card:hover .c-cards-grid__text-wrap {
  transform: translateY(-8px); 
}

.c-cards-grid__card:hover .c-cards-grid__link-arrow {
  transform: translateX(-4px);
}

.c-cards-grid__card:hover .c-cards-grid__link::after {
  transform: scaleX(1);
}


/* --------------------------------------------------------------------------
   TARGETA CTA FINAL (Inscripció)
   -------------------------------------------------------------------------- */
.c-cards-grid__cta {
  display: flex;
  flex-direction: column;
  background-color: var(--c-ctabg);
  padding: var(--p-cta-d);
  height: 100%;
  border: 1px solid var(--c-ctabg);
}

.c-cards-grid__cta:hover {
  border: 1px solid #E5E9FF;
  opacity: 0.8;
  transition: border-color 0.4s ease;
  transition: opacity 0.4s ease;
}

.c-cards-grid__cta-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.c-cards-grid__cta-tit {
  font-family: var(--ff-ctit);
  font-size: var(--fs-htit-m);
  font-weight: var(--fw-htit);
  line-height: var(--lh-htit-m);
  color: var(--c-ctatit);
  margin: 0 0 var(--mb-ctit-d) 0;
}

.c-cards-grid__cta-desc {
  font-family: var(--ff-cdesc);
  font-size: var(--fs-cdesc-d);
  font-weight: var(--fw-cdesc);
  line-height: var(--lh-cdesc-d);
  color: var(--c-ctadesc);
  margin: 0 0 var(--mb-cdesc-d) 0;
}

.c-cards-grid__cta-btn-wrap {
  margin-top: auto;
}

.c-cards-grid__cta-btn {
  display: inline-flex;
  background-color: var(--c-ctabtn-bg);
  color: var(--c-ctabtn-txt);
  padding: var(--p-ctabtn-d);
  font-family: var(--ff-cbtn);
  font-size: var(--fs-cbtn-d);
  font-weight: var(--fw-cbtn);
  line-height: var(--lh-cbtn-d);
  text-decoration: none;
  transition: all 0.3s ease;
}

.c-cards-grid__cta-btn:hover {
  background-color: var(--c-ctabtn-txt);
  color: #FFF;
}


/* ==========================================================================
   RESPONSIVE - TABLET (Fins a 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .c-cards-grid__grid {
    grid-template-columns: repeat(var(--cols-t), 1fr);
  }
}

/* ==========================================================================
   RESPONSIVE - MÒBIL (Fins a 768px)
   ========================================================================== */
@media (max-width: 768px) {
  
  .c-cards-grid {
    margin: var(--mar-out-m);
    padding: var(--pad-out-m);
  }

  .c-cards-grid__header {
    order: var(--o-head-m, 1);
    text-align: var(--al-h-txt-m, left);
    margin-bottom: var(--mb-head-m);
  }

  .c-cards-grid__titol {
    font-size: var(--fs-htit-m);
    line-height: var(--lh-htit-m);
  }

  .c-cards-grid__descripcio {
    font-size: var(--fs-hdesc-m);
    line-height: var(--lh-hdesc-m);
  }

  .c-cards-grid__grid {
    order: var(--o-grid-m, 2);
    grid-template-columns: repeat(var(--cols-m), 1fr);
    gap: var(--gap-grid-m);
  }

  /* TEXT TARGETES */
  .c-cards-grid__tag {
    font-size: var(--fs-ctag-m);
    line-height: var(--lh-ctag-m);
    margin-bottom: var(--mb-ctag-m);
  }

  .c-cards-grid__ctit {
    font-size: var(--fs-ctit-m);
    line-height: var(--lh-ctit-m);
    margin-bottom: var(--mb-ctit-m);
  }

  .c-cards-grid__cdesc {
    font-size: var(--fs-cdesc-m);
    line-height: var(--lh-cdesc-m);
    margin-bottom: var(--mb-cdesc-m);
  }

  .c-cards-grid__link {
    padding-bottom: var(--pb-link-m, 4px);
  }

  .c-cards-grid__link-txt {
    font-size: var(--fs-clink-m);
    line-height: var(--lh-clink-m);
  }

  /* CTA TARGETA */
  .c-cards-grid__cta {
    padding: var(--p-cta-m);
  }

  .c-cards-grid__cta-desc {
    font-size: var(--fs-cdesc-m);
    line-height: var(--lh-cdesc-m);
  }

  .c-cards-grid__cta-btn {
    padding: var(--p-ctabtn-m);
    font-size: var(--fs-cbtn-m);
    line-height: var(--lh-cbtn-m);
    width: 100%;
    justify-content: center;
  }

}