/* HEADER */

body.stickytopnav-false header.Homepage{
  border-bottom: 30px solid rgb(var(--color1));
  &::after{
    content: '';
    width: 360px;
    height: 300px;
    max-width: 36vw;
    max-height: 30vw;
    position: absolute;
    right: 40px;
    bottom: 0;
    visibility: visible;
    background-image: var(--green-trees);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transform: scaleX(-1);
  }
}

/* TAGLINE */

body .taglineoverlay{
  bottom: calc(50vh);
  .fixed{
    text-transform: uppercase;
    font-size: calc(var(--fs0));
    line-height: 0.9em;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    transform: translateY(50%);
    span{
      text-transform: none;
      color: rgb(var(--color2));
      font-family: var(--font-cursive);
      transform: translateY(1.4em);
      display: block;
    }
  }
}

/* WELCOME */

body section.mod_rounded_welcome div.Welcome{
  --welcome-max-width: 1040px;
  padding-bottom: 100px !important;
  & > div.WelcomeFlex .Title{
    line-height: 0.7em;
  }
}

@media screen and (min-width: 701px){
  body section.mod_rounded_welcome div.Welcome > div.WelcomeFlex{
    padding-left: min((var(--welcome-max-width) / 2.5) + 5vw, 40% + 5vw);
  }
}

/* EVENTS */

body section.mod_bubbles_slider{
  &::after{
    content: '';
    width: 480px;
    height: 400px;
    max-width: 48vw;
    max-height: 40vw;
    position: absolute;
    right: 40px;
    bottom: 0;
    background-image: var(--white-trees);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    visibility: visible;
    opacity: 0.1;
  }
  &::before{
    content: '';
    width: 240px;
    height: 200px;
    max-width: 24vw;
    max-height: 20vw;
    position: absolute;
    left: 40px;
    top: 0;
    background-image: var(--green-trees);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transform: translateY(-100%);
  }
  .bloqTitle{
    color: white;
  }
  div.Slider{
    padding: 0 0 calc(var(--nav-size) + 60px);
    --nav-background-color: var(--color1);
    --nav-color: var(--grey10);
    .nav.last{
      left: calc(50% + 15px - ((var(--nav-size) + var(--button-gap) + var(--button-gap)) * 3));
    }
    .nav.next{
      right: calc(50% + 15px - ((var(--nav-size) + var(--button-gap) + var(--button-gap)) * 3));
    }
    .SliderInner>ul>li .Item{
      .ItemInner{
        .Title{
          color: white;
          font-size: 22px;
        }
        &::before, &::after {
          background-color: rgb(var(--color2));
        }
        .ItemDate{
          font-size: 18px;
          font-weight: 900;
          background-color: rgb(var(--color2));
          padding: 16px 0 18px;
          d, i, &:not(:has(i))::after, &:not(:has(i))::before{
            color: white !important;
          }
          d:first-child, d:nth-child(2){
            color: rgb(var(--color1)) !important;
          }
        }
        .ItemContent .paracontent .cardBottomLinks a.downloadics{
          color: white;
          text-transform: none;
          font-size: 17px;
          &::after{
            background-color: rgb(var(--color3));
            height: 20px;
            color: white;
            content: '\2b';
            width: 20px;
            border-radius: 50%;
            font-size: 10px;
            display: grid;
            place-items: center;
          }
        }
      }
    }
  }
  .filterSourceSideBySideButtons .sourceButtonWrapper .sourceLink, .filterSourceSideBySideButtons .sourceButtonWrapper .calendarPageLink{
    height: unset;
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    border: 0px solid transparent;
    color: white;
    font-size: var(--button-font-size);
    background-color: rgb(var(--button-background-color));
    transform: translateY(2px);
  }
}

/* NEWS */

