/* ==========================================================================
   Home Page: Magic Is In The Details Gallery
   Estructura Corregida: Base Global -> Desktop -> Móvil (Estático)
   ========================================================================== */

/* =========================================
   1. ESTILOS BASE Y TIPOGRAFÍAS GLOBALES
   Aplican a todas las resoluciones
   ========================================= */
.details-hover-section {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
}

.details-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: #000;
    margin: 0;
    text-transform: uppercase; 
    line-height: 1.1;
}

.details-description {
    font-family: 'General Sans', sans-serif;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
}

.details-img {
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* =========================================
   2. DESKTOP VIEW (>= 1024px)
   Posicionamiento Absoluto y Efecto Hover
   ========================================= */
@media (min-width: 1024px) {
    
    .details-hover-section {
        position: relative;
        height: 1059px; 
    }

    .details-gallery-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100%;
        max-width: 1600px;
        height: 100%; 
    }

    /* Textos (Centrados y Absolutos) */
    .details-text-container {
        position: absolute;
        top: 90px; 
        left: 50%;
        transform: translateX(-50%); 
        width: 45%; 
        text-align: center;
        z-index: 20;
        pointer-events: none;
    }

    .details-title { font-size: 80px; }
    
    .details-description {
        font-size: 16px;
        margin: 25px auto 0;
        max-width: 550px;
    }

    /* Imágenes y Efecto Clip-Path (Hover) */
    .details-img {
        position: absolute;
        pointer-events: none;
        opacity: 1;
        clip-path: inset(50% 50% 50% 50%); 
        transition: clip-path 0.5s ease-out;
    }

    .details-hover-section:hover .details-img {
        clip-path: inset(0% 0% 0% 0%); 
        transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .details-hover-section:not(:hover) .details-img {
        transition-delay: 0s !important;
    }

    /* Coordenadas Desktop */
    .details-img-center {
        width: 35.8%; 
        height: 71.2%; 
        left: 50%;
        bottom: -100px; 
        transform: translateX(-50%); 
        z-index: 10; 
        transition-delay: 0s; 
    }
    .details-hover-section:hover .details-img-center {
        transform: translateX(-50%);
        transition-delay: 0s;
    }

    .details-img-tl, .details-img-bl, .details-img-tr, .details-img-br {
        width: 21.5%; 
        height: 42.6%; 
        z-index: 5; 
    }

    .details-img-tl { left: 2%; top: 180px; }
    .details-hover-section:hover .details-img-tl { transition-delay: 0.15s; }

    .details-img-tr { right: 2%; top: 180px; }
    .details-hover-section:hover .details-img-tr { transition-delay: 0.15s; }

    .details-img-bl { left: 2%; bottom: -70px; }
    .details-hover-section:hover .details-img-bl { transition-delay: 0.25s; }

    .details-img-br { right: 2%; bottom: -70px; }
    .details-hover-section:hover .details-img-br { transition-delay: 0.25s; }
}

/* =========================================
   3. MOBILE VIEW (< 1024px)
   Layout en Grid Estático (Sin animaciones)
   ========================================= */
@media (max-width: 1023px) {
    
    .details-hover-section {
        padding: 60px 0;
        height: auto;
    }

    .details-gallery-wrapper {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 0 20px;
        height: auto;
    }

    /* Textos Fluyendo en el Grid */
    .details-text-container {
        position: relative;
        grid-column: 1 / -1; 
        order: 0; 
        text-align: center;
        width: 100%;
        margin-bottom: 40px;
    }

    .details-title { font-size: 48px; }
    
    .details-description {
        font-size: 16px;
        margin: 15px auto 0;
    }

    /* Imágenes Estáticas en Móvil */
    .details-img {
        position: relative;
        width: 100%;
        height: auto;
        /* Aseguramos que se vean completas anulando el clip-path de base si existiera */
        clip-path: inset(0% 0% 0% 0%); 
        transition: none; /* Quitamos transiciones para evitar saltos raros */
    }

    /* Reorganización Visual (Grid Order) y Proporciones */
    .details-img-tl { order: 1; aspect-ratio: 344/451; }
    .details-img-tr { order: 2; aspect-ratio: 344/451; }
    .details-img-center { 
        order: 3; 
        grid-column: 1 / -1; 
        aspect-ratio: 574/755;
        margin: 10px 0; 
    }
    .details-img-bl { order: 4; aspect-ratio: 344/451; }
    .details-img-br { order: 5; aspect-ratio: 344/451; }
}