/*
 * Webs.com photo gallery restoration
 * Your Life Sparkles — styles for archived Webs HTML.
 * Include this file AFTER the existing stylesheets.
 */

/* Main photo galleries: two columns, without stretching the images. */
.webs-module-photo_gallery .w-photo_gallery.grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* The original HTML uses extra .row wrappers. */
.webs-module-photo_gallery .w-photo_gallery.grid > .row {
    display: contents !important;
}

.webs-module-photo_gallery .w-photo_gallery.grid .cell {
    position: relative;
    float: none !important;
    display: block;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 214 / 229;
    overflow: hidden;
    box-sizing: border-box;
}

.webs-module-photo_gallery .w-photo_gallery.grid .cell-wrapper,
.webs-module-photo_gallery .w-photo_gallery.grid .image-edit-wrapper {
    display: block;
    position: relative;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* The actual fix: size every gallery image to its tile and crop proportionally. */
.webs-module-photo_gallery .w-photo_gallery.grid img.w-photo-gallery-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    object-position: center;
}

/* Keep Webs overlay elements inside each picture's boundaries. */
.webs-module-photo_gallery .w-photo_gallery.grid .details {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
}

/* The original footer gallery has three smaller images per row. */
#footer .webs-module-photo_gallery .w-photo_gallery.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

#footer .webs-module-photo_gallery .w-photo_gallery.grid .cell {
    aspect-ratio: 154 / 174;
}

/* Other Webs image modules, e.g. the 135x192 portrait and 470x263 image. */
.webs-module-image .webs-frame,
.webs-module-image .webs-frame-container {
    max-width: 100%;
}

.webs-module-image .webs-frame-container {
    display: flex;
    justify-content: center;
}

.webs-module-image .webs-image-wrapper-1 {
    display: block;
    position: relative;
    max-width: 100% !important;
    overflow: hidden;
    box-sizing: border-box;
}

.webs-module-image .webs-image-crop {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.webs-module-image .webs-image-crop img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
}

/* Let the footer gallery use two columns on narrow screens. */
@media (max-width: 600px) {
    .webs-module-photo_gallery .w-photo_gallery.grid {
        gap: 8px;
    }

    #footer .webs-module-photo_gallery .w-photo_gallery.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/*
 * Journals page / shared footer gallery (1ylsaugust2019.jpg).
 * This module appears in both supplied archived HTML pages.
 * Its original layout: 3 pictures per row, each approximately 154 x 174 px.
 * Specific rules override competing Webs/legacy theme declarations.
 */
#webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 4px !important;
    row-gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid > .row {
    display: contents !important;
}

#webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid .cell {
    display: block !important;
    position: relative !important;
    float: none !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 154 / 174 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid .cell-wrapper,
#webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid .image-edit-wrapper {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid img.w-photo-gallery-img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
}

#webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid .details {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    #webs-bin-5f6a2b45eeaabd4b23d2bba1 .w-photo_gallery.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}


/* ==========================================================
 * Inspirational Speaker — two extra galleries from Webs HTML
 *
 * Photo 71648954_2320110771371986_4204208619786338304_n-3.jpg:
 *   gallery 5e5c57c8... / 3 columns / 307 x 307 px.
 *
 * Motivation gallery 5b2565da...:
 *   4 columns / 225 x 225 px.
 *
 * Rules scoped by Webs module ID to leave previous galleries intact.
 * ========================================================== */

/* Main speaker photo gallery — three square photos per row. */
#webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 945px !important; /* 3 * 307 + 2 * 12 */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Four-column motivational-image gallery. */
#webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 936px !important; /* 4 * 225 + 3 * 12 */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Flatten legacy Webs row wrappers; grid arranges cells directly. */
#webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid > .row,
#webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid > .row {
    display: contents !important;
}

/* Prevent the inherited 214:229 ratio and original photo overflow. */
#webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid .cell,
#webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid .cell {
    display: block !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Fill tile regardless of the restored Webs wrappers. */
#webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid .cell-wrapper,
#webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid .image-edit-wrapper,
#webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid .cell-wrapper,
#webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid .image-edit-wrapper {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid img.w-photo-gallery-img,
#webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid img.w-photo-gallery-img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
}

#webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid .details,
#webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid .details {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    #webs-bin-5e5c57c8ca88e775e60648b0 .w-photo_gallery.grid,
    #webs-bin-5b2565dab17e70000173f5ad .w-photo_gallery.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}