/* Story & episode page styles */

body {
  background-color: var(--color-bg-gray);
}

.story-primary-no-caption {
  margin-bottom: 1rem;
}

.story-content {
  border-radius: 0;
  position: relative;
  background-color: #fff;
  padding: var(--gutter);
  width: auto;
}

.story-content:has(.premium-underwriting:has(iframe)) {
  padding-top: 2.5rem;
  background-image:
    linear-gradient(
      to bottom, 
      #393838 25px, /* color of triangle in header bg */
      transparent 25px  /* UW ad height */
    );
}
.story-content .premium-underwriting:has(iframe) {
  position: absolute;
  top: -2.5rem;
  right: -1rem;
  min-width: 320px; /* UW ad width */
}

.story-collection {
  margin-bottom: 0.5rem;
}

.story-collection a {
  display: block;
  color: var(--color-mpr-button-blue);
}

.story-collection a::before {
  display: inline-block;
  content: '◢';
  transform: scale(0.75);
  margin-right: 0.25rem;
}

.collection-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-white);
  background-color: var(--color-mpr-green-med);
  padding: 1.125rem;
  margin-inline: calc(-3 * var(--gutter));
  margin-bottom: 1.125rem;
  position: relative;
  font-weight: 600;
}

.collection-banner-first-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 0.75rem;
}

.collection-banner-logo {
  display: inline-block;
}

.collection-banner-logo img {
  width: 14rem;
  height: auto;
}

.collection-banner img {
  color: var(--color-white)
}

.collection-banner-images img {
  max-height: 7rem;
}

.collection-banner-images {
  display: flex;
}

.story-meta {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--color-mpr-dark-gray);
}

.story-meta .story-updated {
  color: var(--color-black);
  text-transform: uppercase;
}

.story-meta > div + div::before {
  content: '·';
  margin-right: 0.5rem;
}

.story-byline a {
  color: var(--color-mpr-dark-gray);
}

.story-subtitle {
  margin-top: .75rem;
}

.story-primary-visual .figure {
  margin-top: 0;
}

.story-audio {
  margin-block: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.story-audio .audio-player-title {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-mpr-dark-gray);
  margin-left: 1rem;
}

.story-audio-save-container {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  margin-block: 0;
}

.story-audio-save-container:has(.story-audio) {
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 0;
  margin-top: 0;
}

@media (min-width: 60em) {
  .story-audio-save-container:has(.story-audio) {
    flex-wrap: nowrap;
  }
}

.story-body p,
.transcript .transcript_text {
  /* give the text a little more breathing room */
  font-size: var(--font-size-lg);
  line-height: var(--line-height-xl);
  margin: var(--line-height-xl) auto;
  max-width: 40rem;
  text-wrap: pretty;
}

.story-body .figure:not(.figure-right):not(.figure-left) {
  margin: .188rem 0 var(--line-height-xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-mpr-dark-gray);
}

.story-body .figure img {
  border-radius: 0.1875rem;
}

.story-body .figure figcaption {
  margin-block: 0.25rem;
  padding: 0;
}

.story-body .figure .figure_credit {
  display: inline-block;
  color: var(--color-mpr-dark-gray);
}

.story-body .figure:has(>audio):not(.figure-right):not(.figure-left) {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--line-height-xl);
}

.story-body .figure audio {
  width: 100%;
}

.story-body .twitter-tweet,
.story-body .instagram-media {
  /* !important because some embed codes add explicit margin styles by default */
  margin-inline: auto !important;
}

