SU-SWS/stanford_profile_helper

@charset 'UTF-8';

@import "./stanford_courses.config";

// Override the card display
// Added it this way to keep from very deep nesting.
.su-card {
  &.su-course-vertical-teaser {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "header" "headline";
  }
}

.su-course-vertical-teaser {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "header" "headline";
  @include modular-spacing("padding-top", 1);
  @include modular-spacing("margin-bottom", 4);

  // Put the focus on the whole card
  &:focus-within {
    outline: -webkit-focus-ring-color auto 1px;
  }

  .su-course-vertical-teaser__link {
    &::after {
      display: none;
    }
  }

  .su-course-header {

    @include modular-spacing("margin-bottom", 1);
    @include modular-spacing("margin-left", 2);
    @include modular-spacing("margin-right", 2);

    order: -1;

    .su-course-subject {
      display: inline;
    }

    .su-course-code {
      display: inline;
    }

    .su-course-academic-year {
      display: inline;
    }
  }

  .su-course-link {
    h2,
    h3 {
      @include type-c;
      @include modular-spacing("margin-bottom", 1);
      @include modular-spacing("margin-left", 2);
      @include modular-spacing("margin-right", 2);

      &.su-link--external {
        &::after {
          background-color: $su-color-bright-red;
          height: 20px;
          width: 20px;
        }
      }
    }

    h3 {
      font-size: 1.4em;
    }

    a {
      color: $su-color-bright-red;
      font-weight: $su-font-bold;
      text-decoration: none;

      &:hover,
      &:focus,
      &:active {
        text-decoration: underline;
      }
    }
  }
}