/**
 * Block Width Controls - Frontend Styles
 * 
 * Applies width constraints to blocks on large displays
 * 
 * @package WebtronDocs
 */

/* Medium Width Constraint - 800px max */
.webtron-width-medium {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Contained Width Constraint - 600px max */
.webtron-width-contained {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* For images, ensure the image itself respects the constraint */
.webtron-width-medium.wp-block-image,
.webtron-width-contained.wp-block-image {
    display: block;
}

.webtron-width-medium.wp-block-image img,
.webtron-width-contained.wp-block-image img {
    width: 100%;
    height: auto;
}

/* For videos */
.webtron-width-medium.wp-block-video,
.webtron-width-contained.wp-block-video {
    display: block;
}

.webtron-width-medium.wp-block-video video,
.webtron-width-contained.wp-block-video video {
    width: 100%;
    height: auto;
}

/* For embeds */
.webtron-width-medium.wp-block-embed,
.webtron-width-contained.wp-block-embed {
    display: block;
}

/* For Enhanced Video block */
.webtron-width-medium.wp-block-webtron-enhanced-video,
.webtron-width-contained.wp-block-webtron-enhanced-video {
    display: block;
}

/* For Media & Text - ensure the whole block is constrained */
.webtron-width-medium.wp-block-media-text,
.webtron-width-contained.wp-block-media-text {
    /* Override grid for constrained widths */
}

/* Cover block */
.webtron-width-medium.wp-block-cover,
.webtron-width-contained.wp-block-cover {
    display: block;
}

/* On smaller screens, these constraints should be looser */
@media (max-width: 800px) {
    .webtron-width-medium {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .webtron-width-contained {
        max-width: 100%;
    }
}

/* Large display optimization - only apply constraints on 1920px+ */
@media (min-width: 1920px) {
    /* Add subtle shadow/border to indicate constrained content */
    .webtron-width-medium,
    .webtron-width-contained {
        /* Styling is applied but no additional visual treatment needed */
    }
}