/* Card giocatore - nuova grafica. Override di .item--portrait, attivi solo con .item--portrait-new */
.item.item--portrait-new {
      background: transparent;
      color: #0c1f8e;
      padding: 0;
      aspect-ratio: 4 / 5;
      height: auto;
      overflow: inherit;
      box-shadow: none;
}

.item.item--portrait-new .pn-brand {
      position: absolute;
      top: 4%;
      left: 0;
      right: 0;
      text-align: center;
      font-family: 'Orbitron';
      line-height: 1.1;
      z-index: 3;
}

.item.item--portrait-new .pn-brand strong {
      font-size: clamp(14px, 1.7vw, 26px);
      font-weight: 800;
}

.item.item--portrait-new .pn-brand span {
      font-weight: 400;
      font-size: clamp(14px, 1.7vw, 26px);
}

.item.item--portrait-new .pn-brand small {
      display: block;
      font-size: clamp(6px, .7vw, 10px);
      letter-spacing: 1px;
}

.item.item--portrait-new .pn-wm {
      position: absolute;
      top: 5%;
      left: 0;
      right: 10px;
      text-align: right;
      font-family: Impact, sans-serif;
      font-size: clamp(30px, 4.6vw, 70px);
      font-weight: 700;
      color: rgba(255, 255, 255, .10);
      text-transform: uppercase;
      line-height: 1;
      z-index: 1;
}

.item.item--portrait-new>img {
      position: absolute;
      left: 0;
      bottom: -15px;
      aspect-ratio: auto;
      object-fit: contain;
      object-position: bottom;
      transform: scale(1.05) translateX(-19%);
      filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)) drop-shadow(0 8px 14px rgba(0, 0, 0, .25)) brightness(1.3) contrast(1.05);
      z-index: 2;
}

.item.item--portrait-new:hover img {
      transform: scale(1.06) translateX(-19%);
      filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)) drop-shadow(0 8px 14px rgba(0, 0, 0, .25)) brightness(1.3) contrast(1.05);
}

/* Swap immagine in rollover (fade) */
.item.item--portrait-new>img {
      transition: transform 2.55s cubic-bezier(.2, .8, .2, 1), filter .35s ease, opacity .5s ease;
}

.item.item--portrait-new>img.pn-hover {
      opacity: 0;
}

.item.item--portrait-new:hover>img.pn-hover {
      opacity: 1;
}

.item.item--portrait-new:has(>img.pn-hover):hover>img:not(.pn-hover) {
      opacity: 0;
}

/* Switch foto con completino bianco */
.item.item--portrait-new>img.pn-bianco {
      opacity: 0;
}

.item.item--portrait-new.is-bianco>img {
      opacity: 0 !important;
}

.item.item--portrait-new.is-bianco>img.pn-bianco {
      opacity: 1 !important;
}

.item.item--portrait-new .pn-switch {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 0px solid rgba(255, 255, 255, .6);
      background: rgba(12, 31, 142, .7);
      color: #fff;
      font-size: 15px;
      cursor: pointer;
      z-index: 5;
      transition: background .25s, transform .4s;
}

.item.item--portrait-new .pn-switch:hover {
      background: #e84e1b;
      transform: rotate(180deg);
}

.item.item--portrait-new.is-bianco .pn-switch {
      background: #fff;
      color: #0c1f8e;
}

.pn-switch-all {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      border-radius: 30px;
      border: 1px solid rgba(255, 255, 255, .5);
      background: rgba(12, 31, 142, .7);
      color: #fff;
      font-family: 'Antonio', sans-serif;
      font-size: 18px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .25s;
}

.pn-switch-all:hover {
      background: #e84e1b;
}

.pn-switch-all.active {
      background: #fff;
      color: #0c1f8e;
}

/* Ombra proiettata a terra sotto i piedi */
.item.item--portrait-new::after {
      content: "";
      position: absolute;
      left: 6%;
      bottom: 2%;
      width: 70%;
      height: 7%;
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 50%);
      filter: blur(4px);
      z-index: 1;
      pointer-events: none;
}

