/* ==========================================
   RESPONSIVE DESIGN - Mobile First Approach
   ========================================== */

/* ── Global Responsive Baseline ── */
img, video, canvas, picture { max-width: 100%; height: auto; }
svg { max-width: 100%; }
table { min-width: 0; }
.table-responsive { overflow-x: auto; }

/* Prevent any element from forcing horizontal scroll */
/* Use 100% (not 100vw) — 100vw includes scrollbar width on some browsers */
html, body { overflow-x: hidden; width: 100%; max-width: 100%; }

/* Flex/grid children: allow shrinking below content size */
* { min-width: 0; }

/* ── Section & page containers: always at least 100% wide up to their max ── */
.container-max, .itn-container, .prj-container {
  width: 100%;
  box-sizing: border-box;
}

/* Extra Large Devices (1400px and up) */
@media (min-width: 1400px) {
  .container-max {
    max-width: 1320px;
    margin: 0 auto;
  }
}

/* Large Devices (1200px to 1399px) */
@media (min-width: 1200px) {
  .container-max {
    max-width: 1140px;
    margin: 0 auto;
  }
}

/* Medium Devices (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container-max {
    max-width: 960px;
    margin: 0 auto;
  }
  
  section {
    padding: 5rem 4vw;
  }
}

/* Tablets and Small Desktops (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .container-max {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  section {
    padding: 4rem 4vw;
  }

  h1 {
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
  }

  h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .flex-row {
    flex-direction: row !important;
    gap: 1rem !important;
  }

  /* ── Hero: collapse to 1 column on tablet ── */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 3.5rem 4vw 3rem !important;
    gap: 2.5rem !important;
    text-align: left !important;
    overflow: hidden !important;
  }
  .hero-content { max-width: 100% !important; order: 1 !important; }
  .hero-visual { display: none !important; }
  .hero-actions { justify-content: flex-start !important; }
  .hero-stats { justify-content: flex-start !important; }

  /* ── Cards & grids ── */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .card-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Course cards ── */
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
}

/* Small Tablets (600px to 767px) */
@media (min-width: 600px) and (max-width: 767px) {
  .container-max {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }

  section {
    padding: 3rem 3vw;
  }

  h1 {
    font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
  }

  h2 {
    font-size: clamp(1.25rem, 3vw, 2rem) !important;
  }

  h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  }

  .form-row,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .flex-row,
  .flex-wrap {
    flex-direction: column !important;
  }

  .nav-links {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  /* ── Hero: collapse to 1 column ── */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 3rem 3vw 2.5rem !important;
    gap: 1.5rem !important;
    overflow: hidden !important;
  }
  .hero-content { max-width: 100% !important; order: 1 !important; }
  .hero-visual { display: none !important; }
  .hero-actions {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* ── Cards ── */
  .card-grid, .courses-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Tables: ensure scroll ── */
  table { display: block; overflow-x: auto; }
}

/* Show hamburger on tablets too (all pages) */
@media (min-width: 600px) and (max-width: 991px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
  .nav-links:not(.mobile-open) {
    display: none !important;
  }
  /* Hide Get Started on tablet, keep Login */
  .nav-cta, #cta-btn { display: none !important; }

  /* Login/profile dropdowns on tablet: full-width panels below nav */
  .login-wrapper { position: static !important; }
  /* Keep #profile-section relative so streak-badge absolute positioning works */

  .login-dropdown,
  .profile-dropdown {
    position: fixed !important;
    top: 78px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 var(--r2) var(--r2) !important;
    z-index: 999 !important;
  }
}

