/**
 * Full Width Container Block - Frontend Styles
 * Responsive container wrapper for Gutenberg blocks
 */

.full-width-container-block {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    /* Use CSS custom properties with fallback - can be overridden by media queries */
    padding-top: var(--padding-top, 80px);
    padding-bottom: var(--padding-bottom, 80px);
}

/* Ensure text color applies to child elements (can be overridden by specific elements) */
.full-width-container-inner {
    color: inherit;
}

/* Blue overlay utility class - apply to inner content */
.full-width-container-inner .unitek-fullwidth-overlay {
    background-color: #074975;
    opacity: 0.9;
    padding: 40px;
    border-radius: 6px;
    color: #fff;
}

.full-width-container-inner {
    width: 100%;
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 150px;
    box-sizing: border-box;
}

/* Block Alignment Support */
.full-width-container-block.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.full-width-container-block.alignwide .full-width-container-inner {
    max-width: 100%;
    padding: 0 50px;
}

.full-width-container-block.alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.full-width-container-block.alignfull .full-width-container-inner {
    max-width: 100%;
    padding: 0 150px;
}

/* Fix for editor - prevent overflow */
.block-editor-block-list__layout .full-width-container-block.alignfull,
.editor-styles-wrapper .full-width-container-block.alignfull,
.wp-block-unitek-college-full-width-container .full-width-container-block.alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Responsive Design */

/* Desktop - 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
    .full-width-container-inner {
        padding: 0 40px;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 40px;
    }
}

/* Desktop - 1200px and below */
@media (max-width: 1200px) {
    .full-width-container-inner {
        padding: 0 80px;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 80px;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 40px;
    }
}

/* Tablet - 1024px and below */
@media (max-width: 1024px) {
    .full-width-container-block {
        /* Use responsive padding values calculated by JavaScript (80% of desktop = 64px) */
        padding-top: var(--padding-top-tablet, 64px);
        padding-bottom: var(--padding-bottom-tablet, 64px);
    }

    .full-width-container-inner {
        padding: 0 80px;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 80px;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 40px;
    }
}

/* Tablet - 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .full-width-container-inner {
        padding: 0 50px;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 50px;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 30px;
    }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
    .full-width-container-block {
        width: 100%;
        /* Use responsive padding values calculated by JavaScript (60% of desktop = 48px) */
        padding-top: var(--padding-top-mobile, 48px);
        padding-bottom: var(--padding-bottom-mobile, 48px);
    }

    .full-width-container-inner {
        padding: 0 20px;
        max-width: 100%;
    }

    .full-width-container-block.alignfull {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 20px;
    }

    .full-width-container-block.alignwide {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 20px;
    }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
    .full-width-container-block {
        /* Use responsive padding values calculated by JavaScript (40% of desktop = 32px) */
        padding-top: var(--padding-top-small-mobile, 32px);
        padding-bottom: var(--padding-bottom-small-mobile, 32px);
    }

    .full-width-container-inner {
        padding: 0 16px;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 16px;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 16px;
    }
}