/* =====================================================================
   Phones and tablets. The nigdi.org theme was made for desktop screens:
   on a phone its side tabs, social rail and chat button cover the text,
   the header fills a fifth of the screen and some headings run off the
   edge. Everything here sits inside max-width media queries, so the
   desktop view stays exactly like nigdi.org.
   ===================================================================== */

/* ---------------------------------------------------------- phones */
@media (max-width: 767.98px) {

  /* No sideways scrolling, and long words wrap instead of being cut off. */
  /* "clip", not "hidden", on body: hidden would turn the body into a scroll box and the
     header would stop sticking to the top. */
  html { overflow-x: hidden; }
  body { overflow-x: hidden; }
  @supports (overflow-x: clip) { body { overflow-x: clip !important; overflow-y: visible !important; } }
  h1, h2, h3, h4, h5, h6, p, li, a, td, th { overflow-wrap: break-word; }
  /* justified text leaves big gaps between words on a narrow screen */
  .page-insight :is(p, li, div, span)[style*="justify"], .about-info :is(p, li)[style*="justify"] { text-align: left !important; }
  .page-insight p:not([style*="center"]):not([style*="right"]):not(.text-center):not(.text-end) { text-align: left; }

  /* Side tabs (Prisms One, Important Links, Admissions) become a bar along the bottom
     instead of three tall rotated tabs over the right edge of the text. */
  body { padding-bottom: 46px; }
  #btnTop, #btnTop2, #btnAdmission {
    position: fixed !important; top: auto !important; bottom: 0 !important; right: auto !important;
    width: 33.3334% !important; height: 46px !important;
    transform: none !important; -webkit-transform: none !important; z-index: 9990 !important;
  }
  #btnTop { left: 0 !important; }
  #btnTop2 { left: 33.3333% !important; }
  #btnAdmission { left: 66.6666% !important; }
  #btnTop a, #btnTop2 a, #btnAdmission a {
    display: flex !important; align-items: center; justify-content: center;
    width: 100% !important; height: 46px !important; padding: 2px 6px !important;
    border-radius: 0 !important; font-size: 13px !important; line-height: 1.15 !important;
    text-align: center; white-space: normal; box-shadow: 0 -2px 8px rgba(0,0,0,.15);
  }
  #btnTop2 a { border-left: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.5); }

  /* Social rail: off the text; the same links are listed in the footer on phones. */
  #ssi-absolute { display: none !important; }
  .footer-social-mobile { display: flex !important; gap: 12px; margin: 10px 0 4px; }
  .footer-social-mobile a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; text-decoration: none; }
  .footer-social-mobile svg { width: 20px; height: 20px; }

  /* "May I Help You" and back-to-top: smaller, in the corners above the bottom bar. */
  .botIcon { right: auto !important; left: 10px !important; bottom: 56px !important; }
  .botIcon .iconInner { left: 0 !important; right: auto !important; margin: 0 !important; }
  .botIcon .iconInner img { max-width: 58px !important; }
  .back-to-top { right: 12px !important; bottom: 56px !important; width: 40px !important; height: 40px !important; }
  .Layout.Layout-open { right: 8px !important; left: 8px !important; bottom: 60px !important; width: auto !important; max-width: none !important; }

  /* Header: once you scroll, only the school name and the menu button stay at the top. */
  .header-section.scrolled .header-logo3, .header-section.scrolled .header-logo2,
  .header-section.scrolled .head-line { display: none !important; }
  .header-section.scrolled { height: auto !important; }
  .header-section.scrolled .header-row { flex-wrap: nowrap !important; align-items: center; padding-right: 64px !important; }
  .header-section.scrolled .header-row > .col-sm-12 { width: auto !important; flex: 0 0 auto !important; }
  .header-section.scrolled .header-row > .title-lines { flex: 1 1 auto !important; }
  .header-section.scrolled .header-row > .d-flex:last-child { flex: 0 0 0 !important; }
  .header-section.scrolled .header-logo { width: 38px !important; height: auto !important; margin: 0 !important; }
  .header-section.scrolled .header-row { position: relative; }
  .header-section.scrolled .main-menu, .header-section.scrolled .main-menu > .container-fluid { position: static !important; }
  .header-section.scrolled .navbar-toggler { top: 50% !important; right: 6px !important; margin-top: -25px !important; transform: scale(.82); }
  .header-section.scrolled .header-row { padding-top: 4px !important; padding-bottom: 4px !important; }
  .header-section.scrolled .title-holder img { max-height: 32px; width: auto; }
  .head-line { font-size: 12px !important; line-height: 1.3; }

  /* Menu: a solid green panel under the menu button instead of links floating over the page.
     Tapping a section opens its pages underneath it (nigdi-site.js adds .m-open). */
  .web-cust-menu {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 46px !important;
    width: auto !important; height: auto !important; max-height: none !important; overflow-y: auto !important;
    padding: 84px 14px 24px !important; z-index: 998 !important;
    background: linear-gradient(200deg, #004435 0%, #0b5f3c 100%) !important;
  }
  .web-cust-menu.collapsing { transition: none !important; }
  /* the header's blur would trap the panel inside the header */
  .header-section:has(.web-cust-menu.show), .header-section:has(.web-cust-menu.collapsing) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .web-cust-menu::before { display: none !important; }
  .header-section .navbar-toggler { z-index: 999 !important; }
  body:has(.web-cust-menu.show) .botIcon, body:has(.web-cust-menu.show) .back-to-top { display: none !important; }
  .web-cust-menu .myCustomMenu { text-align: left !important; width: 100%; margin: 0 !important; }
  .web-cust-menu .myCustomMenu .nav-item { width: 100%; }
  .web-cust-menu .myCustomMenu .nav-item > a {
    display: block; padding: 12px 34px 12px 6px !important; font-size: 16px !important; color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important; text-align: left !important; position: relative;
  }
  .web-cust-menu .myCustomMenu .nav-item > a::before { display: none !important; }
  .web-cust-menu .myCustomMenu .dropdown > a::after {
    content: "\f107" !important; font-family: "Font Awesome 5 Free"; font-weight: 900; border: 0 !important;
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); transition: transform .2s; margin: 0 !important;
  }
  .web-cust-menu .myCustomMenu .dropdown.m-open > a::after { transform: translateY(-50%) rotate(180deg); }
  .web-cust-menu .myCustomMenu .dropdown-menu,
  .web-cust-menu .myCustomMenu .dropdown-menu.show { display: none !important; }
  .web-cust-menu .myCustomMenu .dropdown.m-open > .dropdown-menu {
    display: block !important; position: static !important; left: auto !important; right: auto !important; top: auto !important;
    transform: none !important; width: auto !important; min-width: 0 !important; margin: 0 0 6px !important;
    padding: 2px 0 2px 14px !important; background: rgba(255,255,255,.08) !important; border: 0 !important;
    border-radius: 6px; box-shadow: none !important;
  }
  .web-cust-menu .myCustomMenu .dropdown-menu .nav-item > a { font-size: 15px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .web-cust-menu .myCustomMenu .nav-item:last-child > a { border-bottom: 0 !important; }

  /* Section and page headings fit the screen. */
  .homePage-sectionHeading, .welcome-heading, .college-info h2, .div-section h2, .awards-head, .learning-head,
  .masters-section h2, .unique-bg2 h2, .div-contain2 h2, .what-they-say, .placement-internship h2 {
    font-size: 26px !important; line-height: 1.25 !important;
  }
  .welcome-heading { padding-left: 8px; padding-right: 8px; }
  .bred-head { font-size: 24px !important; line-height: 1.25; word-break: break-word; }
  .breadcrumb { flex-wrap: wrap; font-size: 13px; }

  /* Homepage — About / Vision / Mission */
  .about-school h2, .vision-mis h2 { font-size: 24px !important; }
  .about-school p, .vision-mis p { padding-right: 0 !important; }
  .about-school p, .vision-mis p { margin-top: 0 !important; } /* the theme pulls it up under the heading */
  .welcome-section .youtube-link iframe { width: 100% !important; height: 200px !important; }

  /* Homepage — Events / News / Achievement: no tall empty boxes */
  .news-circular { height: auto !important; padding: 12px !important; }
  .news-and-event .holder { height: 230px !important; }
  .news-and-event .upcoming-empty { padding-top: 30px; }
  .news-and-event .holder:has(.upcoming-empty) { height: auto !important; padding-bottom: 30px; }
  .news-and-event .news-events { margin-bottom: 18px; }

  /* Homepage — class tiles two per row */
  #section-classes .row > [class*="col-"] { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; padding-left: 6px; padding-right: 6px; }
  #section-classes p { font-size: 14px !important; margin-bottom: 10px; }

  /* Homepage — awards two per row */
  #section-awards .cards { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  #section-awards .cards > div { width: auto !important; margin: 0 !important; transform: none !important; padding: 8px !important; }
  #section-awards .cards p { font-size: 12px !important; line-height: 1.3; }

  /* Homepage — Our Guiding Force two per row */
  #section-leadership .row > [class*="col-"] { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; padding-left: 5px; padding-right: 5px; }
  #section-leadership .masters { width: 100% !important; margin-top: 8px !important; margin-bottom: 8px !important; }
  #section-leadership .white-box h3 { font-size: 14px !important; }
  #section-leadership .white-box h5 { font-size: 12px !important; }

  /* Inner pages: text, tables and pictures stay inside the screen */
  .page-insight, .about-info { padding-left: 4px !important; padding-right: 4px !important; }
  .container.about-page { margin-left: 0 !important; padding-left: 14px !important; padding-right: 14px !important; }
  .page-insight img, .about-info img { max-width: 100% !important; height: auto !important; }
  /* Tables (breakfast list, fees, timetables…): full width, no fixed heights from the editor,
     and a sideways swipe only when a table really is wider than the screen. */
  .page-insight table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    width: 100% !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .page-insight table tbody, .page-insight table thead { display: table; width: 100%; }
  .page-insight table tr, .page-insight table td, .page-insight table th { height: auto !important; }
  .page-insight table td, .page-insight table th { width: auto !important; padding: 6px 4px !important; font-size: 12.5px; line-height: 1.35; vertical-align: top; }
  .page-insight table td p, .page-insight table th p,
  .page-insight table td span, .page-insight table td li { margin: 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; }
  .page-insight iframe, .page-insight video { max-width: 100% !important; }
  .page-insight [style*="width"] { max-width: 100% !important; }
  .home-box { display: none; }
  .page-back .pencil1, .page-back .pencil2 { display: none !important; }
  .page-insight h1, .page-insight h2 { font-size: 24px !important; line-height: 1.3 !important; }
  .page-insight h3 { font-size: 21px !important; line-height: 1.3 !important; }
  .page-insight h4 { font-size: 18px !important; line-height: 1.3 !important; }

  /* Gallery: year buttons wrap, albums stack neatly */
  .list-horizontal { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; }
  .list-horizontal li { margin: 0 !important; }
  .list-horizontal a.btn-year { padding: 6px 16px !important; }
  .inner-category-gallery .col-lg-3 { display: flex; justify-content: center; margin-bottom: 12px; }

  /* Contact Us map: not taller than the screen is wide */
  iframe[title="Map"][height="500"] { height: 300px !important; width: 100% !important; }

  /* Footer */
  .footer-section .col-lg-2 iframe { width: 100% !important; }
  .footer-copyright { position: static !important; text-align: center !important; font-size: 13px; }
}

