/* ==========================================================================
   Case Studies Showcase Block - Comprehensive Responsive Design
   Optimized for tablet and mobile with graceful draggable degradation
   ========================================================================== */

/* ========================================================================== 
   DESKTOP STYLES (> 1024px) - Preserve original behavior
   ========================================================================== */
@media (min-width: 1025px) {
    /* Preserve original card dimensions on desktop */
    .case-card-grownup,
    .case-card-drag {
        width: 530px !important;
        height: 466px !important;
        min-height: 466px !important;
    }
    
    /* Remove all padding/margin from card rows on desktop */
    .case-card-grownup .card-row,
    .case-card-drag .card-row {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Original image dimensions for desktop - fill available space */
    .card-row-image {
        height: auto !important;
        min-height: 280px !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        background: transparent !important;
        line-height: 0; /* Remove any line-height spacing */
    }
    
    .card-row-image img {
        width: 100%;
        height: 100%;
        min-height: 280px !important;
        object-fit: cover;
        object-position: center;
        display: block; /* Remove any inline spacing */
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: top; /* Remove bottom spacing */
        line-height: 0; /* Remove any line-height spacing */
    }
    
    /* Keep title and tags in one row on desktop - remove bottom margin */
    .card-row-title-tags {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove ALL spacing between rows - make them flush */
    .case-card-grownup .card-row-title-tags,
    .case-card-drag .card-row-title-tags {
        margin: 0 !important;
        padding: 1.5rem 2rem !important; /* Internal padding only */
    }
    
    .case-card-grownup .card-row-image,
    .case-card-drag .card-row-image {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .case-card-grownup .card-row-button,
    .case-card-drag .card-row-button {
        margin: 0 !important;
        padding: 1rem 2rem !important; /* Internal padding only */
    }
    
    /* Ensure card uses flexbox to stack rows tightly */
    .case-card-grownup,
    .case-card-drag {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Make image row expand to fill available space */
    .case-card-grownup .card-row-image,
    .case-card-drag .card-row-image {
        flex: 1 1 auto !important;
    }
    
    .card-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .card-tags {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
    }
}

/* ========================================================================== 
   STYLES FOR TABLET AND MOBILE ONLY (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Ensure title and tags stay in one row */
    .card-row-title-tags {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .card-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-tags {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
    }

    /* Handle images properly on smaller screens */
    .card-row-image {
        position: relative;
        overflow: hidden;
        background: #f5f5f5;
    }

    .card-row-image img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Ensure cards expand to fit content on mobile/tablet */
    .case-card-grownup,
    .case-card-drag {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* ========================================================================== 
   TABLET STYLES (769px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Reset fixed dimensions and transforms */
    .case-studies-showcase {
        min-height: auto !important;
        height: auto !important;
        padding: 3rem 2rem;
    }
    
    /* Disable pinning on tablets */
    .case-studies-showcase.pin-spacer {
        position: relative !important;
        transform: none !important;
    }
    
    /* Adjust container for tablet layout */
    .case-studies-stack-area,
    .case-studies-draggable {
        position: relative !important;
        width: 100%;
        height: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 0;
        pointer-events: auto;
    }
    
    /* Header adjustments */
    .case-studies-header-on-circle {
        position: relative !important;
        transform: none !important;
        margin: 0 auto 3rem;
        max-width: 700px;
    }
    
    .case-studies-title {
        font-size: clamp(2rem, 4vw, 2.5rem);
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .case-studies-description {
        font-size: 1.1rem;
        line-height: 1.5;
    }
    
    /* Card layout for tablets - 2 column grid */
    .case-card-grownup,
    .case-card-drag {
        position: relative !important;
        transform: none !important;
        width: calc(50% - 1rem) !important;
        max-width: 400px !important;
        height: auto !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        display: block !important;
        cursor: pointer; /* Change from grab to pointer on tablet */
    }
    
    /* Maintain card styling */
    .case-card-grownup {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: visible !important; /* Ensure content is visible */
        display: flex;
        flex-direction: column;
    }
    
    .case-card-grownup:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }
    
    /* Title and tags in one row */
    .card-row-title-tags {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem;
    }
    
    /* Adjust image container for 1080x1080px images */
    .card-row-image {
        width: 100%;
        overflow: hidden;
        position: relative;
        aspect-ratio: 4 / 3; /* Better aspect ratio for tablet */
        max-height: 300px; /* Reasonable height limit */
        background: #f5f5f5;
    }
    
    .card-row-image img {
        width: 100%;
        height: 100%;
        object-fit: cover !important; /* Cover the container */
        object-position: center !important;
    }
    
    /* Title and tag adjustments */
    .card-title {
        font-size: 1.5rem;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .card-tags {
        flex-wrap: nowrap; /* Keep tags in one row */
        flex: 0 0 auto;
    }
    
    .card-tag {
        font-size: 0.85rem;
        padding: 0.35rem 0.9rem;
        white-space: nowrap;
    }
    
    /* Button adjustments */
    .card-link-btn {
        font-size: 1rem;
        padding: 0.5rem 0;
    }
    
    .arrow-btn {
        width: 2.4em;
        height: 1.4em;
        font-size: 1.1em;
    }
    
    /* Use flexbox for card container on tablets */
    .case-studies-stack-area {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2rem !important;
    }
}

/* Tablet Portrait specific (768px - 900px) */
@media (min-width: 768px) and (max-width: 900px) {
    .case-card-grownup,
    .case-card-drag {
        width: calc(50% - 1rem) !important;
        max-width: 360px !important;
    }
    
    /* Optimized aspect ratio for 1080x1080 images */
    .card-row-image {
        aspect-ratio: 4 / 3 !important;
        max-height: 280px !important;
    }
}

/* ========================================================================== 
   MOBILE STYLES (320px - 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Main container reset */
    .case-studies-showcase {
        min-height: auto !important;
        height: auto !important;
        padding: 2rem 1rem;
        overflow: visible !important;
    }
    
    /* Remove all pinning and fixed positioning */
    .case-studies-showcase,
    .case-studies-showcase.pin-spacer {
        position: relative !important;
        transform: none !important;
    }
    
    /* Stack area becomes a simple vertical container */
    .case-studies-stack-area,
    .case-studies-draggable {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        pointer-events: auto !important;
    }
    
    /* Header mobile optimization */
    .case-studies-header-on-circle {
        position: relative !important;
        transform: none !important;
        margin: 0 0 2rem 0 !important;
        padding: 0 !important;
        text-align: center;
        pointer-events: auto !important;
    }
    
    .case-studies-title {
        font-size: clamp(1.75rem, 5vw, 2.2rem);
        line-height: 1.2;
        margin-bottom: 1rem;
        text-transform: none; /* More readable on mobile */
    }
    
    .case-studies-description {
        font-size: 1rem;
        line-height: 1.5;
        padding: 0 1rem;
        /* Remove the line clamp on mobile for better readability */
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: visible;
    }
    
    /* Cards become static, scrollable blocks on mobile */
    .case-card-grownup,
    .case-card-drag {
        position: relative !important; /* Important for absolute positioned button */
        width: 100% !important;
        max-width: 500px !important;
        height: auto !important;
        margin: 0 auto 1.5rem auto !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        display: block !important;
        cursor: default !important; /* Remove grab cursor on mobile */
        pointer-events: auto !important;
        /* Remove floating animations on mobile */
        animation: none !important;
    }
    
    /* Disable draggable functionality on mobile via CSS */
    .case-card-grownup.ui-draggable,
    .case-card-drag.ui-draggable {
        position: relative !important;
    }
    
    /* Card styling adjustments */
    .case-card-grownup {
        border-radius: 12px;
        overflow: hidden !important; /* Clip content properly */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background: #fff;
        display: flex;
        flex-direction: column;
        min-height: auto; /* Ensure card expands to fit content */
    }
    
    /* Title and tags row - Keep in one row */
    .card-row-title-tags {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 1.25rem 1.25rem 0.75rem !important;
    }
    
    .card-title {
        font-size: clamp(1.25rem, 4vw, 1.5rem);
        line-height: 1.3;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0; /* Allow title to shrink */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .card-tags {
        display: flex;
        flex-wrap: nowrap; /* Keep tags in one line */
        gap: 0.4rem;
        flex: 0 0 auto;
    }
    
    .card-tag {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
        border-radius: 6px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    
    /* Image row optimization for 1080x1080px images */
    .card-row-image {
        padding: 0 !important;
        width: 100%;
        background: #f5f5f5;
        overflow: hidden;
        position: relative;
        aspect-ratio: 1 / 1; /* Square aspect ratio to show more of the image */
        max-height: 400px; /* Increased height limit on mobile */
        border-radius: 0 0 12px 12px; /* Round bottom corners since button is hidden */
    }
    
    .card-row-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover the container */
        object-position: center; /* Center the image */
        display: block;
    }
    
    
    /* Remove drag-related styles on mobile */
    .drag-me-indicator,
    .drag-me-badge,
    .drag-instructions {
        display: none !important;
    }
    
    /* Remove decorative elements that don't work on small screens */
    .case-studies-draggable::before,
    .case-studies-draggable .section-title::after {
        display: none;
    }
    
    /* Background optimization for mobile */
    .case-studies-showcase::before {
        position: absolute; /* Change from fixed to absolute on mobile */
        background-size: cover;
        opacity: 0.5; /* Reduce opacity for better readability */
    }
    
    /* Make button row TRANSPARENT but VISIBLE on mobile */
    .card-row-button,
    .card-row.card-row-button,
    .case-card-grownup .card-row-button,
    .case-card-drag .card-row-button,
    .case-studies-showcase .card-row-button,
    .case-studies-stack-area .card-row-button,
    #case-studies-block_e6b2c226a36229078949ca7ed73f9bce .card-row-button,
    body .case-studies-showcase .card-row-button,
    body .case-card-grownup .card-row-button,
    body .case-card-drag .card-row-button,
    body .card-row.card-row-button {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-top: none !important;
        padding: 1rem 1.25rem !important;
        position: absolute !important; /* Position over the image */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
    }
    
    /* Make link text and arrow visible */
    .card-row-button .card-link-btn,
    .case-card-grownup .card-link-btn,
    .case-card-drag .card-link-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        color: #1a1a1a !important; /* Text visible */
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(255, 255, 255, 0.9) !important; /* Slight white background for readability */
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    .card-row-button .arrow-btn,
    .case-card-grownup .arrow-btn,
    .case-card-drag .arrow-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.5em !important;
        height: 1.5em !important;
        font-size: 1.1em !important;
        font-weight: 700 !important;
        color: #111 !important;
        border: 2px solid #111 !important;
        border-radius: 24px !important;
        background: white !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ========================================================================== 
   SMALL MOBILE (320px - 374px)
   ========================================================================== */
@media (max-width: 374px) {
    .case-studies-showcase {
        padding: 1.5rem 0.75rem;
    }
    
    .case-studies-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .case-studies-description {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }
    
    .card-title {
        font-size: 1.125rem;
    }
    
    .card-tag {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }
    
    /* Better image display on very small screens */
    .card-row-image {
        aspect-ratio: 1 / 1 !important; /* Square aspect ratio */
        max-height: 280px !important; /* Increased height limit */
    }
    
    .card-row-image img {
        object-fit: cover !important; /* Cover the container */
    }
    
    .card-link-btn {
        font-size: 0.9rem;
    }
}

/* ========================================================================== 
   LARGE MOBILE / SMALL TABLET (576px - 768px)
   ========================================================================== */
@media (min-width: 576px) and (max-width: 768px) {
    .case-studies-showcase {
        padding: 2.5rem 1.5rem;
    }
    
    .case-card-grownup,
    .case-card-drag {
        max-width: 450px !important;
    }
    
    /* Better image display for larger mobile screens */
    .card-row-image {
        aspect-ratio: 1 / 1 !important; /* Square to show more of image */
        max-height: 450px !important; /* Increased limit */
    }
    
    .card-title {
        font-size: 1.4rem;
    }
}

/* ========================================================================== 
   ACCESSIBILITY & PERFORMANCE
   ========================================================================== */

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .case-card-grownup:hover {
        transform: none;
    }
    
    /* Ensure proper touch targets */
    .card-link-btn,
    .arrow-btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Disable dragging on touch devices */
    .case-card-drag {
        touch-action: pan-y !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .case-card-drag,
    .case-card-grownup,
    .arrow-btn,
    .card-link-btn,
    .drag-me-badge {
        animation: none !important;
        transition: none !important;
    }
    
    /* Remove transforms for users who prefer reduced motion */
    .case-card-drag:hover .case-card-inner,
    .case-card-drag.is-dragging .case-card-inner {
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .case-card-grownup {
        border: 2px solid currentColor;
    }
    
    .card-tag {
        border: 1px solid currentColor;
    }
    
    .arrow-btn {
        border-width: 3px;
    }
}

/* Print styles */
@media print {
    .case-studies-showcase {
        padding: 0;
        background: white !important;
    }
    
    .case-studies-showcase::before {
        display: none;
    }
    
    .case-card-grownup,
    .case-card-drag {
        page-break-inside: avoid;
        position: relative !important;
        width: 100% !important;
        transform: none !important;
        margin-bottom: 2rem !important;
    }
}