/* ==========================================================
   cini-photo-gallery.css
   Styles for photo-gallery.php (gallery listing page)
   Requires: cini-common.css loaded first
   ========================================================== */

/* ========================================
   CSS Grid Layout — fixes Load More alignment
   + fixes empty first-cell ghost bug caused
   by WooCommerce .first/.last float clears
======================================== */
ul.products.columns-3.gallery-elevated {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

ul.products.columns-3.gallery-elevated li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
  box-sizing: border-box;
}

/* Neutralise WooCommerce .first / .last pseudo-elements —
   these inject clearfix content that creates a phantom empty
   grid cell before the first real card */
ul.products.columns-3.gallery-elevated li.product.first,
ul.products.columns-3.gallery-elevated li.product.last {
  clear: none !important;
}

ul.products.columns-3.gallery-elevated li.product.first::before,
ul.products.columns-3.gallery-elevated li.product.first::after,
ul.products.columns-3.gallery-elevated li.product.last::before,
ul.products.columns-3.gallery-elevated li.product.last::after,
ul.products.columns-3.gallery-elevated::before,
ul.products.columns-3.gallery-elevated::after {
  display: none !important;
  content: none !important;
  clear: none !important;
  float: none !important;
}

@media (max-width: 768px) {
  ul.products.columns-3.gallery-elevated {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  ul.products.columns-3.gallery-elevated {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ========================================
   Elevated Gallery Cards (Actor/Actress grid)
======================================== */
.elevated-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1.5px 4px rgba(0, 0, 0, 0.10);
  border-radius: 18px !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  background: #fff;
  overflow: hidden;
}

.elevated-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.14);
  transform: translateY(-4px) scale(1.03);
  z-index: 2;
}

.elevated-card .rounded-img {
  border-radius: 18px !important;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .mvp-main-blog-wrap>.mvp-main-box {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }

  .mvp-main-blog-out,
  .mvp-main-blog-in,
  .mvp-main-blog-body,
  #mvp-post-content,
  #mvp-content-wrap,
  #mvp-content-body,
  #woo-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  #mvp-side-wrap {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-top: 24px !important;
  }
}

/* Mobile styles - apply margin right and ensure text color */
@media screen and (max-width: 767px) {
  .mvp-main-blog-wrap>.mvp-main-box {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  .mvp-main-blog-out,
  .mvp-main-blog-in,
  .mvp-main-blog-body,
  #mvp-post-content,
  #mvp-content-wrap,
  #mvp-content-body,
  #woo-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 8px !important;
    box-sizing: border-box;
  }

  #mvp-side-wrap {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-top: 24px !important;
  }

  /* Ensure product titles are visible with black text on mobile */
  .product .woocommerce-loop-product__title,
  .product h2,
  .product-name {
    color: #000 !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    margin-right: 8px !important;
  }
}



@media screen and (max-width: 767px) {

  .zox-dark .product .woocommerce-loop-product__title,
  .zox-dark .product h2,
  .zox-dark .product-name {
    color: #fff !important;
    margin-right: 8px !important;
  }

}

@media screen and (max-width: 479px) {


  .main-top-ad {
    margin-right: 30px !important;
  }
}

/* ========================================
   Top 5 Movies Section - Fix Image Gaps
======================================== */

/* Ensure all images fill their containers completely */
#mvp_top_movies_widget img,
.mvp-widget-feat1-top-img img,
.mvp-widget-feat2-top-story img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 100% !important;
}

#mvp_top_movies_widget {
  overflow: hidden !important;
}

.mvp-widget-feat1-top-img,
.mvp-widget-feat2-top-story {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tablet: Center the section */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #mvp_top_movies_widget {
    margin: 0 auto 30px auto !important;
    width: 85% !important;
    max-width: 600px !important;
    float: none !important;
  }

  .mvp-widget-feat1-top-img {
    aspect-ratio: 9 / 16 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topmovie .mvp-widget-feat2-top-story {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mvp-widget-feat1-bot-text {
    padding: 8px 12px !important;
    margin: 0 !important;
  }
}

/* Mobile: Full width, fill images completely */
@media screen and (max-width: 767px) {
  #mvp_top_movies_widget {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  .mvp-widget-feat1-top-img {
    aspect-ratio: 9 / 16 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topmovie .mvp-widget-feat2-top-story {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mvp-widget-feat1-bot-text {
    padding: 8px 10px !important;
    margin: 0 !important;
  }

  .mvp-widget-feat1-bot-text h2 {
    font-size: 14px !important;
  }
}

/* ========================================
   Dark Mode Support
======================================== */
.zox-dark .elevated-card {
  background: #1e1e1e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1.5px 4px rgba(0, 0, 0, 0.3);
}

.zox-dark .elevated-card:hover {
  background: #252525;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.zox-dark .elevated-card h2 {
  color: #fff !important;
}

.zox-dark .woocommerce-loop-product__title {
  color: #fff !important;
}