body section.DataBloq{
  padding-bottom: 160px !important;
  &::before{
    content: '';
    width: 240px;
    height: 200px;
    max-width: 24vw;
    max-height: 20vw;
    position: absolute;
    right: 40px;
    bottom: 0px;
    background-image: var(--green-trees);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
  }
  .bloqTitle{
    text-align: center;
    span{
      margin-right: 10px;
    }
    &::after{
      content: 'Read our latest stories to discover the incredible achievements, projects, and daily moments of our community.';
      display: grid;
      text-align: center;
      padding: 10px 20px 30px;
      max-width: 60ch;
      margin: 0 auto;
      font-family: var(--font-normal);
      font-weight: 900;
      font-size: calc((var(--fs5) + var(--fs6)) / 2);
      line-height: 1.2em;
    }
  }
  div.Slider{
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 0 60px;
    --general-border-radius: 8px;
    --SliderGridGap: 4px;
    --SliderRowHeight: 430px;
    --SliderItemMinWidth: 280px;
    .nav{
      top: auto;
      bottom: 0;
      --nav-background-color: transparent;
      &.last{
        left: calc(50% - 45px);
      }
      &.next{
        right: calc(50% - 45px);
      }
    }
    .SliderInner > ul > li .Item{
      .ItemBefore{
        height: 200px;
        border-radius: var(--general-border-radius);
        left: 20px;
        right: 20px;
        transition: 0.2s;
      }
      .ItemInner{
        background-color: transparent;
        height: 430px !important;
        justify-content: flex-start;
        padding-inline: 20px;
        padding-top: 220px;
        .ItemDate{
          background-color: rgb(var(--button-background-color));
          padding: var(--button-padding);
          font-size: var(--button-font-size);
          border-radius: var(--button-border-radius);
          position: absolute;
          bottom: 20px;
          left: 20px;
          width: fit-content;
          min-width: unset;
          color: white;
          font-weight: 100;
          transition: 0.2s;
          &::after{
            content: 'READ MORE';
          }
          d{
            display: none;
          }
          &:hover{
            background-color: rgb(var(--button-background-color-hover));
          }
        }
        .Title{
          color: rgb(var(--color2));
          font-size: var(--fs3);
          font-family: var(--font-heading);
          text-align: left;
        }
        .ItemContent{
          opacity: 1;
          max-height: none;
          margin-top: 0;
          text-align: left;
        }
      }
      &:hover{
        .ItemBefore{
          height: 450px;
          left: -10px;
          right: -10px;
        }
        .ItemInner{
          background: linear-gradient(rgba(var(--color1),0),rgba(var(--color1),1));
          .ItemContent{
            .paracontent{
              color: white;
            }
          }
        }
      }
    }
  }
}

/* VALUES */

