/* =========================
   GLOBAL MOBILE FIXES
   ========================= */

/* Small phones (≤ 480px) */
@media (max-width: 480px) {

}

/* Phones & small tablets (≤ 640px) */
@media (max-width: 640px) {

}

/* Tablets (≤ 768px) */
@media (max-width: 768px) {

}

/* Small laptops (≤ 1024px) */
@media (max-width: 1024px) {

}
/* =========================================================
   KSS Responsive Fixes (Index Page)
   File: /kss/assets/css/responsive.css
   ========================================================= */

/* ---------- General smaller spacing on phones ---------- */
@media (max-width: 640px) {
  main.max-w-7xl {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  section[id="stats"] {
    margin-top: 40px !important;
  }

  h2.text-4xl,
  h2.sm\:text-5xl {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  p.mt-4 {
    margin-top: 12px !important;
  }
}

/* ---------- HERO SLIDER (top) ---------- */
@media (max-width: 640px) {
  /* reduce huge 420px height */
  .relative.max-w-7xl .min-w-full.h-\[420px\] {
    height: 240px !important;
  }

  /* smaller overlay text */
  .relative.max-w-7xl .absolute.inset-x-0.bottom-0 .p-6 {
    padding: 14px !important;
  }
  .relative.max-w-7xl .absolute.inset-x-0.bottom-0 h2 {
    font-size: 18px !important;
  }
  .relative.max-w-7xl .absolute.inset-x-0.bottom-0 p {
    font-size: 12px !important;
  }

  /* arrows smaller + inside */
  .relative.max-w-7xl > button.absolute {
    width: 36px !important;
    height: 36px !important;
  }
  .relative.max-w-7xl > button.absolute.left-4 {
    left: 10px !important;
  }
  .relative.max-w-7xl > button.absolute.right-4 {
    right: 10px !important;
  }
}

/* ---------- STATS cards smaller ---------- */
@media (max-width: 640px) {
  #stats .rounded-2xl {
    padding: 18px !important;
  }
  #stats .w-14.h-14 {
    width: 46px !important;
    height: 46px !important;
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
  #stats h3.text-xl {
    font-size: 18px !important;
  }
  #stats p.text-sm {
    margin-top: 6px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   HAPPY CAMPUS SLIDER – make row/scroll style on mobile
   Keeps same card design, just scrollable and compact
   ========================================================= */
@media (max-width: 640px) {
  /* buttons: keep inside so it doesn't overflow */
  #prevBtn, #nextBtn {
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
  }
  #prevBtn { left: 6px !important; }
  #nextBtn { right: 6px !important; }

  /* change feel: swipe row */
  #sliderTrack {
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important; /* prevent JS translate issue on mobile */
    padding: 4px 2px !important;
  }

  #sliderTrack::-webkit-scrollbar { height: 6px; }
  #sliderTrack::-webkit-scrollbar-thumb { border-radius: 20px; }

  /* card widths smaller */
  .facility-card {
    min-width: 260px !important;
    scroll-snap-align: start !important;
  }
  .facility-card .relative.h-44 {
    height: 150px !important;
  }

  /* inside spacing smaller */
  .facility-card .p-5 {
    padding: 14px !important;
  }
  .facility-card p.text-sm {
    font-size: 13px !important;
  }
  .facility-toggle {
    margin-top: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 14px !important;
  }

  /* details box */
  .facility-details .rounded-2xl {
    padding: 12px !important;
  }
}

/* Tablet: still row-like but bigger cards */
@media (min-width: 641px) and (max-width: 900px) {
  #sliderTrack {
    gap: 18px !important;
  }
  .facility-card {
    min-width: 320px !important;
  }
}

/* =========================================================
   EVENTS section collage + cards
   ========================================================= */
