@media (max-width: 640px) {
  /* ===== General text scaling ===== */
  .text-5xl { font-size: 2rem; }
  .text-4xl { font-size: 1.75rem; }
  .text-2xl { font-size: 1.25rem; }
  .text-xl  { font-size: 1.125rem; }
  .text-lg  { font-size: 1rem; }

  .h-80, .h-96 {
    height: auto !important;
  }

  .aspect-ratio-fix {
    aspect-ratio: auto;
  }

  .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .py-16, .pt-16, .pb-16 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #home h1 {
    font-size: 2.5rem !important;
    line-height: 1.2;
  }

  form input,
  form textarea {
    font-size: 0.875rem;
  }

  nav {
    flex-wrap: wrap;
  }

  .container {
    max-width: 100%;
    padding: 0 1rem;
  }

  .flex-wrap {
    flex-wrap: wrap !important;
  }

  .social-card {
    flex: 0 1 100%;
    margin-bottom: 1rem;
  }

  @media (min-width: 480px) and (max-width: 640px) {
    .social-card {
      flex: 0 1 48%;
    }
  }

  .social-label {
    font-size: 0.85rem;
  }

  .achievement-card {
    margin-bottom: 1.5rem;
  }

  .rounded-3xl {
    border-radius: 1rem;
  }

  iframe {
    max-height: 60vh !important;
  }

  /* ============================= */
  /* ===== Calendar (Mobile) ===== */
  /* ============================= */

  /* Calendar card */
  #custom-calendar {
    padding: 0.75rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Grid */
  #calendar-grid {
    width: 100% !important;
    gap: 0.2rem !important;
    padding: 0.2rem !important;
    min-height: auto !important;
  }

  /* Cells */
  #calendar-grid > div {
    min-height: 3.8rem !important;   /* smaller than before */
    height: auto !important;
    padding: 0.2rem !important;
    font-size: 0.65rem !important;
    border-radius: 0.5rem !important;
  }

  /* Weekday headers */
  #calendar-grid > div.font-semibold {
    font-size: 0.6rem !important;
    padding: 0.15rem 0 !important;
    min-height: auto !important;
  }

  /* Day number (top right) */
  #calendar-grid .absolute.top-1.right-2 {
    font-size: 0.6rem !important;
    top: 0.2rem !important;
    right: 0.3rem !important;
  }

  /* Today badge */
  #calendar-grid .bg-white.rounded-full {
    width: 1rem !important;
    height: 1rem !important;
    font-size: 0.55rem !important;
  }

  /* Event pills */
  #calendar-grid .bg-accent.text-white {
    font-size: 0.55rem !important;
    padding: 0.1rem 0.25rem !important;
    margin-top: 0.9rem !important;
    line-height: 1.15 !important;
  }

  /* "+ more" text */
  #calendar-grid .text-\[10px\] {
    font-size: 0.5rem !important;
    margin-top: 0.15rem !important;
  }

  /* Month / year header buttons */
  #month-label,
  #year-label {
    font-size: 1rem !important;
    padding: 0.2rem 0.45rem !important;
  }

  #prev-month,
  #next-month {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.9rem !important;
  }

  /* Bring Add to Calendar button closer */
  #custom-calendar .mt-4 {
    margin-top: 0.75rem !important;
  }

  /* ============================= */
  /* ===== Featured Events ====== */
  /* ============================= */

  #featured-events-list li {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }

  #featured-events-list .font-semibold {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  #featured-events-list .text-xs {
    font-size: 0.75rem !important;
    margin-top: 0.125rem !important;
  }

  #featured-events-list .flex-shrink-0 {
    font-size: 1.125rem !important;
  }
}