body section.mod_simple_concertina{
  padding-top: 0px !important;
  div.Concertina>ul>li{
    min-width: 180px;
    .Item{
      .ItemBefore::after{
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(var(--color1),0),rgba(var(--color1),0) 50%, rgba(var(--color1),0.8));
      }
      .ItemInner{
        min-width: 160px;
        max-width: 160px;
        transform: translateY(calc(100% - 10em - 70px));
        padding-block: 70px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &::before{
          opacity: 0;
          background-color: rgb(var(--color1));
        }
        .Title{
          font-family: var(--font-cursive);
          font-size: var(--fs1);
          margin-bottom: 0;
          flex: 0 0 1.5em;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          overflow: visible;
        }
        .ItemSubtitle{
          font-family: var(--font-heading);
          color: rgb(var(--color1));
          font-size: var(--fs1);
        }
        .ItemContent{
          flex: 1 1 50%;
          font-family: var(--font-normal);
          font-weight: 900;
          font-size: calc((var(--fs5) + var(--fs6)) / 2);
          line-height: 1.2em;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          .paracontent{
            line-height: 1.2em;
          }
        }
      }
      &:hover{
        .ItemInner{
          transform: translateY(0%);
          &::before{
            opacity: 0.8;
          }
        }
      }
    }
    &:first-child{
      &:hover{
        flex: 4 4 4px;
      }
      .Item{
        .ItemInner{
          transform: translateY(0%);
          &::before{
            background-color: rgb(var(--color2));
            opacity: 1;
          }
          &::after{
            content: '';
            width: calc(100% + 80px);
            height: 200px;
            position: absolute;
            left: -40px;
            bottom: 0px;
            background-image: var(--white-trees);
            background-size: contain;
            background-position: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0.15;
          }
          .ItemContent{
            position: relative;
            z-index: 1;
            flex: 1 1 auto;
            opacity: 1;
            transform: translateY(0);
            text-align: left;
            color: rgb(var(--color4));
          }
          .Title{
            position: relative;
            z-index: 1;
            margin-top: 50px;
            flex: 1 1 auto;
            display: block;
            text-align: left;
            line-height: 0.1em;
            span{
              font-family: var(--font-heading);
              color: rgb(var(--color1));
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1080px){
  body section.mod_simple_concertina {
    div.Concertina>ul>li {
      min-width: 275px;
      .Item .ItemInner{
        min-width: 255px;
        max-width: 255px;
      }
    }
  }
}

@media screen and (max-width: 830px){
  body section.mod_simple_concertina {
    div.Concertina>ul>li {
      min-width: 210px;
      .Item .ItemInner{
        min-width: 190px;
        max-width: 190px;
      }
    }
  }
}

/* LINKS */

body section.mod_sideswipe_concertina{
  &::before, &::after{
    content: '';
    width: 480px;
    height: 400px;
    max-width: calc(48vw - 60px);
    max-height: 40vw;
    position: absolute;
    left: 40px;
    bottom: 160px;
    background-image: var(--green-trees);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    visibility: visible;
    opacity: 0.05;
  }
  &::after{
    left: auto;
    right: 40px;
  }
  padding-bottom: 0px !important;
  .bloqTitle{
    text-align: center;
    span{
      margin-right: 10px;
    }
    &::after{
      content: 'Discover our educational journeys and explore the distinct stages of learning at The Pines.';
      display: grid;
      text-align: center;
      padding: 10px 20px 30px;
      max-width: 50ch;
      margin: 0 auto;
      font-family: var(--font-normal);
      font-weight: 900;
      font-size: calc((var(--fs5) + var(--fs6)) / 2);
      line-height: 1.2em;
    }
  }
  div.Concertina{
    margin: 0;
    & > ul{
      gap: 20px;
      &::before{
        content:'';
        position: absolute;
        bottom: 0;
        height: 160px;
        left: -100vw;
        right: -100vw;
        background-color: rgb(var(--color1));
      }
      & > li{
        border-radius: 8px;
        height: 280px;
        &:hover{
          flex: 4 4 4px;
        }
        .Item{
          .ItemBefore::after{
            background: linear-gradient(0deg, rgba(var(--color1),0.7) 0, rgba(var(--color1),0) 90%);
          }
          .ItemInner{
            padding: 0 0 25px;
            &::before{
              width: 0;
            }
            .Title{
              font-size: var(--fs1); 
              text-transform: none;
              line-height: 1em;
              margin-bottom: 0px;
              padding-inline: 25px;
            }
            .ItemContent{
              font-family: var(--font-cursive);
              font-size: var(--fs3);
              padding-inline: 25px;
              margin-bottom: -10px;
            }
            .popbutton{
              font-size: var(--button-font-size);
              padding: var(--button-padding);
              border-radius: var(--button-border-radius);
              border: 1px solid white;
              min-width: unset;
              color: white;
              width: fit-content;
              position: relative;
              left: 25px;
              margin-top: -42px;
              bottom: -40px;
              opacity: 0;
              transition: 0.2s;
              &::before{
                content: 'FIND OUT MORE';
              }
              &:hover{
                background-color: white;
                color: var(--item-color);
              }
            }
          }
          &:hover{
            .ItemInner{
              .popbutton{
                opacity: 1;
                bottom: 0px;
                margin-top: 25px;
              }
            }
          }
        }
      }
    }
  }
}