/* Mobile-only overrides to ensure responsiveness without altering desktop layout */
@media (max-width: 768px) {
  /* General container padding tweaks */
  body { font-size: 14px; max-width: 100vw !important; }
  h1 { font-size: 32px; line-height: 40px; }

  /* Toolkit sections: disable complex tall sticky stacking to avoid huge scroll gaps */
  #teaching-frames, #student-frames { height: auto !important; }
  #teaching-frames .toolkit-frame, #student-frames .toolkit-frame {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1208 / 792;
    margin-bottom: 28px;
  }
  #teaching-toolkit-section, #student-toolkit-section { padding: 48px 16px 40px 16px !important; }
  #teaching-toolkit-section .toolkit-title, #student-toolkit-section .toolkit-title { font-size: 28px; line-height: 36px; }
  #teaching-toolkit-section .toolkit-subtitle, #student-toolkit-section .toolkit-subtitle { font-size: 14px; line-height: 20px; margin-bottom: 32px; }

  /* Solutions slider: ensure arrows don't overlap content on small screens */
  .solutions-arrow { width: 40px; height: 40px; }
  .solution-frame { width: 220px !important; height: 200px !important; }

  /* Popup sizing for small screens */
  .subject-popup-frame { width: 90% !important; height: auto !important; max-height: 70vh; }
  .subject-popup-image { height: auto !important; }
  .subject-popup-close-btn { top: -14px !important; right: -14px !important; }

  /* Empower cards spacing */
  .empower-section { padding: 10px 16px !important; }

  /* Value proposition mobile width adjustments already existing; ensure consistent max width */
  .value-preposition, .value-preposition-heading2 { padding-left: 16px; padding-right: 16px; }

  /* Why choose images full width */
  .why-choose-section-image img { width: 100% !important; height: auto !important; }

  /* Footer adjustments */
  /* .footer { padding: 40px 16px 40px 16px !important; } */
  .footer-content-middle { gap: 40px !important; }
  .footer-techerity-image img { width: 100% !important; height: auto !important; }
}

/* Ultra-small devices */
@media (max-width: 400px) {
  #teaching-toolkit-section .toolkit-title, #student-toolkit-section .toolkit-title { font-size: 24px; }
  h1 { font-size: 26px; line-height: 32px; }
  .image-button button { font-size: 10px !important; padding: 6px 10px !important; }
  .solution-frame { width: 180px !important; height: 170px !important; }
}