/* CSS Custom Properties for Consistent Scaling */
:root {
    --ad-font-base: 1.25rem;
    --ad-font-lg: 1.75rem;
    --ad-font-xl: 2rem;
    --ad-font-prominent: 1.5rem;
    --ad-spacing-tight: 0.5rem;
    --ad-spacing-normal: 1rem;
    --ad-spacing-loose: 1.5rem;
    --ad-gap-column: 1rem;
    --ad-z-unit: 1;
    --ad-z-model: 2;
    --ad-z-text: 3;
}

article:not([hidden]):not(.grid) {
    display: flex;
}

article {
    text-align: center;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media (min-width:1100px) {
    article {
        .unit {
            max-width: 100%;
            margin: 0;
        }
    }
}

.unit-ad:not(.noborder) {
    border: 1px solid #bbb;
    padding: 8px;
}

.unit-ad:not(.small) {
    grid-column: 1 / 3;
}

/* Base card structure - flexible heights */
article.unit-ad {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important;
}

.ad-head {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
}

/* Two-Column Layout System */
.ad-head--two-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--ad-gap-column) !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    padding: var(--ad-spacing-tight) !important;
}

.ad-head__primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: var(--ad-z-unit);
}

.ad-head__secondary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: var(--ad-spacing-tight);
    position: relative;
    z-index: var(--ad-z-model);
}

