/* =========================================================
   SEAWOLVES PLAYER CARD
   ========================================================= */

.sw-player-card-wrapper {
  position: relative !important;
  display: block !important;
  float: none !important;
  clear: both;

  width: 100% !important;
  max-width: 320px;

  height: auto !important;
  min-height: 383px;

  margin: 0 auto;
  padding: 0;

  border-radius: 20px;
  overflow: hidden;

  outline: 2px solid #FFFFFF;
  outline-offset: -1px;

  background: #FFFFFF;

  font-family: "Beachwood Tall Medium", sans-serif !important;
}


.sw-player-card-wrapper,
.sw-player-card-wrapper *,
.sw-player-card-wrapper *::before,
.sw-player-card-wrapper *::after {
  box-sizing: border-box;

  font-family: "Beachwood Tall Medium", sans-serif !important;
}


/* =========================================================
   KARTE
   ========================================================= */

.sw-player-card {
  position: relative !important;

  display: block !important;
  float: none !important;

  width: 100% !important;

  height: 383px !important;
  min-height: 383px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  background: #FFFFFF;
}


/* =========================================================
   SPIELERBILD
   ========================================================= */

.sw-player-image {
  position: relative;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover;
  object-position: top center;

  transition: transform 0.4s ease;
}


/* =========================================================
   SPIELERINFO
   ========================================================= */

.sw-player-card-info {
  position: absolute !important;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 2;

  display: block;

  padding: 15px 20px;

  background: #131313;
  color: #FFFFFF;
}


.sw-player-name {
  display: block;

  font-size: 23px;
}


.sw-player-position {
  display: block;

  font-size: 10px;

  color: #FFFFFF;

  text-transform: uppercase;
  letter-spacing: 1px;
}


.sw-player-number {
  position: absolute;

  right: 20px;
  bottom: 10px;

  font-size: 50px;
  font-weight: 800;

  line-height: 1;
  letter-spacing: 1px;

  color: #ef8200;
}


/* =========================================================
   STATISTIK-OVERLAY
   ========================================================= */

/*
 * Wichtig:
 *
 * Das Overlay bleibt semantisch IMMER im DOM.
 *
 * Es gibt:
 * - kein aria-hidden
 * - kein display:none
 * - kein visibility:hidden
 *
 * Screenreader haben deshalb jederzeit Zugriff
 * auf die Statistikwerte.
 */

.sw-player-stats-overlay {
  position: absolute !important;

  top: 0;
  right: 0;
  bottom: 70px;
  left: 0;

  z-index: 1;

  display: flex;

  flex-direction: column;
  justify-content: flex-end;

  padding: 20px;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(239, 130, 0, 0.7) 40%,
      rgba(239, 130, 0, 0.95) 100%
    );

  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  pointer-events: none;
}


/* =========================================================
   STATISTIKEN
   ========================================================= */

.sw-player-stats-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 15px 20px;
}


.sw-player-stat-item {
  display: block;

  text-align: left;
}


.sw-player-stat-value {
  display: block;

  margin-bottom: 4px;

  font-size: 32px;
  font-weight: 900;

  line-height: 1;

  color: #FFFFFF;
}


.sw-player-stat-label {
  display: block;

  font-size: 10px;
  font-weight: 700;

  color: #FFFFFF;

  text-transform: uppercase;
  letter-spacing: 1px;
}


.sw-player-stat-label-icon {
  font-size: 11px;

  color: rgba(255, 255, 255, 0.7);
}


/* =========================================================
   DESKTOP: HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .sw-player-card:hover
  .sw-player-image {
    transform: scale(1.05);
  }


  .sw-player-card:hover
  .sw-player-stats-overlay {
    opacity: 1;

    transform: translateY(0);
  }

}


/* =========================================================
   TOUCH: TAP
   ========================================================= */

@media (hover: none), (pointer: coarse) {

  .sw-player-card.is-stats-open
  .sw-player-stats-overlay {
    opacity: 1;

    transform: translateY(0);
  }

}


/* =========================================================
   TASTATURBEDIENUNG
   ========================================================= */

/*
 * Wenn die Seite mit Tab bedient wird, zeigen wir
 * die Statistiken permanent an.
 *
 * Dadurch braucht die Karte selbst keinen künstlichen
 * tabindex und keinen versteckten Button.
 */

html.sw-player-keyboard-mode
.sw-player-stats-overlay {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .sw-player-card-wrapper {
    max-width: 320px;

    min-height: 383px;
  }


  .sw-player-card-info {
    padding: 13px 16px;
  }


  .sw-player-name {
    font-size: 22px;
  }


  .sw-player-position {
    font-size: 9px;
  }


  .sw-player-number {
    right: 16px;
    bottom: 9px;

    font-size: 44px;
  }


  .sw-player-stats-overlay {
    bottom: 65px;

    padding: 16px;
  }


  .sw-player-stats-grid {
    gap: 12px 16px;
  }


  .sw-player-stat-value {
    font-size: 27px;
  }


  .sw-player-stat-label {
    font-size: 9px;
  }


  .sw-player-stat-label-icon {
    font-size: 10px;
  }

}


@media (max-width: 359px) {

  .sw-player-card-wrapper {
    max-width: 100%;
  }


  .sw-player-name {
    font-size: 20px;
  }


  .sw-player-number {
    font-size: 40px;
  }


  .sw-player-stat-value {
    font-size: 24px;
  }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

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

  .sw-player-image,
  .sw-player-stats-overlay {
    transition: none !important;
  }


  .sw-player-card:hover
  .sw-player-image {
    transform: none !important;
  }

}