/* ============================================================
   Dewan School of Excellence — Responsive Rules
   Breakpoints: 1359 (small desktop) / 1199 (collapsed nav, tablet)
               / 767 (large phone) / 575 (phone)
   ============================================================ */

/* ---------- Laptop ---------- */
@media (max-width:1199.98px){
  :root{--container:960px}
  .hero{padding:4.5rem 0 4rem}
  .section{padding:4.5rem 0}
}

/* Wide Bootstrap gutters (g-5 = 3rem) are larger than the space the container
   has to spare once it stops being centred, which pushed rows past the right
   edge of the screen. Cap the horizontal gutter below that point. */
@media (max-width:1229.98px){
  .row.g-5,.row.gx-5{--bs-gutter-x:1.5rem}
}

/* Slightly tighter navigation on smaller desktops */
@media (min-width:1200px) and (max-width:1359.98px){
  .nav-link{padding-left:.52rem;padding-right:.52rem;font-size:.87rem}
  .nav-link::after{left:.52rem;right:.52rem}
  .has-drop>.nav-link{padding-right:1.35rem}
  .nav-cta{padding:.55rem .9rem;margin-left:.4rem}
}

/* ---------- Tablet & small laptop: collapsed navigation ---------- */
@media (max-width:1199.98px){
  body{font-size:16px}


  .topbar .tb-row{justify-content:center;flex-wrap:wrap;padding:.4rem 0}
  .topbar .tb-hide-sm{display:none}

  /* --- Collapsed navigation --- */
  .nav-toggle{display:flex}
  .nav-panel{
    position:absolute;left:0;right:0;top:100%;
    display:block;background:var(--navy-900);
    border-top:1px solid rgba(224,185,74,.22);
    box-shadow:0 18px 40px rgba(7,26,51,.4);
    max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;
    padding:.35rem 16px 1.25rem;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav-open .nav-panel{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-list{display:block;width:100%}
  .nav-item{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-item:last-child{border-bottom:0}
  .nav-link{padding:.95rem .25rem;font-size:1rem}
  .nav-link::after{display:none}
  .nav-link.current{color:var(--gold-400)}

  /* Chevron becomes a large, easy tap target; menus stack in flow so nothing
     can ever spill outside the viewport. */
  .has-drop>.nav-link{padding-right:3rem}
  /* Keep the chevron on the parent row, not centred on the whole open group */
  .drop-btn{top:0;right:0;transform:none;width:52px;height:46px;color:var(--gold-400)}
  .has-drop.open>.drop-btn{transform:rotate(180deg)}
  .caret{width:8px;height:8px}
  .drop-menu{
    position:static;min-width:0;width:100%;
    background:transparent;box-shadow:none;border-top:0;border-radius:0;
    padding:0 0 .5rem .25rem;margin:0;
    display:none;opacity:1;visibility:visible;transform:none;
  }
  .has-drop.open>.drop-menu{display:block}
  .drop-item{
    color:#C6D3E4;padding:.65rem .75rem;
    border-left:2px solid rgba(224,185,74,.28);border-radius:0;margin-left:.15rem;
  }
  .drop-item:hover,.drop-item:focus-visible,.drop-item.current{
    background:rgba(224,185,74,.12);color:var(--gold-400)
  }
  .drop-item i{color:var(--gold-500)}
  .nav-cta{display:block;text-align:center;margin:1rem 0 .25rem;padding:.85rem 1rem}
  .nav-cta{margin:.9rem 0 .25rem;justify-content:center;display:flex}

  .hero{padding:3.5rem 0 3.25rem;text-align:left}
  .hero h1{max-width:100%}
  .hero-figure{margin-top:2.5rem}
  .hero-badge{left:auto;right:14px;bottom:-16px}
  .login-shell{grid-template-columns:1fr}
  .login-aside{padding:2rem}
  .login-form{padding:2rem}
  .stat{border-right:0;border-bottom:1px solid rgba(224,185,74,.18)}
  .section{padding:3.75rem 0}
  .page-header{padding:2.5rem 0 2.25rem}
}

/* ---------- Large phone ---------- */
@media (max-width:767.98px){
  .row.g-5{--bs-gutter-y:2.75rem}

  .section{padding:3rem 0}
  .section.tight{padding:2.4rem 0}
  .sec-head{margin-bottom:1.9rem}
  .card-dse,.card-navy{padding:1.35rem}
  .form-panel{padding:1.4rem}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
  .gallery-item .cap{opacity:1;transform:none;padding:1.1rem .7rem .6rem}
  .gallery-item .cap strong{font-size:.8rem}
  .footer-dse{padding-top:2.75rem}
  .footer-bottom .fb-row{justify-content:center;text-align:center}
  .footer-bottom a{margin:0 .55rem}
  .cta-band{padding:2.75rem 0;text-align:center}
  .cta-band .hero-actions{justify-content:center}
  .table-dse{font-size:.86rem}
  .table-dse thead th,.table-dse tbody td{padding:.7rem .75rem}
  .hero-strip{gap:.9rem 1.5rem}
  .brand-name{font-size:1rem}
  .brand-sub{font-size:.6rem}
  .brand-mark{width:40px;height:46px;flex-basis:40px;font-size:1rem}
}

/* ---------- Phone ---------- */
@media (max-width:575.98px){
  body{font-size:15.5px}
  .hero-actions .btn-gold,.hero-actions .btn-ghost,.hero-actions .btn-navy{width:100%;justify-content:center}
  .filter-bar{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem}
  .filter-btn{white-space:nowrap}
  .page-header .lead-sub{font-size:.95rem}
  .timeline{padding-left:1.6rem}
  .timeline-item::before{left:-1.6rem;width:13px;height:13px}
  .hero-badge{position:static;margin-top:1rem;max-width:100%}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.topbar,.nav-backdrop,.footer-dse,.back-to-top,.cta-band,.filter-bar{display:none!important}
  body{font-size:11pt;color:#000}
  .page-header{background:none;color:#000;border-bottom:1px solid #999}
  .page-header h1,.page-header .lead-sub{color:#000}
  .table-dse thead th{background:#eee;color:#000}
}