/*
 Theme Name:   JRL (Hamilton' Theme Child)
 Description:  Custom high-fidelity UX modifications for jenniferrobinlee.com
 Author:       Benjamin Sanchez
 Template:     hamilton
 Version:      1.0.0
*/

/* ==========================================================================
   UX Fixes: Collapse Page Headers cleanly while preserving backend Title names
   ========================================================================== */

.page .page-header, 
.page .entry-header {
    display: none;
}


/* ==========================================================================
   This part is only targetting the specific page with ID 13300 (the gallery page)
   to expand the container width and remove padding,
   allowing the masonry layout to utilize more horizontal space without affecting other pages.
   to add more pages, simply duplicate the .post-13300.page selector and change the ID to the desired page's ID.
   ========================================================================== */

/* Target the container ONLY when it lives inside your specific page asset ID */
.post-13300.page .section-inner.thin {
    max-width: 1200px;  /* Expands the frame bounds to a modern wide grid */
}

/* Optional: If you want this specific page to strip top/bottom container padding */
.post-13300.page .site-content {
    padding-top: 40px;
}

/* ==========================================================================
   Advanced Specificity Masonry Matrix (No !important)
   ========================================================================== */

/* 1. Target the outer container framework wrapper */
figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery {
    display: block;
    column-count: 3;
    column-gap: 16px;
    width: 100%;
}

/* 2. Target the child image elements using an advanced specificity mirror */
@media (min-width: 600px) {
    figure.wp-block-gallery.has-nested-images.columns-3.jrl-masonry-gallery figure.wp-block-image:not(#individual-image),
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image {
        display: inline-block;
        width: 100%;                  /* Forces images to fill the full width of the column */
        margin: 0 0 16px 0;           /* Sets uniform vertical padding between items */
        break-inside: avoid;          /* Restricts elements from splitting across columns */
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Responsive Viewport Control
   ========================================================================== */
@media (max-width: 768px) {
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery {
        column-count: 1;
    }
}

/* ==========================================================================
   High-Specificity Portfolio Caption Hover Effects
   ========================================================================== */
/* 1. Establish an isolated relative coordinate system context for each image card */
figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 2. Configure the Dark Overlay Mask using a pseudo-element layer */
figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Clear 50% opacity mask */
    opacity: 0;                          /* Hidden by default state */
    transition: opacity 0.35s ease-in-out;
    z-index: 10;
    pointer-events: none;                /* Prevents mask from stealing mouse clicks */
}

/* 3. High-Specificity Target to completely neutralize and remap the native figcaption */
.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image figcaption {
    /* Neutralize Gutenberg's styles */
    background: none;                    /* Strips out the core linear gradient */
    text-align: left;                    /* Overwrites text-align: center */
    max-height: none;                    /* Removes the 60% height cap constraint */
    padding: 0;                          /* Resets core padding boundaries */
    overflow: visible;                   /* Prevents scrollbars from appearing during animation */
    
    /* Apply your premium design requirements */
    position: absolute;
    bottom: 1.4rem;                      /* Replaces bottom: 0 */
    left: 1.4rem;                        /* Replaces left: 0 */
    width: auto;                         /* Prevents element from stretching to 100% width */
    color: #ffffff;
    font-size: 1.5rem;                   /* Overwrites core 13px size */
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin: 0;
    z-index: 50;                         /* Sits safely on top of the pseudo-after mask */
    transform: translateY(0);            /* Starting execution frame baseline */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

/* ==========================================================================
   Hover Animation Interactivity States
   ========================================================================== */

/* Fade in the dark overlay mask smoothly on hover */
figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image:hover::after {
    opacity: 1;
}

/* Smoothly shift the caption text upward along the Y-axis */
.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image:hover figcaption {
    transform: translateY(-3rem);
}


/* ==========================================================================
   Mobile Core Overrides & Fluid Typography (No !important)
   ========================================================================== */

/* 1. Neutralize Gutenberg's 50% width rules between 481px and 600px viewports */
@media (max-width: 600px) {
    /* Match the native core selector weight and clamp width parameters */
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image:not(#individual-image) {
        width: 100%;                /* Forces items to expand across their masonry columns */
        margin: 0 0 16px 0;         /* Normalizes vertical grid item spacing margins */
    }
}

/* 2. Scale Layout Parameters for Tablet Viewports (2 Columns) */
@media (max-width: 768px) {
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery {
        column-count: 2;            /* Safely re-establishes a clean 2-column masonry grid */
        column-gap: 16px;
    }
    
    /* Scale the caption presentation size down for tablet displays */
    .wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image figcaption {
        font-size: 1.2rem;          /* Scales text down to a legible size */
        bottom: 1rem;
        left: 1rem;
    }
    
    /* Adjust your custom hover animation travel distance for shorter text boxes */
    .wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image:hover figcaption {
        transform: translateY(-1.5rem);
    }
}

/* 3. Scale Layout Parameters for Mobile Viewports (1 Column) */
@media (max-width: 480px) {
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery {
        column-count: 1;            /* Stacks your images into a single vertical stream */
        column-gap: 0;
    }
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image::after {
        opacity: 1;
    }
    
    /* Ensure mobile items expand to full width and clear core width variables */
    figure.wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image:not(#individual-image) {
        width: 100%;
        margin-bottom: 16px;
    }

    /* Set compact typography rules for small mobile layouts */
    .wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image figcaption {
        font-size: 1.2rem;            /* Clean baseline font size for mobile text */
        bottom: 0.8rem;
        left: 0.8rem;
    }
    
    .wp-block-gallery.has-nested-images.jrl-masonry-gallery figure.wp-block-image:hover figcaption {
        transform: translateY(-1rem);
    }
}