/* SIAE Portfolio mega-menu
 * Reconstruction of Joomla module 295.
 */

/* --------------------------------------------------------------------------
 * Desktop
 * -------------------------------------------------------------------------- */

@media (min-width: 922px) {

    /*
     * Portfolio is the only first-level menu item transformed into a
     * mega-menu.
     */
    .ast-builder-menu-1
    .main-header-menu
    > .siae-menu-portfolio-root
    > .sub-menu {
        width: 900px !important;
        min-width: 900px;
        padding: 0;
        left: -210px;
        border: 1px solid #e2e2e2;
        background: #fff;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
    }

    /*
     * Technical WordPress/Joomla child used only as the mega-menu container.
     */
    .ast-builder-menu-1
    .siae-menu-portfolio-content {
        width: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
    }

    .siae-portfolio-mega {
        display: grid;
        grid-template-columns: 210px 1fr;
        width: 100%;
        min-height: 145px;

        font-family: "Open Sans", Arial, sans-serif;
        background: #fff;
    }

    /* Left vertical tabs */

    .siae-portfolio-mega__tabs {
        display: flex;
        flex-direction: column;

        margin: 0;
        padding: 0;

        border-right: 1px solid #ddd;
        background: #fff;
    }

    .siae-portfolio-mega__tab {
        position: relative;

        display: flex;
        align-items: center;

        width: 100%;
        min-height: 42px;

        padding: 0 35px 0 17px;
        margin: 0;

        border: 0;
        border-bottom: 1px solid #e5e5e5;

        background: #fff;
        color: #666;

        font-family: "Open Sans", Arial, sans-serif;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        text-align: left;
        text-transform: uppercase;

        cursor: pointer;
        appearance: none;
    }

    .siae-portfolio-mega__tab::after {
        content: "»";

        position: absolute;
        right: 16px;
        top: 50%;

        transform: translateY(-50%);

        color: #aaa;
        font-size: 15px;
        font-weight: 400;
    }

    .siae-portfolio-mega__tab:hover,
    .siae-portfolio-mega__tab:focus,
    .siae-portfolio-mega__tab.is-active {
        background: #20c6c5;
        color: #fff;
        outline: none;
    }

    .siae-portfolio-mega__tab:hover::after,
    .siae-portfolio-mega__tab:focus::after,
    .siae-portfolio-mega__tab.is-active::after {
        color: #fff;
    }

    /* Right product area */

    .siae-portfolio-mega__content {
        position: relative;
        padding: 4px 8px;
        overflow: hidden;
        background: #fff;
    }

    .siae-portfolio-mega__panel {
        margin: 0;
        padding: 0;
    }

    .siae-portfolio-mega__panel[hidden] {
        display: none !important;
    }

    .siae-portfolio-mega__panel.is-active {
        display: block;
    }

    .siae-portfolio-mega__panel-title {
        display: none;
    }

    .siae-portfolio-mega__products {
        display: flex;
        align-items: flex-start;
        gap: 14px;

        margin: 0;
        padding: 0;
    }

    .siae-portfolio-mega__product {
        display: block;
        flex: 0 0 140px;

        width: 140px;
        margin: 0;
        padding: 0;

        text-decoration: none;
        line-height: 0;
    }

    .siae-portfolio-mega__product img {
        display: block;

        width: 140px;
        height: 180px;

        max-width: none;
        margin: 0;
        padding: 0;

        border: 0;
        object-fit: contain;
    }

    .siae-portfolio-mega__product:hover img,
    .siae-portfolio-mega__product:focus img {
        opacity: 0.88;
    }
}


/* --------------------------------------------------------------------------
 * Mobile / Astra hamburger
 * -------------------------------------------------------------------------- */

