/* ConsumerWise News article masthead.
   This file is deliberately scoped to published News articles. */

.news-article .news-story-head{
  background:var(--ink)!important;
  color:#fff!important;
  border-bottom-color:rgba(255,255,255,.14)!important;
}

.news-article .news-story-head h1{
  color:#fff!important;
}

.news-article .news-story-head .eyebrow{
  color:#A9D3D1!important;
}

.news-article .news-story-head .news-standfirst{
  color:rgba(255,255,255,.78)!important;
}

.news-article .news-story-head .news-byline{
  color:rgba(255,255,255,.68)!important;
  border-top-color:rgba(255,255,255,.24)!important;
}

.news-article .news-story-head .news-byline strong{
  color:#fff!important;
}

.news-article .news-story-head .news-byline>*+*{
  border-left-color:rgba(255,255,255,.22)!important;
}

/* Legal citations are primary source callouts, not neutral information boxes. */
.news-article .news-story-body .article-section--legal-reference{
  margin:26px 0!important;
}

.news-article .news-story-body .legal-reference{
  margin:0!important;
  padding:25px 27px!important;
  border:0!important;
  background:var(--teal)!important;
  color:#fff!important;
}

.news-article .news-story-body .legal-reference .component-label{
  margin:0 0 9px!important;
  color:#CFE7E5!important;
}

.news-article .news-story-body .legal-reference h3{
  margin:0 0 10px!important;
  color:#fff!important;
}

.news-article .news-story-body .legal-reference p:not(.component-label){
  margin:0 0 16px!important;
  color:rgba(255,255,255,.86)!important;
}

.news-article .news-story-body .legal-reference a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 0 5px;
  border-bottom:1px solid rgba(255,255,255,.62);
  color:#fff!important;
  font-weight:750;
  text-decoration:none!important;
}

.news-article .news-story-body .legal-reference a:hover{
  border-bottom-color:#fff;
}

/* The shared process list was created for a coloured homepage section.
   News uses it as an editorial sequence, so restore structure and dark text. */
.news-article .news-story-body .article-section--steps{
  margin:28px 0!important;
}

.news-article .news-story-body .article-section--steps>h2{
  margin:0 0 17px!important;
}

.news-article .news-story-body .process-steps{
  counter-reset:news-article-step;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-top:2px solid var(--ink)!important;
  background:transparent!important;
  color:var(--ink)!important;
  list-style:none!important;
}

.news-article .news-story-body .process-steps li{
  counter-increment:news-article-step;
  display:block!important;
  min-height:220px!important;
  margin:0!important;
  padding:21px 24px 24px 0!important;
  border:0!important;
  border-right:1px solid var(--line-dark)!important;
  background:transparent!important;
  color:var(--ink)!important;
}

.news-article .news-story-body .process-steps li+li{
  padding-left:24px!important;
}

.news-article .news-story-body .process-steps li:last-child{
  border-right:0!important;
}

.news-article .news-story-body .process-steps li:before{
  content:counter(news-article-step,decimal-leading-zero);
  display:block;
  margin:0 0 54px;
  color:var(--teal)!important;
  font-size:.72rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
}

.news-article .news-story-body .process-steps li p{
  margin:0!important;
  color:var(--ink)!important;
  font-size:.95rem!important;
  font-weight:650!important;
  line-height:1.58!important;
}

@media(max-width:760px){
  .news-article .news-story-body .process-steps{
    grid-template-columns:1fr!important;
  }

  .news-article .news-story-body .process-steps li,
  .news-article .news-story-body .process-steps li+li{
    min-height:0!important;
    padding:19px 0 20px!important;
    border-right:0!important;
    border-top:1px solid var(--line-dark)!important;
  }

  .news-article .news-story-body .process-steps li:first-child{
    border-top:0!important;
  }

  .news-article .news-story-body .process-steps li:before{
    margin-bottom:20px;
  }
}

@media(max-width:680px){
  .news-article .news-story-head .news-byline>*+*{
    border-left:0!important;
  }
}

@media print{
  .news-article .news-story-head{
    background:#fff!important;
    color:#111!important;
  }

  .news-article .news-story-head h1,
  .news-article .news-story-head .news-byline strong{
    color:#000!important;
  }

  .news-article .news-story-head .eyebrow,
  .news-article .news-story-head .news-standfirst,
  .news-article .news-story-head .news-byline{
    color:#333!important;
  }

  .news-article .news-story-body .legal-reference{
    padding:4mm!important;
    border:1px solid #999!important;
    background:#fff!important;
    color:#111!important;
  }

  .news-article .news-story-body .legal-reference .component-label,
  .news-article .news-story-body .legal-reference h3,
  .news-article .news-story-body .legal-reference p:not(.component-label),
  .news-article .news-story-body .legal-reference a{
    color:#111!important;
  }

  .news-article .news-story-body .process-steps{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border-top-color:#111!important;
  }

  .news-article .news-story-body .process-steps li,
  .news-article .news-story-body .process-steps li p{
    color:#111!important;
  }
}
