/**
 * MOBILE LAYOUT FIXES
 * Targeted fixes for specific layout issues on mobile
 */

@media screen and (max-width: 768px) {

  /* ============================================
     PRODUCT CARDS - READ GUIDE BUTTONS
     ============================================ */

  /* Product grid cards */
  .grid.cards li p {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Read Guide buttons on their own line */
  .grid.cards .md-button {
    align-self: flex-start;
    margin-top: 0.5rem;
  }

  /* ============================================
     NEW USER RESOURCES SECTION
     ============================================ */

  /* Force single column on mobile for New User Resources */
  div[style*="grid-template-columns"][style*="minmax(300px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Resource cards */
  div[style*="grid-template-columns"] > div {
    width: 100% !important;
    max-width: 100% !important;
  }

}

@media screen and (max-width: 480px) {

  /* Extra compact on small phones */
  .grid.cards li {
    padding: 1rem;
  }

  .grid.cards li p {
    font-size: 14px;
  }

}