/* =========================================================
   BLOG / NEWS
   Figma 3186:1578
   Content: 960px
   Cards: 430px
   Gutter: 100px

   IMPORTANT:
   The banner / hero must be independent from .blog-columns
   and must never live inside .blog-column.
   ========================================================= */


/* =========================
   MAIN CONTAINERS
   ========================= */

#news .news-wrapper > .container {
  box-sizing: border-box;
  display: block;
  float: none;

  width: calc(100% - 48px);
  max-width: 960px;

  margin-inline: auto;
  padding-inline: 0;
}

#news .news-wrapper > .container:first-child {
  width: calc(100% - 48px);
  max-width: 960px;
}


/* =========================
   BLOG LIST
   ========================= */

#news .news-wrapper > .container.blog-list,
#news .news-wrapper.is-filtered > .container.blog-list {
  display: block;
  padding-top: 100px;
}


/* =========================
   BLOG COLUMNS
   ========================= */

#news .blog-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
  align-items: start;

  width: 100%;
}

#news .blog-columns[hidden] {
  display: none;
}

#news .blog-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 89px;
}


/* First group alignment */

#news .blog-columns:first-child .blog-column:first-child {
  padding-top: 33px;
}


/* Continuation after hero/banner */

#news .blog-continuation .blog-column:first-child {
  padding-top: 183px;
}


/* =========================
   ARTICLE RESET
   ========================= */

#news .news-wrapper .blog-article,
#news .news-wrapper .blog-article:nth-child(n),
#news .news-wrapper.is-filtered .blog-article {
  /* Override the legacy desktop stagger transforms.  Transforms do not
     occupy layout space, so they made later cards overlap when card heights
     differed. */
  position: static !important;

  box-sizing: border-box;

  float: none !important;

  width: 100%;
  max-width: 100%;

  margin: 0 !important;
  transform: none !important;
}

#news .news-wrapper .blog-article:nth-child(n) .side {
  float: none !important;

  width: 100%;

  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

#news .news-wrapper .blog-article .news {
  width: 100%;
  margin: 0;
}


/* =========================
   CARD IMAGE
   ========================= */

#news .news-wrapper .news .image-holder {
  position: relative;

  display: block;

  width: 100%;
  max-width: 100%;

  height: auto !important;
  aspect-ratio: 1 / 1;

  margin: 0;

  overflow: hidden;
}

#news .news-wrapper .news .image-holder img.blog-cover {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* Article-card hover: a red overlay and a centred plus identify the image as a link. */
#news .news-wrapper .news .image-holder .see-more {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: rgba(255, 0, 0, .6) url('/resources/images/icons/plus-signal-big.png') center / 46px 46px no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#news .news-wrapper .news .image-holder:hover .see-more,
#news .news-wrapper .news .image-holder:focus-visible .see-more {
  opacity: 1;
}


/* =========================
   FEATURE TITLE
   ========================= */

#news .blog-feature-title {
  margin: 0 0 80px;

  font-family: Raleway, sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-weight: 400;

  text-transform: uppercase;

  color: #4a4a4a;
}

#news .blog-feature-title strong {
  font-weight: 700;
}

#news .is-filtered .blog-feature-title {
  display: none;
}


/* =========================
   CARD HEADER
   ========================= */

#news .job-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 22px;

  margin: 0 0 10px;
}

#news .job-card-header time {
  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;

  color: #f00;
}


/* =========================
   SHARE BUTTON
   ========================= */

#news .job-share {
  width: 20px;
  height: 20px;

  padding: 0;

  background: none;
  border: 0;

  cursor: pointer;
}

#news .job-share img {
  display: block;

  width: 20px;
  height: 20px;
}


/* =========================
   ARTICLE TYPOGRAPHY
   ========================= */

#news .news-wrapper .news h3 {
  margin: 10px 0 8px;

  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;
}

#news .news-wrapper .news .job-excerpt {
  margin: 0;

  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;

  color: #4a4a4a;

  overflow-wrap: anywhere;
}


/* =========================
   FILTERS
   ========================= */

#news .blog-filters {
  min-width: 0;
  gap: 20px;
}

/* The select is a mobile-only alternative to the desktop filter row. */
#news .blog-filter-select-wrap {
  display: none;
}

#news .blog-intro {
  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;
}


/* =========================================================
   HERO / BANNER

   Must be a sibling of .blog-columns.
   Do NOT put inside .blog-column.
   ========================================================= */

#news .blog-hero-container {
  display: block;
  float: none;
  clear: both;

  box-sizing: border-box;

  width: 100%;
  max-width: 960px;

  margin: 89px auto 100px;
}

#news .blog-hero {
  position: relative;

  display: block;

  width: 100%;
  max-width: 960px;
}

