/* Aspect Ratio Spacer Block Styles */
.aspect-spacer {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Ensure aspect ratio works properly */
.aspect-spacer::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 0; /* Will be set by aspect-ratio property */
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1) {
    .aspect-spacer {
        position: relative;
    }
    
    .aspect-spacer::before {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 fallback */
    }
}

/* Specific aspect ratio fallbacks */
.aspect-spacer[style*="aspect-ratio: 1/1"]::before {
    padding-bottom: 100%;
}

.aspect-spacer[style*="aspect-ratio: 4/3"]::before {
    padding-bottom: 75%;
}

.aspect-spacer[style*="aspect-ratio: 16/9"]::before {
    padding-bottom: 56.25%;
}

.aspect-spacer[style*="aspect-ratio: 21/9"]::before {
    padding-bottom: 42.86%;
}

.aspect-spacer[style*="aspect-ratio: 3/2"]::before {
    padding-bottom: 66.67%;
}

.aspect-spacer[style*="aspect-ratio: 2/3"]::before {
    padding-bottom: 150%;
}

.aspect-spacer[style*="aspect-ratio: 9/16"]::before {
    padding-bottom: 177.78%;
}

/* Visibility controls - hide by default on all breakpoints */
.hide-desktop,
.hide-tablet,
.hide-mobile {
    display: none;
}

/* Show on desktop when not hidden */
@media (min-width: 1025px) {
    .aspect-spacer:not(.hide-desktop) {
        display: block;
    }
}

/* Show on tablet when not hidden */
@media (min-width: 769px) and (max-width: 1024px) {
    .aspect-spacer:not(.hide-tablet) {
        display: block;
    }
}

/* Show on mobile when not hidden */
@media (max-width: 768px) {
    .aspect-spacer:not(.hide-mobile) {
        display: block;
    }
}

/* Wide and full width alignments */
.aspect-spacer.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.aspect-spacer.alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Ensure full width spacers don't overflow */
.aspect-spacer.alignfull {
    width: 100vw;
    max-width: 100vw;
}

/* Debug mode - uncomment to see spacer boundaries */
/*
.aspect-spacer {
    border: 2px dashed #007cba;
    background: rgba(0, 124, 186, 0.1);
}

.aspect-spacer::after {
    content: attr(style);
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    z-index: 10;
}
*/