/*
  News article page (layout NewsArticle.aspx) and the body markup written by
  js/newsroom-render.js. capricorn.com.na CI: Calibri Light headline, slate navy text, flat.

  Image placement (the editor's choices):
    .nwa-figure--left / --right    floats; the following text wraps beside it
    .nwa-figure--center            centred on its own line, no wrapping
    .nwa-figure--full              the full width of the text column
    --small / --medium / --large   a third / half / two thirds of the column
  Below 600px every image is full width: wrapped text beside a phone-width image is unreadable.
  Galleries (.nwa-gallery) are one row, and stack below 600px too.
*/
/* 1320px page: an 840px text column (a comfortable 80-90 characters a line) and a 340px
   "More news" column. On a wide screen the text never stretches into hard-to-read lines. */
.sp-app.nwa {
  --app-page-max: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

.nwa .nwa-article {
  max-width: 840px;
}

/* Long unbroken text (an address, a word without spaces) wraps instead of spilling out */
.nwa .nwa-article,
.nwa .nwa-more {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Header ---- */
.nwa .nwa-header {
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--app-rule);
}

.nwa .nwa-section {
  margin: 0 0 var(--space-2);
  color: var(--app-red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nwa .nwa-section:empty {
  display: none;
}

.nwa .nwa-section a:is(:link, :visited) {
  color: var(--app-red) !important;
}

.nwa .nwa-title {
  margin: 0;
  font-family: var(--app-font-light);
  font-size: 38px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--app-navy);
}

.nwa .nwa-meta {
  margin: var(--space-3) 0 0;
  color: var(--app-muted);
  font-size: 15px;
}

/* ---- Body ---- */
/* SharePoint wraps the field in an inline element: make it a block so floats behave */
.nwa .nwa-body .ms-rtestate-field {
  display: block !important;
}

.nwa .nwa-body,
.nwa .nwa-body .ms-rtestate-field {
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: 17px;
  line-height: 1.65;
}

.nwa .nwa-body .nwa-p,
.nwa .nwa-body .nwa-legacy p {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  line-height: 1.65;
  color: var(--app-text);
}

.nwa .nwa-body .nwa-h2,
.nwa .nwa-body .nwa-h3 {
  clear: both;
  color: var(--app-navy);
}

.nwa .nwa-body .nwa-h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--app-font-light);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
}

.nwa .nwa-body .nwa-h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--app-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.nwa .nwa-body a:is(:link, :visited) {
  color: var(--app-navy) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--app-red);
}

.nwa .nwa-body a:hover {
  color: var(--app-red) !important;
}

/* Lists and quotes beside a wrapped image stay clear of it */
.nwa .nwa-body :is(.nwa-list, .nwa-quote, .nwa-downloads) {
  display: flow-root;
}

.nwa .nwa-body .nwa-list {
  margin: 0 0 var(--space-4);
  padding: 0 0 0 var(--space-5);
}

.nwa .nwa-body .nwa-list li {
  margin: 0 0 var(--space-2);
}

.nwa .nwa-body .nwa-quote {
  margin: var(--space-5) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--app-red);
}

.nwa .nwa-body .nwa-quote p {
  margin: 0;
  font-family: var(--app-font-light);
  font-size: 22px;
  line-height: 1.4;
  color: var(--app-navy);
}

.nwa .nwa-body .nwa-quote .nwa-quote__cite {
  margin: var(--space-2) 0 0;
  font-family: var(--app-font);
  font-size: 15px;
  color: var(--app-muted);
}

.nwa .nwa-body .nwa-rule {
  clear: both;
  height: 0;
  margin: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--app-rule);
}

.nwa .nwa-body .nwa-clear {
  clear: both;
}

/* ---- Images ---- */
.nwa .nwa-body .nwa-figure {
  margin: var(--space-1) 0 var(--space-5);
}

.nwa .nwa-body .nwa-figure__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.nwa .nwa-body .nwa-figure__caption {
  margin: var(--space-2) 0 0;
  color: var(--app-muted);
  font-size: 14px;
  line-height: 1.4;
}