@media (max-width: 640px) {
  /* reduce collage height */
  #events img.h-\[360px\] {
    height: 240px !important;
  }

  /* hide floating extra small images already hidden by sm:block, ok */
  /* make event card compact */
  #events article.p-6 {
    padding: 16px !important;
  }
  #events h3.text-2xl {
    font-size: 18px !important;
    margin-top: 14px !important;
  }

  /* chips row can wrap nicely */
  #events .inline-flex.h-8.w-8 {
    height: 32px !important;
    width: 32px !important;
  }

  /* align price below on very small */
  #events .flex.items-start.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #events .text-\[\#FA5534\].font-extrabold.text-lg {
    font-size: 16px !important;
  }

  /* button full width */
  #events a.rounded-2xl {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 14px !important;
  }
}

/* =========================================================
   GALLERY collage mobile fixes
   ========================================================= */
@media (max-width: 640px) {
  /* reduce big/tall tiles */
  .grid.grid-cols-12 .h-\[340px\] { height: 240px !important; }
  .grid.grid-cols-12 .sm\:h-\[420px\] { height: 240px !important; }
  .grid.grid-cols-12 .h-\[320px\] { height: 220px !important; }
  .grid.grid-cols-12 .h-\[240px\] { height: 200px !important; }

  /* gap smaller */
  .grid.grid-cols-12.gap-6 {
    gap: 14px !important;
  }

  /* move View Gallery button center on mobile */
  a[href="gallery.php"] {
    margin: 0 auto !important;
  }
}

/* =========================================================
   NOTICE HUB - mobile spacing + tabs wrap nicer
   ========================================================= */
@media (max-width: 640px) {
  #noticeTabs .tab-btn {
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
  }

  .notice-card {
    padding: 14px !important;
  }

  /* notice modal fit */
  #noticeDetailModal .relative.max-w-3xl {
    width: 92% !important;
    margin-top: 20px !important;
  }

  #noticeDetailModal h3 {
    font-size: 20px !important;
  }

  /* subscribe box spacing */
  #subscribeForm input {
    padding: 12px 14px !important;
  }
  #subscribeForm button {
    padding: 12px 14px !important;
  }
}

/* =========================================================
   FIX: duplicate #imgModal / openPreview in your page
   (you have two modals with same id)
   This CSS won't fix logic, but prevents overlay glitch
   ========================================================= */
@media (max-width: 640px) {
  #imgModal .relative.w-\[92\%\] {
    margin-top: 18px !important;
  }
  #imgModal .bg-black.h-\[75vh\] {
    height: 72vh !important;
  }
}


/* =========================================================
   FOOTER responsive fixes
   Works with your Tailwind classes in footer.php
   ========================================================= */

