/* GRID */
.sports-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /*max-width: 1000px;*/
  margin: 0 auto;
}

/* CARD */
.sport-card {
  position: relative;
  height: 250px;
  cursor: pointer;
  z-index: 1;
}

/* MAIN */
.card-main {
  position: absolute;
  inset: 0;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  transition: all 0.4s ease;
}

.sport-card:hover .card-main {
  background: var(--hover-bg);
  border-color: var(--hover-bg);
}

/* LOGO */
.logo {
  width: var(--img-width, 80px);
}

/* EXTENSION BASE */
.card-extension {
  position: absolute;
  background: var(--hover-bg);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* RIGHT */
.position-right .card-extension {
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
}

.position-right:hover .card-extension {
  width: 100%;
}

/* LEFT */
.position-left .card-extension {
  top: 0;
  right: 100%;
  width: 0;
  height: 100%;
}

.position-left:hover .card-extension {
  width: 100%;
}
/* ================= TOP (EXPAND OUTSIDE) ================= */
.position-top .card-extension {
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 0;
  transition: height 0.4s ease;
}

.position-top:hover .card-extension {
  height: 100%;
}

/* ================= BOTTOM (EXPAND OUTSIDE) ================= */
.position-bottom .card-extension {
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  transition: height 0.2s ease;
}

.position-bottom:hover .card-extension {
  height: 100%;
}
/* CONTENT */
.extension-content {
  min-width: 250px;
  padding: 30px;
}

/* BLANK CARD */
.blank-card {
  pointer-events: none;
  background:var(--blank-bg);
}

.blank-card .card-main {
  background: transparent;
  border: none;
}

.blank-card .card-extension {
  display: none;
}

/* HOVER Z INDEX */
.sport-card:hover {
  z-index: 10;
}

/* FLIP BASE */
.card-inner {
  width: 100%;
  height: 100%;
}
/* FRONT BACKGROUND */
.card-main {
  background: var(--card-bg, #f5f5f5);
}

/* BACKGROUND (hover / flip) */
.card-extension,
.card-back {
  background: var(--hover-bg);
}

/* DESCRIPTION COLOR */
.extension-content p {
  color: var(--desc-color, #ffffff);
}


/* MOBILE FLIP MODE */
@media (max-width: 768px) {

  .sport-card {
    perspective: 1000px;
  }

  .card-inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }

  .sport-card.active .card-inner {
    transform: rotateY(180deg);
  }

  .card-front,
  .card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
  }

  .card-back {
    transform: rotateY(180deg);
    background: var(--hover-bg);
    display: flex;
    align-items: center;
  }

  /* Disable desktop hover behavior */
  .card-extension {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
  .blank-card {
        pointer-events: none;
        display: none;
    }
}