/* Mobile Options CSS - Choose your preferred option */

/* ========================================
   OPTION 1: Hide content on mobile
   (Only show header, mobile menu, footer)
   ======================================== */

/* Uncomment the section below to hide content on mobile */
/*
@media (max-width: 768px) {
  .content-main .site-description,
  .content-main .card-grid,
  .content-main .show-all-container {
    display: none !important;
  }
  
  .main-content-wrapper {
    min-height: auto;
  }
  
  .content-main {
    display: none;
  }
}
*/

/* ========================================
   OPTION 2: Show content responsively
   (Show content but make it mobile-friendly)
   ======================================== */

/* This is the current active option */
@media (max-width: 768px) {
  .content-main .site-description {
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  .content-main .card-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .content-main .card {
    margin-bottom: 1rem;
  }
  
  .content-main .show-all-container {
    margin-top: 1rem;
    padding: 0 1rem;
  }
  
  .content-main .show-all-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   OPTION 3: Minimal mobile layout
   (Show only essential content)
   ======================================== */

/* Uncomment the section below for minimal mobile layout */
/*
@media (max-width: 768px) {
  .content-main .site-description {
    display: none;
  }
  
  .content-main .card-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .content-main .card {
    margin-bottom: 0.5rem;
  }
  
  .content-main .card-content {
    padding: 0.75rem;
  }
  
  .content-main .card-title {
    font-size: 1rem;
  }
  
  .content-main .card-text {
    font-size: 0.9rem;
    min-height: auto;
  }
  
  .content-main .show-all-container {
    margin-top: 0.5rem;
  }
}
*/