/* ==========================
   TIRADA DE TAROT EN CREU
========================== */

.tarot-cross {

    max-width: 1100px;

    margin: 0 auto;

    padding: 70px 20px;

    text-align: center;

}


.tarot-cross h1 {

    color: var(--primary);

    font-size: 42px;

    margin-bottom: 10px;

}


.tarot-intro {

    max-width: 700px;

    margin: 0 auto 50px;

    color: #666;

}


/* CONTENIDOR DE LA CREU */

.cross-container {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    grid-template-rows:
        auto
        auto
        auto;

    grid-template-areas:

        ". top ."

        "left . right"

        ". bottom .";

    gap: 30px;

    max-width: 850px;

    margin: auto;

    align-items: center;

}


/* CARDS */

.tarot-card {

    background: white;

    min-height: 190px;

    padding: 28px 22px;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.10);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.tarot-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 14px 30px rgba(61,43,86,.20);

}


.tarot-card h2 {

    color: var(--primary);

    font-size: 24px;

    margin: 8px 0 10px;

}


.tarot-card p {

    margin: 0;

    max-width: 230px;

    color: #555;

}


.card-symbol {

    font-size: 32px;

}


/* POSICIÓ DE LES CARDS */

.card-top {

    grid-area: top;

}


.card-left {

    grid-area: left;

}


.card-right {

    grid-area: right;

}


.card-bottom {

    grid-area: bottom;

}

.card-centre {

    grid-area: center;

}


/* ==========================
   MÒBIL
========================== */

@media (max-width: 700px) {

    .tarot-cross {

        padding: 50px 15px;

    }


    .tarot-cross h1 {

        font-size: 32px;

    }


    .cross-container {

        grid-template-columns: 1fr 1fr;

        grid-template-areas:

            "top top"

            "left right"

            "bottom bottom";

        gap: 15px;

    }


    .tarot-card {

        min-height: 170px;

        padding: 20px 12px;

    }


    .tarot-card h2 {

        font-size: 19px;

    }


    .tarot-card p {

        font-size: 14px;

    }

/* ------------------------------ */
/*        TAULA                   */
/* ------------------------------ */



.taula {
    margin: 0 auto;
    border-collapse: collapse;

}

/* imatge cartes tarot */
.taula img {
    width: 80px;
    height: auto;
}
@media (max-width: 600px) {
    .taula img {
        width: 30px;
        height: auto;
    }
}

.taula th,
.taula td {
    /*border: 1px solid black;*/
    padding: 10px 20px;
    vertical-align: top;
    text-align: center;
}

/* ------------------------------ */
/*        Anime cartes            */
/* ------------------------------ */
.carta-flip {
    width: 150px;
    height: 250px;
    perspective: 1000px;
}

.carta-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.carta-flip.girada .carta-inner {
    transform: rotateY(180deg);
}

.carta-darrera,
.carta-davant {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.carta-darrera img,
.carta-davant img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carta-davant {
    transform: rotateY(180deg);
}

}