@import "betterschool-data-detail-header";
@import "betterschool-data-base";

.#{$ns}boardingschool {
  &--detail {

    @include detailHeader;

    .logo {
      @include media-breakpoint-down(lg) {
        width: 70%;
      }
    }

    iframe {
      height: 100vw;

      @include media-breakpoint-up(md) {
        height: 700px;
      }
    }

    &__logo-text {
      font-size: rem(21);
      padding-left: 0;
      font-family: $bsi-font_family_sans;
    }

    &__subline {
      @include subheader(26);
    }

    &--short-description {
      .info-text strong, h2, p strong {
        @include subheader(20, 1, 1);
      }

      p ~ .info-text, .test, h2, p strong  {
        margin-top: rem(46);
      }

      &.below {
        .item {
          margin-bottom: rem(25);
        }

        @include media-breakpoint-up(md) {
          display: block;
          columns: 2 auto;

          .item {
            break-inside: avoid;
            margin-bottom: rem(50);

            strong:first-of-type {
              margin-top: 0;
            }
          }
        }
      }
    }

    &__icons {
      @include icons-on-hr();
    }

    &__overview {
      background-color: #0F225B17;
      .row {
        --bs-gutter-x: 0;
      }


      h3 {
        line-height: 1.2;
        margin: rem(20);
        padding: 0;
      }

      i.bi {
        font-size: 4rem;
      }

      dl {
        padding: 0;
        //width: 95%;
      }

      dt {
        text-transform: uppercase;
        font-family: $font-family-sans-serif;
        font-weight: 400;
        padding-left: rem(20);

        .#{$ns}area-gb & {
          background-color: $bsi_color_blue;
          color: $bsi-color_white;
        }

        .#{$ns}area-usa & {
          background-color: $bsi_color_red;
          color: $bsi-color_white;
        }

        .#{$ns}area-can & {
          background-color: $bsi_color_red;
          color: $bsi-color_white;
        }

        .#{$ns}area-lc & {
          background-color: $bsi_color_green;
          color: $bsi-color_white;
        }
      }

      dd {
        padding: 0 0 rem(15) rem(20);
      }

      &.row > * {
        padding: 0;
      }

      .note {
        padding: 0 15px;
        font-size: rem(12);
      }
    }

    &--references {
      .h1, h2 {
        margin-bottom: rem(16);

        @include media-breakpoint-up(md) {
          margin-bottom: rem(26);
        }
      }

      &--item {
        color: $bsi-color_blue;

        &__text {
          font-size: rem(30);
          font-family: $bsi-font_family_italic;
          letter-spacing: 0px;
          line-height: rem(35);
          font-weight: 600;

          @include media-breakpoint-up(md) {
            font-size: rem(48);
            line-height: rem(65);
          }
        }
      }
    }

    @include media-breakpoint-down(md) {
      .#{$ns}references {
        &-video {
          &--slider {
            ul.slick-dots {
              width: calc(100vw - 25px);
            }
          }
        }
      }
    }

    #map {
      height: 300px;

      @include media-breakpoint-up(xl) {
        height: 800px;
      }
    }
  }
}