/* ==========================================================================
   BLOCK: MISSION DETAILS
   ========================================================================== */

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

.c-mission-det--bg-always,
.c-mission-det--bg-desktop {
  background: var(--bg-out);
}

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

.c-mission-det__wrap {
  display: grid;
  grid-template-columns: var(--grid-prop-d, 1fr 1fr);
  gap: var(--gap-cols-d);
  align-items: flex-start;
}

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

/* --------------------------------------------------------------------------
   COLUMNA ESQUERRA
   -------------------------------------------------------------------------- */
.c-mission-det__col-esq {
  order: var(--o-esq-d, 1);
  display: flex;
  flex-direction: column;
}

.c-mission-det__tag {
  align-self: flex-start;
  background-color: var(--c-tag-bg);
  color: var(--c-tag-txt);
  padding: 8px 16px;
  font-family: var(--ff-tag);
  font-size: var(--fs-tag-d);
  font-weight: var(--fw-tag);
  line-height: var(--lh-tag-d);
  margin: var(--m-tag-d);
}

.c-mission-det__titol {
  font-family: var(--ff-tit);
  font-size: var(--fs-tit-d);
  font-weight: var(--fw-tit);
  line-height: var(--lh-tit-d);
  color: var(--c-tit);
  margin: var(--m-tit-d);
  word-wrap: break-word;
}

.c-mission-det__desc {
  font-family: var(--ff-desc);
  font-size: var(--fs-desc-d);
  font-weight: var(--fw-desc);
  line-height: var(--lh-desc-d);
  color: var(--c-desc);
  margin: var(--m-desc-d);
  word-wrap: break-word;
}
.c-mission-det__desc p { margin: 0; }
.c-mission-det__desc p:not(:last-child) { margin-bottom: 1em; }

/* Fitxa del Projecte */
.c-mission-det__fitxa {
  background-color: var(--c-fbg);
  padding: var(--p-fitxa-d);
}

.c-mission-det__ftit {
  font-family: var(--ff-ftit);
  font-size: var(--fs-ftit-d);
  font-weight: var(--fw-ftit);
  line-height: var(--lh-ftit-d);
  color: var(--c-ftit);
  margin: var(--m-ftit-d);
}

.c-mission-det__fitems {
  display: flex;
  flex-direction: column;
}

.c-mission-det__fitem {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--c-fbord);
  padding: var(--p-fitem-d);
}
.c-mission-det__fitem:first-child {
  padding-top: 0;
}

.c-mission-det__fitem-left {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.c-mission-det__fnum {
  font-family: var(--ff-fnum);
  font-size: var(--fs-fnum-d);
  font-weight: var(--fw-fnum);
  line-height: var(--lh-fnum-d);
  color: var(--c-fntit);
  margin: var(--m-fnum-d);
}

.c-mission-det__fitit {
  font-family: var(--ff-fitit);
  font-size: var(--fs-fitit-d);
  font-weight: var(--fw-fitit);
  line-height: var(--lh-fitit-d);
  color: var(--c-fntit);
  margin: var(--m-fitit-d);
}

.c-mission-det__fitxt {
  font-family: var(--ff-fitxt); 
  font-size: var(--fs-fitxt-d);
  font-weight: var(--fw-fitxt);
  line-height: var(--lh-fitxt-d);
  color: var(--c-ftxt);
  margin: var(--m-fitxt-d);
  display: block;
}

/* Compartir */
.c-mission-det__comp {
  margin: var(--m-comp-d);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-mission-det__ctit {
  font-family: var(--ff-ftit);
  font-size: 18px;
  line-height: 24px;
  color: var(--c-ctit);
}

.c-mission-det__cicons {
  display: flex;
  gap: 16px;
  position: relative;
}

/* BOTONS COMPARTIR */
.c-mission-det__cicon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--c-ctit);
}

.c-mission-det__cicon.is-copied {
  z-index: 9999;
}

