/* =========================================================
   ARCHIVIO GIOCATORI — DESIGN 2026
   ========================================================= */

.cc-players {

  --cc-players-rule: #dedede;

  width:
    min(
      1160px,
      calc(100% - 40px)
    );

  margin:
    0
    auto;

  padding:
    28px
    0
    72px;

  color: #222;

  font-family: var(--cc-font-sans);
}


.cc-players *,
.cc-players *::before,
.cc-players *::after {

  box-sizing: border-box;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.cc-breadcrumb {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 18px;

  color: #888;

  font-size: .61rem;

  font-weight: 800;
}


.cc-breadcrumb a {

  color: #555;

  text-decoration: none;
}


.cc-breadcrumb a:hover {

  color: var(--cc-blue-deep);
}


/* =========================================================
   HERO EDITORIALE
   ========================================================= */

.cc-players-head {

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(310px,.55fr);

  gap: 48px;

  align-items: end;

  padding:
    22px
    0
    24px;

  border-top:
    3px solid
    var(--cc-ink);

  border-bottom:
    1px solid
    var(--cc-players-rule);
}


.cc-players-head__eyebrow {

  display: block;

  margin-bottom: 8px;

  color: var(--cc-blue-deep);

  font-size: .62rem;

  font-weight: 900;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.cc-players-head__title {

  max-width: 780px;

  margin: 0;

  color: var(--cc-ink);

  font-size:
    clamp(
      2.7rem,
      6vw,
      5.6rem
    );

  line-height: .89;

  font-weight: 900;

  letter-spacing: -.067em;
}


.cc-players-head__intro {

  margin: 0;

  color: #666;

  font-size: .82rem;

  line-height: 1.55;

  font-weight: 650;
}


/* =========================================================
   QUICK NAV
   ========================================================= */

.cc-players-nav {

  display: flex;

  gap: 4px;

  margin-top: 14px;

  overflow-x: auto;

  scrollbar-width: none;
}


.cc-players-nav::-webkit-scrollbar {

  display: none;
}


.cc-players-nav a {

  flex:
    0
    0
    auto;

  padding:
    9px
    12px;

  color: #555;

  font-size: .61rem;

  font-weight: 900;

  letter-spacing: .055em;

  text-transform: uppercase;

  text-decoration: none;
}


.cc-players-nav a.is-active {

  background:
    linear-gradient(
      180deg,
      #2184b2 0%,
      #1172a8 50%,
      #105d90 100%
    );

  color: #fff;
}


.cc-players-nav a:hover:not(.is-active) {

  background: #f2f2f0;

  color: #111;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.cc-players-summary {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  margin-top: 22px;

  border-top:
    1px solid
    var(--cc-players-rule);

  border-bottom:
    1px solid
    var(--cc-players-rule);
}


.cc-players-summary__item {

  min-width: 0;

  padding:
    15px
    18px;

  border-right:
    1px solid
    var(--cc-players-rule);
}


.cc-players-summary__item:last-child {

  border-right: 0;
}


.cc-players-summary__value {

  display: block;

  overflow: hidden;

  color: #111;

  font-size: 1.45rem;

  line-height: 1;

  font-weight: 900;

  letter-spacing: -.045em;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.cc-players-summary__item:nth-child(1)
.cc-players-summary__value {

  color: var(--cc-blue-deep);
}


.cc-players-summary__item:nth-child(2)
.cc-players-summary__value {

  color: var(--cc-red);
}


.cc-players-summary__label {

  display: block;

  margin-top: 6px;

  color: #999;

  font-size: .53rem;

  font-weight: 900;

  letter-spacing: .07em;

  text-transform: uppercase;
}


/* =========================================================
   FILTER PANEL
   ========================================================= */

.cc-player-filters {

  margin-top: 24px;

  padding:
    16px;

  border:
    1px solid
    #e2e2e2;

  background: var(--cc-soft);
}


.cc-player-filters__grid {

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 12px;
}


.cc-filter-field {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 6px;
}


.cc-filter-field label {

  color: #777;

  font-size: .55rem;

  font-weight: 900;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.cc-filter-field select,
.cc-filter-field input {

  width: 100%;

  min-height: 42px;

  padding:
    0
    11px;

  border:
    1px solid
    #d5d5d5;

  border-radius: 0;

  background: #fff;

  color: #111;

  font: inherit;

  font-size: .78rem;

  font-weight: 700;
}


.cc-filter-field input {

  padding:
    9px
    11px;
}


.cc-filter-field select:focus-visible,
.cc-filter-field input:focus-visible {

  outline:
    3px solid
    rgba(17,114,168,.2);

  outline-offset: 1px;

  border-color:
    var(--cc-blue-deep);
}


.cc-player-filters__bottom {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 16px;

  margin-top: 14px;

  padding-top: 14px;

  border-top:
    1px solid
    #dedede;
}


.cc-player-filters__order {

  width:
    min(
      260px,
      100%
    );
}


.cc-player-filters__actions {

  display: flex;

  align-items: center;

  gap: 8px;
}


.cc-filter-submit,
.cc-filter-reset {

  min-height: 40px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0
    15px;

  border-radius: 0;

  font-size: .59rem;

  font-weight: 900;

  letter-spacing: .065em;

  text-transform: uppercase;

  text-decoration: none;
}


.cc-filter-submit {

  border: 0;

  background:
    linear-gradient(
      180deg,
      #2184b2 0%,
      #1172a8 50%,
      #105d90 100%
    );

  color: #fff;

  cursor: pointer;
}


.cc-filter-reset {

  border:
    1px solid
    #d5d5d5;

  background: #fff;

  color: #555;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.cc-players-section {

  margin-top: 34px;
}


.cc-players-section-head {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 10px;

  border-bottom:
    3px solid
    var(--cc-ink);
}


.cc-players-section-head h2 {

  margin: 0;

  color: #111;

  font-size: .76rem;

  font-weight: 900;

  letter-spacing: .09em;

  text-transform: uppercase;
}


.cc-players-section-head p {

  margin: 0;

  color: #999;

  font-size: .6rem;

  font-weight: 750;
}


/* =========================================================
   GRID
   ========================================================= */

.cc-players-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    0
    18px;
}


/* CARD */

.cc-player {

  min-width: 0;

  border-bottom:
    1px solid
    var(--cc-players-rule);
}


.cc-player__link {

  min-height: 112px;

  display: grid;

  grid-template-columns:
    78px
    minmax(0,1fr)
    auto;

  gap: 14px;

  align-items: center;

  padding:
    14px
    0;

  color: inherit;

  text-decoration: none;
}


.cc-player__link:focus-visible {

  outline:
    3px solid
    rgba(17,114,168,.26);

  outline-offset: 2px;
}


/* AVATAR */

.cc-player__avatar {

  width: 78px;
  height: 78px;

  display: grid;

  place-items: center;

  overflow: hidden;

  border:
    1px solid
    #e2e2e2;

  border-radius: 50%;

  background: #f1f1ef;
}


.cc-player__avatar img {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.cc-player__initials {

  width: 100%;
  height: 100%;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(17,114,168,.11),
      rgba(215,38,56,.08)
    );

  color: #51606a;

  font-size: .9rem;

  font-weight: 900;

  letter-spacing: .04em;
}


/* INFO */

.cc-player__content {

  min-width: 0;
}


.cc-player__role {

  display: block;

  margin-bottom: 4px;

  color: var(--cc-blue-deep);

  font-size: .52rem;

  font-weight: 900;

  letter-spacing: .075em;

  text-transform: uppercase;
}


.cc-player__name {

  display: block;

  overflow: hidden;

  color: #111;

  font-size: 1rem;

  line-height: 1.12;

  font-weight: 900;

  letter-spacing: -.018em;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.cc-player__meta {

  display: flex;

  flex-wrap: wrap;

  gap:
    5px
    10px;

  margin-top: 8px;

  color: #888;

  font-size: .59rem;

  font-weight: 750;
}


.cc-player__meta strong {

  color: var(--cc-red);

  font-weight: 900;
}


/* ARROW */

.cc-player__arrow {

  color: #bbb;

  font-size: 1.25rem;

  font-weight: 700;

  transition:
    transform
    .18s
    ease,
    color
    .18s
    ease;
}


.cc-player:hover
.cc-player__arrow {

  color: var(--cc-red);

  transform:
    translateX(
      2px
    );
}


/* EMPTY */

.cc-players-empty {

  padding:
    34px
    0;

  border-bottom:
    1px solid
    var(--cc-players-rule);

  color: #777;

  font-size: .82rem;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.cc-pagination {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 30px;
}


.cc-pagination a,
.cc-pagination__page {

  min-width: 40px;
  min-height: 40px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0
    11px;

  border:
    1px solid
    #ddd;

  background: #fff;

  color: #444;

  font-size: .65rem;

  font-weight: 850;

  text-decoration: none;
}


.cc-pagination__page.is-current {

  border-color:
    var(--cc-red);

  background:
    var(--cc-red);

  color: #fff;
}


.cc-pagination__ellipsis {

  padding:
    0
    4px;

  color: #999;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 940px) {

  .cc-players-head {

    grid-template-columns: 1fr;

    gap: 18px;

    align-items: start;
  }


  .cc-player-filters__grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .cc-players-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media (max-width: 620px) {

  .cc-players {

    width: 100%;

    padding:
      20px
      14px
      50px;
  }


  .cc-players-head__title {

    font-size:
      clamp(
        2.6rem,
        14vw,
        4rem
      );
  }


  .cc-players-summary__item {

    padding:
      12px
      8px;
  }


  .cc-players-summary__value {

    font-size: 1.15rem;
  }


  .cc-player-filters {

    padding:
      14px;
  }


  .cc-player-filters__grid {

    grid-template-columns: 1fr;
  }


  .cc-player-filters__bottom {

    align-items: stretch;

    flex-direction: column;
  }


  .cc-player-filters__order {

    width: 100%;
  }


  .cc-player-filters__actions {

    display: grid;

    grid-template-columns: 1fr;
  }


  .cc-filter-submit,
  .cc-filter-reset {

    width: 100%;
  }


  .cc-players-section-head {

    align-items: flex-start;

    flex-direction: column;

    gap: 6px;
  }


  .cc-players-grid {

    grid-template-columns: 1fr;
  }


  .cc-player__link {

    min-height: 94px;

    grid-template-columns:
      66px
      minmax(0,1fr)
      auto;

    gap: 11px;

    padding:
      12px
      0;
  }


  .cc-player__avatar {

    width: 66px;
    height: 66px;
  }


  .cc-pagination a,
  .cc-pagination__page {

    min-width: 44px;
    min-height: 44px;
  }


  .cc-pagination__prev,
  .cc-pagination__next {

    width: 100%;
  }

}


@media (prefers-reduced-motion: reduce) {

  .cc-player__arrow {

    transition: none;
  }


  .cc-player:hover
  .cc-player__arrow {

    transform: none;
  }

}