/* Mobile Devices (480px to 599px) */
@media (max-width: 599px) {
  * {
    margin: 0;
    padding: 0;
  }
  
  section {
    padding: 2.5rem 4vw;
    overflow-x: hidden;
    max-width: 100%;
  }

  .container-max {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    overflow-x: hidden;
  }
  
  h1 {
    font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important;
    line-height: 1.18 !important;
  }

  h2 {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    line-height: 1.22 !important;
  }

  h3 {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
    line-height: 1.3 !important;
  }

  h4 {
    font-size: clamp(1rem, 3.5vw, 1.15rem) !important;
  }

  p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
  
  /* Navigation — compact 58px height, no wrap, no overflow clipping */
  nav {
    height: 58px !important;
    padding: 0 0.75rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .nav-links {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  .nav-links.mobile-open {
    top: 58px !important;
  }

  .breadcrumb-bar {
    top: 58px !important;
  }
  
  .hero-stats {
    gap: 1.5rem !important;
    padding-top: 1.5rem !important;
  }

  .stat-number {
    font-size: 1.5rem !important;
  }

  .stat-label {
    font-size: 0.65rem !important;
  }
  
  /* Hero: hide visual animation entirely on mobile, show text content only */
  .hero-visual {
    display: none !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 2.5rem 1.25rem 2rem !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-content {
    order: 1 !important;
  }

  /* ── All hero titles: always largest text on mobile ── */
  .hero-content h1,
  .courses-hero-title,
  .contact-hero h1,
  .fhero-title,
  .pamphlet-hero h1,
  .rv-hero h1,
  .itp-hero-left h1,
  .mentor-hero h1,
  .reg-hero h1,
  .mentor-dash-hero h1,
  [class*="hero"] h1,
  [class*="hero-title"] {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Highlight key CTA buttons on mobile */
  .hero-actions .btn-grad {
    font-size: 1rem !important;
    padding: 0.95rem 1.5rem !important;
    box-shadow: 0 8px 32px rgba(124,92,252,0.5) !important;
  }

  /* Profile dropdown: full-width panel below nav on mobile */
  #profile-section { position: static !important; }

  .profile-dropdown {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 var(--r2) var(--r2) !important;
    border-left: none !important;
    border-right: none !important;
    z-index: 999 !important;
  }

  .profile-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .pd-item {
    padding: 1rem 1.25rem !important;
    min-height: 56px !important;
  }
  
  /* Forms */
  .form-row,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  
  .form-group {
    margin-bottom: 0.8rem !important;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.7rem 0.9rem !important;
    font-size: 0.9rem !important;
  }
  
  .form-container {
    padding: 1.2rem !important;
    border-radius: var(--r2) !important;
  }
  
  .form-container h2 {
    font-size: 1.3rem !important;
  }
  
  .form-actions {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  
  .btn-submit,
  .btn-reset,
  .btn-cancel {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Layout */
  .flex-row,
  .flex-wrap,
  .flex-center {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  
  .flex-between {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Tables */
  table {
    font-size: 0.8rem !important;
  }
  
  th, td {
    padding: 0.6rem !important;
  }
  
  /* Cards */
  .card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .card-header {
    font-size: 0.95rem !important;
  }
  
  /* Buttons */
  .btn-grad,
  .btn-outline {
    padding: 0.8rem 1.5rem !important;
    font-size: 0.85rem !important;
    width: 100% !important;
  }
  
  /* Modal */
  .modal-box {
    max-width: 95% !important;
    padding: 1.5rem !important;
    border-radius: var(--r2) !important;
  }
  
  .modal-box h3 {
    font-size: 1.3rem !important;
  }
  
  /* List */
  ul, ol {
    margin-left: 1.2rem !important;
  }
  
  li {
    margin-bottom: 0.5rem !important;
  }
  
  /* Display utils */
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
  
  /* Spacing utils */
  .mb-lg {
    margin-bottom: 1rem !important;
  }
  
  .mt-lg {
    margin-top: 1rem !important;
  }
  
  .px-md {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-md {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Extra Small Devices (Below 480px) */
@media (max-width: 479px) {
  section {
    padding: 2rem 2vw;
  }
  
  h1 {
    font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
    line-height: 1.25 !important;
  }

  h3 {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
  }

  h4 {
    font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important;
  }

  p {
    font-size: 0.85rem !important;
  }

  /* ── All hero titles on extra-small screens ── */
  .hero-content h1,
  .courses-hero-title,
  .contact-hero h1,
  .fhero-title,
  .pamphlet-hero h1,
  .rv-hero h1,
  .itp-hero-left h1,
  .mentor-hero h1,
  .reg-hero h1,
  .mentor-dash-hero h1,
  [class*="hero"] h1,
  [class*="hero-title"] {
    font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
    line-height: 1.15 !important;
  }

  .logo-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .form-group label {
    font-size: 0.75rem !important;
  }
  
  .form-container {
    padding: 1rem !important;
  }
  
  .form-row {
    gap: 0.6rem !important;
  }
  
  .step-indicator {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
  }
}

/* Landscape Orientation - Tablets */
@media (max-height: 600px) and (orientation: landscape) {
  section {
    padding: 2rem 4vw;
  }
  
  nav {
    height: 56px !important;
  }
  
  .form-container {
    padding: 1.2rem !important;
  }
  
  h1, h2, h3 {
    margin-bottom: 0.5rem !important;
  }
}

/* High DPI Screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Meetings & Recordings section responsive */
@media (max-width: 768px) {
  #sec-events > div > div {
    grid-template-columns: 1fr !important;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  
  button:active, a:active {
    background-color: var(--v5);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Light Mode Support */
@media (prefers-color-scheme: light) {
  :root[data-theme="light"] {
    color-scheme: light;
  }
}

/* ── Nav links mobile open — always override display:none ── */
.nav-links.mobile-open {
  display: flex !important;
}

/* ── Nav Button Centering (All Screens) ── */
.nav-signin,
#login-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.nav-cta,
#cta-btn {
  /* display is controlled by JS (showLoggedInUI/showLoggedOutUI) — do NOT force it here */
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Ensure nav-actions never wraps sign-in button off-screen */
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* ── Footer Grid Responsive (index.html) ── */
@media (max-width: 991px) {
  .footer-grid-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 599px) {
  .footer-grid-main {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  footer {
    padding: 2.5rem 1rem 1.5rem !important;
  }
  footer > div:last-child {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  .pn-f-platform,
  .pn-f-company {
    flex: 1 1 calc(50% - .625rem) !important;
    min-width: 0 !important;
    max-width: calc(50% - .625rem) !important;
  }
}

/* ── Breadcrumb responsive ── */
@media (max-width: 599px) {
  .breadcrumb-bar {
    font-size: 0.78rem !important;
    padding: 0.4rem 1rem !important;
  }
  .bc-item, .bc-page { font-size: 0.78rem !important; }
  .bc-current { font-size: 0.82rem !important; }
}

/* ── Courses Filter Bar Responsive ── */
@media (max-width: 991px) {
  .filter-topbar {
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    position: static !important; /* avoid sticky overlap on small screens */
  }
  .filter-search-wrap {
    min-width: 150px !important;
  }
  .filter-select {
    min-width: 120px !important;
    font-size: 0.82rem !important;
  }
  .filter-divider { display: none !important; }
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .filter-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .filter-search-wrap { min-width: 100% !important; }
  .filter-select { min-width: 100% !important; width: 100% !important; }
  .filter-reset { width: 100% !important; text-align: center !important; }
  .courses-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 599px) {
  /* ── Mobile nav: tight layout for 360px screens ── */
  nav {
    padding: 0 0.75rem !important;
    height: 58px !important;
    gap: 0 !important;
  }

  /* Logo: constrain width so actions don't overflow */
  .nav-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 115px) !important; /* reserve space for login + hamburger */
    font-size: 1.05rem !important;
    gap: 0.4rem !important;
  }
  .nav-logo-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 130px !important;
  }
  .logo-icon {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  /* Nav actions: compact, no wrapping */
  .nav-actions {
    flex-shrink: 0 !important;
    gap: 0.3rem !important;
  }

  /* Hide desktop-only elements */
  .nav-cta, #cta-btn { display: none !important; }
  .login-icon { display: none !important; }       /* hide user icon in login btn */
  .chevron-icon { display: none !important; }     /* no chevron on mobile */

  /* Login button: compact pill */
  .nav-signin, #login-btn {
    padding: 0.38rem 0.7rem !important;
    font-size: 0.8rem !important;
    gap: 0.2rem !important;
    min-width: auto !important;
  }

  /* Hamburger: compact */
  .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  /* Login dropdown on mobile: full-width panel below nav */
  .login-wrapper { position: static !important; }

  .login-dropdown {
    position: fixed !important;
    top: 58px !important;       /* directly below nav */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 var(--r2) var(--r2) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
    z-index: 999 !important;
    transform: translateY(-4px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  .login-dropdown.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
    visibility: visible !important;
  }

  /* Dropdown items: bigger touch targets on mobile */
  .ld-item {
    padding: 1rem 1.25rem !important;
    font-size: 0.92rem !important;
    gap: 0.85rem !important;
    min-height: 52px !important;
  }
  /* Courses footer grid collapse */
  .courses-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 479px) {
  .courses-footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Print Styles */
@media print {
  nav, footer, .no-print {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a {
    text-decoration: underline;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p {
    page-break-inside: avoid;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
}

/* Helper Classes */
.show-mobile {
  display: none;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
}

.hide-tablet {
  display: block;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

.hide-desktop {
  display: block;
}

@media (min-width: 1025px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PAGE-SPECIFIC RESPONSIVE RULES
   Covers inline-styled pages that need extra breakpoints
   ══════════════════════════════════════════════════════════ */

/* ── Internship page hero responsive ── */
@media (max-width: 860px) {
  .itn-hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2.2rem !important;
    text-align: center !important;
  }
  .itn-hero-underline { margin: .8rem auto 1.4rem !important; }
  .itn-hero-left p { margin: 0 auto !important; }
  .itn-hero-stats { grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; }
}
@media (max-width: 480px) {
  .itn-hero-stats { grid-template-columns: repeat(3, 1fr) !important; gap: .4rem !important; }
  .itn-stat { padding: 1rem .6rem .8rem !important; }
  .itn-stat-v { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; }
  .itn-stat-l { font-size: .52rem !important; }
  .itn-stat-icon { width: 34px !important; height: 34px !important; }
}
@media (max-width: 360px) {
  .itn-hero-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ── Internship cards ── */
@media (max-width: 599px) {
  .itn-grid { grid-template-columns: 1fr !important; }
  .itn-card-body { padding: .6rem 1.1rem 1.1rem !important; }
  .itn-card-top  { padding: 1.1rem 1.1rem .5rem !important; }
}

/* ── Internship application form ── */
@media (max-width: 640px) {
  .itn-field-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .itn-form-panel { margin: 0 !important; }
  .itn-form-header { padding: 1.2rem 1rem 1rem !important; }
  .itn-form-body   { padding: 1.2rem 1rem !important; }
}

/* ── Section header bar: wrap on narrow screens ── */
@media (max-width: 599px) {
  .itn-sec-hdr {
    padding: 1rem 1.2rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .6rem !important;
  }
}

/* ── Projects page hero ── */
@media (max-width: 880px) {
  .prj-hero { text-align: center !important; }
  .prj-hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important;
  }
  .prj-hero-stats {
    width: 100% !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .prj-hero-stats { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
  .prj-hero-stat-v { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; }
}

/* ── Projects cards grid ── */
@media (max-width: 640px) {
  .prj-cards-grid  { grid-template-columns: 1fr !important; }
  .lg-grid         { grid-template-columns: 1fr !important; }
  .intern-grid     { grid-template-columns: 1fr !important; }
  .upcoming-grid   { grid-template-columns: 1fr !important; }
  .completed-grid  { grid-template-columns: 1fr !important; }
}

/* ── Profile page ── */
@media (max-width: 899px) {
  .profile-layout {
    grid-template-columns: 1fr !important;
  }
  .profile-sidebar { position: static !important; }
}
@media (max-width: 599px) {
  .profile-hero { padding: 1.8rem 1rem 2.5rem !important; }
  .hero-inner { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
  .profile-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .profile-tab  { white-space: nowrap !important; flex-shrink: 0 !important; }
}

/* ── Course registration form ── */
@media (max-width: 767px) {
  .reg-hero { text-align: center !important; }
  .reg-form-grid { grid-template-columns: 1fr !important; }
  .reg-steps { gap: .5rem !important; }
  .reg-step-line { display: none !important; }
}

/* ── Courses page filter + grid ── */
@media (max-width: 480px) {
  .filter-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
  }
  .filter-search-wrap,
  .filter-select,
  .filter-reset { width: 100% !important; }
}

/* ── Admin dashboard sidebar: 320px screens ── */
@media (max-width: 360px) {
  .content { padding: .65rem !important; }
  .stats-grid { grid-template-columns: 1fr !important; gap: .5rem !important; }
  .topbar { padding: 0 .55rem !important; gap: .35rem !important; }
  .topbar-title { font-size: .82rem !important; }
}

/* ── Payment & EMI pages ── */
@media (max-width: 599px) {
  .payment-card     { padding: 1.2rem !important; }
  .emi-plan-grid    { grid-template-columns: 1fr !important; }
  .emi-step-row     { flex-direction: column !important; gap: .75rem !important; }
}

/* ── Forms page ── */
@media (max-width: 599px) {
  .forms-hero { padding: 2.5rem 1rem 2rem !important; }
  .forms-grid { grid-template-columns: 1fr !important; }
}

/* ── Reviews page ── */
@media (max-width: 767px) {
  .reviews-grid { grid-template-columns: 1fr !important; }
  .reviews-hero { text-align: center !important; }
}

/* ── Mentor dashboard ── */
@media (max-width: 899px) {
  .mentor-dash-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 599px) {
  .mentor-dash-hero { padding: 2.5rem 1rem 2rem !important; }
  .mentor-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Quick registration page ── */
@media (max-width: 599px) {
  .qreg-card { padding: 1.2rem !important; }
  .qreg-cols { grid-template-columns: 1fr !important; }
}

/* ── Recording/Videos page ── */
@media (max-width: 767px) {
  .rv-grid { grid-template-columns: 1fr !important; }
  .rv-hero { padding: 2.5rem 1rem 2rem !important; }
}

/* ── Feedback page ── */
@media (max-width: 599px) {
  .feedback-hero { padding: 2.5rem 1rem 2rem !important; }
}

/* ── Contact/Enquiry page ── */
@media (max-width: 767px) {
  .contact-layout { grid-template-columns: 1fr !important; }
  .contact-map    { height: 260px !important; }
}

/* ── Pamphlet / Brochure page ── */
@media (max-width: 599px) {
  .pamphlet-hero { padding: 1.8rem 1rem 1.5rem !important; }
  .pamphlet-hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  .pamphlet-hero p  { font-size: .88rem !important; }
  .hero-actions { flex-direction: column !important; gap: .6rem !important; }
  .hero-actions .btn-white,
  .hero-actions .btn-outline-white { width: 100% !important; text-align: center !important; }
  .stats-inner { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem !important; padding: 1rem !important; }
  .stat-item { padding: .5rem !important; }
  .stat-num  { font-size: 1.4rem !important; }
  .toolbar { padding: 0 1rem !important; flex-direction: column !important; align-items: flex-start !important; gap: .6rem !important; }
  .toolbar-right { width: 100% !important; flex-wrap: wrap !important; }
  .courses-wrap { padding: 0 .75rem !important; margin-bottom: 2rem !important; }
  .courses-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .pam-card { min-height: auto !important; }
  .pam-card-header { min-height: 100px !important; padding: 1rem !important; }
  .pam-card-body { padding: 1rem !important; }
  .pam-desc { font-size: .8rem !important; }
  .mentors-wrap { padding: 0 .75rem !important; margin-bottom: 2.5rem !important; }
  .mentors-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .mentor-card { padding: 1.2rem 1rem 1rem !important; border-radius: 16px !important; }
  .mentor-top { gap: .65rem !important; }
  .about-wrap { padding: 0 .75rem !important; }
  .about-inner { grid-template-columns: 1fr !important; }
  .about-left, .about-right { padding: 1.5rem 1rem !important; }
  .about-left { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .coaching-grid { grid-template-columns: 1fr 1fr !important; gap: .6rem !important; }
  .why-wrap { padding: 0 .75rem !important; }
  .why-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  .why-card { padding: 1rem !important; }
  .cta-banner { padding: 2rem 1rem !important; }
  .cta-banner h2 { font-size: 1.5rem !important; }
  .cta-actions { flex-direction: column !important; gap: .6rem !important; }
  .cta-actions .btn-white,
  .cta-actions .btn-outline-white { width: 100% !important; text-align: center !important; }
  /* Popup */
  .course-popup-box { max-width: 95vw !important; }
  .cpop-header { padding: 1.2rem 1rem 1rem !important; }
  .cpop-title  { font-size: 1.1rem !important; }
  .cpop-body   { padding: 1rem !important; }
  .cpop-actions { padding: 1rem !important; flex-direction: column !important; }
  .cpop-book-btn, .cpop-cancel-btn { width: 100% !important; text-align: center !important; }
}
@media (max-width: 399px) {
  .pamphlet-hero h1 { font-size: 1.5rem !important; }
  .stats-inner { grid-template-columns: 1fr 1fr !important; }
  .coaching-grid { grid-template-columns: 1fr !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  .mentor-card { padding: 1rem .85rem .85rem !important; }
}

/* ── Index page: Trust Bar (inline-styled, gap:3rem causes issues on mobile) ── */
@media (max-width: 767px) {
  /* Trust bar: reduce gap, use 1rem side padding, allow wrapping */
  [style*="gap: 3rem"][style*="flex-wrap: wrap"],
  [style*="gap:3rem"][style*="flex-wrap:wrap"] {
    gap: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
@media (max-width: 599px) {
  /* Feat-pills: allow each pill to shrink/wrap properly */
  .feat-pill {
    font-size: 0.74rem !important;
    padding: 0.38rem 0.85rem !important;
    white-space: nowrap;
  }
  /* Inner hero-actions flex container with gap */
  .hero-actions > div[style*="flex"] {
    gap: 0.75rem !important;
  }
  /* Trust bar: 1 column on very small screens */
  [style*="gap: 3rem"],
  [style*="gap:3rem"] {
    gap: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── Global: ensure no content clips viewport at any width ── */
@media (max-width: 399px) {
  .itn-container,
  .prj-container,
  .container-max {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  section { padding-left: .75rem !important; padding-right: .75rem !important; }
  nav { padding: 0 .6rem !important; }
  .hero { padding-left: .75rem !important; padding-right: .75rem !important; }
  /* Feat-pills: stack 1 per row on very narrow screens */
  .feat-pill { white-space: normal !important; }
  [style*="display: flex"][style*="flex-wrap: wrap"],
  [style*="display:flex"][style*="flex-wrap:wrap"] {
    gap: 0.5rem !important;
  }
}