/* Adding variables */
@import url("../../css/variables.css");

.index-menu__main-container {
    display: flex;
    flex-direction: column;
    width: var(--width);
    margin: 0 auto;
}

.index-menu__container-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0;
}

.index-menu__menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--s-spacing) * 1.5);
    padding: var(--m-spacing) var(--l-spacing);
    background: transparent;
    border-right: solid 2px var(--neoblue);
    overflow: hidden;
    transition: background 0.3s ease;
}

/* Asegura que el contenido esté por encima del fondo */
.index-menu__menu-item > * {
    position: relative;
    z-index: 1;
}

.index-menu__menu-item:last-child {
    border-right: none;
}

.menu-item__title {
    display: flex;
    align-items: center;
    gap: calc(var(--s-spacing) / 2);
}

.menu-item__title img {
    width: auto;
    height: 100%;
    max-height: 45px;
}

.menu-item__title-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--s-spacing) / 4);
}

.menu-item__title-container h2 {
    font-size: var(--bigtext);
    font-weight: var(--light);
    color: white;
}

.menu-item__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--s-spacing) / 2);
}

.menu-item__content h3 {
    font-size: var(--smalltext);
    font-weight: var(--regular);
    color: white;
}

.index-menu__menu-item p {
    font-size: calc(var(--smalltext) - 2px);
    font-weight: var(--light);
    color: white;
}

.index-menu__menu-item p:last-of-type {
    margin: 0;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    .menu-item__title img {
        width: auto;
        height: 36px;
        max-height: 36px;
    }

    .menu-item__title h2 {
        font-size: var(--text);
    }
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .index-menu__main-container {
        padding: 0;
    }

    .index-menu__container-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .index-menu__menu-item {
        padding: var(--l-spacing);
    }

    .index-menu__menu-item:nth-child(2),
    .index-menu__menu-item:nth-child(4) {
        border-right: none;
    }

    .index-menu__menu-item:nth-child(1),
    .index-menu__menu-item:nth-child(2),
    .index-menu__menu-item:nth-child(3) {
        border-bottom: solid 2px var(--neoblue);
    }

    .index-menu__menu-item:nth-last-child(2):first-child,
    .index-menu__menu-item:nth-last-child(1):nth-child(2) {
        border-bottom: none;
    }

    .index-menu__menu-item:nth-child(3) {
        border-right: solid 2px var(--neoblue);
        border-bottom: none;
    }

    .menu-item__title {
        gap: var(--s-spacing);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .index-menu__main-container {
        padding: 0 0 var(--l-spacing);
    }

    .index-menu__container-inner {
        grid-template-columns: 1fr;
    }

    .index-menu__menu-item {
        padding: var(--m-spacing) var(--s-spacing);
        border-right: none;
        border-bottom: solid 2px var(--neoblue);
    }

    .index-menu__menu-item:nth-last-child(2):first-child {
        border-bottom: solid 2px var(--neoblue);
    }
    
    .index-menu__menu-item:nth-child(3) {
        border-right: none;
    }

    .index-menu__menu-item:last-child {
        border-bottom: none;
    }
}