/** @define Article; weak */

@media (--viewportLg) {
  .Article {
    border-bottom: 1px solid var(--colorLightGrey);
  }
}

.Article-title {
  font-family: var(--headingFontFamily);
  color: var(--colorDarkBlue);
  margin-bottom: var(--spaceSm);
}

.Article-title a {
  color: inherit;
}

@media (--viewportLg) {
  .Article-title {
    margin-bottom: var(--spaceMd);
  }
}

.Article-date {
  color: var(--colorGrey);
  margin-bottom: var(--spaceSm);
}

@media (--viewportLg) {
  .Article-date {
    display: none;
  }
}

.Article-dateText {
  line-height: 2;
  margin-left: 10px;
  vertical-align: top;
}

.Article p {
  margin-bottom: var(--spaceSm);
}

@media (--viewportLg) {
  .Article p {
    margin-bottom: var(--spaceMd);
  }
}

/**
 * Link styles
 */

.Article-content a {
  color: var(--colorLightBlue);
  position: relative;
  transition: text-shadow var(--transitionMd) ease-out;
}

.Article-content a::after {
  background-color: var(--colorLightBlue);
  bottom: -1px;
  content: '';
  left: 0;
  height: 2px;
  opacity: 0;
  position: absolute;
  right: 0;
  transition: opacity var(--transitionMd) ease-out;
}

.Article-content a img {
  transition:
    box-shadow var(--transitionMd) ease-out,
    filter var(--transitionMd) ease-out;
}

/**
 * Focus states
 */

.Article-content a:focus {
  text-shadow: 1px 1px 1px var(--colorLightBlue);
}

.Article-content a:focus img {
  box-shadow: 0 0 12px var(--colorLightBlue);
  filter: brightness(125%);
}

/**
 * Hover states
 */

.Article-content a:hover::after {
  opacity: 1;
}

/**
 * Wordpress overrides
 */

.Article .twitter-tweet,
.Article .wp-caption {
  background-color: #fff;
  border: 1px solid var(--colorLightGrey);
  border-radius: 4px;
  margin: 0 0 var(--spaceSm);
  padding: var(--spaceSm);
  text-align: center;
}

.Article .wp-caption a::after {
  display: none;
}

.Article [class*="wp-caption"] {
  width: auto !important;
}

@media (--viewportLg) {
  .Article .twitter-tweet,
  .Article .wp-caption {
    margin: 0 0 var(--spaceMd);
    padding: var(--spaceMd);
  }
}

.Article .wp-caption-text {
  font-family: var(--headingFontFamily);
  margin: var(--spaceSm) 0 0;
}