.story-body .customHtml:has(> iframe),
.story-body .customHtml *:has(> iframe) {
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.story-body .customHtml iframe {
  margin-inline: auto;
}

.story-quick-read {
  margin-block: var(--line-height-lg);
  padding: var(--line-height-sm);
  background-color: var(--color-bg-gray);
  border-radius: 0.1875rem;
  display: flex;
  flex-direction: column;
  gap: var(--line-height-sm);
  align-items: flex-start;
}

.story-quick-read-label {
  color: #fff;
  background-color: var(--color-mpr-red);
  margin: 0;
  padding: .4rem .6rem;
  border-radius: .1875rem;
}

.story-quick-read-content {
  font-weight: 600;
  text-wrap: pretty;
}

.story-content .youtube iframe,
.story-content iframe[title="YouTube video player"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.story-content .vimeo iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.story-content .amat-oembed {
  display: flex;
  justify-content: center;
  text-align: center;
}

.story-body blockquote {
  margin: 1.5em auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  max-width: 40rem;
  position: relative;
  color: var(--color-mpr-charcoal);
}

.story-body blockquote cite {
  padding-left: 2.5rem;
  margin: 1em auto;
  max-width: 40rem;
  position: relative;
}

.story-body blockquote::before, .story-body blockquote::after {
  color: var(--color-mpr-blue);
  position: absolute;
}

.story-body blockquote p:first-of-type::before {
  content: url("/img/quote-open.svg");
  padding-right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
}

.story-body blockquote p:last-of-type::after {
  content: url("/img/quote-close.svg");
  padding-left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  right: 0;
  bottom: 3rem;
}

.story-body figure .apm-video iframe {
  width: 100%;
  padding: 0rem;
}

@media (max-width: 48em) {
  .story-body blockquote {
    margin: 1em auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .story-body blockquote cite {
    padding-left: 2rem;
  }

  .story-body blockquote p::before {
    padding-right: .5rem;
  }

  .story-body blockquote p::after {
    padding-left: .5rem;
  }
}

@media (min-width: 30em) {
  .story-quick-read {
    flex-direction: row;
  }

  .story-quick-read-label {
    width: min-content;
    padding: .5rem .6rem .4rem .7rem;
    border-radius: .1875rem;
  }

  .story-quick-read-label span {
    letter-spacing: .2em;
  }

  .story-audio .audio-player-title {
    margin-left: 0;
    margin-right: .5rem;
  }
}

@media (min-width: 40em) {
  .story-content {
    border-radius: 3px;
    margin-inline: 0;
  }
}

@media (min-width: 48em) {
  .collection-banner {
    flex-direction: row;
    padding: 0;
    margin-inline: 0;
  }

  .collection-banner-first-area {
    flex-direction: row;
    gap: 3rem;
  }
}

.story-content .related,
.story-content *[class^="apm-related"] {
  width: auto;
  max-width: 100%;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

.related-teaser,
.apm-related-list-title {
  font-weight: 600;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.related-teaser:not(:empty) + *,
.apm-related-list-title:not(:empty) + * {
  margin-top: 0.5rem;
}


.related_prefix,
.apm-related-link-prefix {
  display: inline-block;
  margin-right: 1ch;
  font-weight: 600;
}

.related_prefix:empty,
.apm-related-link-prefix:empty {
  display: none;
}

.related_link .icon {
  vertical-align: -0.15em;
  width: 1em;
  height: 1em;
}

.apm-style-box > *:first-child {
  margin-top: 0;
}
.apm-style-box > *:last-child {
  margin-bottom: 0;
}

.apm-style-box.dek,
.apm-style-box.dek-box,
.apm-style-box.outline-callout,
.apm-style-box.outline-callout-box,
.apm-style-box.solid-callout,
.apm-style-box.solid-callout-box {
  max-width: 100%;
  margin: var(--line-height-xl) 0;
  padding: var(--line-height-xl) var(--gutter);
  font-size: var(--font-size-xl);
  background-color: var(--color-mpr-blue-trans-bg);
  border-radius: .313rem;
}
.apm-style-box.outline-callout,
.apm-style-box.outline-callout-box {
  background-color: transparent;
  border: .094rem solid var(--color-mpr-blue);
}
.apm-style-box.dek p,
.apm-style-box.dek-box p,
.apm-style-box.outline-callout p,
.apm-style-box.outline-callout-box p,
.apm-style-box.solid-callout p,
.apm-style-box.solid-callout-box p {
  max-width: 100%;
  font-size: var(--font-size-xl);
}

.apm-style-box.row, 
.apm-style-box.row-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--line-height-xl) / 2);
  width: 100%;
}
.apm-style-box.column, 
.apm-style-box.column-box {
  display: flex;
  flex-direction: column;
  gap: calc(var(--line-height-xl) / 2);
}

.apm-style-box.marginBottom, 
.apm-style-box.marginBottom-box {
  margin-bottom: calc(var(--line-height-xl) * 2);
}
.apm-style-box.marginTop, 
.apm-style-box.marginTop-box {
  margin-top: calc(var(--line-height-xl) * 2);
}

.apm-style-box.pullquote, 
.apm-style-box.pullquote-box {
  border-bottom: .25rem solid var(--color-mpr-yellow);
  border-top: .125rem solid var(--color-mpr-red);
  padding: var(--line-height-xl) var(--gutter);
}

.apm-style-box.quote > p, 
.apm-style-box.quote-box > p {
  color: var(--color-mpr-button-blue);
  font-size: var(--font-size-xl);
}
.apm-style-box.cite > p, 
.apm-style-box.cite-box > p {
  color: var(--color-mpr-dark-gray);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.apm-style-box.story_feature, 
.apm-style-box.story_feature-full, 
.apm-style-box.story_feature-box, 
.apm-style-box.story_feature-full-box {
  margin-inline: 0;
}

.newspartners {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem;
}

.html-textbox-container {
  margin-top: 1rem;
}