/**
 * MG 2025 Minimal Theme D - Override Only
 * Optimized CSS using variables and proper specificity
 */

/* ========== COLORI BLACK & WHITE ========== */

/* Background bianco puro */
body {
  background-color: #000000 !important;
  /* Forza background nero */
  color: var(--color-text);
  padding-top: 60px;
  /* Reduced padding */
}

/* Pulsanti - Primary */
body .btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-secondary);
}

body .btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Pulsanti - Outline */
body .btn-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

body .btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

/* Footer */
body footer {
  background-color: var(--color-background);
  border-top: 1px solid var(--color-primary);
  color: var(--color-text);
}

body footer a {
  color: var(--color-text);
}

body footer .text-muted {
  color: var(--color-text-muted);
}

/* ========== GALLERY ZERO GAP ========== */

/* Rimuovi tutti i gap nelle gallery */
body .row.g-4,
body .row.g-3,
body .row.gy-4,
body .row.gy-3 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 0;
}

/* Thumbs gallery - ZERO padding e margin */
body .photo-grid,
body .photo-gallery,
body .gallery-grid,
body .row[class*="row-cols"] {
  gap: 0;
  padding: 0;
  margin: 0;
}

body .photo-grid>*,
body .photo-gallery>*,
body .gallery-grid>*,
body .row[class*="row-cols"]>* {
  padding: 0;
  margin: 0;
}

/* Carte foto - NO border, NO border-radius */
body .card {
  border: none;
  border-radius: 0;
  background: var(--color-primary);
  /* Sfondo nero/bianco di base */
}

