/**
 * Responsive Design Fixes
 * Fixes text alignment, column layout, margins, and padding across all pages
 */

/* ===========================================
   GALLERY CARD FIXES - FEBlog and similar pages
   =========================================== */

/* Gallery container - add padding on all screen sizes */
.u-gallery {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* Ensure gallery items have proper height */
.u-gallery-item {
    min-height: 420px !important;
}

.u-gallery-item .u-back-slide {
    min-height: 300px !important;
}

/* Gallery inner grid */
.u-gallery-inner {
    max-width: 100% !important;
    gap: 15px !important;
}

/* Individual gallery items */
.u-gallery-item {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Section containing gallery */
.u-section-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.u-section-5 .u-sheet {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Override u-expanded-width for gallery */
.u-gallery.u-expanded-width {
    width: calc(100% - 40px) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* ===========================================
   GENERAL CONTENT PADDING - Prevent edge-to-edge stretching
   =========================================== */

/* All sections should have minimum padding */
section[class*="u-section"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Sheet containers should be contained */
.u-sheet {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Expanded width elements should have margins */
.u-expanded-width {
    width: calc(100% - 40px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Row and container layouts */
.u-row,
.u-layout-row {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Grid items padding */
.u-repeater {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 15px !important;
    row-gap: 15px !important;
    column-gap: 15px !important;
}

/* Reduce gaps in all grid/row layouts */
.u-layout-row,
.u-layout-cell,
.u-container-layout {
    margin-bottom: 0 !important;
}

.u-repeater-item {
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Rounded corners for all cards */
.u-repeater-item,
.u-container-style,
.u-layout-cell {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Card images rounded corners - all corners */
.u-repeater-item img,
.u-container-style img {
    border-radius: 12px !important;
}

/* ===========================================
   BACK TO TOP BUTTON FIX - Force circular shape
   =========================================== */
.u-back-to-top,
.back-to-top,
[class*="back-to-top"],
a.u-back-to-top {
    position: fixed !important;
    bottom: 20px !important;
    right: 25px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 2px solid #e8f24c !important;
    z-index: 999999 !important;
}

/* ===========================================
   GALLERY FILTER HEIGHT FIX
   Section height should adjust when filtering
   =========================================== */

/* Gallery section - allow height to adjust */
.u-section-5 {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}

/* Override Blog.css fixed heights */
.u-section-5 .u-sheet-1 {
    min-height: 0 !important;
    height: auto !important;
}

.u-section-5 .u-gallery-1 {
    height: auto !important;
    min-height: 0 !important;
}

/* Gallery inner - auto height */
.u-gallery-inner,
.u-gallery-inner-1 {
    height: auto !important;
    min-height: 0 !important;
}

/* Remove excessive gaps between sections */
section + section {
    margin-top: 0 !important;
}

/* Reduce padding on sections after gallery */
.u-section-5 + section,
.u-section-6,
.u-section-7,
.u-section-8,
.u-section-9,
.u-section-10 {
    padding-top: 30px !important;
    margin-top: 0 !important;
}

/* Force all sections to have minimal gaps */
section[class*="u-section"] {
    padding-bottom: 30px !important;
    margin-bottom: 0 !important;
}

/* Specifically target the gallery section gap */
#sec-a448 {
    padding-bottom: 20px !important;
}

#sec-a448 + section,
.u-section-5 ~ section {
    margin-top: 0 !important;
    padding-top: 30px !important;
}

/* ===========================================
   MOBILE RESPONSIVE FIXES (max-width: 991px)
   =========================================== */
@media (max-width: 991px) {
    /* Gallery fixes for tablet */
    .u-gallery {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .u-gallery.u-expanded-width {
        width: calc(100% - 30px) !important;
    }
    
    .u-gallery-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Fix section padding and margins */
    section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Fix text containers */
    .u-text, p, h1, h2, h3, h4, h5, h6 {
        max-width: 100% !important;
        width: auto !important;
    }
    
    /* Fix button spacing */
    .u-btn {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Fix sheet containers */
    .u-sheet {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Fix column layouts */
    .u-layout-col, .u-layout-cell {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix images */
    .u-image {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===========================================
   TABLET RESPONSIVE FIXES (max-width: 767px)
   =========================================== */
@media (max-width: 767px) {
    /* Reduce excessive margins */
    .u-section-1, .u-section-2, .u-section-3, .u-section-4, 
    .u-section-5, .u-section-6, .u-section-7, .u-section-8 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    /* Fix text alignment */
    .u-align-left {
        text-align: center !important;
    }
    
    /* Fix container alignment */
    .u-container-align-left {
        text-align: center !important;
    }
    
    /* Reduce margins on text elements */
    .u-text {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Fix button positioning */
    .u-btn {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: fit-content !important;
    }
    
    /* Fix layout rows */
    .u-layout-row {
        flex-direction: column !important;
    }
    
    /* Fix gallery items */
    .u-gallery-item {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix expanded elements */
    .u-expanded-width {
        max-width: 100% !important;
    }
}

/* ===========================================
   MOBILE PHONE FIXES (max-width: 575px)
   =========================================== */
@media (max-width: 575px) {
    /* Gallery fixes for mobile */
    .u-gallery {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .u-gallery.u-expanded-width {
        width: calc(100% - 20px) !important;
    }
    
    .u-gallery-inner {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .u-gallery-item {
        margin-bottom: 10px !important;
    }
    
    /* Reduce section padding */
    section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* Fix heading sizes */
    h1, .u-text-1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    h2, .u-text-2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3, .u-text-3 {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
    }
    
    /* Fix paragraph text */
    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        padding: 0 10px !important;
    }
    
    /* Fix buttons */
    .u-btn {
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Reduce gaps between elements */
    .u-sheet > * {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Fix absolute positioned elements */
    [style*="position: absolute"] {
        position: relative !important;
    }
    
    /* Fix images sizing */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix gallery */
    .u-gallery-inner {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix form elements */
    .u-form {
        padding: 15px !important;
    }
    
    input, textarea, select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===========================================
   SPECIFIC ELEMENT FIXES
   =========================================== */

/* Fix excessive space above footer */
@media (max-width: 991px) {
    .fooodis-footer {
        margin-top: 0 !important;
    }
    
    section:last-of-type {
        margin-bottom: 0 !important;
        padding-bottom: 30px !important;
    }
}

/* Fix hero sections */
@media (max-width: 767px) {
    .u-section-1 {
        min-height: 0 !important;
        height: auto !important;
        padding: 60px 15px !important;
    }
}

/* Fix text overflow */
@media (max-width: 575px) {
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Fix list items spacing */
@media (max-width: 767px) {
    .u-list, ul, ol {
        padding-left: 20px !important;
    }
    
    li {
        margin-bottom: 10px !important;
    }
}

/* Fix card layouts */
@media (max-width: 767px) {
    .u-repeater {
        flex-direction: column !important;
    }
    
    .u-repeater-item {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* Fix video containers */
@media (max-width: 767px) {
    .u-video, iframe, video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }
}

/* Fix social icons */
@media (max-width: 575px) {
    .u-social-icons {
        justify-content: center !important;
    }
    
    .u-social-icon {
        margin: 5px !important;
    }
}

/* Fix FAQ Alignment - Full Width */
.u-section-29 .u-accordion-1 {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 60px auto !important;
}

.u-section-29 .u-container-layout-1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}