.rekordi-section {
    padding: var(--sp4);
    display: flex;
    flex-direction: column;
    gap: var(--sp4);
    border-bottom: var(--border-s);
}

.rekordi-menu {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border: var(--border-s);
    border-radius: var(--border-r);
}

.rekordi-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp4);
    border-right: var(--border-s);
}

.rekordi-gender {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: 1fr;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.rekordi-category {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    text-align: center;

}



.gender {
    font-weight: 500;
    font-size: 26px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#female {
    border-left: var(--border-s);
}

.weight-class {
    display: flex;
    height: 100%;
    width: 100%;
    border-left: var(--border-s);
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
}

.rekordi-display {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-radius: var(--border-r);
    overflow: hidden;
}

.rekordi-card {
    border: var(--border-s);
    height: 75vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: end;
}

.rekordi-card-content {
    width: 100%;
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.lift-type {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp4);
    width: 100%;
    top: 0;
    position: absolute;
}

.lift-type-line {
    height: 1px;
    background-color: var(--border-c-alt);
    width: 100%;
    z-index: 1;
}

.lift-type-title {
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-text--secondary);
    white-space: nowrap;

}

.lift-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--sp3);
}

.record-weight {
    font-size: 100px;
    font-weight: 800;
    color: var(--color-text--secondary);
    margin-top: auto;
}

.record-weight::after{
    content: "Кг";
    font-size: 100px;
    font-weight: 800;
}

.athlete-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text--secondary);
}

.athlete-club {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text--secondary);
}

.athlete-date, .athlete-competition {
    padding: 0px var(--sp2);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text--secondary);
}

.rekordi-card.updating .athlete-competition,
.rekordi-card.updating .athlete-date {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}


.rekordi-card .athlete-competition,
.rekordi-card .athlete-date {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rekordi-bg-overlay {
    bottom: 0;
    width: 100%;
    height: 80%;
    position: absolute;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

.rekordi-bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    object-fit: cover;
}

.rekordi-bg-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.rekordi-card.updating .rekordi-bg-img img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.rekordi-card .rekordi-bg-img img {
  opacity: 1;
  transition: opacity 0.4s ease;
}


@media (max-width: 1500px) {


    .rekordi-menu {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.7fr 1fr;
    }

    .rekordi-title {
        border-bottom: var(--border-s);
        border-right: none;
    }

    .rekordi-gender {
        border-bottom: var(--border-s);
    }

    .rekordi-category {
        grid-column: span 1;
    }

    .weight-class-first {
        border-left: none;
    }

    .rekordi-display {
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: 1fr 1fr;
    }
}


@media (max-width: 800px) {

    .rekordi-category {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr;
    }

    .weight-class {
        border-bottom: var(--border-s);
    }

    .weight-class-first-2ndrow {
        border-left: none;
    }

    .weight-class-bottom-row {
        border-bottom: none;
    }


    .rekordi-display {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr; 
    }

    .rekordi-card {
        height: 70vh;
    }

    .rekordi-card-content {
        height: 60%;
    }


}







.rekordi-card .record-weight,
.rekordi-card .athlete-name,
.rekordi-card .athlete-club {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.rekordi-card.updating .record-weight,
.rekordi-card.updating .athlete-name,
.rekordi-card.updating .athlete-club {
  opacity: 0;
  transform: translateY(10px);
}

/* Active state for gender & weight buttons */
.rekordi-gender .gender.active,
.rekordi-category .weight-class.active {
  background-color: #5f5f5f;
  color: #ffffff;
  padding: 4px 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}