/* ads.css */

/* Styles for the main content area */
main[layout\:fragment="content"] {
    padding: 20px;
    box-sizing: border-box;
}

/* Fixed Ad for larger screens */
.fixed-sidebar-ad {
    position: fixed;
    top: 5rem; /* Adjust this value to align vertically with your content, e.g., the 'R' in Registruotis */
    right: 0;
    width: 250px; /* Fixed width for the ad */
    z-index: 1000;
    padding: 15px; /* Internal padding for the ad content */
    background-color: var(--clr-highlight-background, #f8f9fa); /* Use a theme variable for background */
    border: 1px solid var(--clr-border, #ced4da); /* Use a theme variable for border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for a 'floaty' effect */
    min-height: 200px; /* Ensure it has a minimum height */
    display: none; /* Hidden by default, shown only on large screens */
}

/* Show fixed ad only on large screens (lg and up) */
@media (min-width: 992px) { /* Bootstrap's 'lg' breakpoint */
    .fixed-sidebar-ad {
        display: block;
    }
}

/* Responsive Ad Container (for smaller screens, within the grid) */
.responsive-ad-container {
    background-color: var(--clr-highlight-background, #f8f9fa);
    border: 1px solid var(--clr-border, #ced4da);
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 200px; /* Default height for this ad slot */
    text-align: center;
    display: none; /* Hidden by default, shown only on md/sm/xs screens */

    width: 100%;
    box-sizing: border-box;
}

/* Show responsive ad container on medium and smaller screens */
@media (max-width: 991.98px) { /* Applies to md, sm, xs */
    .responsive-ad-container {
        display: block;
    }

}

/* Adjustments for medium screens (md breakpoint: 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .responsive-ad-container {
        margin-top: 0; /* No top margin when next to content */
    }

    .row > .col-lg-3.col-md-4 {
            padding-left: 0;
            padding-right: 0;
        }
}

/* Adjustments for small screens (sm breakpoint: 576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .responsive-ad-container {
        margin-top: 20px; /* Add some space above it when stacked */
        min-height: 0; /* Allow it to collapse if horizontal */
        height: auto; /* Allow height to adjust */
    }
}

/* Horizontal Ad for very small screens (below 576px) */
@media (max-width: 575px) {
    .responsive-ad-container {
        width: 100%; /* Make it full width of its parent column/container */
        min-height: 0; /* Reset min-height as it's now horizontal */
        height: 50px; /* Common small horizontal ad height (e.g., 320x50, 468x60). Adjust as needed. */
        padding: 5px; /* Adjust padding for smaller horizontal ad */
        margin-top: 15px; /* Add a bit of top margin */
        text-align: center; /* Center content within the horizontal ad */
        /* background-color: var(--clr-highlight-background, #e0f7fa); */ /* Optional: If you use a different background for horizontal ads */
    }
}