/* Card News specific styles */
body .card-news a {
  color: inherit;
  text-decoration: none;
}

body .card:after {
  display: none;
}

/* image card — fill the BI ratio box. Override BI's height:0 + padding-bottom
   with aspect-ratio so lazy-loaded <img> stay "visible" to the browser (Safari
   otherwise skips loading absolute images inside a zero-height box). Nested
   field/picture wrappers from Drupal must also fill the box. */
article.card.card-news .img-responsive {
  position: relative;
  overflow: hidden;
  height: auto;
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
}

.card-news .img-responsive > .field,
.card-news .img-responsive > .field > div,
.card-news .img-responsive picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.card-news .img-responsive img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*------------------- SISSA -------------------*/
article.card.card-news {
  border: 0px solid #000;
  padding: 0;

  .card-body {
    position: static;
    padding: 1rem;
    border: 1px solid #000;
    border-top: 6px solid var(--card-accent, var(--main-accent-color));
    min-height: 250px;

    display: flex;
    justify-content: space-between;
    flex-direction: column;

    /* container date e category */
    > div:first-child > div:first-child {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      margin-bottom: 0.75rem;

      * {
        color: #737373 !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 25px;
        display: block;
        margin: 0;
      }
    }

    .logo-container img {
      height: 50px;
    }

    /* PhD media logos can come through wrapped field markup; force intrinsic
       proportions so no inherited width rule can stretch them horizontally. */
    .phd-course-logo img {
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }

    h2.h3 *,
    h3 a {
      font-size: 18px;
      font-weight: 400;
      line-height: 26px;
    }

  }
}



/* Applied on the area microsites only; this site is one of them. */
article.card.card-news .card-body .area-reference-container img {
  height: 90px;
}




@media (min-width: 992px) {
  article.card.card-news .card-body {
    padding: 2rem;
    h2 a,
    h3 a {
      font-size: 18px;
      line-height: 24px;
    }
  }
}

@media (min-width: 1200px) {
  article.card.card-news {
    .card-body {
      .logo-container img {
        height: 50px;
      }

      .phd-course-logo img {
        width: auto;
        max-width: 100%;
        object-fit: contain;
      }

      .area-reference-container {
        margin-top: 3rem;
      }
    }
  }
}


@media (min-width: 1400px) {
    article.card.card-news {
        & .card-body {
            .area-reference-container {
                margin-top: 4rem;
            }
        }
    }
}

/* Per-area accent colour (from the `area` prop -> .card-news--area-<slug>).
   The custom property inherits down to .card-body's top border. Token names in
   global-sissa.css differ from the slugs, so map them explicitly; "sissa" has no
   token and falls back to --main-accent-color. */
.card-news--area-mathematics {
  --card-accent: var(--math);
}
.card-news--area-physics {
  --card-accent: var(--phisycs);
}
.card-news--area-neuroscience {
  --card-accent: var(--neuroscience);
}

/* hover effect image */
article.card.card-news .img-responsive img {
  transition: 7s ease;
  transform-origin: center;
  transform: scale3d(1.01, 1.01, 1.01);
}

article.card.card-news:hover .img-responsive img {
  transform: scale3d(1.1, 1.1, 1);
}