/**
 * Layout Fixes - Uniform Cards & Image Sizing
 * Fixes overlapping content and ensures consistent card/image sizes
 */

/* ============================================
   Fix Content Overlapping Issues
   ============================================ */

/* Ensure proper spacing after welcome area with shape-bottom */
.welcome-area + .promo-area {
    margin-top: 0 !important;
    padding-top: 200px !important; /* Reduced for modern design */
    position: relative;
    z-index: 2;
    background: #fff;
}

/* Ensure shape doesn't overlap content */
.welcome-area .shape-bottom {
    z-index: 0;
    pointer-events: none;
}

/* Service area with shape-top needs extra padding */
.service-area.shape-top {
    margin-top: 0 !important;
    padding-top: 200px !important; /* Reduced for modern design */
}

/* Portfolio area after service area */
.service-area + .portfolio-area {
    padding-top: 60px !important; /* Much reduced for modern design */
}

/* Review area after portfolio */
.portfolio-area + .review-area {
    padding-top: 60px !important; /* Much reduced for modern design */
}

/* Ensure all sections have proper z-index */
.promo-area,
.service-area,
.portfolio-area,
.review-area,
.contact-area {
    position: relative;
    z-index: 2;
}

/* ============================================
   Uniform Card Heights
   ============================================ */

/* Why Us Cards - Equal Height */
.promo-area .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.promo-area .col-12.col-md-6.col-lg-4 {
    display: flex;
    align-items: stretch;
}

.single-promo {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.single-promo .whyus-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow content to shrink if needed */
}

/* Ensure Read More button stays at bottom */
.whyus-read-more {
    margin-top: auto;
    flex-shrink: 0;
}

/* Service Cards - Equal Height */
.service-area .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.service-area .col-12.col-md-6.col-lg-4 {
    display: flex;
    align-items: stretch;
}

.single-service {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.single-service p {
    flex: 1;
    min-height: 0; /* Allow content to shrink if needed */
}

/* Ensure service button stays at bottom */
.service-btn {
    margin-top: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Portfolio Cards - Equal Height */
.portfolio-items.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch;
}

.portfolio-item > .single-case-studies {
    height: 100%;
}

.single-case-studies {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* Ensure case studies overlay doesn't break layout */
.case-studies-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.single-case-studies:hover .case-studies-overlay {
    opacity: 1;
}

/* Blog Cards - Equal Height */
.blog-items.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: stretch;
}

.blog-item > .single-case-studies {
    height: 100%;
}

/* Demo Cards - Equal Height */
.demo-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ============================================
   Uniform Image Sizing
   ============================================ */

/* Portfolio Images - Uniform Size */
.single-case-studies > a > img,
.single-case-studies img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.single-case-studies:hover > a > img,
.single-case-studies:hover img {
    transform: scale(1.05);
}

/* Blog Images - Uniform Size */
.blog-item .single-case-studies > a > img,
.blog-item .single-case-studies img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

/* Demo Images - Uniform Size */
.demo-item > a > img,
.demo-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* Service Detail Images */
.about-thumb img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

/* Portfolio Detail Images */
.portfolio-featured-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 8px;
}

/* Blog Detail Images */
.blog-featured-image img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 8px;
}

/* Testimonial Images - Consistent Size */
.reviewer-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.reviewer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   Card Hover Effects
   ============================================ */

.single-promo:hover,
.single-service:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.single-case-studies:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 991px) {
    /* Shape height reduces to 112px on tablets */
    .welcome-area + .promo-area {
        padding-top: 150px !important;
    }
    
    .service-area.shape-top {
        padding-top: 150px !important;
    }
    
    .service-area + .portfolio-area {
        padding-top: 150px !important;
    }
    
    .portfolio-area + .review-area {
        padding-top: 150px !important;
    }
    
    /* Adjust image heights for tablets */
    .single-case-studies > a > img,
    .single-case-studies img {
        height: 240px;
    }
    
    .blog-item .single-case-studies > a > img {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .welcome-area + .promo-area {
        padding-top: 130px !important;
    }
    
    .service-area.shape-top {
        padding-top: 130px !important;
    }
    
    .service-area + .portfolio-area {
        padding-top: 130px !important;
    }
    
    .portfolio-area + .review-area {
        padding-top: 130px !important;
    }
    
    /* Blog and portfolio use Bootstrap grid, responsive by default */
    
    /* Adjust image heights for mobile */
    .single-case-studies > a > img,
    .single-case-studies img {
        height: 220px;
    }
    
    .blog-item .single-case-studies > a > img {
        height: 200px;
    }
    
    .demo-item > a > img,
    .demo-item img {
        height: 300px;
    }
}

@media (max-width: 575px) {
    .single-case-studies > a > img,
    .single-case-studies img {
        height: 200px;
    }
    
    .blog-item .single-case-studies > a > img {
        height: 180px;
    }
}

/* ============================================
   Ensure Cards Don't Overflow
   ============================================ */

.single-promo,
.single-service,
.single-case-studies {
    overflow: hidden;
    word-wrap: break-word;
}

.single-promo h3,
.single-service h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.single-promo p,
.single-service p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================
   Smooth Transitions
   ============================================ */

.single-promo,
.single-service,
.single-case-studies {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-case-studies > a > img,
.single-case-studies img {
    transition: transform 0.3s ease;
}