/* CSS custom properties for shared colors */
:root {
  --color-primary: #c21b17;
  --color-primary-hover: #a61a16;
  --color-white: #fff;
  --bullet-inactive: #ccc;
  --bullet-active: var(--color-primary);
  --font-main: "Roboto", sans-serif;
}

/* Agent node Hero slider */
.slider-block {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 500px;
  margin-bottom: 35px;

  .glide__slide:before {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), 50%, rgba(0, 0, 0, 0));
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
  }
}

.slide-container {
  display: flex;
  gap: 27px;
  z-index: 1;
  min-height: 620px;
  padding-bottom: 50px;
  padding-top: 154px;
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 1024px) {
  .slide-container {
    padding-top: 264px;
    min-height: fit-content;
    height: calc(100% - 260px) !important;
  }
}

.slider-offices {
  position: relative;
  width: 39%;
  max-width: 39%;

  h3 {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 32px;
    text-transform: uppercase;
    padding-left: 75px;
    margin-block-start: 0;
    margin-block-end: 18px;
  }
}

.slider-offices {
  .glide__track {
    padding-left: 75px;
    margin-bottom: 40px;
    padding-right: 75px;
    padding-bottom: 40px;
  }

  .glide__arrow {
    top: 10% !important;
  }
}


@media (max-width: 1024px) {
  .slider-block {
    height: unset;
    max-height: unset;

    .glide__slide:before {
      max-height: 260px;
      bottom: unset;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.5), 75%, rgba(0, 0, 0, 0));
    }

  }

  .block-wrapper {
    flex-direction: column;
    padding: 0;
  }

  .slider-offices {
    position: relative;
    width: unset;
    max-width: unset;

    h3 {
      display: none;
    }

    .glide__slide {
      background: unset;
    }

    .glide__track {
      margin: 20px;
      padding: 20px;
      margin-top: 0;
      margin-right: 0;
      padding-top: 0;
      margin-bottom: 0;
      margin-left: 0;
    }

    .glide__arrows {
      display: none;
    }
  }
}


.slider-block {
  .glide__slide {
    position: relative;
    text-align: left;
    background: #fff;
  }

  .glide__slide img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: top;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  @media (max-width: 1024px) {
    .glide__slide img {
      max-height: 260px;
      min-height: 260px;
    }

    .glide__slide {
      background: var(--color-primary);
    }
  }
}

.slide-content {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0%);
  color: var(--color-white);
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 154px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;

  .slide-pretitle {
    font-family: var(--font-main);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    max-width: 677px;
    text-align: start;
    margin-block: 0;
    line-height: 1.4;
  }

  .slide-title {
    font-family: var(--font-main);
    font-size: 2.75rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: uppercase;
    max-width: 677px;
    text-align: start;
    margin-block: 0;
    line-height: 1.4;
    color: var(--color-white);
  }

  @media (max-width: 1024px) {
    .slide-title {
      font-size: 2rem;
      padding-bottom: 22px;
    }

    .slide-pretitle {
      padding-bottom: 22px;
    }
  }

  .slide-description {
    font-family: var(--font-main);
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1.4;
    max-width: 550px;
    text-align: start;
    margin-block: 0;
  }

  .slide-button {
    text-align: left;
  }



  @media (max-width: 1024px) {
    .slide-description {
      font-size: 1.25rem;
      padding-bottom: 22px;
    }
  }

  a.cta-button {
    display: inline-block;
    color: var(--color-white);
    text-decoration: none;
    border-radius: 4px;
    line-height: 1.4;
    margin-block: 0;
    width: fit-content;
    border: 0 solid transparent;
  }

  @media (max-width: 1024px) {
    a.cta-button {
      background: var(--color-white);
      color: var(--color-primary);
      width: 100%;
    }
  }
}

@media (max-width: 1024px) {
  .slide-content {
    position: inherit;
    transform: unset;
    min-height: fit-content;
    background: var(--color-primary);
    top: unset;
    left: unset;
    padding-top: 40px;
    padding-bottom: 40px;
    display: inline-block;
    max-width: 550px;
  }
}

@media (max-width: 768px) {
  .slide-content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 20px;
  }
}

@media (max-width: 475px) {
  .slide-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .slide-content {
    padding-top: 20px;
  }
}

.glide {


  .glide__arrow {
    display: flex !important;
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .1);
    color: var(--color-primary);
    height: 40px;
    margin: 0;
    opacity: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 40px;
    align-items: center;
    justify-content: center;
    padding: unset;
    border: unset;

  }

  .glide__arrow.red {
    background: var(--color-primary);
  }

  .glide__arrow.red:hover {
    background: var(--color-primary-hover);
  }

  .glide__arrow.red::after {
    background-image: url("/themes/custom/generali/images/icons/arrow_right_white.svg");
  }

  .glide__arrow::after {

    background-image: url("/themes/custom/generali/images/icons/arrow_right_red.svg");
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 24px;
    width: 24px;

  }

  .glide__arrow--left {
    left: 1em;
  }

  .glide__arrow--right {
    right: 1em;
  }



  .glide__arrow--left::after {
    transform: rotate(180deg);
  }



  @media (max-width: 1024px) {
    .glide__arrows {
      position: relative;
      top: 130px;
    }
  }

}

