/* California Beach Feet - Modern UI Override File */
/* CSS Grid Universal Layout for Variable Image Counts */

/* Global Page Resets */
#page-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
#nav ul li a, #select-year ul li a { font-size: 18px !important; font-weight: bold !important; padding: 5px 12px !important; display: inline-block; }
.headline { display: none !important; }
#header img { margin-bottom: 20px; }
.join { margin: 25px 0; }

/* 1. INSTANT COASTAL CLEAN: Hide the old horizontal dividers and descriptions */
.photo-catalog hr, .video-catalog-col hr, hr.photo-divider, hr.video-divider, .catalog-entry + hr, .video-catalog-entry + hr { display: none !important; }
.catalog-entry .desc, .video-catalog-entry .desc { display: none !important; }

/* 2. Main Flex Containers */
.photo-catalog, .photo-catalog-min, ul.video-catalog-list, .video-catalog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
    padding: 0;
    margin: 25px 0;
    list-style-type: none;
}
ul.video-catalog-list > li { width: 100%; display: flex; justify-content: center; }

/* 3. Universal Card Styling */
.catalog-entry, .video-catalog-entry {
    width: 100%;
    max-width: 1150px; /* Adapts dynamically for up to 5 native-sized images */
    margin: 0 auto;
    box-sizing: border-box;
    background: #111;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    text-align: center; 
    color: #fff;
}

/* 4. The Mathematical Responsive Grid for Thumbnails */
ul.photo-row, ul.video-row, .thumbnail-group {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important; /* <--- THIS KILLS THE INVISIBLE STRETCH */
    gap: 12px !important;
}

/* The Invisible Boxes holding the images */
ul.photo-row li, ul.video-row li, .thumbnail-group li {
    margin: 0 !important; 
    display: flex !important;
    justify-content: center !important;
    
    /* DESKTOP (Default): 18% x 5 = 90%. Forces 5 images per row. */
    flex: 1 1 18% !important;
    max-width: 260px !important; 
}

/* TABLET / LANDSCAPE: 30% x 3 = 90%. Forces the 3:2 Pyramid. */
@media only screen and (max-width: 900px) {
    ul.photo-row li, ul.video-row li, .thumbnail-group li {
        flex: 1 1 30% !important;
        max-width: 32% !important;
    }
}

/* MOBILE PORTRAIT: 100%. Forces 1 stacked image per row. */
@media only screen and (max-width: 640px) {
    ul.photo-row li, ul.video-row li, .thumbnail-group li {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* Enforce uniform borders globally */
ul.photo-row img, 
ul.video-row img,
.thumbnail-group img, 
.catalog-entry img, 
.video-catalog-entry img,
.video-catalog-entry a img {
    border: 1px solid #444 !important;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    outline: none !important;
}

/* SIZING OVERRIDE 1: Strict Native Proportions */
ul.photo-row img, 
ul.video-row img,
.thumbnail-group img {
    width: auto !important;      /* Stays native size, never stretches larger */
    max-width: 100% !important;  /* Only shrinks if the mobile screen forces it to */
    height: auto !important;     /* Locks the true aspect ratio */
    max-height: none !important; 
}

/* =========================================================
   SIZING OVERRIDE 2: True Mobile Power Grid
========================================================= */
@media only screen and (max-width: 640px) {
    /* 1. Force the row blocks to take the full phone width */
    ul.photo-row li, ul.video-row li, .thumbnail-group li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* 2. Fix the legacy hyperlink wrappers crushing the vertical images */
    ul.photo-row li a, ul.video-row li a, .thumbnail-group li a {
        display: block !important;
        width: 100% !important;
    }
    
    /* 3. Force the images to elegantly stretch to the edges */
    ul.photo-row img, ul.video-row img, .thumbnail-group img {
        width: 100% !important; 
        max-width: 100% !important; 
        height: auto !important; 
        max-height: none !important;
    }
}

/* Global Hover States */
ul.photo-row img:hover, 
ul.video-row img:hover,
.thumbnail-group img:hover, 
.catalog-entry img:hover, 
.video-catalog-entry img:hover,
.video-catalog-entry a img:hover { 
    transform: scale(1.05); 
    border-color: #777 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    position: relative;
    z-index: 10;
}

/* 5. The 3-Column Metadata Row */
.meta-row, .meta { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 12px;
    align-items: center;
    color: #eee; 
    font-size: 16px; 
    padding-top: 10px;
    margin: 0 !important;
    width: 100%;
}

/* 5b. Ghost Column Killer & Perfect Alignment */
.meta-row::before, .meta-row::after, .meta::before, .meta::after {
    display: none !important; /* Kills the Bootstrap ghost elements */
}
.meta-row > div, .meta > div {
    text-align: center !important; /* Centers everything within its 1/3 grid box */
    padding: 0 !important; /* Removes the manual bumpers */
}