Cards: Flex Overlap

$card__internal-spacing: $spacing-sm;

.card {
  // $theme-colours: see __vars/colours

  display: block;
  position: relative;
  --accent-color: #{$primary};
  margin-bottom: $spacing-xl;

  @include clearfix;

  a:not(.button) {
    text-decoration: none;
    border-bottom: none;

    &:hover {
      text-decoration: underline;
    }
  }

  p {
    margin-bottom: $card__internal-spacing;
  }

  &__content {
    padding: 0 calc(#{$card__internal-spacing} + 2.5%);

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    margin-top: 0;
    margin-bottom: $spacing-md;

    a {
      color: #{$primary};
      color: var(--accent-color);
    }
  }

  &__figure {
    &--video {
      position: relative;
      background-color: #CCC;

      &:hover {
        cursor: pointer;
      }

      &:after {
        content: '';
        position: absolute;
        width: $spacing-4xl;
        height: $spacing-4xl;
        max-width: 50%;
        max-height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('#{$image-theme-directory-icon}/icon-play-circle-neutral-light.svg') no-repeat center center;
        background-size: contain;
        z-index: 1;
        pointer-events: none;
      }

      & img {
        color: #CCC;
      }
    }
  }

  &__clearing-flag {
    background-color: $red;
    color: #FFF;
    padding: 0.25rem 0.5rem;
    font-weight: 400;
  }

  // CG: A card across multiple days will clash with the one below if there is no image, so add a minimum height if necessary
  &--multiple-days {
    min-height: 210px;
  }

  //--  Child elements affected by accent colour

  .blockquote__title {
    color: var(--accent-color);
  }

  .meta--inline-dd,
  .meta--inline {
    dd:before {
      color: var(--accent-color);
    }
  }

  //--  ACCENT THEMES
  @each $name, $value in $card-accent-colors {
    &--#{$name} {
      --accent-color: #{$value};

      &.card--ksp .card--ksp__icon-container > .icon svg * {
        @if (choose-contrast-color($value) == white) {
          stroke: white!important;
          fill: white!important;
          color: white;
        }
        @else {
          stroke: black!important;
          fill: black!important;
          color: black;
        }
      }
    }
  } 

  @each $name, $value in $theme-colours {
    &--#{$name} {
      --accent-color: #{$value};

      svg {
          fill: #{$value};
      }
    }
  }

  &--bg-offwhite {
    background-color: $grey-50-pc;

    & .card__content {
      padding: $card__internal-spacing * 2;
    }

    & .card__figure {
      margin-bottom: 0;
    }
  }
}

a.card {
  text-decoration: none;

  .card__title {
    color: #{$primary};
    color: var(--accent-color);
  }

  &:hover {
    color: $text-color;

    .card__title {
      text-decoration: underline;
    }
  }
}

//--  VARIANTS

.card--flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row-reverse;

  .card__figure {
    flex: 1 1 33%;
  }

  .card__content {
    flex: 99 1 17.5em;
  }
}

.card--flex-overlap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row-reverse;
  padding-bottom: $spacing-sm;

  .card__figure {
    flex: 1 1 33%;
  }

  .card__content {
    flex: 99 1 17.5em;
  }

  .card__figure {
    margin-bottom: -#{$spacing-sm};
  }
}

// In Razor, attach background colours only if there are more than one
.card--testimonial {
  padding-bottom: $card__internal-spacing;

  & .cite {
    margin-bottom: $spacing-2xs;
    color: var(--accent-color);
  }

  @each $name, $value in $testimonial-card-colors {
    &.card--bg-#{$name} {
      background-color: map_get($value, "background");
      color: map_get($value, "color");
      padding: $spacing-2xs $spacing-lg $spacing-lg $spacing-lg;

      @media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
        & .card__content {
          padding-left: 0;
          margin-left: -$spacing-4xl;
        }
      }

      & .blockquote__prose  {
        margin-top: 0;
      }

      & q {
        color: map_get($value, "color");
      }

      & strong, & .cite { 
        color: map_get($value, "contrast-color");
      }

      & .blockquote__figure img {
        border-bottom: 0;
      }
    }
  }

  .blockquote__figure img {
    border-bottom: $spacing-2xs solid var(--accent-color);
  }
}

.card--pullquote {
  padding-bottom: $card__internal-spacing;
  margin-left: 5%;

  &:before {
    content: '';
    display: block;
    float: left;
    width: 5%;
    margin-right: 1%;
    height: 0;
    padding-bottom: 5%;
    margin-left: -5%;
    background: url('#{$image-theme-directory-icon}/icon-quote-primary.svg') no-repeat center center;
    background-size: contain;
  }

  // These themes need to be updated 'manually' for now, as we're using an svg,
  // and I can't think of a clever way to update dynamically based on the accent var
  // something using inline SVG use/fill, or a mask?
  // Don't forget to add the SVG to the filesystem!

  @each $name, $value in $card-accent-colors {
    &.card--#{$name} {
      &:before {
        background: transparent url('#{$image-theme-directory-icon}/icon-quote-#{$name}.svg') no-repeat center center;
        background-size: contain;
      }
    }
  }
}

