/* ========================================
   Line of Business
   ======================================== */

.section-lob {
  --section-pt: 210px;
  background-color: var(--color-bg-light);
  padding-top: var(--section-pt);
  padding-bottom: 40px;
}
.section-lob .carousel-nav {
  margin-top: 42px; 
}
.solution-card .solution-card-header {
  padding: 60px;
}
.solution-card .card-link {
  padding: 0px 60px;
}
.section-lob .carousel__slide {
  padding: 60px 67px;
  transition: background-color 0.3s ease;
}

#line-of-business .carousel__slide:hover {
  background-color: #f5f5f5;
}
/* Hide template crosses — replaced by carousel-crosses */
.section-lob .grid-crosses--top,
.section-lob .grid-crosses--bottom {
  display: none;
}

.lob-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-body);
  color: var(--color-gray-light);
  margin-bottom: 10px;
}

.lob-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  color: var(--color-pure-black);
  max-width: 765px;
}

/* Carousel overrides per LOB (light) */
.section-lob .carousel {
  --carousel-cols: 2;
  --carousel-border-color: var(--color-grid-line-light);
}
#line-of-business .carousel {
  border-left: 1px solid var(--color-grid-line-light);
}
.section-lob .carousel__slide {
  background-color: var(--color-bg-light);
  min-height: auto;
}

/* Divider/Crosses — colori light */
.section-lob .carousel-divider {
  background-color: var(--color-grid-line-light);
}

.section-lob .carousel-crosses .grid-cross:nth-child(1) { left: 0; }
.section-lob .carousel-crosses .grid-cross:nth-child(2) { left: 50%; }
.section-lob .carousel-crosses .grid-cross:nth-child(3) { left: 100%; }

.section-lob .carousel-crosses .grid-cross--light::before,
.section-lob .carousel-crosses .grid-cross--light::after {
  background-color: var(--color-grid-line-light);
}

.lob-card {
  display: flex;
  flex-direction: column;
  color: var(--color-pure-black);
}

.lob-card-logo {
  height: 48px;
  margin-bottom: 68px;
}

.lob-card-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.lob-card-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  color: var(--color-pure-black);
  margin-bottom: 8px;
}

.lob-card-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-gray-light);
  a {
    padding-top: var(--container-gutter);
    color: var(--color-gray-light);
  }
}

/* Navigation — colori light */
.section-lob .carousel-nav .nav-arrow {
  color: var(--color-gray-dark);
}

.section-lob .carousel-nav .nav-arrow:disabled {
  color: var(--color-grid-line-light);
}

.section-lob .carousel-nav .nav-arrow:not(:disabled):hover {
  color: var(--color-accent);
}


/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (min-width: 769px) {
  .section-lob .carousel::before {
    display: none;
  }

  .section-lob .carousel__slide {
    border-left: none;
    border-right: 1px solid var(--carousel-border-color, transparent);
  }

  /* Sostituisce le 5 linee dashed con 2 linee solide ai bordi del carousel (0%, 100%) */
  .section-lob.section--grid-light::after {
    background-image:
      linear-gradient(var(--color-grid-line-light), var(--color-grid-line-light)),
      linear-gradient(var(--color-grid-line-light), var(--color-grid-line-light));
    background-size: 1px 100%, 1px 100%;
    background-position: 0% 0, 100% 0;
    background-repeat: no-repeat;
  }
}

@media (max-width: 1024px) {
  .section-lob .carousel-crosses {
    display: block;
  }
  
  .section-lob .carousel {
    position: relative;
  }

  .section-lob .carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
      repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px);
    background-size: 1px 20px, 1px 20px;
    background-position: 0 0, 100% 0;
    background-repeat: repeat-y, repeat-y;
    pointer-events: none;
    z-index: 10;
  }

  .section-lob {
    padding-top: 120px;
    padding-bottom: 50px;
  }

  .lob-card-title {
    font-size: 30px;
  }

  .lob-title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  #line-of-business .grid-boundary--top, 
  #line-of-business .grid-crosses--top {
    top: 105px!important;
  }

  #line-of-business {
    padding-top: 160px;
    padding-bottom: 80px;
  }
  
  .home #line-of-business {
    padding-top: 160px;
    padding-bottom: 30px;
  }
  
  #line-of-business .carousel {
    border:none;
  }
  #line-of-business .lob-card {
    padding-right: var(--container-gutter);
  }
  .card-link .link-title {
      text-decoration-color: transparent;
      text-underline-offset: 5px;
     min-height: auto; 
      text-decoration-thickness: 1px;
      transition: text-decoration-color 0.35s ease;
  }
  .section-lob.section--grid-light::after {
    background-image:
      repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
      repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px);
    background-size: 1px 20px, 1px 20px;
    background-position: 0 0, 100% 0;
    background-repeat: repeat-y, repeat-y;
  }
  .section-lob .carousel::before {
    background-image:
      linear-gradient(to bottom, var(--color-grid-line-light), var(--color-grid-line-light)),
      linear-gradient(to bottom, var(--color-grid-line-light), var(--color-grid-line-light));
    background-size: 1px 100%, 1px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
  }

  .section-lob .carousel-nav {
      margin-top: 22px;
  }
  .section-lob .grid-crosses--top {
    display: block;
  }

  .section-lob .grid-crosses--top .grid-cross--light::before,
  .section-lob .grid-crosses--top .grid-cross--light::after {
    background-color: var(--color-grid-line-light);
  }

  .section-lob .grid-crosses--top .grid-cross:nth-child(2),
  .section-lob .grid-crosses--top .grid-cross:nth-child(3),
  .section-lob .grid-crosses--top .grid-cross:nth-child(4) {
    display: none;
  }

  .section-lob .carousel-crosses .grid-cross:nth-child(2) {
    display: none;
  }
  .section-lob .carousel-crosses .grid-cross:nth-child(1) {
    left: 20px;
  }
  .section-lob .carousel-crosses .grid-cross:nth-child(3) {
    left: calc(100% - 20px);
  }

  .lab-header {
    padding-left: var(--container-gutter);
  }
  .section-lob {
    padding-top: 80px;
  }

  .lob-card-title {
    font-size: 26px;
  }

  .lob-title {
    font-size: 28px;
    margin-bottom: 0px;
  }

  .lob-card-text {
    font-size: 20px;
    line-height: 32px;
  }
}