@media (max-width: 640px) {

  footer.pt-16 {
    padding-top: 44px !important;
  }

  /* Reduce card padding */
  footer .bg-white\/10.backdrop-blur.rounded-2xl.p-6 {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  /* Footer columns spacing smaller */
  footer .max-w-7xl.mx-auto.px-4.grid.gap-10 {
    gap: 18px !important;
  }

  /* Headings smaller */
  footer h3.text-xl {
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }

  footer h3 .block.w-10.h-1 {
    width: 34px !important;
    height: 3px !important;
    margin-top: 8px !important;
  }

  /* Contact row tighter */
  footer .space-y-4 > div.flex.gap-3 {
    gap: 10px !important;
  }

  footer .space-y-4 > div.flex.gap-3 span {
    padding: 8px !important;
    border-radius: 999px !important;
  }

  /* Links list slightly smaller */
  footer ul.space-y-3 {
    font-size: 13px !important;
  }
  footer ul.space-y-3 li {
    line-height: 1.45 !important;
  }

  /* MAP: force iframe full width + mobile height */
  footer .rounded-2xl.overflow-hidden iframe {
    width: 100% !important;
    height: 220px !important;
    display: block !important;
    border: 0 !important;
  }

  /* If map isn't iframe (fallback div) */
  footer .rounded-2xl.overflow-hidden > div {
    padding: 14px !important;
  }

  /* Bottom bar spacing */
  footer .border-t.mt-14.py-6 {
    margin-top: 34px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* Bottom bar stack neat */
  footer .max-w-7xl.mx-auto.px-4.flex {
    gap: 12px !important;
    text-align: center !important;
  }

  /* Social icons smaller */
  footer .flex.gap-4.text-lg a.w-10.h-10 {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  /* Policy links wrap */
  footer .text-sm.space-x-4 {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  footer .text-sm.space-x-4 a {
    margin: 0 !important;
  }
}

/* Tablet tweaks */
@media (min-width: 641px) and (max-width: 1024px) {
  footer .rounded-2xl.overflow-hidden iframe {
    height: 260px !important;
  }
}



/* =========================================================
   HEADER (ticker + logo/title block) responsive
   Works with your exact markup/classes
   ========================================================= */

/* Small devices */
@media (max-width: 640px){

  /* Header padding smaller */
  header .bg-white.border-b.shadow-sm .max-w-7xl.mx-auto.px-4.py-4{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Make header row stack (logo + text) */
  header .bg-white.border-b.shadow-sm .max-w-7xl.mx-auto.px-4.py-4.flex.items-center{
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Logo smaller */
  header img.h-20{
    height: 64px !important;   /* was 80px */
    width: auto !important;
  }

  /* Center title area spacing */
  header .flex-1.text-center{
    width: 100% !important;
  }

  header h1.text-2xl.md\:text-3xl{
    font-size: 18px !important; /* smaller Nepali title */
    line-height: 1.2 !important;
  }

  header p.text-sm{
    font-size: 12px !important;
    margin-top: 4px !important;
  }

  header span.inline-block.mt-2{
    margin-top: 8px !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
  }

  /* ===== TICKER BAR ===== */

  /* Reduce ticker height */
  header .bg-primary.text-white.shadow-md .max-w-7xl.mx-auto.px-4.h-12{
    height: 44px !important;
    gap: 10px !important;
  }

  /* Latest badge smaller */
  header .latest-tag{
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  header .latest-tag i{
    font-size: 12px !important;
  }

  /* Make ticker text smaller */
  header .ticker{
    font-size: 13px !important;
    gap: 28px !important;
  }

  /* Slightly faster on mobile so it doesn't feel slow */
  header .ticker{
    animation-duration: 18s !important;
  }

  /* Stop horizontal overflow */
  header .bg-primary .max-w-7xl{
    overflow: hidden !important;
  }
}

/* Medium devices (tablets) */
@media (min-width: 641px) and (max-width: 1024px){

  /* Slightly smaller header spacing */
  header .bg-white.border-b.shadow-sm .max-w-7xl.mx-auto.px-4.py-4{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  header img.h-20{
    height: 72px !important;
  }

  header h1.text-2xl.md\:text-3xl{
    font-size: 22px !important;
  }

  /* Ticker adjustments */
  header .ticker{
    font-size: 14px !important;
    animation-duration: 22s !important;
  }

  header .latest-tag{
    font-size: 13px !important;
    padding: 5px 12px !important;
  }
}

/* Mobile menu styles */
.mobile-link{
  display:block;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 700;
  color:#0f172a;
  margin: 4px 6px;
  background: transparent;
}
.mobile-link:hover{
  background:#f1f5f9;
}

.mobile-active{
  background: rgba(19,32,191,.10);
  color:#1320BF;
}

.mobile-drop-btn{
  width: calc(100% - 12px);
  margin: 4px 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 800;
  color:#0f172a;
  background: transparent;
}
.mobile-drop-btn:hover{
  background:#f1f5f9;
}
.mobile-drop-btn i{
  transition: transform .18s ease;
}

.mobile-sub{
  margin: 0 10px 6px 10px;
  padding: 8px;
  border-radius: 18px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}
.mobile-sub-link{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 600;
  color:#334155;
}
.mobile-sub-link:hover{
  background:#eef2ff;
  color:#1320BF;
}