/**
 * 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, 5rem);
    padding-bottom: var(--padding-bottom, 5rem);
}

/* 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: 2.5rem;
    border-radius: 0.375rem;
    color: #fff;
}

.full-width-container-inner {
    width: 100%;
    max-width: 108rem;
    margin: 0 auto;
    padding: 0 9.375rem;
    box-sizing: border-box;
}

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

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

.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 9.375rem;
}

/* 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 2.5rem;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 2.5rem;
    }
}

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

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 5rem;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 2.5rem;
    }
}

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

    .full-width-container-inner {
        padding: 0 5rem;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 5rem;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 2.5rem;
    }
}

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

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 3.125rem;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 1.875rem;
    }
}

/* 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 1.25rem;
        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 1.25rem;
    }

    .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 1.25rem;
    }
}

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

    .full-width-container-inner {
        padding: 0 1rem;
    }

    .full-width-container-block.alignfull .full-width-container-inner {
        padding: 0 1rem;
    }

    .full-width-container-block.alignwide .full-width-container-inner {
        padding: 0 1rem;
    }
}