/* =========================================================
   RESPONSIVE — tested at 320/375/414/768/1024/1366/1920
========================================================= */

/* Laptop */
@media (max-width: 1366px){
  .header-inner{ padding: 0 24px; }
  .main-nav ul{ gap: 20px; }
}

/* Tablet: nav collapses to hamburger */
@media (max-width: 1023px){
  .main-nav{
    position:fixed;
    top: var(--header-h);
    right:0;
 
    width: min(340px, 86vw);
    height: calc(100vh - var(--header-h));
    background: rgba(255,255,255,0.98);
    box-shadow: -8px 0 30px rgba(13,33,73,0.15);
    backdrop-filter: blur(14px);
    flex-direction:column;
    align-items:flex-start;
    padding: 28px 24px;
    transform: translateX(100%);
    opacity:0;
    visibility:hidden;
    transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
    overflow-y:auto;
    justify-content:flex-start;
  }
  .site-header.is-scrolled .main-nav{ top: 76px; height: calc(100vh - 76px); }
  .main-nav.is-open{ transform: translateX(0); opacity:1; visibility:visible; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; width:100%; gap:4px; }
  .main-nav li{ width:100%; border-bottom: 1px solid var(--gray-border); }
  .main-nav li:last-child{ border-bottom:none; }
  .nav-link{ width:100%; padding: 14px 4px; font-size:.95rem; }
  
  .dropdown{
    position:static;
    opacity:1; visibility:visible; transform:none;
    box-shadow:none;
    display:none;
    background: var(--gray-light);
    border-radius: 8px;
    margin-top:6px;
  }
  .has-dropdown.is-open .dropdown{ display:block; }
  .dropdown li a{ color: var(--text-dark); }
  .dropdown li a:hover{ background: rgba(245,124,32,0.1); color: var(--orange-dark); }

  .btn-apply{ padding: 10px 18px; font-size:.75rem; }
  .hamburger{ display:flex; }

  .welcome-inner{ grid-template-columns: 1fr; gap:40px; }
  .welcome-content{ text-align:center; }
  .welcome-text{ margin-left:auto; margin-right:auto; }
  .feature-icons{ grid-template-columns: repeat(2,auto); justify-content:center; }
  .feature-item{ justify-content:center; }

  .facilities-grid{ grid-template-columns: repeat(2, 1fr); }

  .admission-inner{ grid-template-columns:1fr; }
  .admission-content{ padding: 56px 32px 0; text-align:center; }
  .admission-content p{ margin-left:auto; margin-right:auto; }
  .admission-media{ min-height:280px; }

  .info-row{ grid-template-columns:1fr; }
  .contact-inner{ grid-template-columns: 1fr 1fr; }
  .contact-map{ grid-column: 1 / -1; }

  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 767px){
  :root{ --header-h: 76px; }
  .header-inner{ padding: 0 18px; }
  .brand-logo-img{ height: 44px; }
  .btn-apply span{ display:none; }
  .btn-apply{ padding: 9px 14px; }

  .hero{ height: 60vh; min-height: 340px; }
  .hero-arrow{ width:38px; height:38px; font-size:.85rem; }
  .hero-arrow--prev{ left:12px; }
  .hero-arrow--next{ right:12px; }

  .quick-access-inner{
    flex-wrap: nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .quick-access-inner::-webkit-scrollbar{ display:none; }
  .qa-item{ flex: 0 0 110px; padding: 18px 8px; }
  .qa-item span{ font-size:.65rem; text-align:center; }

  .welcome{ padding: 60px 20px; }
  .welcome-heading{ font-size:1.7rem; }
  .feature-icons{ grid-template-columns: 1fr 1fr; gap:18px; }

  .facilities{ padding: 10px 20px 60px; }
  .facilities-grid{ grid-template-columns: 1fr; }
  .facility-card{ height: 220px; }

  .admission-content{ padding: 44px 20px 0; }
  .admission-content h2{ font-size:1.5rem; }

  .info-row{ padding: 0 20px; margin: 60px auto; gap:20px; }
  .info-card{ grid-template-columns: 1fr; padding:24px; text-align:center; }
  .info-text h3{ justify-content:center; }
  .info-media{ order:-1; height:160px; }

  .contact{ padding: 60px 20px; }
  .contact-inner{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }

  .footer-inner{ grid-template-columns: 1fr; padding: 50px 20px 30px; gap:34px; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; padding: 18px 20px; }
  .section-heading h2{ font-size:1.5rem; }
}

@media (max-width: 414px){
  .welcome-heading{ font-size:1.5rem; }
  .qa-item{ flex-basis: 96px; }
}

@media (max-width: 320px){
  .header-inner{ padding: 0 12px; }
  .brand-logo-img{ height: 38px; }
}

/* ---------- Inner pages responsive ---------- */
@media (max-width: 1023px){
  .content-inner.two-col{ grid-template-columns: 1fr; gap: 36px; }
  .content-text{ text-align:center; }
  .content-text p{ margin-left:auto; margin-right:auto; }
  .mv-grid{ grid-template-columns: 1fr; }
  .steps-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .stats-row{ gap: 36px; }
}

@media (max-width: 767px){
  .page-banner{ padding: calc(var(--header-h) + 40px) 20px 40px; }
  .page-banner-inner h1{ font-size:1.6rem; }
  .content-section{ padding: 56px 20px; }
  .steps-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .notice-card{ flex-direction:column; gap:10px; }
  .notice-date{ border-right:none; border-bottom:2px solid var(--gray-border); padding-right:0; padding-bottom:8px; width:auto; text-align:left; }
  .stats-row{ gap: 24px; }
  .stat-num{ font-size:1.7rem; }
}

/* ---------- Albums, video section, teams, values ---------- */
@media (max-width: 1023px){
  .values-grid{ grid-template-columns: 1fr 1fr; }
  .team-grid{ grid-template-columns: 1fr 1fr; }
  .album-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px){
  .values-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
  .album-grid{ grid-template-columns: 1fr; }
  .play-btn{ width:56px; height:56px; font-size:1.05rem; }
}

/* ---------- Principal message long-text layout ---------- */
@media (max-width: 1023px){
  .principal-media-full{ position: static; }
}

/* ---------- Facilities carousel ---------- */
@media (max-width: 767px){
  .facilities-track .facility-card--track{ flex-basis: 240px; height: 210px; }
  .facilities-track.is-scrolling{ animation-duration: 18s; }
}