.card--contact {
  ul.list--inline {
    padding-left: 1.5em;
    li a {
      text-decoration: none!important;
    }
    .icon {
      font-size: 1.5rem;
    }
  }
  ul.list--icon-bullets {
    li a {
      text-decoration: none!important;
      border-bottom: 1px solid $grey--light
    }
  }
}

.card--course {
  border-left: $border-accent-width solid $primary;
  border-color: var(--accent-color);
}

.card--result {
  // this exists, but doesn't need anything specific (yet)
}

.card--profile {
  padding: $spacing-md;

  /* Needs:
    grey and teal
    grey and burgundy
    teal and neon
    burgundy and neon
  */
  @each $name, $value in $profile-card-themes {
    &.card--#{$name} {
      background: map_get($value, "background");
      border-bottom: $spacing-2xs solid map_get($value, "accent-color");
      margin-left: $spacing-2xl;

      @if (choose-contrast-color(map_get($value, "background")) == white) {
        color: white;

        & .button {
          color: white;
        }
      }

      & .button--outline {
        color: map_get($value, "accent-color");
        border-color: map_get($value, "accent-color");

        &:hover {
          color: black;
        }
      }

      & .title, & .strong {
        color: map_get($value, "accent-color");
      }
    }
  }

  &.card--flex {
    flex-direction: row;
  }

  & .card__figure {
    margin-left: auto;
    margin-right: auto;
    max-width: 15rem;

    /*@media (max-width: (map_get($breakpoint-stages, 'tablet-wide'))) {
      flex: 1 1 25%;
    }*/
  }

  & .title {
    margin-bottom: 0;
  }
}

.card--ksp {
  color: $neutral--primary;
  border-left: none;

  &__icon-container {
    display: table;
    border-radius: 50%;
    background-color: var(--accent-color);
  }

  & .icon {
    display: table-cell;
    vertical-align: middle;
    width: 2em;
    height: 2em;
    
    img, svg {
      width: 60%;
      height: 60%;
      vertical-align: unset;
    }

    svg {
      fill: var(--accent-color);
    }
  }

  & .card__title {
    color: inherit;
    margin-top: $card__internal-spacing * 2;
  }

  &.card--light {

    & .card__title, & p {
      color: white;
    }
}
}

.card--event {
  margin-left: $spacing-4xl;

  .card__figure {
    margin-bottom: #{$spacing-xs};
  }

  .card__date {
    position: absolute;
    top: 0;
    left: -$spacing-4xl;
    width: $spacing-4xl;
    @include typescale('xs');
    padding: $spacing-sm 0;
    color: white;
    background: $primary;
    background: var(--accent-color);
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
  }

  .link--stretched h2 {
    color: $teal;
  }

  a.link--stretched:hover h2 {
    color: $red;
  }

  .card__day {
    display: block;
    font-weight: 500;
    @include typescale('xl');

    @media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
      @include typescale('3xl');
    }
  }

  .card__date-separator {
    display: block;
    font-weight: 500;
    @include typescale('xl');
    padding: $spacing-xs 0;
  }

  @media (min-width: (map_get($breakpoint-stages, 'tablet-wide') + 5rem)) {
    margin-left: $spacing-5xl;

    .card__date {
      left: -$spacing-5xl;
      width: $spacing-5xl;
    }

    .card__day {
      @include typescale('5xl');
    }
  }
}

.card--with-logo {
  border: 0;

  & .card__content {
    max-width: 80%;
    background-color: $grey-50-pc;
    padding: $spacing-xl $spacing-xl $spacing-2xl $spacing-xl;
  }

  & a:hover,& a:hover .card__content p {
    text-decoration: none;
  }

  & img {
    float: right;
    margin-top: -$spacing-xl;
    max-height: 100px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    background: #FFF;
  }

}

.card__video.card__figure {
  @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
    padding-bottom: 50%;
    position: relative;
    height: 0;
  }
  & iframe {
    width: 100%;
    height: 100%;
    @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
      padding-bottom: 50%;
      position: absolute;
    }
  }
}

.card--virtual-tour {
    min-height: 20rem;
    position: relative;
    overflow: hidden;
    flex-direction:  row;
    background-color: $grey-50-pc;
    background-size: cover!important;
    background-position: center center;
    background-repeat: no-repeat;
    border-left: none;
    border: $spacing-4xs solid $teal;

    @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
      background-image: none!important;
      background-color: $grey-50-pc!important;
    }

    .card__content {
      max-width: 25rem;
      z-index: 1;
      background: rgba(255,255,255,0.9);
      padding: $spacing-xl $spacing-xl $spacing-xs $spacing-xl;

      @media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
        margin-top: $spacing-2xl;
        margin-left: $spacing-2xl;
      }

      > .title {
        color: $teal;
      }

      > :last-child {
        margin-top: $spacing-md;
      }
    }
}

.grid-2-cols\@tablet {
  &  .card__video {
    &.card__figure {
      padding-bottom: 50%;
      position: relative;
      height: 0;
      & iframe {
        position: absolute;
      }
    }
  }
}