/* ==========================================================================
   10. MEDIA QUERIES & RESPONSIVE LAYOUT OVERRIDES
   ========================================================================== */

/* Base hidden state for mobile navigation */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-content { 
    grid-template-columns: 0.95fr 1.05fr !important; 
    gap: 40px !important; 
    border-left: none !important; 
    padding-left: 0 !important;
  }
  .stats-board { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .stat-item:nth-child(3) { border-right: none !important; }
  .stat-item:nth-child(4) { border-right: 1px solid var(--border) !important; }
  .engagements-grid { grid-template-columns: 1fr !important; }
  .highlights-banner { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  /* Prevent horizontal scrolls and stabilize page alignment on body only */
  body {
    overflow-x: hidden !important;
  }

  /* General section spacing */
  section { padding: 40px 0 !important; }
  #home { padding: 120px 0 40px 0 !important; }
  
  /* Layout and grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-content { 
    grid-template-columns: 1fr !important; 
    gap: 40px !important; 
    border-left: none !important; 
    padding-left: 0 !important;
  }
  .hero-runway-text { display: none !important; }
  .hero-image-area { order: -1 !important; }
  .stats-board { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-item { border-right: none !important; }
  .about-main { grid-template-columns: 1fr !important; gap: 40px !important; }
  
  /* Hide desktop header components & overlay */
  .nav-menu { display: none !important; }
  header.site-header .burger { display: none !important; }
  header.site-header .theme-toggle-btn { display: none !important; }
  .mobile-menu-overlay { display: none !important; }
  
  /* Center-align header brand name on mobile with solid luxury background */
  header.site-header {
    height: 60px !important;
    background: #fdfbf7 !important;
    border-bottom: 1px solid rgba(223, 166, 18, 0.28) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    z-index: 9999 !important;
  }
  header.site-header.scrolled {
    height: 55px !important;
    background: #fdfbf7 !important;
  }
  .header-container {
    justify-content: center !important;
  }
  
  /* Add body padding at the bottom so content is not blocked by bottom nav */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  
  /* Fixed Mobile Bottom Navigation Bar (Glassmorphic) */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: rgba(11, 15, 25, 0.85) !important; /* Deep dark background */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--border) !important;
    z-index: 99999 !important; /* Extremely high z-index to overlay everything */
    justify-content: space-around !important;
    align-items: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;

    /* GPU Hardware acceleration to stabilize fixed elements on mobile scroll */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
  
  /* Adjust background for light theme dynamically */
  [data-theme="light"] .mobile-bottom-nav {
    background: rgba(248, 250, 252, 0.85) !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* Mobile Bottom Navigation Item */
  .mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    transition: all 0.25s ease;
  }
  
  .mobile-bottom-nav-item svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.2s ease;
  }
  
  .mobile-bottom-nav-item span {
    font-size: 9px;
    font-weight: 500;
    display: block;
    text-align: center;
    white-space: nowrap;
  }
  
  .mobile-bottom-nav-item.active,
  .mobile-bottom-nav-item:hover {
    color: var(--accent) !important;
  }
  
  .mobile-bottom-nav-item.active svg {
    transform: scale(1.1);
  }

  /* Experience section adjustments */
  .timeline::before { left: 11px !important; }
  .timeline-dot { left: 2px !important; }
  .timeline-item { padding-left: 36px !important; }
  .timeline-header { flex-direction: column !important; gap: 4px !important; }
  .timeline-period { align-self: flex-start !important; }
  
  /* Research/Publications & Highlights */
  .pub-filter-controls { flex-direction: column !important; align-items: stretch !important; }
  .pub-search-wrapper { max-width: 100% !important; }
  .research-common-box .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .highlights-banner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Teaching/Workshops & Curriculum */
  .skills-common-box {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .workshop-item { grid-template-columns: 1fr !important; gap: 8px !important; }
  .w-date { align-self: flex-start !important; }
  
  /* About Me Section */
  .doing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  /* Gallery */
  .gallery-folders-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .gallery-grid { grid-template-columns: 1fr !important; }
  
  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .prev-lightbox { left: 10px !important; }
  .next-lightbox { right: 10px !important; }
  .lightbox-nav { font-size: 30px !important; }
  
  /* Footer */
  .footer-top { flex-direction: column !important; align-items: flex-start !important; }
  .footer-links { flex-direction: column !important; gap: 30px !important; }
  .certs-grid { grid-template-columns: 1fr !important; }

  /* Mobile Collapsible Cards (Tap to Expand/Collapse & Centered Headings/Logos with Left-aligned Contents) */
  .doing-card, .topic-card, .skills-section-inside, .exp-card, .highlight-card {
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* Stretches block children (like paragraphs) to full width */
    text-align: left !important;     /* Left align the text content by default */
  }

  /* Headings & Title alignments (Centered) */
  .doing-card h3, 
  .topic-card h4, 
  .skills-section-inside h4, 
  .exp-header-main h3, 
  .exp-org,
  .highlight-content h4 {
    text-align: center !important;
    width: 100% !important;
  }

  /* Centered Icon & Logo block alignment */
  .doing-icon-box, .topic-icon-box, .highlight-icon-box {
    align-self: center !important; /* Keeps individual icons centered without stretching */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
  }
  .exp-logo-area {
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  .exp-header {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .exp-header-main {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .exp-period {
    align-self: center !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .highlight-content {
    width: 100% !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  .highlight-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Left-align descriptions & lists when expanded to span line by line */
  .doing-card p, .topic-card p, .skills-section-inside p, .exp-card .exp-desc, .highlight-card p {
    text-align: left !important;
    width: 100% !important;
  }
  .exp-bullets {
    text-align: left !important;
    width: 100% !important;
  }

  /* Text clamping for paragraph descriptions - fully collapsed by default */
  .doing-card p, .topic-card p, .skills-section-inside p {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.3s ease !important;
  }

  .doing-card.expanded p, .topic-card.expanded p, .skills-section-inside.expanded p {
    max-height: 1000px !important;
    overflow: visible !important;
    opacity: 1 !important;
    margin-top: 12px !important;
  }

  /* List & paragraph clamping for Experience Cards */
  .exp-bullets, .exp-card .exp-desc {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  }

  .exp-card.expanded .exp-bullets, .exp-card.expanded .exp-desc {
    max-height: 1000px !important;
    overflow: visible !important;
    opacity: 1 !important;
    margin-top: 12px !important;
  }

  /* Force Hero name to fit on a single line on mobile */
  .hero-name {
    font-size: clamp(24px, 6.2vw, 32px) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
  }

  /* Disable nested scroll traps on mobile, letting containers expand naturally */
  .exp-scroll-container,
  .pub-scroll-container,
  .workshop-scroll-container {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Hero highlights mobile styles */
  .hero-highlights {
    gap: 10px !important;
  }
  .highlight-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }
  .hl-badge {
    align-self: flex-start !important;
  }
}

/* Adjustments for smaller phone widths */
@media (max-width: 480px) {
  .profile-image-container {
    width: 240px !important;
    height: 300px !important;
  }
  .profile-image-wrapper::before {
    width: 240px !important;
    height: 300px !important;
  }
}

@media (max-width: 360px) {
  .mobile-bottom-nav-item span {
    font-size: 8px !important;
  }
}

@media (max-width: 340px) {
  .mobile-bottom-nav-item span {
    display: none !important; /* Hide label text on extremely narrow screens, show only icons */
  }
  .mobile-bottom-nav-item {
    padding: 10px 0 !important;
  }
}

/* Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}