/* Layout and Grid Systems */

/* Grid Layout Classes */
.cards-2 {
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

.cards-3 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.cards-4 {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* List Layout */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cards-list .mod-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  height: 32px; /* Same height as search bar */
  min-height: 32px;
  background-color: rgba(31, 41, 55, 0.8);
  border: 1px solid rgba(55, 65, 81, 0.5);
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}

.cards-list .mod-card:hover {
  background-color: rgba(55, 65, 81, 0.7);
  border-color: rgba(250, 204, 21, 0.6);
  transform: none; /* Override the scale transform */
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4);
}

/* Show/hide content based on layout */
.cards-list .list-content {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.cards-list .grid-content {
  display: none !important;
}

.cards-2 .list-content,
.cards-3 .list-content,
.cards-4 .list-content {
  display: none !important;
}

.cards-2 .grid-content,
.cards-3 .grid-content,
.cards-4 .grid-content {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

/* List Content Layout */
.list-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.list-left h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0; /* Title has lowest shrink priority - shrinks last */
  min-width: 3rem; /* Reasonable minimum for title visibility */
}

.list-right {
  flex-shrink: 0;
}

/* Progressive truncation for list view elements */
.cards-list .platform-list-compact {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 2; /* Platform shrinks first */
  min-width: 1.5rem; /* Minimum width for about 3 characters */
}

/* Standalone element with progressive truncation */
.cards-list .list-left > span:not(.platform-list-compact) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1; /* Standalone shrinks after platform but before title */
  min-width: 1.5rem; /* Minimum width for about 3 characters */
}

/* Platform Layout Control */
.platform-full {
  display: flex;
  align-items: center;
  gap: 0.375rem; 
}

.platform-compact {
  display: none;
}

/* When cards are at smallest size (cards-4), show compact platform */
.cards-4 .platform-full {
  display: none;
}

.cards-4 .platform-compact {
  display: flex;
  align-items: center;
}

/* Title and rating layout control */
/* Default: show horizontal layout (side by side) */
.title-rating-horizontal {
  display: flex;
}

.title-rating-vertical {
  display: none;
}

/* For cards-4: hide horizontal layout and show vertical layout */
.cards-4 .title-rating-horizontal {
  display: none;
}

.cards-4 .title-rating-vertical {
  display: block;
}

/* Allow title to wrap in cards-4 layout */
.cards-4 .title-rating-vertical h3 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Fix for video alignment - make grid content use flexbox */
.grid-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grid-content .video-container {
  margin-top: auto;
}

/* Mod Page Specific Layouts */
.mod-page-sections {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr;
  gap: 1.25rem; 
}

.mod-page-sections section {
  padding: 1.25rem; 
}

.mod-page-sections h2 {
  font-size: 1.29rem; 
  font-weight: 600;
}

.mod-page-sections svg {
  width: 1.25rem; 
  height: 1.25rem;
}

/* Responsive Design */
@media (max-width: 640px) {
  .cards-2, .cards-3, .cards-4 {
    grid-template-columns: 1fr;
  }
  
  .platform-block .flex {
    flex-wrap: wrap;
  }
  
  .platform-block span {
    white-space: normal;
  }

  .mod-page-sections {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Mobile list view adjustments with progressive truncation */
  .cards-list .list-left {
    gap: 0.375rem;
  }

  /* Tighter spacing and more aggressive shrinking on mobile */
  .cards-list .platform-list-compact {
    flex-shrink: 3; /* Even more aggressive shrinking on mobile */
    min-width: 1rem; /* Smaller minimum on mobile */
  }

  .cards-list .list-left > span:not(.platform-list-compact) {
    flex-shrink: 2; /* More aggressive shrinking on mobile */
    min-width: 1rem; /* Smaller minimum on mobile */
  }

  .cards-list .list-left h3 {
    min-width: 2rem; /* Smaller minimum for title on mobile */
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .mod-page-sections {
    grid-template-columns: 1.6fr 1.4fr; 
    gap: 1rem;
  }
}

@media (max-width: 320px) {
  /* Extra small mobile list view with even more aggressive truncation */
  .cards-list .list-left {
    gap: 0.25rem;
  }

  .cards-list .platform-list-compact {
    flex-shrink: 4; /* Maximum shrinking on very small screens */
    min-width: 0.75rem; /* Very small minimum */
  }

  .cards-list .list-left > span:not(.platform-list-compact) {
    flex-shrink: 3; /* High shrinking priority */
    min-width: 0.75rem; /* Very small minimum */
  }

  .cards-list .list-left h3 {
    min-width: 1.5rem; /* Minimum title width on very small screens */
  }
}