.c-mission-det__cicon svg {
  width: 19px;
  height: 19px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.c-mission-det__cicon:hover svg {
  transform: scale(1.1);
}

/* Tooltip Copiar URL */
.c-mission-det__tooltip {
  position: absolute;
  z-index: 99999;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background-color: var(--c-tooltip); 
  color: var(--c-ctit); 
  font-family: var(--ff-desc);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.c-mission-det__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: var(--c-tooltip) transparent transparent transparent;
}

.c-mission-det__cicon.is-copied .c-mission-det__tooltip {
  opacity: 1;
  visibility: visible;
}


/* --------------------------------------------------------------------------
   COLUMNA DRETA
   -------------------------------------------------------------------------- */
.c-mission-det__col-dre {
  order: var(--o-dre-d, 2);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.c-mission-det__rblocks {
  display: flex;
  flex-direction: column;
  gap: var(--gap-rb-d);
}

.c-mission-det__rblock {
  display: flex;
  flex-direction: column;
}

.c-mission-det__rfigure {
  margin: var(--m-rimg-d);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-mission-det__rimg-wrap {
  width: 100%;
  aspect-ratio: calc(var(--ar-img-d));
  overflow: hidden;
}

.c-mission-det__rcaption {
  border-left: 2px solid var(--c-quoteb);
  padding: var(--p-quote-d);
  font-family: var(--ff-quote);
  font-size: var(--fs-quote-d);
  font-weight: var(--fw-quote);
  line-height: var(--lh-quote-d);
  color: var(--c-quotet);
  font-style: italic;
  margin: 0;
}

.c-mission-det__rimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-mission-det__rtit {
  font-family: var(--ff-rtit);
  font-size: var(--fs-rtit-d);
  font-weight: var(--fw-rtit);
  line-height: var(--lh-rtit-d);
  color: var(--c-rtit);
  margin: var(--m-rtit-d);
  word-wrap: break-word;
}

.c-mission-det__rdesc {
  font-family: var(--ff-rdesc);
  font-size: var(--fs-rdesc-d);
  font-weight: var(--fw-rdesc);
  line-height: var(--lh-rdesc-d);
  color: var(--c-rdesc);
  margin: var(--m-rdesc-d);
  word-wrap: break-word;
}

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

/* Quote Styling pel WYSIWYG */
.c-mission-det__rdesc blockquote {
  border-left: 2px solid var(--c-quoteb);
  padding: var(--p-quote-d);
  margin: var(--m-quote-d);
  font-family: var(--ff-quote);
  font-size: var(--fs-quote-d);
  font-weight: var(--fw-quote);
  line-height: var(--lh-quote-d);
  color: var(--c-quotet);
  font-style: italic;
}


/* ==========================================================================
   RESPONSIVE SCALING DEL CONTENIDOR GLOBAL (4 Breakpoints)
   ========================================================================== */

/* 1. DESKTOP XL (>1440px) */
@media (min-width: 1441px) {
  .grid-container > .c-mission-det__wrap {
    grid-column-start: var(--col-start-xl, auto) !important;
    grid-column-end: span var(--col-span-xl, 12) !important;
  }
}

/* 2. TABLET (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .grid-container > .c-mission-det__wrap {
    grid-column-start: var(--col-start-t, auto) !important;
    grid-column-end: span var(--col-span-t, 12) !important;
  }
  
  .c-mission-det__wrap {
    grid-template-columns: var(--grid-prop-t, 1fr 1fr);
  }
}

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

  .grid-container > .c-mission-det__wrap {
    grid-column-start: var(--col-start-m, auto) !important;
  }

  .c-mission-det--bg-desktop { background: transparent; }
  .c-mission-det--bg-mobile { background: var(--bg-out); }

  .c-mission-det__wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-cols-m);
  }

  /* Ordre en Mòbil */
  .c-mission-det__col-esq { order: var(--o-esq-m, 1); }
  .c-mission-det__col-dre { order: var(--o-dre-m, 2); }

  /* Marges Mòbil */
  .c-mission-det__tag { margin: var(--m-tag-m); }
  .c-mission-det__titol { margin: var(--m-tit-m); }
  .c-mission-det__desc { margin: var(--m-desc-m); }
  .c-mission-det__fitxa { padding: var(--p-fitxa-m); }
  .c-mission-det__ftit { margin: var(--m-ftit-m); }
  .c-mission-det__fitem { padding: var(--p-fitem-m); }
  .c-mission-det__fnum { margin: var(--m-fnum-m); }
  .c-mission-det__fitit { margin: var(--m-fitit-m); }
  .c-mission-det__fitxt { margin: var(--m-fitxt-m); }
  .c-mission-det__comp { margin: var(--m-comp-m); }
  
  .c-mission-det__rblocks { gap: var(--gap-rb-m); }
  
  .c-mission-det__rfigure { margin: var(--m-rimg-m); }
  .c-mission-det__rimg-wrap { aspect-ratio: calc(var(--ar-img-m)); }
  .c-mission-det__rcaption {
    padding: var(--p-quote-m);
    font-size: var(--fs-quote-m);
    line-height: var(--lh-quote-m);
  }

  .c-mission-det__rtit { margin: var(--m-rtit-m); }
  .c-mission-det__rdesc { margin: var(--m-rdesc-m); }
  
  .c-mission-det__rdesc blockquote {
    padding: var(--p-quote-m);
    margin: var(--m-quote-m);
    font-size: var(--fs-quote-m);
    line-height: var(--lh-quote-m);
  }

  /* Tipografia Mòbil */
  .c-mission-det__tag {
    font-size: var(--fs-tag-m);
    line-height: var(--lh-tag-m);
  }

  .c-mission-det__titol {
    font-size: var(--fs-tit-m);
    line-height: var(--lh-tit-m);
  }

  .c-mission-det__desc {
    font-size: var(--fs-desc-m);
    line-height: var(--lh-desc-m);
  }

  .c-mission-det__ftit {
    font-size: var(--fs-ftit-m);
    line-height: var(--lh-ftit-m);
  }

  .c-mission-det__fnum {
    font-size: var(--fs-fnum-m);
    line-height: var(--lh-fnum-m);
  }

  .c-mission-det__fitit {
    font-size: var(--fs-fitit-m);
    line-height: var(--lh-fitit-m);
  }

  .c-mission-det__fitxt {
    font-size: var(--fs-fitxt-m);
    line-height: var(--lh-fitxt-m);
  }

  .c-mission-det__rtit {
    font-size: var(--fs-rtit-m);
    line-height: var(--lh-rtit-m);
  }

  .c-mission-det__rdesc {
    font-size: var(--fs-rdesc-m);
    line-height: var(--lh-rdesc-m);
  }
}