/* =========================================================
   TARGETES FORMAT BLOCK
   ========================================================= */

.c-targetes-format {
  margin-top: var(--mar-t, 0px);
  margin-bottom: var(--mar-b, 0px);
  padding-top: var(--pad-t, 4rem);
  padding-bottom: var(--pad-b, 4rem);
  overflow-x: clip; 
  z-index: -2;
  position: relative;
}

.c-targetes-format.is-admin-preview {
  z-index: 1 !important;
}

.c-targetes-format--bg-always,
.c-targetes-format--bg-desktop {
  background: var(--bg-block, transparent);
}

.c-targetes-format__max-width {
  max-width: var(--max-w, 1920px);
  margin: 0 auto;
}
  
.c-targetes-format__card {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
}

.c-targetes-format__card::before {
  content: "";
  position: absolute;
  top: 0; 
  bottom: 0;
  left: 24px; 
  right: 24px;
  border-radius: inherit; 
  z-index: -1;
}
  
.c-targetes-format__card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  z-index: 0;
  overflow: hidden; 
}
  
.c-targetes-format__card-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
  
.c-targetes-format__card-content {
  position: relative;
  z-index: 2; 
  padding: 3rem;
  max-width: 80%;
}
  
.c-targetes-format__card--lila {
  border-radius: var(--br-lila, 40px 40px 200px 40px); 
}

.c-targetes-format__card--lila::before {
  background-color: #B2A4D2; 
  transform: translateY(-16px); 
}

.c-targetes-format__card--lila .c-targetes-format__card-overlay {
  background: linear-gradient(90deg, rgba(93, 77, 155, 0.8) 20%, rgba(93, 77, 155, 0.2) 100%);
}

.c-targetes-format__card--verd {
  border-radius: var(--br-verd, 200px 40px 40px 40px); 
}

.c-targetes-format__card--verd::before {
  background-color: #91FFCF; 
  transform: translateY(16px); 
}

.c-targetes-format__card--verd .c-targetes-format__card-overlay {
  background: linear-gradient(90deg, rgba(32, 128, 96, 0.8) 20%, rgba(145, 255, 207, 0.2) 100%);
}
  
.c-targetes-format__card-etiqueta {
  font-size: var(--fs-eti, 26px);
  color: var(--color-eti, #ffffff);
  font-weight: var(--fw-eti, 700);
  margin-bottom: 0.5rem;
}
  
.c-targetes-format__card-titol {
  font-size: var(--fs-titol, 70px);
  color: var(--color-titol, #ffffff);
  font-weight: var(--fw-titol, 700);
  line-height: 1.1;
  margin-bottom: 1rem;
}
  
.c-targetes-format__card-descripcio {
  font-size: var(--fs-desc, 16px);
  color: var(--color-desc, #ffffff);
  line-height: 1.5;
  font-weight: var(--fw-desc, 600);
  margin: 0;
}
.c-targetes-format__card-descripcio p { margin: 0; }
  
.c-targetes-format--placeholder {
  padding: 60px 20px;
  text-align: center;
  background: #f0f0f0;
  border: 2px dashed #ccc;
  border-radius: 8px;
  color: #666;
}
  
/* =========================================================
   MEDIA QUERIES (Responsive)
   ========================================================= */
  
@media (max-width: 1024px) {
  .c-targetes-format__card-content {
    padding: 2rem;
    max-width: 90%;
  }
  .c-targetes-format__card-titol {
    font-size: 60px;
  }
}
  
@media (max-width: 768px) {
  .c-targetes-format {
    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);
  }

  .c-targetes-format--bg-desktop {
    background: transparent;
  }
  .c-targetes-format--bg-mobile {
    background: var(--bg-block, transparent);
  }

  .c-targetes-format.grid-container{
    gap: 1.5rem;
  }

  .c-targetes-format__card {
    min-height: 460px;
  }

  .c-targetes-format__card--lila {
    border-radius: var(--br-lila-mob, 20px 20px 150px 20px); 
  }
  
  .c-targetes-format__card--verd {
    border-radius: var(--br-verd-mob, 150px 20px 20px 20px);
  }
  
  .c-targetes-format__card-content {
    padding: 1.5rem;
    max-width: 80%;
  }
  
  .c-targetes-format__card-etiqueta { 
    font-size: var(--fs-eti-mob, 18px); 
  }
  .c-targetes-format__card-titol { 
    font-size: var(--fs-titol-mob, 44px); 
  }
  .c-targetes-format__card-descripcio { 
    font-size: var(--fs-desc-mob, 16px); 
  }
}