#news .blog-hero-slide {
  position: relative;

  display: none;

  box-sizing: border-box;

  width: 100%;
  min-height: 430px;

  padding: 60px;

  overflow: hidden;
}

#news .blog-hero-slide.is-active {
  display: block;
}


/* =========================
   HERO IMAGE
   ========================= */

#news .blog-hero-image {
  position: absolute;
  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================
   HERO OVERLAY
   ========================= */

#news .blog-hero-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, 0.26);

  pointer-events: none;
}


/* =========================
   HERO CONTENT
   ========================= */

#news .blog-hero-content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  gap: 32px;

  min-height: 310px;

  color: #fff;
}

#news .blog-hero-content h1 {
  max-width: 500px;

  margin: 0;

  font-family: Raleway, sans-serif;
  font-size: 30px;
  line-height: 1.17;
  font-weight: 600;

  color: #fff;

  text-transform: uppercase;
}

#news .blog-hero-content p {
  max-width: 500px;

  margin: 0;

  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;

  color: #fff;
}

#news .blog-hero-content a {
  display: inline-block;

  padding: 8px 20px;

  background: #f00;

  color: #fff;

  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;

  text-transform: uppercase;
  text-decoration: none;
}


/* =========================
   HERO CONTROLS
   ========================= */

#news .blog-hero-controls {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 20px;

  margin-top: 16px;
}

#news .blog-hero-controls button {
  padding: 4px 16px;

  background: #fff;
  border: 1px solid #ddd;

  font-size: 28px;

  cursor: pointer;
}


/* =========================
   ACCESSIBILITY
   ========================= */

#news .blog-filter:focus-visible,
#news .blog-hero a:focus-visible,
#news .job-share:focus-visible,
#news .blog-hero-controls button:focus-visible {
  outline: 2px solid #f00;
  outline-offset: 4px;
}




/* =========================
   FILTERED RESULTS SAFETY
   The legacy website CSS has positional rules for filtered-left/right.
   Filtered cards must remain in normal flex flow to prevent overlaps.
   ========================= */

#news .blog-filter-results {
  width: 100%;
  align-items: start;
}

#news .blog-filter-results .blog-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 89px !important;
  min-width: 0;
  padding-top: 0 !important;
}

#news .blog-filter-results .blog-article,
#news .blog-filter-results .blog-article.filtered-left,
#news .blog-filter-results .blog-article.filtered-right {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  #news .blog-columns {
    gap: clamp(32px, 7vw, 100px);
  }

  #news .blog-filters {
    flex-wrap: wrap;
    justify-content: flex-start;

    height: auto;

    gap: 8px 24px;
  }

  #news .blog-filter {
    height: 40px;
  }

  #news .filters-wrapper {
    height: auto;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  /* Main container */

  #news .news-wrapper > .container,
  #news .news-wrapper > .container:first-child {
    width: calc(100% - 40px);
  }


  /* Blog list */

  #news .news-wrapper > .container.blog-list,
  #news .news-wrapper.is-filtered > .container.blog-list {
    padding-top: 48px;
  }


  /* Columns become a single flow */

  #news .blog-columns {
    display: flex;
    flex-direction: column;

    gap: 48px;
  }

  #news .blog-column {
    display: contents;
  }

  #news .blog-article {
    order: var(--mobile-order);
  }


  /* Remove desktop vertical offsets */

  #news .blog-columns:first-child .blog-column:first-child,
  #news .blog-continuation .blog-column:first-child {
    padding-top: 0;
  }


  /* Mobile category selector replaces the desktop filter row. */
  #news .blog-filters {
    display: block;
    width: 100%;
  }
  #news .blog-filters .blog-filter {
    display: none;
  }
  #news .blog-filter-select-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
  }
  #news .blog-filter-select-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 40px;
    height: 40px;
    background: #f00;
    pointer-events: none;
  }
  #news .blog-filter-select-wrap::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    pointer-events: none;
  }
  #news .blog-filter-select {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 52px 0 14px;
    appearance: none;
    border: 1px solid #e2e5e7;
    border-radius: 0;
    background: #fff;
    color: #5d6368;
    font: 600 13px/1 Raleway, sans-serif;
    text-transform: uppercase;
  }
  #news .blog-filter-select:focus-visible {
    outline: 2px solid #f00;
    outline-offset: 3px;
  }

  /* Feature title */

  #news .blog-feature-title {
    margin-bottom: 32px;

    font-size: 26px;
    line-height: 31px;
  }


  /* Hero */

  #news .blog-hero-container {
    width: 100%;
    max-width: none;

    margin: 48px 0;
  }

  #news .blog-hero {
    width: 100%;
    max-width: none;
  }

  #news .blog-hero-slide {
    width: 100%;
    min-height: 400px;

    padding: 28px 24px;
  }

  #news .blog-hero-content {
    min-height: 344px;

    gap: 28px;
  }

  #news .blog-hero-content h1 {
    font-size: 26px;
    line-height: 31px;
  }

  #news .blog-hero-image {
    object-position: 65% center;
  }

  #news .blog-hero-overlay {
    background: rgba(0, 0, 0, 0.48);
  }
}


