/* Flip Card CSS */

/*All- Feel free to change*/
.flip-card p {
    font-size: 16px;
}

/*Card Flips*/
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 260px;/*orginal: 320px*/
    min-width: 200px;/*orignal:300px*/
    flex: 1 1 calc(33.333% - 20px); /* up to 3 per row */
    max-width: calc(33.333% - 20px); /* prevents stretching past 3 */
    box-sizing: border-box;
    perspective: 1000px;
    text-shadow: 1px 1px 2px black;
}

.flip-card-front, .flip-card-back {
    border-radius: 20px;
}

.flip-card-wrapper {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* spacing between cards */
    justify-content: center; /* keeps items centered if fewer than 3 */
}




.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    object-fit: contain;
}


/* FRONT */
.flip-card-front {
    /* your colors, same as before */
    background: linear-gradient(135deg, var(--titan-orange) 0%, var(--brick-red) 50%, var(--titan-orange) 100%);
    background-size: 200% 200%; /* bigger so we can “pan” it */
    background-position: 0% 50%;
    transition: background-position .8s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* matches flip timing */
}

/* BACK */
/* (fixed a small typo: "50% 50%" isn’t valid in linear-gradient stops) */
.flip-card-back {
    font-size: 0.93rem;
    background: linear-gradient(135deg, #000 0%, #3e69ff 50%, #000 100%);
    background-size: 200% 200%;
    background-position: 100% 50%;
    transform: rotateY(180deg);
    transition: background-position .8s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    .flip-card-back ul li {
        margin-bottom: 10px;
        margin-right: 15px;
        font-size: 1.18rem;
    }


.flip-card-container {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* spacing between cards */
    justify-content: center; /* keeps items centered if fewer than 3 */
}

.flip-card-front strong {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* robust vertical + horizontal centering */
    width: 100%;
    box-sizing: border-box; /* keeps padding inside the 100% width */
    padding: 10px;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
}

.flip-card-back strong {
    display: block;
    margin: 20px auto 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    font-size: 1.35rem;
    text-shadow: 0 0 3px var(--titan-blue);
}

@media screen and (max-width: 1050px) {
    .flip-card-back strong {
        font-size: 1.1rem;
    }

    .flip-card-back ul li {
        font-size: 1rem;
    }
}
/*paragraph edits*/
.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

.flipped .flip-card-wrapper {
    transform: rotateY(180deg);
}

/* On hover, nudge the gradients the other way to create motion */
.flipped .flip-card-front {
    background-position: 100% 50%;
}

.flipped .flip-card-back {
    background-position: 0% 50%;
}

.flip-card-front,
.flip-card-back {
    border: 2px solid transparent; /* reserve the space */
    border-radius: 20px;
}



.flip-card:hover .flip-card-wrapper {
    transform: rotateY(180deg);
}


.flip-card:hover .flip-card-back {
    border-color: var(--med-blue);
    box-shadow: 0 0 20px rgba(64, 96, 255, 0.50);
    background-position: 0% 50%;
}

.flip-card:hover .flip-card-front {
    border-color: rgb(255, 128, 32, 0.40);
    box-shadow: 0 0 20px rgba(64, 96, 255, 0.50);
    background-position: 100% 50%;
}

/*Override CSS for default template*/
.flip-card-back{
    padding-left:10px;
    color:white;
}