/* Callout - Arthritis is Bullshit */
.callout-section, .release-section {
  margin-bottom: 2em;
}
.callout {
  background-color: #000;
  color: #fff;
  line-height: 3em;
  font-size: 3em;
  font-family: 'Roboto Light', sans-serif;
  text-align: center;
}
.callout .bullshit {
  color:#ffa41f;
}
.callout-text {
  font-size: 1.5em;
}

/* Bench to Bedside webinar promo */
.webinar-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 5em;
}
.webinar-section .info {
  background-color: #e1e1e1;
  padding: 3em;
}
.webinar-section .info .line1 {
  font-family: 'Roboto Light', sans-serif;
  font-size: 2em;
  margin-bottom: 1rem;
}
.webinar-section .info .line2 {
  font-family: 'Roboto Light', sans-serif;
  font-size: 1.5em;
  margin-bottom: 1rem;
}
.webinar-section .graphic {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
}
.webinar-section .buttonset {
  display: grid;
  grid: 1fr / 1fr 1fr;
  gap: 3em;
}
@media screen and (min-width: 992px) {
  .webinar-section {
    flex-direction: row;
  }
  .webinar-section .info,
  .webinar-section .graphic {
    width: 50%;
  }
}
.nitro-nutso {
  border: 0.25em solid #ffa41f;
  padding: 2em;
}
.nitro-nutso .title {
  font-size: 2.25em;
}
/* Capture row - Donate & Subscribe */
.capture-section {
  margin-bottom: 5em;
  display: grid;
  grid: 1fr 1fr / 1fr;   /* on smaller screens, make it 2 rows */
  gap: 1.5rem;
}
.capture-section > * {
  border: 0.25em solid #ffa41f;
  padding: 2em;
  display: grid;
  grid: min-content 1fr / 1fr;
  gap: 3em;
}
.capture-section .donate {
  background-repeat: no-repeat;
  background-position: top right;
}
.capture-section .donate .title {
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.15;
}
.capture-section .donate .hope {
  font-weight: 300;
  font-size: 1.5em
}
.capture-section .donate .copy {
  font-size: 1.25em;
  display: grid;
  grid: 1fr min-content / 1fr;
  gap: 1em;
}
.capture-section .subscribe {
  background-repeat: no-repeat;
  background-position: bottom left;
}
.capture-section .subscribe .title {
  font-size: 2.25em;
}
.capture-section .subscribe .copy {
  font-size: 1.25em;
}
.capture-section .subscribe .gform_wrapper {
  margin-top: 1em;
}
/* Have to copy .btn-yellow-submarine from style.css */
.capture-section .subscribe .gform_button {
  display: block;
  padding: 0.25em 2em;
  border-radius: 1em;
  background-color: #ffa41f;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  border: 0;
}
@media screen and (min-width: 992px) {
  .capture-section {
    grid: 1fr / 1fr 1fr; /* on bigger screens, make it 2 columns */
  }
  .capture-section > * {
    grid: 1fr / 1fr 1fr;
  }
}
/* Podcast section */
/* All of the articles are stacked on top of each other in HTML, but rearranged
 * in the grid to fit the layout
 */
.podcast-section {
  display: grid;
  grid-template-areas:
    'latest-header'
    'latest'
    'past-header'
    'past-1'
    'past-2'
    'past-3'
    'view-all';
  gap: 1.5rem 1.5rem;
  margin-bottom: 5em;
}
.podcast-section::before {
  grid-area: latest-header;
  content: 'Latest Podcast';
}
.podcast-section::after {
  grid-area: past-header;
  content: 'More Podcasts';
  
}
.podcast-section::before,
.podcast-section::after {
  color: #ffa41f;
  border-bottom: 0.25em solid #ffa41f;
  font-size: 0.875em;
  text-transform: uppercase;
  font-weight: bold;
}
.podcast-section img {
  width: 100%;
}
.podcast-section header {
  display: none;
}
.podcast-section article {
  display: grid;
  grid-template-columns: 10em 1fr;
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    'image meta'
    'image link';
  gap: 0.5rem 1.5rem;
}
.podcast-section article a {
  color: inherit;
  font-weight: bold;
}
.podcast-section article:nth-of-type(1) {
  grid-area: latest;
}
.podcast-section article:nth-of-type(2) {
  grid-area: past-1;
}
.podcast-section article:nth-of-type(3) {
  grid-area: past-2;
}
.podcast-section article:nth-of-type(4) {
  grid-area: past-3;
}
.podcast-section article .image {
  grid-area: image;
}
.podcast-section article .image img {
  border: 0.25em solid #000;
}
.podcast-section article .meta {
  grid-area: meta;
}
.podcast-section article .link {
  grid-area: link;
}
@media screen and (min-width: 992px) {
  .podcast-section {
    grid-template-areas:
      'latest-header past-header'
      'latest        past-1'
      'latest        past-2'
      'view-all      past-3';
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 2em repeat(3, 1fr);
  }
  .podcast-section article:nth-of-type(1) {
    grid-area: latest;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'image meta'
      'link meta';
  }
  .podcast-section article:nth-of-type(1) .link {
    text-align: center;
  }
  .podcast-section article:nth-of-type(1) .title {
    font-size: 1.5em;
    margin-bottom: 1rem;
  }
  .podcast-section article:nth-of-type(1) .label {
    display: block;
  }
  .podcast-section article:not(:nth-of-type(1)) {
    grid-template-columns: 6em 1fr 12em;
    grid-template-areas: 'image meta link';
  }
  .podcast-section article:not(:nth-of-type(1)) .link {
    text-align: right;
  }
}
/* Recent News section */
.news-section {
  margin-bottom: 5em;
}
.news-section > header {
  margin-bottom: 1em;
}
.news-section .header {
  color: #ffa41f;
  border-bottom: 0.25em solid #ffa41f;
  font-size: 0.875em;
  text-transform: uppercase;
  font-weight: bold;
}
.news-section .items {
  display: grid;
  gap: 1em;
}
.news-section article {
  border-style: solid;
  border-width: 0 0.125em 0.125em 0.125em;
  border-color: #e1e1e1;
}
.news-section .description {
  padding: 1em;
}
.news-section article header {
  margin: 0 -0.125em;
}
.news-section img {
  width: 100%;
  height: auto;
}
.news-section > footer {
  padding-top: 2em;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 992px) {
  .news-section .items {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Diagnosis section */
.diagnosis-section {
  background-color: #ffa41f;
  display: grid;
  gap: 1em;
}
.diagnosis-section .image {
  display: none;
}
.diagnosis-section .description {
  color: #000;
  padding: 1em;
  font-size: 1.5rem;
}
.diagnosis-section .link {
  display: flex;
  justify-content: center;
  padding-bottom: 1em;
}
@media screen and (min-width: 992px) {
  .diagnosis-section {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr min-content;
  }
  .diagnosis-section .image {
    display: block;
    grid-row: span 2;
  }
  .diagnosis-section .image img {
    width: 100%;
    height: auto;
  }
}