.nwa .nwa-body .nwa-figure--small { width: 33%; }
.nwa .nwa-body .nwa-figure--medium { width: 50%; }
.nwa .nwa-body .nwa-figure--large { width: 66%; }

.nwa .nwa-body .nwa-figure--left {
  float: left;
  margin: var(--space-1) var(--space-5) var(--space-3) 0;
}

.nwa .nwa-body .nwa-figure--right {
  float: right;
  margin: var(--space-1) 0 var(--space-3) var(--space-5);
}

.nwa .nwa-body .nwa-figure--center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.nwa .nwa-body .nwa-figure--full {
  clear: both;
  width: 100%;
}

/* Gallery: 2 or 3 photos in a row at one height. Each item's flex-grow is its width / height
   (inline style, or set by js/newsroom-article.js), so portrait and landscape photos line up. */
.nwa .nwa-body .nwa-gallery {
  clear: both;
  margin: var(--space-1) 0 var(--space-5);
}

.nwa .nwa-body .nwa-gallery__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.nwa .nwa-body .nwa-gallery__item {
  flex: 1 1 0;
  min-width: 0;
}

.nwa .nwa-body .nwa-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.nwa .nwa-body .nwa-gallery__caption {
  margin: var(--space-2) 0 0;
  color: var(--app-muted);
  font-size: 14px;
  line-height: 1.4;
}

/* Migrated content: keep old images inside the column */
.nwa .nwa-body .nwa-legacy img {
  max-width: 100%;
  height: auto;
}

/* ---- Downloads ---- */
.nwa .nwa-body .nwa-downloads {
  margin: 0 0 var(--space-5);
  padding: 0;
  border-top: 1px solid var(--app-rule);
  list-style: none;
}

.nwa .nwa-body .nwa-downloads__item {
  margin: 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--app-rule);
  background: no-repeat left center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330385a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M12 18v-6M9 15l3 3 3-3'/%3E%3C/svg%3E");
}

.nwa .nwa-body .nwa-download:is(:link, :visited) {
  border-bottom: 0;
}

.nwa .nwa-body .nwa-download__meta {
  color: var(--app-muted);
  font-size: 14px;
}

/* ---- Video (16:9) ---- */
.nwa .nwa-body .nwa-video {
  clear: both;
  position: relative;
  margin: 0 0 var(--space-5);
  padding-top: 56.25%;
  background: var(--app-navy);
}

.nwa .nwa-body .nwa-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- More news ---- */
.nwa .nwa-more {
  align-self: start;
  padding: var(--space-5);
  border-top: 3px solid var(--app-navy);
  background: var(--app-surface-alt);
}

.nwa .nwa-more__title {
  margin: 0 0 var(--space-3);
  font-family: var(--app-font-light);
  font-size: 24px;
  font-weight: 300;
  color: var(--app-navy);
}

.nwa .nwa-more__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nwa .nwa-more__item + .nwa-more__item {
  border-top: 1px solid var(--app-rule);
}

.nwa .nwa-more__link:is(:link, :visited) {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--app-navy) !important;
}

.nwa .nwa-more__link:hover .nwa-more__headline {
  color: var(--app-red);
}

.nwa .nwa-more__thumb {
  display: block;
  width: 96px;
  height: 50px;
  object-fit: cover;
  background: var(--app-navy);
}

.nwa .nwa-more__headline {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}

.nwa .nwa-more__date {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--app-muted);
  font-size: 13px;
}

/* ---- Narrow screens ---- */
@media (max-width: 991px) {
  .sp-app.nwa {
    grid-template-columns: minmax(0, 1fr);
  }

  .nwa .nwa-article {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .nwa .nwa-title {
    font-size: 30px;
  }

  .nwa .nwa-body .nwa-figure:is(.nwa-figure--left, .nwa-figure--right, .nwa-figure--center) {
    float: none;
    width: 100%;
    margin: var(--space-1) 0 var(--space-4);
  }

  /* Gallery photos one under the other, each full width */
  .nwa .nwa-body .nwa-gallery__row {
    flex-direction: column;
  }

  .nwa .nwa-body .nwa-gallery__item {
    width: 100%;
  }
}