/* ============================================================
   Responsive Layers — "NEURAL LAB"
   Breakpoints: 1440 / 1200 / 1024 / 900 / 768 / 600 / 480 / 380
   Covers: desktop, laptop, tablet, phone, foldable, landscape, print
   ============================================================ */

/* ---------- Fluid safety net (all sizes) ---------- */
img, svg, video, canvas { max-width: 100%; }
table { max-width: 100%; }
h1, h2, h3, h4, p, a, span, li, td, th { overflow-wrap: anywhere; word-break: break-word; }
.container { padding-left: max(1.15rem, env(safe-area-inset-left)); padding-right: max(1.15rem, env(safe-area-inset-right)); }

/* ---------- >= 1600px ---------- */
@media (min-width: 1600px) {
  :root { --maxw: 1340px; }
  html { font-size: 17px; }
  .hero { padding-top: calc(var(--nav-height) + 5rem); }
}

/* ---------- <= 1200px ---------- */
@media (max-width: 1200px) {
  .nav-link { padding: .5rem .55rem; font-size: .79rem; }
  .nav-logo { font-size: .95rem; }
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ---------- <= 1024px (tablet landscape) ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }

  .about-grid { grid-template-columns: 1fr; }
  .about-photo { position: relative; top: auto; max-width: 420px; margin-inline: auto; }

  .contact-grid { grid-template-columns: 1fr; }
  .section-dots { display: none; }

  .hero-grid { gap: 2.5rem; }
}

/* ---------- <= 900px: mobile navigation ---------- */
@media (max-width: 900px) {
  :root { --nav-height: 68px; }

  /* Small screens navigate through Smart Search (and the footer map),
     so the hamburger panel is retired below this width. */
  .nav-toggle { display: none !important; }
  .nav-menu { display: none !important; }

  .nav-search {
    width: auto;
    height: 40px;
    padding: 0 .9rem;
    gap: .4rem;
    border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
    color: var(--text);
  }
  .nav-search-text {
    display: inline;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .nav-menu {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-14px);
    width: min(calc(100% - 2rem), 460px);
    flex-direction: column;
    align-items: stretch;
    gap: .18rem;
    padding: .85rem;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-link {
    padding: .8rem 1rem;
    font-size: .93rem;
    border-radius: var(--radius);
  }
  .nav-link::after { display: none; }
  .nav-link.active { background: color-mix(in srgb, var(--cyan) 14%, transparent); border-left: 2px solid var(--cyan); }

  /* Hero stacks */
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content { order: 2; }
  .hero-image { order: 1; margin-bottom: 1.25rem; }
  .hero-greeting { justify-content: center; }
  .hero-chips { justify-content: center; }
  .hero-university {
    border-left: none;
    border-top: 2px solid color-mix(in srgb, var(--violet) 55%, transparent);
    padding: .9rem 0 0;
    margin-inline: auto;
    text-align: center;
  }
  .hero-research { justify-content: center; text-align: center; }
  .hero-buttons, .btn-group { justify-content: center; }
}

/* ---------- <= 768px (tablet portrait / large phone) ---------- */
@media (max-width: 768px) {
  html { font-size: 15.5px; }

  .section { padding: 3.25rem 0; }
  .section-header { margin-bottom: 2rem; }

  .navbar { top: 10px; width: calc(100% - 1.4rem); }
  .nav-container { height: 56px; padding: 0 .5rem 0 1rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .stat-card { padding: 1.35rem 1.05rem; }
  .stat-number { font-size: 2.1rem; }

  .card-grid, .skills-grid, .mission-vision { grid-template-columns: 1fr; }
  .pub-stats-grid { grid-template-columns: repeat(2, 1fr); }

  .filter-bar {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .filter-tabs { justify-content: center; }
  .filter-tab { flex: 1 1 auto; text-align: center; }
  .search-box { max-width: none; }
  .filter-count { text-align: center; }

  .timeline { padding-left: 1.7rem; }
  .timeline-item { padding: 1.25rem 1.15rem; }
  .timeline-item::before { left: -1.7rem; width: 14px; height: 14px; top: 1.5rem; }
  .timeline-item:hover { transform: none; }

  .publication-card { padding: 1.25rem 1.15rem 1.25rem 1.45rem; }
  .publication-card:hover { transform: none; }

  .contact-info-card, .contact-form { padding: 1.5rem 1.25rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .cursor-dot, .cursor-ring { display: none; }

  /* Floating dock becomes a bottom bar */
  .fab-dock {
    left: 50%;
    right: auto;
    bottom: max(.9rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    flex-direction: row;
    gap: .6rem;
    padding: .45rem;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
  }

  .fab { width: 48px; height: 48px; }
  .fab svg { width: 22px; height: 22px; }
  .fab-label { display: none; }
  .fab-whatsapp { animation: none; }

  .back-to-top {
    right: max(.9rem, env(safe-area-inset-right));
    bottom: calc(max(.9rem, env(safe-area-inset-bottom)) + 4.6rem);
    width: 44px; height: 44px;
    font-size: .95rem;
  }
}

/* ---------- <= 600px (phones) ---------- */
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav-height) + 2.25rem); padding-bottom: 2.5rem; }
  .hero-name { font-size: clamp(2.15rem, 11vw, 3rem); }
  .hero-designation { font-size: 1.02rem; }
  .hero-department { font-size: .9rem; }
  .hero-university { font-size: .72rem; }
  .hero-research { font-size: .72rem; padding: 2.1rem .8rem .8rem; }
  .hero-image-wrapper { width: min(210px, 54vw); }
  .hero-image::before, .hero-image::after { display: none; }
  .hero-image-wrapper::before { inset: -14px; }
  .hero-content { padding-inline: .15rem; }
  .hero-university { max-width: 100%; }

  .page-hero { padding-top: calc(var(--nav-height) + 2.25rem); }
  .page-hero > .container > p { font-size: .95rem; }

  .btn { width: 100%; padding: .85rem 1.4rem; }
  .btn-sm { width: auto; }
  .btn-group { flex-direction: column; width: 100%; }
  .pub-actions .btn { width: auto; }

  .card { padding: 1.5rem 1.2rem; }
  .card-icon { width: 48px; height: 48px; font-size: 1.25rem; margin-bottom: .9rem; }
  .research-detail { padding: 1.35rem; }
  .map-placeholder { padding: 1.5rem; min-height: 150px; }

  .data-table { font-size: .84rem; min-width: 400px; }
  .data-table thead th, .data-table tbody td { padding: .7rem .8rem !important; }

  .marquee-item { font-size: .7rem; }
  .section-header h2::after { width: 60px; }
}

/* ---------- <= 480px ---------- */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .pub-stats-grid { grid-template-columns: 1fr 1fr; }
  .social-icons { flex-wrap: wrap; }
  .contact-detail { gap: .8rem; }
  .contact-detail-icon { width: 40px; height: 40px; font-size: .95rem; }
}

