/*
 * SAMP Gallery - macOS Dark Theme
 * Inspired by the dark, clean aesthetic of macOS and the existing theme.
 */

.samp-gallery-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Custom Title */
.samp-gallery-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

/* Mobile title adjustments */
@media (max-width: 768px) {
  .samp-gallery-title {
    font-size: 2rem;
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .samp-gallery-title {
    font-size: 1.8rem;
    margin-bottom: 12px;
    padding: 0 10px;
  }
}

@media (max-width: 360px) {
  .samp-gallery-title {
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
}

/* Search Input - Styled to match macOS search fields */
.samp-gallery-search {
  margin-bottom: 35px;
  text-align: center;
}

.samp-gallery-search input {
  width: 100%;
  max-width: 450px;
  padding: 14px 22px;
  border: 1px solid #3a3a3c !important; /* Subtle border */
  border-radius: 10px !important; /* Rounded corners like macOS */
  font-size: 17px !important;
  background-color: #1e1e1e !important; /* Dark background */
  color: #e1e1e1 !important; /* Light text */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none !important;
  -webkit-appearance: none !important; /* Removes default browser styling */
}

.samp-gallery-search input::placeholder {
  color: #8a8a8e !important;
}

.samp-gallery-search input:focus {
  border-color: #007aff !important; /* Blue focus ring like macOS */
  background-color: #2a2a2a !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3) !important; /* Outer glow on focus */
}

/* Gallery Grid - Smaller containers to fit 5 skins per row */
.samp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
}

/* Individual Item - Styled like a modern UI element */
.samp-gallery-item {
  text-align: center;
  border: 1px solid #2c2c2e;
  padding: 0;
  border-radius: 12px;
  background-color: #1c1c1e;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.samp-gallery-item:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-color: #3c3c3e;
}

.samp-gallery-model {
  color: #b8b8b8;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
}

.samp-gallery-model strong {
  color: #e5e5e7;
  font-weight: 600;
  font-size: 14px; /* Explicitly match your design */
}

/* Item Image */
.skin-item .samp-gallery-item-img,
.weapon-item .samp-gallery-item-img {
  max-width: 70px; /* Smaller image for smaller containers */
  height: auto;
  display: block;
  margin-bottom: 12px;
  transition: transform 0.2s ease;
}

.car-item .samp-gallery-item-img {
  width: 100%;
  height: 120px; /* Slightly shorter for smaller containers */
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.samp-gallery-item:hover .samp-gallery-item-img {
  /* Image hover effect removed */
}

/* Info Container - Adjusted for smaller containers */
.samp-gallery-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  width: 100%;
  box-sizing: border-box;
}

/* ID - Styled as a badge */
.samp-gallery-id {
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  background-color: #3a3a3c;
  padding: 5px 10px;
  border-radius: 7px;
  display: inline-block;
  font-size: 14px;
}

/* Name - Adjusted font size for smaller containers */
.samp-gallery-name {
  color: #b8b8b8;
  font-size: 14px; /* Slightly smaller for the smaller containers */
  font-weight: 500;
  width: 100%;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
}

.samp-gallery-name strong {
  color: #e5e5e7; /* Brighter white for better readability */
  font-weight: 600;
}

/* Alternative: Allow wrapping but with better spacing */
.samp-gallery-name.allow-wrap {
  white-space: normal;
  line-height: 1.4;
  word-break: break-word;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .samp-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
  }

  .samp-gallery-info {
    padding: 10px 5px;
  }

  .skin-item .samp-gallery-item-img {
    max-width: 60px;
  }
}

@media (max-width: 600px) {
  .samp-gallery-name {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .samp-gallery {
    grid-template-columns: repeat(3, 1fr); /* 3 per row on mobile */
    gap: 12px;
  }

  .samp-gallery-container {
    margin: 25px auto;
  }

  .samp-gallery-info {
    padding: 8px 4px;
  }
}

/* Hide default page title on skins page */
body.page .entry-title {
  display: none;
}