article.pt-event--full {
  padding: 0;
}

/* The page <h1> is rendered inside this article now (→ node--event.twig), so
   the top spacing that used to come from the title region — `.it-page-title__
   wrapper` (6 / 2 / 4rem) plus `.image-event-container` (2 / 0rem) — has to come
   from here. Same totals at the same steps; the 1024px step is the one that
   drops it, not 1200px. `padding: 0` above zeroes the container's own side
   padding, so only the top is put back. */
article.pt-event--full {
  padding-top: 6rem;
}

@media (min-width: 992px) {
  article.pt-event--full {
    padding-top: 4rem;
  }
}

@media (min-width: 1024px) {
  article.pt-event--full {
    padding-top: 2rem;
  }
}

@media (min-width: 1200px) {
  article.pt-event--full {
    padding-top: 4rem;
  }
}

/* The back-link above the <h1> is its own component now — see
   pt_base:listing-backlink, which carries its own stylesheet and is shared by
   the news, event, procurement and job details. */

/*category label*/
@media (min-width: 992px) {
  .event-category-label {
    color: #fff !important;
  }
}

@media (min-width: 992px) {
  .area-reference-container {
    gap: 20px;
    margin-top: 2rem;
    img {
      height: 50px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }
  }
}

.card-event-metadata .card a::after {
  display: none;
}

.container-card-event-metadata .card:after {
  display: none;
}

@media (max-width: 992px) {
  .page-node-type--event {
    .pt-detail-split__header,
    .pt-detail-split__backlink {
      position: relative;

      .event-category-label,
      h1 {
        color: #fff !important;
      }

      &:after {
        background-image: url(/themes/custom/pt_base/images/bg-dark-noise.png);
        position: absolute;
        content: "";
        background-size: 400px;
        background-repeat: repeat;
        width: 100vw;
        height: 100%;
        z-index: -1;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
      }
    }
    .pt-detail-split__backlink:after {
      height: 210%;
      top: -90%;
    }
    .pt-detail-split__header:after {
      height: 130%;
    }
  }

  .container-card-event-metadata {
    position: relative;
    padding: 2rem 0;

    &:after {
      background-image: url(/themes/custom/pt_base/images/bg-dark-noise.png);
      position: absolute;
      content: "";
      background-size: 400px;
      background-repeat: repeat;
      width: 100vw;
      height: 100%;
      z-index: -1;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
  }
}

/* lead */

@media (min-width: 992px) {
  .lead {
    position: relative;
    &:before {
      content: "";
      width: 30%;
      height: 3px;
      background-color: var(--accent);
      display: block;
      position: relative;
      margin-bottom: 20px;
      margin-top: -20px;
    }
  }
}

/* main image */
.image-event-media {
  position: relative;
  img {
    position: relative;
    width: 100%;
    display: block;
    height: auto;
  }
}

/* Metadata card as a sticky sidebar (desktop). The card follows the content
   column while it scrolls; on mobile it is a normal stacked block (and comes
   first in source order so the key facts + CTA show early). */
@media (min-width: 992px) {
  .pt-event--full .event-sticky-sidebar {
    position: sticky;
    top: 1.5rem;

    .card:hover {
      background-color: #fff;
    }
  }
}

/* --- Metadata card content (sissa design) --- */

/* The card sits on top of the page decoration (the noise band on mobile, the
   noise column on desktop), so it must not paint the Bootstrap Italia default
   white .card background. Same in every area. */

.card-description {
  border: 1px solid #000;
}
.card-description .data-group {
  margin-bottom: 0;
}

.card-description .data-row {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--bs-border-width, 1px) solid
    var(--bs-border-color, rgba(0, 0, 0, 0.1));
}

.card-description .data-row .label {
  margin-bottom: 0;
}

/* Signature sissa date highlight (day over month). Decorative; its own bottom
   border matches the .data-row dividers below it. */
.card-description .date-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--bs-border-width, 1px) solid
    var(--bs-border-color, rgba(0, 0, 0, 0.1));
}

.card-description .date-container .day {
  color: #000;
  line-height: 48px;
  font-size: 40px;
  font-weight: 500;
}

.card-description .date-container .month {
  color: #000;
  line-height: 32px;
  font-size: 28px;
  font-weight: 300;
}

@media (min-width: 992px) {
  .card-description .date-container .day {
    line-height: 78px;
    font-size: 70px;
  }
}

/* Sissa inline location row: "type | 📍 location". */
.card-description .info-location-container .location-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.card-description .info-location-container .location {
  display: inline-flex;
  align-items: center;
}

.card-description .info-location-container .location img {
  margin-right: 9px;
}

/* sponsor e organizers */
.sponsor-e-organizers-container > .paragraph {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;

  /* title group */
  .h5 {
    grid-column: 1 / -1;
  }
}

.sponsor-e-organizers-container > .paragraph:not(:last-child) {
  margin-bottom: 3rem;
}

@media (min-width: 992px) {
  .sponsor-e-organizers-container > .paragraph {
    grid-template-columns: repeat(3, 1fr);
    gap: 0rem;

    /* borders manager */
    article {
      border-right: 0px solid #000;
      border-bottom: 0px solid #000;
    }
    article:first-child:last-child {
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
    }

    article:last-child {
      border-right: 1px solid #000;
    }

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

    /* last 3 article in the list */
    article:nth-last-child(-n + 3) {
      border-bottom: 1px solid #000;
    }
  }
}

/* related card event (cards are now <li> items of the .row list) */
.related-cards-container .row > li:not(last-child) {
  margin-bottom: 2rem;
}

.related-cards-container {
  position: relative;
  padding-top: 1rem;
  margin-top: 1rem;
  padding-bottom: 1rem;
  z-index: 1;

  &:before {
    content: "";
    width: 100vw;
    height: 1px;
    background-color: #a3a3a3;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  &:after {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 1200px) {
  .related-cards-container {
    padding-top: 3rem;
    margin-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ---------------------------------------------------------------------------
   Detail-page overrides
   ---------------------------------------------------------------------------
   These applied on the area microsites and not on the black main site. This
   site is a branded one, so they are unconditional. Base decoration lives in
   css/layout.css (`.pt-event--full:before`, beige noise, >= 992px); the rules
   below only change what sits on top of it, keeping that geometry.
   -------------------------------------------------------------------------- */

.pt-event--full {
  /* .area-reference-container .area-container {
    display: none;
  } */

  .container-card-event-metadata {
    .card,
    .card:hover {
      background-color: transparent;
    }
  }

  .card .label {
    color: #000;
  }

  .card-description .data-row,
  .card-description .date-container {
    border-bottom: var(--bs-border-width, 1px) solid #000;
  }

  .pt-event--full .card-event-metadata .card.phantom-card {
    background-color: transparent;
  }
}

/* colors for phd version */
.page-node-type--event {
  .card-description {
    border: 1px solid var(--accent);

    .value,
    .date-container .month,
    .date-container .day {
      color: #fff;
    }

    .data-row {
      border-bottom: var(--bs-border-width, 1px) solid #ffffff97;
    }
    .date-container {
      border-bottom: var(--bs-border-width, 1px) solid var(--accent);
    }
    .label {
      color: #d0d0d0;
    }
  }
}