/**
 * News index (template D) and news entry (template E).
 */

/* ---------------------------------------------------------------
 * Filter row
 * ------------------------------------------------------------- */
.sbs-news-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 64px;
}

.sbs-news-filters__events {
  flex: 0 0 auto;
  padding: 14px 26px;
}

/* ---------------------------------------------------------------
 * Featured story
 * ------------------------------------------------------------- */
.sbs-featured {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  margin-bottom: 88px;
}

.sbs-featured__media {
  height: 520px;
}

.sbs-featured__media img {
  transition: transform var(--sbs-dur-slow) var(--sbs-ease);
}

.sbs-featured:hover .sbs-featured__media img {
  transform: scale(1.03);
}

.sbs-featured__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 64px;
  background: var(--sbs-off-white);
}

.sbs-featured__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
}

.sbs-featured__category {
  color: var(--sbs-gold);
}

.sbs-featured__title {
  margin-bottom: 24px;
  font-size: var(--sbs-h2-sm);
  font-weight: var(--sbs-w-medium);
  line-height: var(--sbs-lh-tight);
}

.sbs-featured__text {
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------
 * Card grid
 * ------------------------------------------------------------- */
.sbs-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px var(--sbs-gap-news);
  margin-bottom: 72px;
}

/* ---------------------------------------------------------------
 * Entry — head
 * ------------------------------------------------------------- */
.sbs-entry__header {
  padding-bottom: 0;
}

.sbs-entry__feature {
  margin: 56px 0 0;
}

.sbs-entry__feature-media {
  height: 700px;
}

/* ---------------------------------------------------------------
 * Entry — body
 *
 * Sidebar on the LEFT, which is what the design specifies and is unusual
 * enough to be worth stating.
 * ------------------------------------------------------------- */
.sbs-entry__grid {
  display: grid;
  grid-template-columns: var(--sbs-entry-sidebar) 1fr;
  gap: 96px;
  /* Deliberately NOT `align-items: start` — see .sbs-subnav__grid. The
   * sidebar column has to be as tall as the row or the sticky block inside
   * it has no room to travel. */
}

.sbs-entry__sticky {
  position: sticky;
  top: 120px;
}

.sbs-entry__block {
  margin-bottom: 36px;
}

.sbs-entry__block .sbs-eyebrow {
  margin-bottom: 10px;
}

.sbs-entry__value {
  margin: 0;
  font-size: var(--sbs-body-xs);
  color: var(--sbs-grey-700);
}

/* Contents — no borders, 9px vertical padding, per the design. */
.sbs-contents ul,
.sbs-share ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-contents a {
  display: block;
  padding: 9px 0;
  font-size: var(--sbs-body-sm);
  line-height: 1.4;
  color: var(--sbs-grey-600);
}

.sbs-contents a:hover,
.sbs-contents a.is-active {
  color: var(--sbs-ink);
}

.sbs-share ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* Icons rather than words: three short labels stacked in a narrow rail read
 * as a menu, and the glyphs are recognised faster than "WhatsApp" is read.
 * The words are still there for screen readers, and as a title tooltip. */
.sbs-share a,
.sbs-share button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--sbs-grey-600);
  transition: color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-share svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Confirmation for the copy button, which has no page to navigate to and so
 * no other way of saying it worked. */
.sbs-share button.is-copied {
  color: var(--sbs-gold);
}

.sbs-share button.is-copied::after {
  content: attr(data-copied);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--sbs-ink);
  font-family: var(--sbs-font-mono);
  font-size: 11px;
  letter-spacing: var(--sbs-ls-meta);
  white-space: nowrap;
  color: #fff;
}

.sbs-share a:hover,
.sbs-share button:hover {
  color: var(--sbs-gold);
}

/* The article column at the 1440px design width. Beyond it the grid keeps
 * widening, and 19px text set 1400px wide is not a reading measure. */
.sbs-entry__body {
  max-width: 860px;
}

.sbs-entry__lead {
  margin-bottom: 48px;
  font-size: var(--sbs-lead-sm);
}

.sbs-entry__body .sbs-content {
  margin-bottom: 56px;
}

.sbs-entry__actions {
  margin-top: 48px;
}

.sbs-entry__body .sbs-pullquote {
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------
 * More from SBS
 * ------------------------------------------------------------- */


/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .sbs-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sbs-entry__grid {
    gap: 56px;
  }

  .sbs-featured__panel {
    padding: 48px 40px;
  }
}

@media (max-width: 900px) {
  .sbs-featured {
    grid-template-columns: 1fr;
  }

  .sbs-featured__media {
    height: 320px;
  }

  .sbs-news-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sbs-entry__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Sticky would pin the sidebar over the article it belongs beside. */
  .sbs-entry__sticky {
    position: static;
  }

  .sbs-entry__feature-media {
    height: 320px;
  }

  .sbs-news-filters {
    margin-bottom: 40px;
  }
}