/* COLORS */
:root {
  /* Literal orange (was var(--main-accent-color), but that token is #000 in
     style.css, so math rendered black). Matches style.css's --math: #FF6433. */
  --math: #ff6433;
  --phisycs: #ffc300;
  --neuroscience: #a68c5b;
}

article.card:after {
  display: none !important;
}

/* TYPOGRAPHY */
body .lead *,
body .lead p {
  font-weight: 100;
}

@media (min-width: 576px) and (max-width: 1200px) {
  body h1,
  body .h1 {
    font-size: 40px;
    line-height: 50px;
  }

  body .lead {
    font-size: 28px;
    line-height: 36px;
    * {
      font-weight: 100;
    }
  }
}

@media (min-width: 768px) {
  body .lead {
    line-height: 30px;
  }
}

/* GENERIC STYLE */
article.card {
  border: 1px solid #000;
  padding: 1.2rem;

  * {
    font-family: "Suisse Int\'l";
  }
}

/* GENERIC LAYOUT - inside card */

/* card becomes long styled */
@media (min-width: 992px) {
  .card.card-procurement,
  .card.card-job-opportunity,
  .next-event-container .card.card-event,
  section:not(.related-cards-container) .card.card-event {
    .card-body {
      display: flex;
      flex-direction: row;

      .icon-arrow-corner {
        width: 60px;
        height: 60px;
      }
    }
  }
}

/* ATOMIC - pipe separator */
/* .separator {
  margin: 0 0px;
}

@media (min-width: 992px) {
  .separator {
    margin: 0 12px;
  }
} */

/* override bootstrap italia */
article.card .card-body {
  padding: 0;
}

@media (min-width: 992px) {
  article.card {
    padding: 2rem;
  }
}

/* ATOMIC - status label inside card*/
.status {
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid #c5c7c9;
  margin: 0rem 0rem 1rem 0rem;
  padding-bottom: 0.6rem;

  &:after {
    content: "";
    background-color: #64af96;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    position: absolute;
    top: 3px;
    right: 0;
  }
}

.status--closed {
  &:after {
    background-color: #fff;
    box-shadow: 0px 0px 0px 3px #b2b2b2 inset;
  }
}

.container-card-metadata .card-wrapper {
  padding-bottom: 0;
}

.container-card-metadata,
.card.card-job-opportunity & .container-info {
  .status.status--closed {
    color: #b2b2b2;
    .value {
      color: #737373;
    }

    &:after {
      background-color: transparent;
      /* border: 3px solid #b2b2b2; */
    }
  }
}

.card.card-job-opportunity {
  & .container-info {
    .status.status--closed + div,
    .status.status--closed + div + div,
    .status.status--closed + div + div + div {
      .value {
        color: #737373;
      }
    }
  }
}

/* TYPOGRAPHY - light grey label w icon inside card */
.card .label {
  font-size: 14px;
  font-weight: 400;
  color: #737373;

  img {
    position: relative;
    top: 0px;
    left: 1px;
    margin-right: 9px;
  }
}

