/* =========================================================
   MÒDUL LLIURE BLOCK
   ========================================================= */

.c-modul-lliure {
  position: relative;
  z-index: 1;
  min-height: var(--min-h, 600px);
  background: var(--bg-color, transparent);
  background-image: var(--bg-desk, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  margin-top: var(--mar-t, 0px) !important;
  margin-bottom: var(--mar-b, 0px) !important;
  padding-top: var(--pad-t, 3rem);
  padding-bottom: var(--pad-b, 3rem);
  border-radius: var(--br-block, 0px);
  
  overflow: hidden;
  box-sizing: border-box;
}

.c-modul-lliure--bg-always,
.c-modul-lliure--bg-desktop {
  background-color: var(--bg-color, transparent);
}

/* ---------------------------------------------------------
       CONTENT LAYOUT (GRID COLUMNS)
    --------------------------------------------------------- */
.c-modul-lliure__content {
  position: relative;
  z-index: 2;
  text-align: center;
  grid-column: var(--grid-desk, 4 / 10);
  align-self: center;
}

/* ---------------------------------------------------------
       TEXTOS (Colors i Typo)
    --------------------------------------------------------- */
.c-modul-lliure__avant-titol {
  margin: 0 0 0.5rem;
  font-size: var(--fs-avant, 18px);
  font-weight: var(--fw-avant, 800);
  color: var(--c-avant, #91ffcf);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.c-modul-lliure__titol {
  margin: 0 0 1rem;
  font-size: var(--fs-titol, clamp(48px, 5vw, 110px));
  font-weight: var(--fw-titol, 800);
  color: var(--c-titol, #ffffff);
  line-height: 1.1;
}

.c-modul-lliure__descripcio {
  margin: 0 0 2rem;
  font-size: var(--fs-desc, clamp(26px, 4vw, 36px));
  font-weight: var(--fw-desc, 500);
  color: var(--c-desc, #ffffff);
  line-height: 1.5;
}

.c-modul-lliure__descripcio p {
  margin: 0 0 12px 0;
}

.c-modul-lliure__descripcio p:last-child {
  margin-bottom: 0;
}

/* Paraula subratllada */
.c-modul-lliure__subratllat {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1em;
}

.c-modul-lliure__subratllat::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.3em;
  z-index: -1;
  border-radius: 100px;
  background-color: var(--c-subratllat, #e7daed);
}

/* ---------------------------------------------------------
       BOTÓ CTA 
    --------------------------------------------------------- */
.c-modul-lliure__boto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0.875rem 2rem;
  font-size: var(--fs-btn, 1rem);
  font-weight: var(--fw-btn, 600);
  color: var(--btn-color, #1e1348);
  background-color: var(--btn-bg, #91ffcf);
  border-radius: var(--br-btn, 40px);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.c-modul-lliure__boto:hover {
  transform: translateY(-2px);
  box-shadow: 0px 8px 25px -10px rgba(0, 0, 0, 0.2);
}

.c-modul-lliure__boto-icona {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
       EDITOR (Gutenberg)
    --------------------------------------------------------- */
.block-editor-block-list__layout .c-modul-lliure {
  max-width: 100%;
}

.c-modul-lliure--placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f8f8f8 10px, #f8f8f8 20px);
  color: #666;
  text-align: center;
  padding: 2rem;
  font-style: italic;
  display: block;
}

/* ---------------------------------------------------------
       RESPONSIVE
    --------------------------------------------------------- */
@media (max-width: 768px) {
  .c-modul-lliure {
    min-height: var(--min-h-mob, 600px);
    background-image: var(--bg-mob, var(--bg-desk, none));
    margin-top: var(--mar-t-mob, 0px) !important;
    margin-bottom: var(--mar-b-mob, 0px) !important;
    padding-top: var(--pad-t-mob, 2rem);
    padding-bottom: var(--pad-b-mob, 2rem);
    border-radius: var(--br-block-mob, 0px);
  }

  .c-modul-lliure--bg-desktop {
    background-color: transparent;
  }
  .c-modul-lliure--bg-mobile {
    background-color: var(--bg-color, transparent);
  }

  .c-modul-lliure__content {
    grid-column: var(--grid-mob, 1 / -1);
  }

  .c-modul-lliure__avant-titol { font-size: var(--fs-avant-mob, 16px); }
  .c-modul-lliure__titol { font-size: var(--fs-titol-mob, 42px); }
  .c-modul-lliure__descripcio { font-size: var(--fs-desc-mob, 18px); }
  .c-modul-lliure__boto { font-size: var(--fs-btn-mob, 1rem); }
}