/* =========================================================
   FILTRE ASSIGNATURES BLOCK
   ========================================================= */

.c-filtre-assignatures {
  margin-top: var(--mar-t, 0);
  margin-bottom: var(--mar-b, 0);
  padding-top: var(--pad-t, 3rem);
  padding-bottom: var(--pad-b, 3rem);
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.c-filtre-assignatures__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.c-filtre-assignatures__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  flex-wrap: wrap;
}

/* --- ITEM --- */
.c-filtre-assignatures__item {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* --- ICONO --- */
.c-filtre-assignatures__icon {
  width: var(--ic-size, 32px);
  height: var(--ic-size, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-filtre-assignatures__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- TÍTULO --- */
.c-filtre-assignatures__title {
  font-size: var(--fs-titol, 18px);
  font-weight: var(--fw-titol, 600);
  text-align: center;
  line-height: 1.3;
  color: #333;
  transition: color 0.3s ease;
}

/* =========================================
   COLORES POR ASIGNATURA (Data Attribute)
   ========================================= */

/* 1. Llengua Catalana */
.c-filtre-assignatures__item[data-filtre="llengua-catalana"] .c-filtre-assignatures__title {
  color: #ff604f;
}

/* 2. Lengua Castellana */
.c-filtre-assignatures__item[data-filtre="lengua-castellana"] .c-filtre-assignatures__title {
  color: #f29045;
}

/* 3. Matemàtiques */
.c-filtre-assignatures__item[data-filtre="matematiques"] .c-filtre-assignatures__title {
  color: #789fed;
}

/* 4. Coneixement del medi */
.c-filtre-assignatures__item[data-filtre="coneixement-del-medi"] .c-filtre-assignatures__title {
  color: #44c887;
}

/* 5. Música */
.c-filtre-assignatures__item[data-filtre="musica"] .c-filtre-assignatures__title {
  color: #9fc600;
}

/* 6. Cultures i religions */
.c-filtre-assignatures__item[data-filtre="religions"] .c-filtre-assignatures__title {
  color: #756bff;
}

/* 7. Educació en valors */
.c-filtre-assignatures__item[data-filtre="valors"] .c-filtre-assignatures__title {
  color: #8fb2a1;
}

/* 8. Plàstica */
.c-filtre-assignatures__item[data-filtre="plastica"] .c-filtre-assignatures__title {
  color: #eb61a6;
}

/* 9. Religió catòlica */
.c-filtre-assignatures__item[data-filtre="catolica"] .c-filtre-assignatures__title {
  color: #a972eb;
}

/* =========================================
     RESPONSIVE (Móvil - Diseño Grid 2x2)
     ========================================= */
@media (max-width: 768px) {
  .c-filtre-assignatures {
    margin-top: var(--mar-t-mob, 0px);
    margin-bottom: var(--mar-b-mob, 0px);
    padding-top: var(--pad-t-mob, 2rem);
    padding-bottom: var(--pad-b-mob, 2rem);
    padding-left: 0;
    padding-right: 0;
  }

  .c-filtre-assignatures__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    justify-items: center;
  }

  .c-filtre-assignatures__item {
    width: 100%;
    max-width: 150px;
  }

  .c-filtre-assignatures__icon {
    width: var(--ic-size-mob, 24px);
    height: var(--ic-size-mob, 24px);
  }

  .c-filtre-assignatures__title {
    font-size: var(--fs-titol-mob, 16px);
  }
}

/* Placeholder per Editor ACF */
.c-filtre-assignatures--placeholder {
  padding: 60px 20px;
  text-align: center;
  background: #f0f0f0;
  border: 2px dashed #ccc;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
}