/* Extracted from resources/views/frontend/partials/posts/responsive-styles.blade.php */
/* Mobile Responsive Styles for Post Layouts */

/* General responsive adjustments */
@media (max-width: 991px) {
    .mainContainer {
        margin: 1rem 0;
    }

    .container-fluid {
        padding: 0 10px;
    }

    /* Image responsive */
    figure img {
        width: 100% !important;
        height: auto;
    }

    /* Carousel responsive */
    .carousel-item img {
        max-height: 300px;
    }

    /* Sidebar adjustments */
    .col-lg-2,
    .col-lg-4,
    .col-lg-6,
    .col-lg-8,
    .col-lg-10 {
        padding: 10px;
    }

    /* Related stories grid */
    .col-lg-4 {
        margin-bottom: 15px;
    }

    /* Social icons */
    .social-icons {
        text-align: center;
    }

    /* Newsletter section */
    .newsletter {
        margin-top: 20px;
    }

    /* Stack columns on mobile & tablet */
    .row .col-lg-2,
    .row .col-lg-4,
    .row .col-lg-6,
    .row .col-lg-8,
    .row .col-lg-10 {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Hide sidebar on mobile & tablet */
    .col-lg-2.border-right,
    .col-lg-2.border-left {
        display: none !important;
    }

    /* Adjust main content width */
    .col-lg-6,
    .col-lg-10 {
        width: 100% !important;
    }

    /* Related stories single column */
    .col-lg-4 {
        width: 100% !important;
    }
}

@media (max-width: 576px) {

    /* Extra small devices */
    .mainContainer {
        margin: 0.5rem 0;
    }

    .carousel-item img {
        max-height: 250px;
    }
}

/* Ensure proper spacing */
.border {
    border: 1px solid #dee2e6;
}

.border-right {
    border-right: 1px solid #dee2e6;
}

/* Carousel controls responsive */
.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

@media (max-width: 768px) {

    .carousel-control-prev,
    .carousel-control-next {
        width: 15%;
    }
}

/* Edit button positioning */
.edit-button {
    position: fixed;
    /* top: 20px; */
    right: 20px;
    z-index: 1000;
    background: #f79521;
    color: white;
    padding: 10px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    bottom: 20px;
}

@media (max-width: 768px) {
    .edit-button {
        right: 10px;
        padding: 8px;
    }
}

/* Ad responsive */
.ads {
    text-align: center;
    margin: 10px 0;
}

.ads img {
    max-width: 100%;
    height: auto;
}

/* Text readability */
.font-size-14 {
    font-size: 14px;
}

.font-size-11 {
    font-size: 11px;
}

@media (max-width: 768px) {
    .font-size-14 {
        font-size: 12px;
    }

    .font-size-11 {
        font-size: 10px;
    }
}