@media (max-width: 921px) {

    .siae-menu-portfolio-content {
        padding: 0 !important;
    }

    .siae-portfolio-mega {
        width: 100%;
        padding: 10px 15px 18px;
        background: #fff;
    }

    /*
     * On mobile there is no need for interactive tabs.
     * Show all four groups as normal sections.
     */
    .siae-portfolio-mega__tabs {
        display: none;
    }

    .siae-portfolio-mega__panel,
    .siae-portfolio-mega__panel[hidden] {
        display: block !important;
        margin-bottom: 22px;
    }

    .siae-portfolio-mega__panel:last-child {
        margin-bottom: 0;
    }

    .siae-portfolio-mega__panel-title {
        display: block;

        margin: 0 0 10px;
        padding: 7px 10px;

        background: #20c6c5;
        color: #fff;

        font-family: "Open Sans", Arial, sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .siae-portfolio-mega__products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 140px));
        gap: 12px;
        justify-content: start;
    }

    .siae-portfolio-mega__product {
        display: block;
        width: 140px;
        line-height: 0;
    }

    .siae-portfolio-mega__product img {
        display: block;
        width: 140px;
        height: 180px;
        object-fit: contain;
    }
}

/* SIAE PORTFOLIO MEGA MENU WIDTH FIX */

@media (min-width: 922px) {

    .ast-builder-menu-1
    .main-header-menu
    > .siae-menu-portfolio-root
    > .sub-menu {
        width: 985px !important;
        min-width: 985px !important;
    }

    .siae-portfolio-mega__content {
        overflow: visible;
    }
}

/* SIAE PORTFOLIO MOBILE ACCORDION / CAROUSEL */

@media (max-width: 921px) {

    .siae-portfolio-mega {
        padding: 10px 10px 18px;
        overflow: hidden;
    }

    .siae-portfolio-mega__content {
        width: 100%;
        overflow: hidden;
    }

    /*
     * All panels exist in the DOM, but only the selected accordion
     * section exposes its product carousel.
     */
    .siae-portfolio-mega__panel,
    .siae-portfolio-mega__panel[hidden] {
        display: block !important;
        margin: 0;
        padding: 0;
    }

    .siae-portfolio-mega__panel-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 34px;

        margin: 0;
        padding: 0 11px;

        border: 0;
        border-bottom: 1px solid #e4e4e4;

        background: #fff;
        color: #666;

        font-family: "Open Sans", Arial, sans-serif;
        font-size: 11px;
        font-weight: 500;
        line-height: 34px;
        text-align: left;
        text-transform: uppercase;

        appearance: none;
        cursor: pointer;
    }

    .siae-portfolio-mega__panel-arrow {
        color: #aaa;
        font-size: 15px;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .siae-portfolio-mega__panel.is-mobile-open
    > .siae-portfolio-mega__panel-title {
        background: #20c6c5;
        color: #fff;
    }

    .siae-portfolio-mega__panel.is-mobile-open
    > .siae-portfolio-mega__panel-title
    .siae-portfolio-mega__panel-arrow {
        color: #fff;
        transform: rotate(90deg);
    }

    /*
     * Collapsed sections show only their heading.
     */
    .siae-portfolio-mega__panel
    .siae-portfolio-mega__products {
        display: none;
    }

    /*
     * Open section behaves like the original horizontal image slider.
     */
    .siae-portfolio-mega__panel.is-mobile-open
    .siae-portfolio-mega__products {
        display: flex;

        width: max-content;
        max-width: none;

        margin: 10px 0 14px;
        padding: 0;

        flex-wrap: nowrap;
        gap: 12px;

        transition: transform 0.45s ease;
        will-change: transform;
    }

    .siae-portfolio-mega__product {
        flex: 0 0 140px;
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }

    .siae-portfolio-mega__product img {
        display: block;
        width: 140px;
        height: 180px;
        max-width: none;
    }
}

@media (max-width: 921px) {

    .siae-portfolio-mega__panel.is-mobile-open
    .siae-portfolio-mega__products {
        cursor: grab;
        user-select: none;
        touch-action: pan-y;
    }

    .siae-portfolio-mega__panel.is-mobile-open
    .siae-portfolio-mega__products.is-dragging {
        cursor: grabbing;
    }

    .siae-portfolio-mega__product,
    .siae-portfolio-mega__product img {
        -webkit-user-drag: none;
        user-drag: none;
    }
}