/* =========================================================
   ✅ MOBILE RESPONSIVE FIX PACK (CSS ONLY)
   - Events section (left collage + right cards)
   - Happy School cards slider
   - Notice Hub tabs + list + subscribe box
   - Make long items swipeable horizontally on mobile
   ========================================================= */

/* ---------- Global small screen tweaks ---------- */
@media (max-width: 640px) {
  /* reduce big headings a bit */
  h2.text-4xl { font-size: 1.8rem !important; line-height: 2.1rem !important; }
  h2.sm\:text-5xl { font-size: 2.05rem !important; line-height: 2.35rem !important; }

  /* reduce section padding so it doesn't feel cramped */
  section.py-16 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  section.py-14 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* paragraphs smaller */
  p { font-size: 0.95rem; }
}

/* ---------- EVENTS SECTION: stop collage overflowing on mobile ---------- */
@media (max-width: 768px) {
  /* force 1 column */
  .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }

  /* make collage images full width and prevent "absolute" ones creating overflow */
  .max-w-lg { max-width: 100% !important; }

  /* hide floating small images on mobile (you already have hidden sm:block; this ensures) */
  .absolute.-right-4.top-20,
  .absolute.right-6.-bottom-10,
  .absolute.-right-10.top-6,
  .absolute.-left-10.bottom-10 {
    display: none !important;
  }

  /* reduce main image height for mobile */
  .h-\[360px\] { height: 240px !important; }

  /* make event cards padding smaller */
  article.p-6 { padding: 1rem !important; }

  /* make event card titles smaller */
  article h3.text-2xl { font-size: 1.25rem !important; line-height: 1.6rem !important; }

  /* badges wrap nicely */
  article .flex.flex-wrap { gap: .5rem !important; }

  /* stop hover popup layout issues on touch devices */
  article .hidden.md\:block.absolute {
    display: none !important;
  }
}

/* ---------- HAPPY SCHOOL SLIDER: make cards swipeable on mobile ---------- */
@media (max-width: 768px) {
  /* allow horizontal scrolling by swipe if many cards */
  #sliderTrack {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    /* remove transform snapping issues if user swipes */
    transform: none !important;
  }

  /* each card snaps */
  #sliderTrack .facility-card {
    scroll-snap-align: start;
  }

  /* reduce card min width to fit mobile nicely */
  .facility-card.min-w-\[320px\] {
    min-width: 85vw !important;
  }

  /* hide arrow buttons on mobile (swipe instead) */
  #prevBtn, #nextBtn {
    display: none !important;
  }
}

/* ---------- NOTICE HUB: Tabs + list -> becomes swipe carousel on mobile ---------- */
@media (max-width: 768px) {
  /* stack the whole notice area */
  .mt-12.grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* make tabs horizontally scrollable */
  #noticeTabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 6px;
  }

  #noticeTabs .tab-btn {
    flex: 0 0 auto;
  }

  /* Make the notice list area horizontally swipeable if items become big/long */
  .tab-panel .space-y-4 {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }

  /* Each notice card becomes a slide */
  .tab-panel .space-y-4 > a {
    flex: 0 0 85vw;
    scroll-snap-align: start;
  }

  /* tighten notice text so it stays visible */
  .tab-panel p.font-extrabold {
    font-size: 1rem !important;
    line-height: 1.3rem !important;
  }
  .tab-panel p.text-sm {
    font-size: .88rem !important;
  }

  /* subscribe box spacing */
  aside.p-6 { padding: 1rem !important; }
}

/* ---------- Make long text not break layout ---------- */
.tab-panel a p,
article p,
.facility-card p {
  overflow-wrap: anywhere;
}

/* ---------- nicer mobile scrollbars (optional) ---------- */
#noticeTabs::-webkit-scrollbar,
.tab-panel .space-y-4::-webkit-scrollbar,
#sliderTrack::-webkit-scrollbar {
  height: 6px;
}
#noticeTabs::-webkit-scrollbar-thumb,
.tab-panel .space-y-4::-webkit-scrollbar-thumb,
#sliderTrack::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
}