/* --------------------------------------------- tablets (768–991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; }
  @supports (overflow-x: clip) { body { overflow-x: clip !important; overflow-y: visible !important; } }
  #btnTop a, #btnTop2 a, #btnAdmission a { font-size: 13px !important; }
  .page-insight table { display: block; max-width: 100%; overflow-x: auto; width: 100% !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .page-insight table tbody, .page-insight table thead { display: table; width: 100%; }
  .page-insight table tr, .page-insight table td, .page-insight table th { height: auto !important; }
  .page-insight img { max-width: 100% !important; height: auto !important; }
  #section-awards .cards { flex-wrap: wrap !important; justify-content: center; }
  /* the fixed pencil decorations have no side margin to sit in at this width and cover the text */
  .page-back .pencil1, .page-back .pencil2 { display: none !important; }
  /* the theme pulls these paragraphs 27–33px up into the heading at this width */
  .welcome-section .about-school p, .welcome-section .vision-mis p { margin-top: 0 !important; }
  /* Vision and Mission one above the other next to About School, instead of two thin columns */
  .welcome-section .vis-mis, .welcome-section .vision-mis2 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding-bottom: 1rem !important; }
  .welcome-section .vis-mis, .welcome-section .vis-mis :is(h2, p, div) { text-align: left !important; }
}