/* Mobile Responsive - Stack to Single Column */
@media (max-width: 800px) {
    .ad-head--two-column {
        grid-template-columns: 1fr !important;
        gap: var(--ad-spacing-normal) !important;
    }
    
    /* Mobile: Center everything horizontally and vertically */
    .ad-head,
    .ad-head__primary,
    .ad-head__secondary {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Mobile: Center small icons like .r410a */
    .r410a,
    .r32,
    .wifi,
    .seer,
    .energy-star,
    img[src*="r410a"],
    img[src*="r32"],
    img[src*="wifi"],
    img[src*="seer"] {
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
}

/* Typography System - Bigger, Bolder Text */
.ad-heading-xl {
    font-size: var(--ad-font-xl) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #08e !important;
    text-align: center;
}

.ad-heading-lg {
    font-size: var(--ad-font-lg) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #08e !important;
    text-align: center;
}

.ad-text-prominent {
    font-size: var(--ad-font-prominent) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: inline !important;
    color: inherit;
}

.ad-text-bold {
    font-weight: 700 !important;
    color: inherit;
}

/* Enhanced Base Typography */
.unit-ad {
    font-size: var(--ad-font-base) !important;
}

/* Ensure text remains inline-friendly */
.ad-inline-text {
    display: inline !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* Image Positioning System - Fix Models Hiding Behind Units */
.model-on-unit {
    position: relative !important;
    z-index: var(--ad-z-model) !important;
    max-width: 300px !important;
    height: auto !important;
    transform: translateY(-20%) !important; /* Overlay on top of unit */
    margin-bottom: -10% !important; /* Reduce spacing impact */
}

/* Ensure model images are always above units */
img[src*="model"], 
img[src*="person"],
.model,
.person {
    z-index: var(--ad-z-model) !important;
    position: relative !important;
}

.model-beside-unit {
    position: relative !important;
    z-index: var(--ad-z-model) !important;
    max-width: 250px !important;
    height: auto !important;
    align-self: center !important;
}

.unit-prominent {
    position: relative !important;
    z-index: var(--ad-z-unit) !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
}

.logo-constrained {
    max-width: 400px !important;
    height: auto !important;
    width: auto !important;
    z-index: var(--ad-z-model) !important;
    position: relative !important;
}

/* Whitespace Reduction */
.ad-compact {
    gap: var(--ad-spacing-tight) !important;
    padding: var(--ad-spacing-tight) !important;
}

.ad-minimal-spacing > * {
    margin: 0 !important;
    padding: 0.25rem 0 !important;
}

/* Ensure proper layering for text overlays on units */
.text-overlay,
.blue-model-overlay,
.red-model-overlay {
    position: absolute !important;
    z-index: var(--ad-z-text) !important;
    pointer-events: none !important;
}

/* Warranty SVG Styling - Global 12rem max-width */
.warranty,
img[src*="warranty.svg"],
img[src*="warranty"] {
    max-width: 12rem !important;
    height: auto !important;
    width: auto !important;
}

.data-bars {
    margin-top: auto;
    width: 100%;
    flex-shrink: 0;
}

grid {
    display: grid;
    align-items: stretch;
    gap: 1rem;

    &.col-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.gray-hd {
    font: 700 1rem sans-serif;
    background: #eee;
    border-bottom: 1px solid #ccc;
    margin: .25rem 0;
    color: #aaa;
    padding: .25rem 0;
    border-radius: .325rem .325rem 0 0;
}

/* AUTO-AD COMPACT SIDE-BY-SIDE LAYOUT */
article .auto-ad {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    .images {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: 0.5rem;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;

        img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 200px;
            object-fit: contain;
        }
    }

    .copy {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        flex: 1;
        width: 100%;
        max-width: 25rem;

        h2 {
            font-size: 1.25rem;
            line-height: 1.2;
            color: #08e;
            margin: 0;
            word-break: break-word;
            font-weight: bold;
            text-align: center;
        }

        h3 {
            margin: 0;
            color: #08e;
            font-size: 1rem;
            text-align: center;
        }

        .logo {
            width: auto;
            max-width: 100%;
            max-height: 200px;
        }

        .heatpump {
            font-size: 1.25rem;
            color: red;
            font-weight: bold;
            white-space: nowrap;
        }

        .wifi,
        .r410a,
        .r32,
        .r22 {
            width: 3rem;
            height: auto;
        }

        .warranty {
            font-size: 0.875rem;
            font-weight: bold;
            color: red;
            font-style: italic;
            text-align: center;
        }

        .seer {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: green;
            font-weight: bold;
            padding: 2px 6px;
            border: 1px solid #ccc;
            border-radius: 2px;
            margin: 0 2px;
            font-size: 0.875rem;

            &:before {
                content: 'SEER';
                font-size: 9px;
                line-height: 1;
            }
        }

        .seer-wrap {
            display: inline-flex;
            color: green;
            border: 1px solid #ccc;
            border-radius: 2px;
            align-items: center;
            padding: 2px 4px;
            font-weight: bold;
            margin: 0 2px;
            font-size: 0.875rem;

            .seer {
                border: 0;
                margin: 0;
                padding: 0 2px;
            }
        }

        .series {
            font-size: 1rem;
            color: #333;
            font-weight: bold;
            text-transform: uppercase;
        }

        .custom {
            font-size: 0.875rem;
            color: #666;
            font-style: italic;
            padding: 0.25rem 0.5rem;
            background: #f8f9fa;
            border-radius: 4px;
        }
    }
}

/* DESKTOP: Side-by-side layout */
@media (min-width:1100px) {
    article.unit-ad {
        min-height: auto !important;
        max-height: none !important;
    }

    article.unit-ad .ad-head {
        min-height: auto !important;
    }

    /* THE KEY CHANGE: Auto-ads display side-by-side on desktop */
    article .auto-ad {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem;

        .images {
            flex: 0 0 50%;
            width: 50%;
            max-width: 50%;
            padding: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 250px;
                object-fit: contain;
            }
        }

        .copy {
            flex: 0 0 50%;
            width: 50%;
            align-items: center;
            text-align: center;
            justify-content: center;
            padding: 0.5rem;

            h2 {
                font-size: 1.5rem;
                text-align: center;
            }

            h3 {
                font-size: 1.25rem;
                text-align: center;
            }

            .heatpump {
                font-size: 1.5rem;
            }

            .wifi,
            .r410a,
            .r32,
            .r22 {
                width: 4rem;
            }

            .warranty {
                font-size: 1rem;
                text-align: center;
            }

            .seer,
            .seer-wrap {
                font-size: 1rem;
            }

            .seer:before {
                font-size: 10px;
            }
        }
    }

    /* Small ads more compact */
    article.unit-ad.small {
        .auto-ad {
            .images {
                flex: 0 0 40%;
                width: 40%;

                img {
                    max-width: 150px;
                    max-height: 150px;
                }
            }

            .copy {
                flex: 0 0 60%;
                width: 60%;

                h2 {
                    font-size: 1.25rem;
                }

                h3 {
                    font-size: 1rem;
                }

                .seer,
                .seer-wrap {
                    font-size: 0.875rem;
                }
            }
        }
    }
}

/* Flex Siblings 50% Layout Utility */
.flex-siblings-50 {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ad-spacing-normal) !important;
    width: 100% !important;
}

/* Desktop: Side-by-side equal width layout */
@media (min-width: 1100px) {
    .flex-siblings-50 {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--ad-gap-column) !important;
        align-items: stretch !important;
    }
    
    /* UNIVERSAL CHILDREN: All child elements regardless of type */
    /* 2 children: 50% each (subtract half the gap) */
    .flex-siblings-50 > *:nth-child(1):nth-last-child(2),
    .flex-siblings-50 > *:nth-child(2):nth-last-child(1) {
        flex: 0 0 calc(50% - (var(--ad-gap-column) / 2)) !important;
        width: calc(50% - (var(--ad-gap-column) / 2)) !important;
        max-width: calc(50% - (var(--ad-gap-column) / 2)) !important;
        min-width: 0 !important;
    }
    
    /* 3 children: ~33.333% each (subtract 2/3 of gap) */
    .flex-siblings-50 > *:nth-child(1):nth-last-child(3),
    .flex-siblings-50 > *:nth-child(2):nth-last-child(2),
    .flex-siblings-50 > *:nth-child(3):nth-last-child(1) {
        flex: 0 0 calc(33.333% - (var(--ad-gap-column) * 2 / 3)) !important;
        width: calc(33.333% - (var(--ad-gap-column) * 2 / 3)) !important;
        max-width: calc(33.333% - (var(--ad-gap-column) * 2 / 3)) !important;
        min-width: 0 !important;
    }
    
    /* 4+ children: 25% each (subtract 3/4 of gap) */
    .flex-siblings-50 > *:nth-child(n):nth-last-child(n+4),
    .flex-siblings-50 > *:nth-child(n+4) {
        flex: 0 0 calc(25% - (var(--ad-gap-column) * 3 / 4)) !important;
        width: calc(25% - (var(--ad-gap-column) * 3 / 4)) !important;
        max-width: calc(25% - (var(--ad-gap-column) * 3 / 4)) !important;
        min-width: 0 !important;
    }
}

@media (min-width:1100px) {
    .unit-ad:not(.noborder) {
        border: 2px solid #bbb;
        padding: 1rem;
    }
}