/* Blog pagination — 20 articles per page. */
#news .blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  margin: 72px 0 96px;
}
#news .blog-pagination a,
#news .blog-pagination span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  background: #edf0f2;
  color: #6d7479;
  font: 400 11px/1 Raleway, sans-serif;
  text-decoration: none;
}
#news .blog-pagination .blog-pagination-arrow { font-size: 20px; }
#news .blog-pagination .blog-pagination-page.is-active {
  background: #f00;
  color: #fff;
}
#news .blog-pagination .is-disabled { opacity: .45; }
/* Mobile pagination keeps every control as a compact, equal square.
   It scrolls horizontally when a category has more pages than fit. */
@media (max-width: 767.98px) {
  #news .blog-pagination {
    justify-content: center;
    gap: 1px;
    margin: 48px 0 64px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #news .blog-pagination::-webkit-scrollbar { display: none; }
  #news .blog-pagination a,
  #news .blog-pagination span {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  #news .blog-pagination .blog-pagination-arrow { font-size: 18px; }

  /* Keep the control compact: show only previous, current and next page numbers. */
  #news .blog-pagination .blog-pagination-page {
    display: none;
  }
  #news .blog-pagination .blog-pagination-page.is-active,
  #news .blog-pagination .blog-pagination-page.is-active + .blog-pagination-page,
  #news .blog-pagination .blog-pagination-page:has(+ .blog-pagination-page.is-active) {
    display: grid;
  }
}


/* The visual guide grid must never block links or pagination controls. */
#grid, .grid { pointer-events: none; }

/* Desktop: align blog content precisely between the first and last central guide lines.
   FIX (2026-09-30): width + margin-left + margin-right were all set explicitly, which
   over-constrains the box model. Per the CSS box model rules, when that happens the
   browser silently ignores the written margin-right and recalculates it so the sums
   match — so "margin-right: 0" here was never actually applied. The real right margin
   ended up ~16px larger than the left one, which is why the second column never quite
   reached the right guide line while the first one already touched the left guide.
   Using two equal percentage margins with an auto width removes the over-constraint
   entirely and is also immune to the vw-vs-scrollbar-width ambiguity the old "-3px" /
   "-10px" manual fudge factors were trying to work around. */
@media (min-width: 1101px) {
  #detail-news .detail-article,
  #detail-news .detail-dynamic-section,
  #detail-news .detail-suggested,
  #news .news-wrapper > .container,
  #news .news-wrapper > .container:first-child {
    width: auto;
    max-width: none;
    margin-left: 16.6666667%;
    margin-right: 16.6666667%;
  }
}

/* Keep list cards at their original Figma width while filters retain the grid alignment. */
@media (min-width: 1101px) {
  #news .blog-columns,
  #news .blog-hero-container {
    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop listing: cards align to the outer guide lines and stretch to fill the space
   between them.
   FIX (2026-09-30): this rule has no upper bound, and the "Intermediate desktop" rule
   below only overrides it for 701–1500px. Above 1500px nothing replaced the old fixed
   430px columns + justify-content:space-between, so the two cards stayed small and
   every extra pixel of screen width was dumped into the single middle gap — at
   2501px that left over 800px of empty space between the cards. Switching to two
   equal 1fr columns makes them stretch to fill the container instead. The gap is a
   percentage of .blog-columns' own width (not the viewport), matching the Figma
   ratio (100px gap / 960px content = 10.4167%) regardless of screen width or
   scrollbar quirks. */
@media (min-width: 1101px) {
  #news .blog-columns {
    width: calc(66.6666667vw - 10px);
    max-width: none;
    margin-left: calc(16.6666667vw - 3px);
    margin-right: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    column-gap: 10.4167%;
  }
}

/* The list container is already on the guide lines; do not add a second viewport offset. */
@media (min-width: 1101px) {
  #news .blog-columns {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Intermediate desktop: the content area is narrower than the large-desktop
   Figma composition. Keep two equal cards with a real gutter and retain the
   complete category navigation on one compact line. */
@media (min-width: 701px) and (max-width: 1500px) {
  #news .blog-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 32px;
    column-gap: 32px;
  }

  #news .filters-wrapper {
    height: auto;
  }
}

/* The desktop filter bar must remain a single row. This deliberately extends
   beyond the card-layout breakpoint because browser zoom can make a 1366px
   screen report a larger CSS viewport. */
@media (min-width: 1101px) and (max-width: 2200px) {
  #news .blog-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: auto;
    gap: 8px 12px;
  }

  #news .blog-filters .blog-filter {
    flex: 0 0 auto;
    font-size: 18px !important;
    white-space: nowrap;
  }
}