.item.item--portrait-new .stemma,
.item.item--portrait-new .nr-maglia {
      display: none;
}

.item.item--portrait-new .meta {
      position: absolute;
      background: none;
      right: 6%;
      left: auto;
      top: 30%;
      bottom: auto;
      width: 62%;
      padding: 0;
      text-align: right;
      z-index: 3;
}

.item.item--portrait-new .meta .nome {
      font-size: clamp(12px, 1.7vw, 26px);
      font-weight: 700;
      color: #fff;
}

.item.item--portrait-new .meta .cognome {
      font-size: clamp(14px, 1.7vw, 26px);
      font-weight: 400;
      color: #fff;
}

.item.item--portrait-new .meta-top {
      position: absolute;
      right: 6%;
      left: auto;
      top: inherit;
      bottom: 0;
      width: 62%;
      text-align: right;
      padding: 0;
      z-index: 3;
}

.item.item--portrait-new .meta-top .pn-field {
      margin-bottom: 14px;
}

.item.item--portrait-new .meta-top .pn-label {
      display: block;
      font-size: clamp(12px, 1.3vw, 20px);
      font-weight: 300;
      color: #fff;
      opacity: .6;
      line-height: 100%;
      margin-bottom: 5px;
}

.item.item--portrait-new .meta-top .nrmaglia {
      display: block;
      font-weight: 500;
      color: #e84e1b;
      text-transform: uppercase;
}

.item.item--portrait-new .meta-top .eta,
.item.item--portrait-new .meta-top .nrmaglia,
.item.item--portrait-new .meta-top .ruolo {
      font-family: 'Antonio', sans-serif;
      font-size: clamp(16px, 2.7vw, 28px);
      line-height: 100%;
}

.item.item--portrait-new .pn-stagione {
      position: absolute;
      right: 6%;
      bottom: 5%;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Antonio', sans-serif;
      font-weight: 700;
      font-size: clamp(8px, .9vw, 12px);
      line-height: 1.15;
      text-align: left;
      color: #0c1f8e;
      z-index: 3;
}

.item.item--portrait-new .pn-stagione em {
      display: block;
      color: #e84e1b;
      font-style: normal;
      font-size: 1.5em;
}

.item.item--portrait-new .pn-stagione img {
      position: static;
      width: clamp(26px, 3.4vw, 50px);
      height: auto;
      aspect-ratio: auto;
      transform: none;
      filter: none;
}

@media (max-width: 520px) {
      .item.item--portrait-new {
            height: 80vh;
            aspect-ratio: inherit;
            border: 0px solid #fff;
            overflow: inherit;
      }

      .item.item--portrait-new .pn-wm {
            top: 12%;
            left: 0;
            right: 15px;
            font-size: clamp(60px, 4.6vw, 70px);
            color: rgba(255, 255, 255, .10);
      }

      .item.item--portrait-new .meta .nome {
            font-size: clamp(24px, 1.7vw, 26px);
      }

      .item.item--portrait-new .meta .cognome {
            font-size: clamp(24px, 1.7vw, 26px);
      }

      .item.item--portrait-new .meta-top {
            bottom: 15px
      }

      .item.item--portrait-new .meta-top .pn-label {
            font-size: clamp(20px, 1.2vw, 17px);
      }

      .item.item--portrait-new .meta-top .eta,
      .item.item--portrait-new .meta-top .nrmaglia,
      .item.item--portrait-new .meta-top .ruolo {
            font-size: clamp(30px, 1.9vw, 26px);
      }

      .item.item--portrait-new>img {
            transform: scale(1.05) translateX(-23%);
            height: 100%;
            object-fit: contain;
            width: auto;
            border: 0px solid #fff;
      }

      .item.item--portrait-new:hover img {
            transform: scale(1.05) translateX(-23%);
      }

      /* Ombra proiettata a terra sotto i piedi */
      .item.item--portrait-new::after {
            content: "";
            position: absolute;
            left: 1%;
            bottom: 2%;
            width: 70%;
            height: 7%;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 50%);
            filter: blur(4px);
      }
}