.offices-list {

  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }

  @media (max-width: 1024px) {
    .mobile-only {
      display: block;
    }

    .desktop-only {
      display: none;
    }

    .glide__slide {
      width: 80%;
      box-sizing: border-box;
      background: #fff !important;
      padding-left: 1.2%;
      padding-right: 1%;
    }

    .glide__arrows,
    .glide__bullets {
      text-align: center;
      margin-top: 10px;
    }

    .glide__arrows {
      position: relative;
      top: 80px;
    }

    .glide__bullet {
      width: 3px;
      height: 3px;
      background-color: #b0b2b3;
      border: unset;
    }

    .glide__arrow--left {
      left: 0.5em;
    }

    .glide__arrow--right {
      right: 0.5em;
    }

    .office-item::after {
      content: unset;
    }

    .glide__bullets {
      bottom: 0;
      align-items: center;
    }

    .glide__bullet--active {
      width: 8px;
      height: 8px;
      background-color: var(--color-primary);
    }

  }



}


.slider-reviews {
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;


  .glide__slides {
    padding-top: 30px;
    padding-bottom: 60px;
  }


  .review-slide {
    box-shadow: 0 5px 20px 0 rgba(27, 19, 19, .1);
    margin: 0 17px 0 17px;
    padding: 24px 24px 32px 24px;
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #20252b;
  }

  .review-slider-name,
  .review-slider-date {
    font-family: Roboto, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 16px;
  }

  .review-slider-date {
    margin-top: 4px;
    color: #6f7072;
  }

  .review-slider-text {
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .review-slide-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .glide__slide {
    height: auto;
  }

  @media (max-width: 1024px) {
    .glide__slide {
      background: var(--color-white);
    }
  }

  .icon-star-filled:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c21b17"><path d="m12 0 4.079 7.364L24 9.167l-5.4 6.355.816 8.478L12 20.564 4.584 24l.816-8.478L0 9.167l7.921-1.803L12 0Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-star-filled {
    margin-left: 2px;
  }

  .glide__bullets {
    align-items: center;
  }

  .glide__bullet {
    width: 3px;
    height: 3px;
    background-color: #b0b2b3;
    border: unset;
  }

  .glide__bullet:focus,
  .glide__bullet:hover {
    background-color: var(--color-primary);
    border: unset;
  }

  .glide__bullet--active {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
  }

  .glide__bullet--adjacent {
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
  }
}


.slider-top-locations {
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;

  .glide__slide {
    flex-wrap: wrap;
    display: flex;

    .views-row {
      width: 30%;

      a.taxonomy-link {
        color: #333;
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 24px;
        text-decoration: underline;
        text-transform: uppercase;
        max-width: 80%;
      }

      a.taxonomy-link:hover {
        color: #c12017;
      }
    }
  }

  .glide__slide::after {
    content: "";
    display: block;
    width: 10%;
  }

  .glide__track {
    padding: 0 92px 50px 92px;
    margin-bottom: 40px;
  }

  .glide__arrow {
    top: 40%;
  }

  .glide__arrow--left {
    left: 3em;
  }

  .glide__arrow--right {
    right: 3em;
  }

  .glide__bullets {
    bottom: 0;
    align-items: center;
  }

  .glide__bullet {
    width: 3px;
    height: 3px;
    background-color: #b0b2b3;
    border: unset;
  }

  .glide__bullet:focus,
  .glide__bullet:hover {
    background-color: var(--color-primary);
    border: unset;
  }

  .glide__bullet--active {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
  }

  .glide__bullet--adjacent {
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
  }
}

.field:has(.slider-top-locations) {
  .field__label {
    h2 {
      font-size: 3rem;
      font-weight: 300;
      letter-spacing: 0;
      line-height: 60px;
      text-align: center;
      font-family: Roboto, sans-serif;
      color: #333;
      margin-block-end: 64px;
    }
  }
}

@media (max-width: 1024px) {
  .slider-top-locations {
    max-width: 970px;

    .glide__slide {
      background: #fff;
    }

    .glide__arrows {
      position: initial;
    }

  }
}

@media (max-width: 768px) {
  .slider-top-locations {
    max-width: 740px;

    & .glide__slide {
      .views-row {
        width: 40%;
      }
    }
  }
}

@media (max-width: 475px) {
  .slider-top-locations {
    max-width: 450px;

    & .glide__slide {
      .views-row {
        width: 80%;
      }
    }

    .glide__arrow--left {
      left: 1em;
    }

    .glide__arrow--right {
      right: 1em;
    }

    .glide__track {
      padding: 0 42px 50px 42px;
    }
  }
}

.block-agent-slider-block {
  .slider-block {
    
  }
}

@media (max-width: 1024px) {
  .block-agent-slider-block {
    .slider-block {
      height: auto;
    }
  }
}