/*------------------- SISSA -------------------*/

/* .pt-news--area-physics {
  --card-accent: var(--phisycs);
}
.pt-news--area-mathematics {
  --card-accent: var(--math);
}
.pt-news--area-neuroscience {
  --card-accent: var(--neuroscience);
}

.pt-news--area-sissa {
  --card-accent: var(--sissa);
}
.pt-news--area-ilas {
  --card-accent: var(--ilas);
}
*/


/* main image — full-bleed on mobile; the bottom border accent follows the news
   research area (same logic as card-news). #fe693a is the default when no area. */
.pt-news__main-image {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  img {
    border-bottom: 6px solid var(--card-accent);
    width: 100%;
    height: auto;
  }
}
/* Per-area accent (from the `area` prop -> .pt-news--area-<slug> on the article).
   The custom property inherits down to the main image. Token names differ from the
   slugs, so map explicitly; SISSA / unknown area keeps the #fe693a default above. */

@media (min-width: 992px) {
  .pt-news__main-image {
    position: relative;
    width: auto;
    left: auto;
    transform: none;
    /* pull the image up over the beige header band (sissa .image-container) */
    margin-top: -4rem;

    img {
      width: 100%;
      height: auto;
    }
  }
}

/* related news border behaviour (cards share the sissa card-news border) */
@media (min-width: 992px) {
  .pt-news__related {
    ul.row {
      margin: 0;
    }

    .col {
      padding: 0;
    }
    .col:nth-child(2) {
      .card-body {
        border-left: 0px;
      }
    }
    .col:nth-child(3) {
      .card-body {
        border-left: 0px;
      }
    }
  }
}