/* TYPOGRAPHY - black value label inside card */
.card .value {
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
@media (min-width: 1200px) {
  .card .value {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.875rem;
  }
}

/* TYPOGRAPHY - title card */
article.card .card-body {
  h3 a {
    color: #262626;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    transition: 0.2s ease;

    &:hover {
      opacity: 0.8;
    }
  }
}
@media (min-width: 992px) {
  article.card .card-body {
    h3 a {
      font-size: 24px;
      line-height: 32px;
    }
  }
}

/* ASIDE LAYOUT W CARD */
/* EVENT / JOB-OPP */

/* event metadata card */
.pt-page--job-opportunity,
.pt-page--event {
  .inner-container-card-metadata {
    /* background-image: url(./images/background-beige-noise.png);
    background-size: 180px;
    background-repeat: repeat; */
    background-color: lightblue;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 2rem 0rem;
    .card-wrapper {
      margin: 0px 22px;
      padding: 0;
      .card {
        padding: 1rem 1rem;
        background-color: red;
        background-color: transparent;
      }
    }
  }
}

/* LAYOUT - page layout macro */

@media (min-width: 992px) {
  .pt-page--job-opportunity,
  .pt-page--event {
    .container-card-metadata {
      .inner-container-card-metadata {
        .card-wrapper {
          max-width: 960px;
          margin: 0 auto;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .related-cards-container,
  .pt-page--job-opportunity,
  .pt-page--event {
    .inner-container-card-metadata .card {
      padding: 2rem;
    }
  }
}

@media (min-width: 1400px) {
  .pt-page--job-opportunity,
  .pt-page--event {
    grid-template-columns: auto minmax(auto, 410px);

    .related-cards-container,
    .container-title,
    .inner-container-card-metadata .card-wrapper {
      padding-top: 3rem;
    }
  }
}

@media (min-width: 1700px) {
  .pt-page--job-opportunity,
  .pt-page--event {
    grid-template-columns: auto minmax(auto, 510px);

    .container-card-metadata {
      .inner-container-card-metadata {
        .card-wrapper {
          margin: 0px auto;
        }
      }
    }
  }
}

@media (min-width: 992px) {
  /* RELATED CARDS BEHAVIOUR */
  .related-cards-container {
    .row > div {
      padding: 0;
    }
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  /* border management when cards ar stacked together */
  /* news / events */
  .related-cards-container,
  .card-related-page.card-wrapper {
    article.card,
    a.card {
      border: 1px solid rgb(0, 0, 0);
    }
  }

  .related-cards-container .row > div:nth-child(2) article.card,
  .card-related-page.card-wrapper:nth-child(2) a.card {
    border-left: 0px solid rgb(0, 0, 0);
    border-top: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid rgb(0, 0, 0);
  }

  .related-cards-container .row > .card-wrapper:nth-child(3) article.card,
  .card-related-page.card-wrapper:nth-child(3) a.card {
    border-left: 0px solid rgb(0, 0, 0);
  }

  /* border management when cards in a grid 3x3  */
  /* news list */
  .phantom-news-grid-layout {
    /* togli border bottom a tutte. lo mettiamo su immagine */
    li article.card .card-body {
      border-bottom: 0;
    }

    /* metti bordo solo ultime 3. che sotto non hanno niente. */
    li:nth-last-child(-n + 2) article.card {
      border-bottom: 1px solid #000;
    }

    /* tolgli bordi a quelli in mezzo */
    li:nth-child(2n + 2) article.card .card-body {
      border-left: 0;
    }

    li:last-child article.card .card-body {
      border-left: 0;
    }

    li:nth-child(3n + 2):last-child article.card .card-body {
      border-right: 1px solid #000;
    }
    li:last-child article.card .card-body {
      border-right: 1px solid #000;
    }
  }
}

@media (min-width: 1200px) {
  /* border management when cards ar stacked together */
  /* news / events */
  .related-cards-container,
  .card-related-page.card-wrapper {
    article.card,
    a.card {
      border: 1px solid rgb(0, 0, 0);
    }
  }

  .related-cards-container .row > div:nth-child(2) article.card,
  .card-related-page.card-wrapper:nth-child(2) a.card {
    border-left: 0px solid rgb(0, 0, 0);
    border-top: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid rgb(0, 0, 0);
  }

  .related-cards-container .row > .card-wrapper:nth-child(3) article.card,
  .card-related-page.card-wrapper:nth-child(3) a.card {
    border-left: 0px solid rgb(0, 0, 0);
  }

  /* border management when cards in a grid 3x3  */
  /* news list */
  .phantom-news-grid-layout {
    /* togli border bottom a tutte. lo mettiamo su immagine */
    li article.card .card-body {
      border-bottom: 0;
    }

    /* metti bordo solo ultime 3. che sotto non hanno niente. */
    li:nth-last-child(-n + 3) article.card {
      border-bottom: 1px solid #000;
    }

    /* tolgli bordi a quelli in mezzo */
    li:nth-child(3n + 2) article.card .card-body {
      border-left: 0;
      border-right: 0;
    }

    li:nth-child(3n + 3):last-child article.card .card-body {
      border-right: 1px solid #000;
    }
    li:last-child article.card .card-body {
      border-right: 1px solid #000;
    }
  }
}

/* LAYOUT LIST EVENTS W MAIN EVENT AND FORM */
.pt-events-list {
  .container-next-event {
    background-color: seagreen;
  }

  .pt-events-list__search,
  .pt-events-list__cards,
  .container-next-event {
    padding: 3rem 0rem;
  }
}

/* sissanet link footer and header */

.sissanet {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;

  span {
    line-height: 50px;
    position: relative;
    top: 2px;
    color: #fff !important;
  }

  .icon-sissanet-hover {
    display: none;
  }

  img {
    margin-right: 10px;
  }

  img:first-child {
    margin-right: 10px;
  }

  img:last-child {
    margin-left: 10px;
    width: 20px;
  }
}

.sissanet:hover {
  opacity: 1 !important;
  span {
    text-decoration: underline;
  }
  .icon-sissanet-hover {
    display: inline;
  }
  .icon-sissanet {
    display: none;
  }
}