/* Ad Placement Styles for Calculator Section */

/* Layout for calculator with side ads */
.calculator-with-ads {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 20px;
}

.calculator-main {
    flex: 1;
    max-width: 800px;
    width: 100%;
}

/* Side Ad Containers */
.ad-side {
    width: 300px;
    margin: 0;
    position: sticky;
    top: 100px;
}

/* Large Skyscraper Ad (300x600) */
.ad-large-skyscraper {
    height: 600px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    background-color: rgba(248, 249, 250, 0.7);
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
}

/* Responsive Styles */
@media (max-width: 1400px) {
    .calculator-with-ads {
        padding: 0 10px;
        gap: 10px;
    }
}

@media (max-width: 1200px) {
    .ad-side-left {
        display: none; /* Hide left ad on medium screens */
    }
    
    .calculator-main {
        max-width: 700px;
    }
}

@media (max-width: 992px) {
    .calculator-with-ads {
        flex-direction: column;
    }
    
    .ad-side {
        width: 100%;
        position: static;
        margin: 20px auto;
    }
    
    .ad-side-right {
        order: 3; /* Move right ad to bottom on mobile */
    }
    
    .calculator-main {
        order: 2;
        max-width: 100%;
    }
    
    .ad-large-skyscraper {
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .ad-large-skyscraper {
        height: 250px; /* Convert to medium rectangle on very small screens */
    }
    
    .ad-side .ad-size {
        display: none; /* Hide the original size text */
    }
    
    .ad-side .ad-placeholder::after {
        content: "300 × 250";
        font-size: 12px;
        color: var(--grey-color);
        display: block;
        margin-top: 5px;
    }
    
    .calculator-section {
        padding: 40px 0;
    }
    
    .calculator-main h3 {
        font-size: 24px;
    }
    
    .calculator-main .section-description {
        font-size: 14px;
    }
}