/* JB3 AMP - Responsive Styles */
:root {
    --content-width: 100%;
    --max-content-width: 100%;
    --font-size-base: clamp(1rem, 2vw, 1.2rem);
    --line-height-base: 1.5;
}

/* Base responsive styles */
body.jb3-amp-enabled {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    max-width: 100%;
    overflow-x: hidden;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loading */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazyloaded {
    opacity: 1;
}

/* Responsive tables */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* Media queries for different devices */
@media (max-width: 600px) {
    :root {
        --font-size-base: clamp(0.9rem, 3vw, 1.1rem);
    }
    
    .mobile-hidden {
        display: none !important;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    :root {
        --max-content-width: 90%;
    }
}

@media (min-width: 1025px) {
    :root {
        --max-content-width: 80%;
        --font-size-base: 1.1rem;
    }
}

/* AMP-like optimizations */
.jb3-amp-element {
    will-change: transform;
    contain: content;
}

.jb3-amp-ad {
    display: block;
    overflow: hidden;
    position: relative;
}