/* ============================================
   FINAL OVERLAP & SIZING FIXES
   Applied October 6, 2025
   Fixes remaining sizing and bottom image overlaps
   ============================================ */

/* ============================================
   1. UNIVERSAL IMAGE FIXES
   ============================================ */

/* Ensure NO images can ever overflow their containers */
img,
picture,
video,
canvas,
svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  box-sizing: border-box;
}

/* Fix any positioned images */
img[style*="position"],
picture[style*="position"] {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Prevent inline styles from breaking images */
*[style*="width"] img,
*[style*="height"] img {
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================
   2. FOOTER IMAGE FIXES
   ============================================ */

/* Fix footer to prevent overlap */
.footer,
.main-footer,
footer {
  position: relative;
  clear: both;
  width: 100%;
  margin-top: var(--space-3xl);
  padding: var(--space-2xl) 0;
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-base);
  box-sizing: border-box;
}

/* Ensure footer stays at bottom but doesn't overlap */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer,
.main-footer {
  margin-top: auto;
}

/* Fix footer images */
.footer img,
.main-footer img,
footer img,
.footer-logo img,
.social-link img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Fix social icons */
.social-links {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.social-link {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.social-link svg,
.social-link img {
  width: 20px;
  height: 20px;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0;
}

/* ============================================
   3. CARD IMAGE FIXES
   ============================================ */

/* Fix all card images to never overflow */
.card,
.feature-card,
.listing-card,
.vehicle-card,
.game-card,
.part-card,
[class*="-card"] {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Fix card image containers */
.card-image,
.listing-image,
.vehicle-image,
.game-thumbnail,
.part-image,
.category-image,
[class*="-card"] img,
[class*="-image"] {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.card-image img,
.listing-image img,
.vehicle-image img,
.game-thumbnail img,
.part-image img,
.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fix aspect ratio containers */
.aspect-16-9,
.aspect-4-3,
.aspect-1-1 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
}

.aspect-16-9 {
  padding-bottom: 56.25%; /* 16:9 */
}

.aspect-4-3 {
  padding-bottom: 75%; /* 4:3 */
}

.aspect-1-1 {
  padding-bottom: 100%; /* 1:1 */
}

.aspect-16-9 img,
.aspect-4-3 img,
.aspect-1-1 img,
.aspect-16-9 > *,
.aspect-4-3 > *,
.aspect-1-1 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   4. GRID & FLEX SIZING FIXES
   ============================================ */

/* Prevent grid items from growing too large */
.grid > *,
[class*="-grid"] > *,
.feature-cards > *,
.listing-grid > *,
.vehicle-grid > * {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix flex items */
.flex,
[class*="flex-"] {
  min-width: 0;
}

.flex > *,
[class*="flex-"] > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================
   5. CONTAINER SIZING FIXES
   ============================================ */

/* Ensure all containers respect their bounds */
.container,
.hero-content,
.section-content,
[class*="-content"] {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Fix main content areas */
main,
.dashboard-main,
.community-main,
.racing-main,
.parts-main,
.marketplace-main,
.profile-main {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  flex: 1;
}

/* ============================================
   6. MODAL IMAGE FIXES
   ============================================ */

/* Fix images in modals */
.modal-content img,
.modal-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Fix modal sizing */
.modal-content {
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal-body {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ============================================
   7. BUTTON & BADGE SIZING
   ============================================ */

/* Fix button images/icons */
.btn img,
.btn svg,
button img,
button svg {
  max-width: 24px !important;
  max-height: 24px !important;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Fix badges and labels */
.badge,
.label,
.tag,
.listing-badge {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================
   8. AVATAR & PROFILE IMAGE FIXES
   ============================================ */

/* Fix user avatars */
.avatar,
.user-avatar,
.profile-picture {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.avatar img,
.user-avatar img,
.profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Large avatars */
.avatar-lg,
.user-avatar-lg {
  width: 80px;
  height: 80px;
}

.avatar-xl,
.user-avatar-xl {
  width: 120px;
  height: 120px;
}

/* ============================================
   9. HERO & BANNER IMAGE FIXES
   ============================================ */

/* Fix hero section images */
.hero,
.hero-visual,
.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.hero img,
.hero-visual img,
.banner img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  display: block;
}

/* ============================================
   10. LISTING & MARKETPLACE IMAGE FIXES
   ============================================ */

/* Fix listing images specifically */
.listing-card .listing-image {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
}

.listing-card .listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Fix marketplace grid */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
  width: 100%;
  box-sizing: border-box;
}

.listing-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* ============================================
   11. RACING GAME IMAGE FIXES
   ============================================ */

/* Fix game thumbnails */
.game-card .game-thumbnail {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
}

.game-card .game-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fix leaderboard avatars */
.leaderboard-entry .avatar,
.player-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* ============================================
   12. PARTS & VEHICLE IMAGE FIXES
   ============================================ */

/* Fix part images */
.part-card .part-image {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
}

.part-card .part-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: var(--space-md);
}

/* Fix vehicle images */
.vehicle-card .vehicle-image {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
}

.vehicle-card .vehicle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   13. RESPONSIVE IMAGE FIXES
   ============================================ */

@media (max-width: 768px) {
  /* Make all images smaller on mobile */
  .listing-card .listing-image,
  .vehicle-card .vehicle-image {
    height: 160px;
  }

  .game-card .game-thumbnail {
    height: 140px;
  }

  .part-card .part-image {
    height: 120px;
  }

  /* Fix hero images on mobile */
  .hero img,
  .hero-visual img,
  .banner img {
    max-height: 300px;
  }

  /* Ensure footer doesn't overlap */
  .footer,
  .main-footer {
    margin-top: var(--space-2xl);
    padding: var(--space-xl) 0;
  }
}

/* ============================================
   14. PREVENT ABSOLUTE POSITIONING OVERLAPS
   ============================================ */

/* Fix absolutely positioned images */
[style*="position: absolute"] img,
[style*="position:absolute"] img {
  max-width: calc(100% - 20px) !important;
  max-height: calc(100% - 20px) !important;
}

/* Fix badges on images */
.listing-badge,
.card-badge,
[class*="-badge"] {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 10;
  max-width: calc(100% - var(--space-2xl));
  flex-shrink: 0;
}

/* ============================================
   15. CLEARFIX & SPACING
   ============================================ */

/* Ensure proper clearing after floated images */
.clearfix::after,
.container::after,
.card::after,
[class*="-content"]::after {
  content: "";
  display: table;
  clear: both;
}

/* Add bottom spacing to prevent footer overlap */
main > *:last-child,
.dashboard-main > *:last-child,
.community-main > *:last-child,
.racing-main > *:last-child,
.parts-main > *:last-child,
.marketplace-main > *:last-child,
.profile-main > *:last-child {
  margin-bottom: var(--space-3xl);
}

/* ============================================
   16. EMERGENCY OVERFLOW FIXES
   ============================================ */

/* Nuclear option - prevent ALL overflow */
* {
  max-width: 100%;
}

html {
  overflow-x: hidden;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

/* Allow specific elements to overflow when needed */
.allow-overflow,
.modal-content,
.dropdown-menu,
[role="menu"],
[role="listbox"] {
  max-width: none;
}

/* Fix table overflow */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

tbody,
thead {
  display: table;
  width: 100%;
}

/* ============================================
   17. Z-INDEX FIX FOR OVERLAPS
   ============================================ */

/* Ensure proper stacking order */
.main-nav {
  z-index: 10001; /* Header below mobile menu but above content */
}

main,
.dashboard-main,
.community-main,
.racing-main,
.parts-main,
.marketplace-main,
.profile-main {
  z-index: 1;
  position: relative;
}

.footer,
.main-footer {
  z-index: 1;
  position: relative;
}

.modal-overlay {
  z-index: 9998; /* Modal backdrop - below content but above everything else */
}

.modal-content {
  z-index: 9999; /* Modal content - above backdrop */
}

/* ============================================
   18. WORD WRAP FIX FOR SIZING
   ============================================ */

/* Prevent long words from breaking layout */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
li,
td,
th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Prevent code/pre from breaking */
code,
pre {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: normal;
  white-space: pre-wrap;
}

/* ============================================
   19. FIX BACKGROUND IMAGES
   ============================================ */

/* Ensure background images don't overflow */
[style*="background-image"],
.has-bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* ============================================
   20. PRINT MEDIA FIXES
   ============================================ */

@media print {
  /* Prevent overlap in print */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .footer,
  .main-footer {
    page-break-before: always;
  }
}