/* ========================================
   TYPO3 Configurable Card - Responsive Design
   Mobile and responsive adjustments
   ======================================== */

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .configurable-card-content-overlay {
        padding: 0.5rem;
    }
    
    .configurable-card-overlay-content-box {
        max-width: 95%;
    }
    
    /* Adjust height classes for mobile */
    .h-500, .h-600 {
        min-height: 300px;
    }
    
    .h-400 {
        min-height: 250px;
    }
}

/* Responsive: Mobile Layouts */
@media (max-width: 768px) {
    [class*="layout-"] {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas: 
            "header"
            "text" 
            "icon"
            "image" !important;
    }
    
    .configurable-card-header-text-combined,
    .configurable-card-content-combined,
    .configurable-card-header-icon-combined,
    .configurable-card-text-image-combined {
        gap: 0.75rem;
    }
    
    /* Horizontal layouts become vertical on mobile */
    .configurable-card-body-section {
        flex-direction: column;
    }
    
    .configurable-card-image-section.image-section-center-left,
    .configurable-card-image-section.image-section-center-right {
        flex: none;
        order: -1; /* Images go to top on mobile */
        margin-bottom: 1rem;
        justify-content: center;
    }
    
    /* All positioned images become centered on mobile */
    .image-position-top-left .configurable-card-image-section.image-section-top,
    .image-position-top-right .configurable-card-image-section.image-section-top,
    .image-position-bottom-left .configurable-card-image-section.image-section-bottom,
    .image-position-bottom-right .configurable-card-image-section.image-section-bottom {
        justify-content: center;
    }
    
    /* Adjust image sizes for mobile */
    .image-position-top-left .configurable-card-image,
    .image-position-top-right .configurable-card-image,
    .image-position-top-center .configurable-card-image,
    .image-position-bottom-left .configurable-card-image,
    .image-position-bottom-right .configurable-card-image,
    .image-position-bottom-center .configurable-card-image,
    .image-position-center-center .configurable-card-image {
        max-width: 250px;
    }
    
    .configurable-card-body {
        padding: 0;
    }
    
    .configurable-card-title {
        font-size: var(--font-size-h3);
    }
    
    /* Responsive Grid-Anpassungen */
    .configurable-card-grid-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas: 
            "area-1"
            "area-2"
            "area-3" 
            "area-4" !important;
    }
    
    .full-top, .full-bottom {
        grid-column: 1;
    }
    
    .align-end {
        text-align: left;
        justify-content: flex-start;
    }
}

/* Tablet Adjustments */
@media (max-width: 991.98px) and (min-width: 768px) {
    /* Slightly reduce image sizes on tablets */
    .image-position-top-left .configurable-card-image,
    .image-position-top-right .configurable-card-image,
    .image-position-bottom-left .configurable-card-image,
    .image-position-bottom-right .configurable-card-image {
        max-width: 150px;
    }
    
    .image-position-top-center .configurable-card-image,
    .image-position-bottom-center .configurable-card-image {
        max-width: 250px;
    }
    
    .image-position-center-center .configurable-card-image {
        max-width: 200px;
    }
}

/* Small Mobile Devices */
@media (max-width: 576px) {
    .configurable-card-grid-container {
        gap: 0.75rem;
        min-height: auto;
    }
    
    .grid-item-header .configurable-card-title {
        font-size: var(--font-size-h6);
    }
    
    .grid-item-icon .configurable-card-icon {
        font-size: 1.5rem !important;
    }
}

/* Layout-specific mobile overrides */
@media (max-width: 767.98px) {
    /* Force all width classes to w-100 on mobile, except those already w-100 */
    .configurable-card-container [class*="w-"]:not(.w-100) {
        width: 100% !important;
    }
    
    /* Position icon in top-right corner for mobile */
    .configurable-card-container {
        position: relative;
    }
    
    .configurable-card-icon-content {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
    }
    
    /* Ensure icon container doesn't interfere with layout */
    .configurable-card-icon-content .configurable-card-icon-section {
        position: static;
        height: auto;
    }
    
    /* Make sure content has enough space for the icon */
    .configurable-card-layout-container {
        padding-top: 60px; /* Space for icon */
    }
    
    /* Adjust overlay content for icon space in background image mode */
    .configurable-card-content-overlay {
        padding-top: 60px;
    }
    
    .overlay-icon-content {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 15;
    }
    
    .configurable-card-container.layout-horizontal .configurable-card-body-section {
        flex-direction: column;
    }
}

/* Responsive behavior for layout variants */
@media (max-width: 767.98px) {
    .configurable-card-container.layout-vertical .configurable-card-image-section.image-section-center-left,
    .configurable-card-container.layout-vertical .configurable-card-image-section.image-section-center-right {
        flex: none;
        order: -1;
        margin-bottom: 1rem;
        justify-content: center;
    }
}