/* ==========================================================================
   SECTION 1: THE GRAN VIEW (Panoramic Cover Support)
   ========================================================================== */

/* 1. Outer block container sizing */
div.wp-block-cover.art-shine {
    min-height: 70vh !important; 
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f4f4f4 !important;
    overflow: hidden !important;
    z-index: 1 !important; /* Establishes isolated stacking boundary */
}

/* 2. Target the ACTUAL fine art image */
div.wp-block-cover.art-shine > img.wp-block-cover__image-background {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    z-index: 0 !important; /* Pushed to bottom so shine effect can pass over it */
}

/* 2B. WordPress Default Animation/Overlay Stack (Shine, gradient, masks) */
div.wp-block-cover.art-shine .wp-block-cover__gradient-background,
div.wp-block-cover.art-shine .wp-block-cover__background,
div.wp-block-cover.art-shine::after {
    z-index: 2 !important; /* Middle layer: ensures shine crosses the whole canvas edge-to-edge */
    pointer-events: none !important;
}

/* 3. Text Overlay Inner Wrapper (The Alignment Engine) */
div.wp-block-cover.art-shine > div.wp-block-cover__inner-container {
    position: absolute !important;
    z-index: 3 !important; /* Top layer: guarantees text is legible above the animation */
    
    width: 100% !important;      
    max-width: 100% !important;  
    height: auto !important;
    left: 0 !important;          
    right: 0 !important;         
    
    display: flex !important;
    flex-direction: column !important; /* Stacks the 5 text lines cleanly */
    
    /* VERTICAL PLACEMENT CONTROL: center, flex-start (top), flex-end (bottom) */
    align-items: flex-start !important; 
    justify-content: center !important;
    
    /* FLUID PADDING: Padding scales dynamically to keep text clean on Laptops vs. Smart TVs */
    padding-left: clamp(20px, 6vw, 120px) !important;   
    padding-right: clamp(20px, 6vw, 120px) !important;
    box-sizing: border-box !important;
}

/* 4. Text Block Elements Design Control */
div.wp-block-cover.art-shine h1,
div.wp-block-cover.art-shine h2,
div.wp-block-cover.art-shine p,
div.wp-block-cover.art-shine .wp-block-heading {
    display: block !important;       
    width: 100% !important;         
    text-align: left !important;    
    
    color: #ffffff !important; 
    text-shadow: 2px 2px 14px rgba(0, 0, 0, 0.8) !important; /* Keeps text readable on white waves/skies */
    margin: 0 0 clamp(8px, 1vh, 16px) 0 !important; /* Fluid spacing between text rows */
}

/* 5. Your Custom Fluid Typography Engine */
div.wp-block-cover.art-shine h1.wp-block-heading,
div.wp-block-cover.art-shine h2.wp-block-heading {
    /* Scales smooth between 1.8rem (Mobile) and 4rem (Smart TV / QHD) */
    font-size: clamp(1.8rem, 3vw, 4rem) !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
}

div.wp-block-cover.art-shine p {
    /* Scales smooth between 1rem and 1.8rem based on display viewport width */
    font-size: clamp(1rem, 1.2vw, 1.8rem) !important;
    line-height: 1.4 !important;
}


/* ==========================================================================
   SECTION 1B: VIEWPORT CALIBRATION (Display Specific Media Queries)
   ========================================================================== */
/* --- A. LAPTOPS & OLDER 22" MONITORS (Up to 1680x1050) --- */
@media (max-width: 1680px) {
    div.wp-block-cover.art-shine > div.wp-block-cover__inner-container {
        max-width: 65vw !important;
        left: 18% !important; /* Nudges text inwards on smaller screens */
    }
    div.wp-block-cover.art-shine h1.wp-block-heading {
        font-size: 1.85rem !important; /* Smaller header fits perfectly */
    }
    div.wp-block-cover.art-shine p {
        font-size: 1rem !important; /* Compact details text */
        margin-bottom: 8px !important;
    }
}

/* --- B. STANDARD 24"/27" DESKTOPS & SMART TV TARGETS (1920x1080) --- */
@media (min-width: 1681px) and (max-width: 1920px) {
    div.wp-block-cover.art-shine > div.wp-block-cover__inner-container {
        max-width: 70vw !important;
        left: 15% !important;
    }
    div.wp-block-cover.art-shine h1.wp-block-heading {
        font-size: 2.85rem !important; 
    }
    div.wp-block-cover.art-shine p {
        font-size: 1.35rem !important;
    }
}


/* ==========================================================================
   SECTION 2: BEST SELLER BLOCKS (Custom HTML)
   ========================================================================== */

.custom-gallery-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 5%;
    gap: 60px;
    max-width: 1600px;
    margin: 0 auto;
}

.image-side.art-sweep-slow {
    flex: 1.5;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
}


/* ==========================================================================
   SECTION 3: THREE-IMAGE GALLERY GRID
   ========================================================================== */

.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column,
.three-image-gallery {
    transition: transform 0.3s ease;
}

.three-image-gallery img:hover,
.wp-block-column img:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}


/* ==========================================================================
   SECTION 4: MOBILE RESPONSIVE (Phones & Small Tablets)
   ========================================================================== */

@media (max-width: 768px) {
    .custom-gallery-block {
        flex-direction: column !important;
        padding: 40px 20px;
    }
    
    .image-side {
        order: -1; 
        margin-bottom: 30px;
    }
    
    div.wp-block-cover.art-shine {
        aspect-ratio: 16 / 9 !important;
        min-height: 350px !important;
    }

    /* Centers mobile text natively for better portrait readability layout */
    div.wp-block-cover.art-shine > div.wp-block-cover__inner-container {
        justify-content: center !important;
        align-items: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    div.wp-block-cover.art-shine h1.wp-block-heading {
        font-size: 1.85rem !important;
        text-align: center !important;
    }
    
    div.wp-block-cover.art-shine p {
        font-size: 1.1rem !important;
        text-align: center !important;
    }
}