/* Responsive Layout Framework
 * Provides consistent max-width and gutter spacing so sections scale smoothly
 */

:root {
    --page-max-width: max(1320px, 96vw);
    --page-gutter-inline: clamp(12px, 4vw, 48px);
}

/* Generic wrapper utility for top-level sections */
.responsive-shell {
    width: min(100%, var(--page-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter-inline);
    padding-right: var(--page-gutter-inline);
}

/* Apply responsive-shell behaviour to known page containers */
body,
main,
main > section,
.main-content-wrapper,
.content-balanced-container,
.balance-section,
.homepage-section,
.section-content-area,
.section-title-wrapper,
.main-container-wrapper,
.product-section,
.product-grid-container,
.banner-section,
.ad-section,
.category-section,
.promo-section,
[data-section-type],
[data-section-id],
.homepage-section .section-content,
.homepage-section .section-inner,
.homepage-section .content-area {
    width: min(100%, var(--page-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter-inline);
    padding-right: var(--page-gutter-inline);
    box-sizing: border-box;
}

/* Ensure Bootstrap containers respect custom width */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: min(100%, var(--page-max-width));
    padding-left: var(--page-gutter-inline);
    padding-right: var(--page-gutter-inline);
}

/* Rows should not overflow when gutters are adjusted */
.row {
    margin-left: calc(var(--page-gutter-inline) * -0.5);
    margin-right: calc(var(--page-gutter-inline) * -0.5);
}

.row > [class*="col"] {
    padding-left: calc(var(--page-gutter-inline) * 0.5);
    padding-right: calc(var(--page-gutter-inline) * 0.5);
}

/* Images and media scale within cards */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent excessive padding on very small screens */
@media (max-width: 575.98px) {
    :root {
        --page-gutter-inline: 16px;
    }
}

/* === AD GRID / BANNER - MOBILE HORIZONTAL SCROLL with 4:3 === */
/* Horizontal scroll on mobile/tablet, each item 4:3 aspect ratio */

@media (max-width: 991.98px) {
    .ad-grid,
    [class*="ad-grid-wrapper"] .ad-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        padding: 4px 8px !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
    }
    
    .ad-grid-item,
    .ad-grid .ad-grid-item,
    [class*="ad-grid-wrapper"] .ad-grid-item {
        flex: 0 0 auto !important;
        width: 120px !important;
        height: 90px !important; /* 4:3 = 120 * 0.75 */
        overflow: hidden !important;
        border-radius: 6px !important;
        scroll-snap-align: start !important;
    }
    
    .ad-grid-item img,
    .ad-grid .ad-grid-item img,
    [class*="ad-grid-wrapper"] .ad-grid-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}