/* =========================================================
   LLIBRES RELACIONATS
   ========================================================= */

.c-llibres-relacionats {
  margin-top: var(--mar-t, 0);
  margin-bottom: var(--mar-b, 0);
  padding-top: var(--pad-t, 80px);
  padding-bottom: var(--pad-b, 80px);
}

.c-llibres-relacionats__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--mb-head, 40px);
  gap: 50px;
}

.c-llibres-relacionats__subtitle {
  font-size: var(--fs-sub, 18px);
  font-weight: var(--fw-sub, 700);
  color: var(--c-subtitol, #5d4d9b);
  margin: 0 0 var(--mb-sub, 8px) 0;
}

.c-llibres-relacionats__title {
  font-size: var(--fs-tit-bloc, clamp(32px, 2.5vw + 22px, 52px));
  font-weight: var(--fw-tit-bloc, 700);
  color: var(--c-titol-bloc, #1e1348);
  margin: 0;
  line-height: 1.1;
}

.c-llibres-relacionats__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background-color: var(--bg-btn, #1e1348);
  color: var(--c-btn, #ffffff);
  text-decoration: none;
  border-radius: var(--br-btn, 100px);
  font-size: var(--fs-btn, 16px);
  font-weight: var(--fw-btn, 700);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.c-llibres-relacionats__btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.c-llibres-relacionats__btn:hover {
  background-color: var(--bg-btn-h, #1e1348);
  color: var(--c-btn-h, #ffffff);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.c-llibres-relacionats__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--gap-x) * 5)) / 6);
  gap: var(--gap-x, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; 
  padding-bottom: 30px; 
}

.c-llibres-relacionats__cards::-webkit-scrollbar {
  display: none; 
}

.c-llibres-relacionats__cards.is-active {
  scroll-snap-type: none;
  cursor: grabbing;
}

.c-llibres-relacionats__card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card, #F5F7FA);
  border: none;
  border-radius: var(--br-card, 20px);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
  scroll-snap-align: start;
}

.c-llibres-relacionats__card:hover {
  transform: translateY(-5px);
}

.c-llibres-relacionats__card-image {
  width: 100%;
  aspect-ratio: var(--img-ratio, 4 / 5);
  height: var(--img-h, auto);
  background-color: #eaeaea;
  border-radius: var(--br-img, 20px 20px 20px 20px);
  overflow: hidden;
}

.c-llibres-relacionats__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; 
}

.c-llibres-relacionats__card-placeholder {
  width: 100%;
  height: 100%;
  background-color: #EDECF0;
}

.c-llibres-relacionats__card-content {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.c-llibres-relacionats__card-collection {
  font-size: var(--fs-card-col, 16px);
  font-weight: var(--fw-card-col, 400);
  color: var(--c-card-col, #1e1348);
  margin: 0 0 6px 0;
}

.c-llibres-relacionats__card-title {
  font-size: var(--fs-card-tit, 16px);
  font-weight: var(--fw-card-tit, 600);
  color: var(--c-card-tit, #1e1348);
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 1400px) {
  .c-llibres-relacionats__cards {
    grid-auto-columns: calc((100% - (var(--gap-x) * 4)) / 5.2);
    
    margin-left: calc(var(--grid-margin) * -1);
    margin-right: calc(var(--grid-margin) * -1);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    scroll-padding-left: var(--grid-margin);
  }
}

@media (max-width: 1100px) {
  .c-llibres-relacionats__cards { 
    grid-auto-columns: calc((100% - (var(--gap-x) * 3)) / 4.2); 
  }
}

@media (max-width: 900px) {
  .c-llibres-relacionats__cards { 
    grid-auto-columns: calc((100% - (var(--gap-x) * 2)) / 3.2); 
  }
}
@media (max-width: 768px) {
  .c-llibres-relacionats {
    margin-top: var(--mar-t-mob, 0px);
    margin-bottom: var(--mar-b-mob, 0px);
    padding-top: var(--pad-t-mob, 60px);
    padding-bottom: var(--pad-b-mob, 60px);
  }

  .c-llibres-relacionats__title {
    font-size: var(--fs-tit-bloc-mob, 32px);
  }

  .c-llibres-relacionats__container.grid-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .c-llibres-relacionats__header {
    display: contents; 
  }

  .c-llibres-relacionats__header-texts {
    order: 1;
    margin-bottom: var(--mb-head-mob, 24px);
  }

  .c-llibres-relacionats__cards {
    order: 2;
    gap: var(--gap-x-mob, 16px); 
    grid-auto-columns: calc((100% - var(--gap-x-mob)) / 2.2); 
    
    margin-left: calc(var(--grid-margin) * -1);
    margin-right: calc(var(--grid-margin) * -1);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    scroll-padding-left: var(--grid-margin);
  }

  .c-llibres-relacionats__card-image {
    height: var(--img-h-mob, auto);
  }

  .c-llibres-relacionats__btn {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 8px; 
  }
}

@media (max-width: 500px) {
  .c-llibres-relacionats__cards { 
    grid-auto-columns: calc((100% - var(--gap-x-mob)) / 1.3); 
  }
}