/* ---------- <= 380px (small / foldable) ---------- */
@media (max-width: 380px) {
  html { font-size: 14.5px; }
  .stats-grid, .pub-stats-grid { grid-template-columns: 1fr; }
  .nav-container { padding-left: .8rem; }
  .nav-logo span { font-size: .86rem; }
  .filter-tabs { flex-direction: column; }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 540px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--nav-height) + 1.5rem); }
  .hero-grid { grid-template-columns: 1fr 1fr; text-align: left; }
  .hero-image { order: 2; margin-bottom: 0; }
  .hero-content { order: 1; }
  .hero-greeting, .hero-chips, .hero-buttons, .btn-group { justify-content: flex-start; }
  .hero-image-wrapper { width: min(200px, 34vw); }
  .nav-menu { max-height: calc(100dvh - 90px); }
}

/* ---------- Touch devices ---------- */
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .card:hover, .stat-card:hover, .skill-category:hover,
  .conference-card:hover, .publication-card:hover, .timeline-item:hover { transform: none; }
  .btn { min-height: 44px; }
  .nav-link { min-height: 40px; display: flex; align-items: center; }
}

/* ---------- High-contrast / forced colors ---------- */
@media (forced-colors: active) {
  .card, .stat-card, .publication-card, .timeline-item { border: 1px solid CanvasText; }
  .btn { border: 1px solid CanvasText; }
}

/* ---------- Print ---------- */
@media print {
  .navbar, .back-to-top, .scroll-progress, .loader, .fab-dock,
  .section-dots, .cursor-dot, .cursor-ring, .marquee,
  .filter-bar, .hero-aurora, .neural-canvas,
  .theme-toggle, .nav-toggle { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  body::before, body::after { display: none !important; }

  .page-hero, .footer, .contact-info-card {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
  }
  .page-hero h1, .footer h3, .footer h4, .contact-info-card h3 { color: #000 !important; }
  .footer-brand p, .footer-links a, .footer-links li,
  .contact-detail p, .breadcrumb, .stat-label { color: #333 !important; }

  .hero-name, .stat-number {
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    background: none !important;
  }

  .card, .stat-card, .timeline-item, .publication-card, .skill-category {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
  }

  .reveal, .timeline-item { opacity: 1 !important; transform: none !important; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .72em; color: #555; }
}

/* ---------- Carousel responsiveness ---------- */
@media (max-width: 780px) {
  .carousel-item { padding: 0 .4rem; }
  .carousel-counter { position: static; margin-left: .25rem; }
  .carousel-controls { gap: .7rem; }
  .carousel-btn { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .carousel { padding-bottom: 3.1rem; }
  .carousel-item { padding: 0 .25rem; }
  .carousel-counter { display: none; }
}

/* ---------- Smart search responsiveness ---------- */
@media (max-width: 1080px) and (min-width: 901px) {
  .nav-search-text, .nav-search kbd { display: none; }
  .nav-search { width: 42px; padding: 0; justify-content: center; }
}

@media (max-width: 900px) {
  .nav-search kbd { display: none; }
  .nav-search-text { display: none; }
  .nav-search-alt { display: inline; }
  .theme-toggle { width: 40px; height: 40px; }
}

@media (max-width: 600px) {
  .theme-toggle { width: 38px; height: 38px; }
  .nav-search { height: 38px; padding: 0 .75rem; }
  .nav-actions { gap: .3rem; }
  .palette { border-radius: var(--radius-lg); }
  .palette-overlay { padding-top: 4.5rem; }
  .palette-kind { width: 52px; font-size: .54rem; }
  .palette-foot span:not(.palette-brand) { display: none; }
  .palette-brand { margin-left: 0; }
}