body .card img {
  border-radius: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover effect minimal */
body .card:hover {
  transform: scale(1.01);
  transition: transform var(--transition-fast);
  z-index: 10;
  position: relative;
}

/* User cards gallery */
body .user-card {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

body .user-card img {
  border-radius: 0;
}

/* ========== TYPOGRAPHY MINIMAL ========== */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: var(--font-weight-light);
  color: var(--color-primary);
}

body p,
body span,
body div {
  font-weight: var(--font-weight-light);
}

/* ========== REMOVE SHADOWS ========== */

body .card,
body .btn,
body .navbar,
body .modal,
body .dropdown-menu {
  box-shadow: none;
}

/* ========== BORDERS ========== */

body .border,
body .border-top,
body .border-bottom {
  border-color: var(--color-primary) !important;
  /* Bootstrap uses !important, so we might need it here occasionally for utility classes override */
}

/* ========== ACCENT COLORS ========== */

/* Sostituisci accent gold con primario */
body .text-primary {
  color: var(--color-primary) !important;
}

body .bg-primary {
  background-color: var(--color-primary) !important;
}

/* Link */
body a {
  color: var(--color-primary);
  text-decoration: none;
}

body a:hover {
  color: var(--color-text-muted);
}

/* ============================================
   UNIFIED PHOTO GALLERY - CSS COLUMNS MASONRY LAYOUT
   Tutte le gallery usano lo stesso sistema masonry
   ============================================ */

/* Base: CSS Columns Masonry per tutte le gallery */
#homepage-gallery,
#user-gallery,
#category-gallery,
#search-gallery,
#explorer-gallery,
.mg2025-photo-gallery,
.mg-masonry-grid {
  display: block !important;
  /* CSS Columns requires block display */
  -webkit-column-count: 6;
  -moz-column-count: 6;
  column-count: 6;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  line-height: 0;
  font-size: 0;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  /* Rimuove qualsiasi grid property */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
}

/* Elementi foto: position relative per contenere overlay */
#homepage-gallery figure,
#homepage-gallery .mg-card,
#homepage-gallery .mg2025-photo,
#user-gallery figure,
#user-gallery .mg-card,
#user-gallery .mg2025-photo,
#category-gallery figure,
#category-gallery .mg-card,
#search-gallery figure,
#search-gallery .mg-card,
#explorer-gallery figure,
#explorer-gallery .mg-card,
.mg2025-photo-gallery figure,
.mg2025-photo-gallery .mg-card,
.mg-masonry-grid figure,
.mg-masonry-grid .mg-card {
  display: inline-block !important;
  /* Required for CSS Columns masonry */
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  /* Zero margin per eliminare spazio sotto */
  padding: 0 !important;
  background: #000;
  width: 100% !important;
  box-sizing: border-box !important;
  break-inside: avoid !important;
  /* Evita che le foto vengano spezzate tra colonne */
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  vertical-align: top !important;
}

/* Link dentro le card */
#homepage-gallery .mg-card-link,
#user-gallery .mg-card-link,
#category-gallery .mg-card-link,
#search-gallery .mg-card-link,
#explorer-gallery .mg-card-link,
.mg2025-photo-gallery .mg-card-link,
.mg-masonry-grid .mg-card-link {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Immagini */
#homepage-gallery .mg-card-img,
#user-gallery .mg-card-img,
#category-gallery .mg-card-img,
#search-gallery .mg-card-img,
#explorer-gallery .mg-card-img,
.mg2025-photo-gallery .mg-card-img,
.mg-masonry-grid .mg-card-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  /* Masonry layout - mantiene proporzioni naturali */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  /* Elimina spazio inline sotto le immagini */
}

/* Overlay bottom - sempre dentro la foto */
#homepage-gallery .overlay-bottom,
#user-gallery .overlay-bottom,
#category-gallery .overlay-bottom,
#search-gallery .overlay-bottom,
#explorer-gallery .overlay-bottom,
.mg2025-photo-gallery .overlay-bottom,
.mg-masonry-grid .overlay-bottom {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 5 !important;
}

/* Nascondi sizer elements (non servono con CSS Columns) */
.grid-sizer,
.gutter-sizer {
  display: none !important;
}

/* ========== RESPONSIVE MASONRY COLUMNS ========== */

/* Mobile XS: 1 colonna */
@media (max-width: 479px) {

  #homepage-gallery,
  #user-gallery,
  #category-gallery,
  #search-gallery,
  #explorer-gallery,
  .mg2025-photo-gallery,
  .mg-masonry-grid {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
  }
}

/* Mobile S: 2 colonne */
@media (min-width: 480px) and (max-width: 767px) {

  #homepage-gallery,
  #user-gallery,
  #category-gallery,
  #search-gallery,
  #explorer-gallery,
  .mg2025-photo-gallery,
  .mg-masonry-grid {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
  }
}

/* Tablet: 3 colonne */
@media (min-width: 768px) and (max-width: 1199px) {

  #homepage-gallery,
  #user-gallery,
  #category-gallery,
  #search-gallery,
  #explorer-gallery,
  .mg2025-photo-gallery,
  .mg-masonry-grid {
    -webkit-column-count: 3 !important;
    -moz-column-count: 3 !important;
    column-count: 3 !important;
  }
}

/* Desktop: 4 colonne */
@media (min-width: 1200px) and (max-width: 1439px) {

  #homepage-gallery,
  #user-gallery,
  #category-gallery,
  #search-gallery,
  #explorer-gallery,
  .mg2025-photo-gallery,
  .mg-masonry-grid {
    -webkit-column-count: 4 !important;
    -moz-column-count: 4 !important;
    column-count: 4 !important;
  }
}

/* Desktop L: 5 colonne */
@media (min-width: 1440px) and (max-width: 1599px) {

  #homepage-gallery,
  #user-gallery,
  #category-gallery,
  #search-gallery,
  #explorer-gallery,
  .mg2025-photo-gallery,
  .mg-masonry-grid {
    -webkit-column-count: 5 !important;
    -moz-column-count: 5 !important;
    column-count: 5 !important;
  }
}

/* Desktop XL: 6 colonne */
@media (min-width: 1600px) {

  #homepage-gallery,
  #user-gallery,
  #category-gallery,
  #search-gallery,
  #explorer-gallery,
  .mg2025-photo-gallery,
  .mg-masonry-grid {
    -webkit-column-count: 6 !important;
    -moz-column-count: 6 !important;
    column-count: 6 !important;
  }
}

/* Remove bootstrap dark background override - RE-ADDED */
.bg-dark {
  background-color: #000000 !important;
}

/* Navbar Buttons - Make them standout */
.navbar .mg-btn-signup {
  background-color: #0066ff !important;
  border-color: #0066ff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px;
  padding: 8px 24px !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4);
  transition: all 0.3s ease;
}

.navbar .mg-btn-signup:hover {
  background-color: #0052cc !important;
  border-color: #0052cc !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.5);
}

.navbar .mg-btn-login {
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  margin-right: 10px;
  font-size: 0.9rem !important;
  transition: all 0.3s ease;
}

.navbar .mg-btn-login:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* FORCE HIDE SIDEBAR IN COLLECTION PAGE - MOBILE - USER RELOAD FIX */
@media (max-width: 991px) {

  .mg2025-sidebar-collection-detail,
  aside.mg2025-sidebar-collection-detail {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -100 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* FIX LAYOUT SPACER ISSUE: Override Grid specific of collection.css currently reserving 320px */
  body .mg2025-collection-detail,
  .mg2025-collection-detail {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }

  body .mg2025-collection-detail .mg2025-main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* FIX: Add top spacing */
  .mg2025-collection-header {
    padding-top: 20px !important;
  }
}