/* ===============================================
   HOMEPAGE.CSS - Homepage Responsive Styles
   Mobile and Desktop Layout Adjustments
   =============================================== */



/* ===================================
   HOMEPAGE RESPONSIVE ADDITIONS
   =================================== */

/* Mobile adjustments - only for phones */
@media (max-width: 768px) {
  /* Stack Game Showcase and Port of the Month */
  div[style*="padding: 2rem"][style*="background: var(--md-code-bg-color)"] > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Center text when stacked */
  div[style*="padding: 2rem"][style*="background: var(--md-code-bg-color)"] > div[style*="grid-template-columns: 1fr 1fr"] > div {
    text-align: center !important;
  }
  
  /* How It Works - 1 column */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Stats bar - 2 columns */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="background: linear-gradient"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Key Features - 2 columns */
  div[style*="grid-template-columns: repeat(4, 1fr)"]:not([style*="background: linear-gradient"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Moderate padding */
  div[style*="padding: 2rem"] {
    padding: 1rem !important;
  }
  
  div[style*="padding: 1.5rem"] {
    padding: 0.75rem !important;
  }
  
  /* Moderate gaps */
  div[style*="gap: 2rem"],
  div[style*="gap: 1.5rem"] {
    gap: 0.75rem !important;
  }
  
  /* Moderate margins */
  div[style*="margin: 2rem 0"],
  div[style*="margin: 3rem 0"] {
    margin: 1rem 0 !important;
  }
  
  /* Key Features - 50% */
  div[style*="grid-template-columns: repeat(4, 1fr)"] h3 {
    font-size: 0.55rem !important;
  }
  
  div[style*="grid-template-columns: repeat(4, 1fr)"] p {
    font-size: 0.45rem !important;
  }
  
  div[style*="grid-template-columns: repeat(4, 1fr)"] i {
    font-size: 1rem !important;
  }
  
  /* How It Works - bigger fonts */
  div[style*="grid-template-columns: repeat(3, 1fr)"] h3 {
    font-size: 0.85rem !important;
  }
  
  div[style*="grid-template-columns: repeat(3, 1fr)"] p {
    font-size: 0.7rem !important;
  }
  
  div[style*="grid-template-columns: repeat(3, 1fr)"] div[style*="width: 50px"] {
    width: 25px !important;
    height: 25px !important;
    font-size: 0.75rem !important;
  }
  
  /* Stats - 50% */
  div[id="portCount"],
  div[style*="font-size: 2.5rem"] {
    font-size: 1.25rem !important;
  }
  
  div[style*="font-size: 0.9rem"][style*="text-transform: uppercase"] {
    font-size: 0.45rem !important;
  }
  
  /* Buttons - 50% */
  .md-button {
    font-size: 0.6rem !important;
    padding: 0.5rem 1rem !important;
  }
}