/* TGP Gallery Plugin Styles - Force exactly 5 per row */
.centerContentItem ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}

/* Force exactly 5 items per row with calculated width */
.centerContentItem ul li {
    float: left !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 20% !important; /* Force 5 per row: 100% / 5 = 20% */
    box-sizing: border-box !important;
}

/* Links inside items */
.centerContentItem ul li a {
    display: block !important;
    text-decoration: none !important;
    position: relative !important;
}

/* Adjust thumbnail to fit within the 20% container */
.centerContentItem .homepage-thumbnail {
    margin: 1px auto 5px auto !important; /* Center within the 20% container */
    width: 125px !important;
    height: 160px !important;
    display: block !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Keep your theme's transition effects */
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all .1s ease-in-out !important;
    -o-transition: all .1s ease-in-out !important;
    -ms-transition: all .1s ease-in-out !important;
    transition: all .1s ease-in-out !important;
}

/* Keep your theme's hover effects */
.centerContentItem .homepage-thumbnail:hover {
    -webkit-filter: grayscale(25%) brightness(110%) !important;
    -webkit-box-shadow: 0px 2px 12px rgba(50, 50, 50, 0.75) !important;
    -moz-box-shadow: 0px 2px 12px rgba(50, 50, 50, 0.75) !important;
    box-shadow: 0px 2px 12px rgba(50, 50, 50, 0.75) !important;
}

/* Force new row after every 5th item */
.centerContentItem ul li:nth-child(5n+1) {
    clear: left !important;
}

/* Only add the visited overlay functionality */
.tgp-visited-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(74, 144, 226, 0.5) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transition: opacity 0.3s ease !important;
    display: none !important;
}

/* When visited, show the overlay */
.tgp-visited-overlay.show {
    display: block !important;
    opacity: 0.5 !important;
}

/* Hide overlay on hover */
.centerContentItem ul li a:hover .tgp-visited-overlay {
    opacity: 0 !important;
}

/* Ensure click tracking works */
.track-gallery-click,
.track-custom-click {
    cursor: pointer !important;
    display: block !important;
    position: relative !important;
}

/* Remove conflicting old styles */
.tgp-container,
.tgp-grid,
.tgp-item,
.tgp-thumbnail,
.tgp-ranked-list,
.tgp-ranked-item {
    display: none !important;
}

/* Ensure proper clearing after each row */
.centerContentItem ul::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}