/* ==================== ISSUES IN YOUR CSS ==================== */

/* ❌ ISSUE 1: object-fit: cover CROPS IMAGES ON MOBILE */
/* ✅ FIX: Change to object-fit: contain to show full image */
.omka-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* ← CHANGE FROM cover TO contain */
    border-radius: 32px;
    padding: 15px;        /* ← ADD padding for breathing room */
}

/* ❌ ISSUE 2: Duplicate @media(max-width: 768px) blocks */
/* You have TWO media queries conflicting with each other */
/* The last one overrides the first one */

/* ❌ ISSUE 3: .omka-slide.back selector missing in last media query */
/* @media (max-width: 480px) {
    translate(-8px, -8px);  ← This is INCOMPLETE - selector missing!
} */

/* ❌ ISSUE 4: No responsive height for very small phones */
/* .omka-slider-wrap height doesn't adjust for phones < 480px */

/* ❌ ISSUE 5: inset: 0 works but could be clearer */
/* inset: 0 = top: 0; right: 0; bottom: 0; left: 0; (it's fine, just explaining) */


/* ==================== CORRECTED CSS ==================== */

.omka-slider-wrap {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 520px;
    overflow: visible;
    margin: 0 auto;
}

.omka-slide {
    position: absolute;
    inset: 0;  /* = top: 0; right: 0; bottom: 0; left: 0; */
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.7s ease,
        opacity 0.7s ease;
    transform:
        translateY(20px)
        scale(0.96);
    border-radius: 32px;
}

.omka-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* ✅ FIX: Show full image, no cropping */
    padding: 15px;        /* ✅ ADD: Breathing room for images */
    border-radius: 32px;
}

/* Front card - fully visible */
.omka-slide.front {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transform:
        translateY(0)
        scale(1);
    /* ✅ REMOVED: rotate(0deg) is default, unnecessary */
}

/* Back card - visible behind with slight offset */
.omka-slide.back {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transform:
        translate(-18px, -18px)
        scale(0.98)
        rotate(-1deg);
}

/* ✅ FIXED: SINGLE media query for tablets */
@media (max-width: 768px) {
    .omka-slider-wrap {
        height: 380px;  /* ✅ Slightly reduced but not too small */
    }

    .omka-slide img {
        padding: 12px;  /* ✅ Adjust padding for smaller screens */
    }

    .omka-slide.back {
        transform:
            translate(-12px, -12px)
            scale(0.98)
            rotate(-0.5deg);
    }
}

/* ✅ FIXED: SEPARATE media query for mobile phones */
@media (max-width: 480px) {
    .omka-slider-wrap {
        height: 300px;  /* ✅ Better height for phones */
    }

    .omka-slide img {
        padding: 10px;  /* ✅ Smaller padding for phones */
    }

    .omka-slide.back {
        transform:
            translate(-8px, -8px)
            scale(0.96)
            rotate(-0.3deg);
    }
}

/* Container styling */
.slider-container {
    margin-bottom: 40px;
    margin: 0 auto;
    max-width: 600px;  /* ✅ ADD: Match slider max-width */
}

h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 20px;
}

.info {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}


/* ==================== SUMMARY OF FIXES ==================== */

/*
✅ CHANGES MADE:

1. object-fit: cover → object-fit: contain
   └─ Shows FULL image, prevents cropping on mobile

2. Added padding: 15px on images
   └─ Gives space between image and border

3. Removed duplicate @media queries
   └─ Now: 1 for tablets (768px), 1 for phones (480px)

4. Fixed incomplete .omka-slide.back selector
   └─ Now properly nested in media query

5. Adjusted heights for responsive:
   └─ Desktop: 520px
   └─ Tablet:  380px
   └─ Mobile:  300px

6. Reduced padding on smaller screens
   └─ Desktop padding: 15px
   └─ Tablet padding:  12px
   └─ Mobile padding:  10px

7. Removed unnecessary rotate(0deg)
   └─ Default transform is already 0

8. Added max-width: 600px to .slider-container
   └─ Prevents wide layouts on large screens
*/