/* A zoomed small desktop may fall into the tablet CSS width while still using
   the desktop layout. Keep every category available on the same row there. */
@media (min-width: 701px) and (max-width: 1100px) {
  #news .blog-filters {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    width: 100%;
  }

  #news .blog-filters .blog-filter {
    flex: 0 0 auto;
    height: 40px;
    padding-left: 0;
    padding-right: 0;
    font-size: 14px !important;
    letter-spacing: -0.15px;
    white-space: nowrap;
  }
}

/* At compact desktop widths all seven category names need to share one line.
   The normal 18px label treatment is restored above this range. */
@media (min-width: 701px) and (max-width: 1600px) {
  #news .blog-filters {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    gap: 0 !important;
    width: 100%;
  }

  #news .blog-filters .blog-filter {
    flex: 0 0 auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 15px !important;
    letter-spacing: -0.15px;
    white-space: nowrap;
  }
}

/* The banner within the blog listing spans the same outer guide lines as the cards. */
@media (min-width: 1101px) {
  #news .blog-hero-container,
  #news .blog-hero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Cards mask the guide only where there is editorial artwork. */
#news .news-wrapper .news .image-holder,
#news .blog-hero-container {
  isolation: isolate;
  z-index: 20;
}
#news .news-wrapper .news .image-holder img.blog-cover,
#news .blog-hero,
#news .blog-hero-slide {
  position: relative;
  z-index: 1;
}

/* The central guide ends where each article grid begins, matching the Figma
   composition: it is visible above the list and disappears in the card area. */
#news .blog-columns {
  position: relative;
  isolation: isolate;
}
#news .blog-columns::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: -60px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #fff;
  pointer-events: none;
}

/* From the editorial area onward, all vertical guides are masked. */
#news .blog-columns::before {
  top: -180px;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 180px);
  z-index: 10;
}
#news .blog-columns > .blog-column {
  position: relative;
  z-index: 20;
}

/* Guides remain a background detail. They must never create a white gradient
   over editorial content; cards and banners mask them through their own layer. */
#news .blog-columns::before {
  display: none;
}

/* A one-pixel white guard prevents a guide line from showing at the edge of
   any editorial image while keeping the surrounding page unchanged. */
#news .news-wrapper .news .image-holder,
#news .blog-hero-container {
  box-shadow: 0 0 0 1px #fff;
}

/* Fade the guides in the empty space immediately before the listing banner.
   The transition ends at the banner edge and never overlays the artwork. */
#news .blog-hero-container {
  position: relative;
}
#news .blog-hero-container::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -120px;
  right: 0;
  left: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
#news .blog-hero {
  position: relative;
  z-index: 1;
}

/* Every article card uses one opaque layer, so guide visibility is identical
   in both columns and for every legacy card variant. */
#news .news-wrapper .blog-article .news {
  position: relative;
  isolation: isolate;
  z-index: 20;
  background: #fff;
}

/* Figma listing transition: every guide stays visible until the final 60px
   before an article grid, then fades evenly to white at the card edge. */
#news .blog-columns::before {
  display: block;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  bottom: auto;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  z-index: 10;
}

/* The grid belongs to the header only. It fades once at the start of the
   editorial listing and stays hidden for every article and banner thereafter. */
#news .news-wrapper > .container.blog-list {
  position: relative;
  isolation: isolate;
  z-index: 1;
  background: #fff;
}
#news .news-wrapper > .container.blog-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60px;
  right: 0;
  left: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
#news .news-wrapper > .container.blog-list > * {
  position: relative;
  z-index: 1;
}
#news .blog-columns::before,
#news .blog-hero-container::before {
  display: none;
}

/* Include the two outer guide lines in the editorial fade/mask. */
#news .news-wrapper > .container.blog-list {
  box-shadow: 0 0 0 1px #fff;
}
#news .news-wrapper > .container.blog-list::before {
  right: -1px;
  left: -1px;
}

/* On the blog index the guide is a document-level header detail, not a fixed
   overlay. It fades out immediately before the first article grid. */
#grid.blog-editorial-grid,
.grid.blog-editorial-grid {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0.78) 52%, rgba(0, 0, 0, 0.38) 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0.78) 52%, rgba(0, 0, 0, 0.38) 74%, transparent 100%);
}

/* Do not cut the guides at the list container. The document-level guide is
   responsible for the single fade at the first article itself. */
#news .news-wrapper > .container.blog-list {
  background: transparent;
  box-shadow: none;
}
#news .news-wrapper > .container.blog-list::before {
  display: none;
}

/* Keep the document guide visible in the editorial whitespace, including
   behind the first-column heading.  Artwork remains opaque above the guide. */
#news .news-wrapper .blog-article .news {
  background: transparent;
}