/* ============================================================
   NHST Website — responsive.css
   Mobile-First Breakpoints
   Base: 320px (already in main.css + components.css)
   sm:  480px  | md: 768px | lg: 1024px | xl: 1200px
   ============================================================ */

/* ── sm: 480px+ (large phones / phablets) ──────────────────── */
@media (min-width: 480px) {
  :root { --section-py: 2.75rem; }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { columns: 2; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }

  .hero { min-height: 520px; }
}

/* ── md: 768px+ (tablets / small laptops) ─────────────────── */
@media (min-width: 768px) {
  :root {
    --section-py:  3rem;
    --box-radius:  12px;
    --box-margin:  1rem;
  }

  /* Boxed layout: flush to the top of the viewport, rounded bottom + margin on tablet+ */
  .site-box {
    border-radius: 0 0 var(--box-radius) var(--box-radius);
    margin:        0 auto var(--box-margin);
  }

  /* Inner section container gets more breathing room */
  .section-inner { padding: var(--section-py) var(--sp-8); }

  /* Topbar */
  .topbar { padding: 0.5rem var(--sp-8); }
  .topbar__contact { gap: var(--sp-6); }

  /* Masthead */
  .masthead__inner { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .masthead__logo { height: 67px; }
  .masthead__emblem { height: 76px; }

  /* Grids */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* Photo gallery: 2 columns */
  .photo-grid { columns: 2; column-gap: var(--sp-4); }

  /* Video grid: 2 columns */
  .video-grid { grid-template-columns: repeat(2, 1fr); }

  /* Inspiration side-by-side */
  .inspiration-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero { min-height: 580px; height: 85vh; }
  .hero__heading { letter-spacing: -0.02em; }

  /* Timeline: still single column but shifted right */
  .timeline { max-width: 680px; }
  .timeline::before { left: 28px; }
  .timeline-item__dot { width: 56px; height: 56px; font-size: 0.6875rem; }

  /* Table */
  .table-nhst th, .table-nhst td { padding: var(--sp-3) var(--sp-5); }

  /* Footer column title larger spacing */
  .footer-grid { padding-bottom: var(--sp-12); }
}

/* ── lg: 1024px+ (laptops / desktop) ─────────────────────── */
@media (min-width: 1024px) {
  :root {
    --section-py: 3rem;
    --box-margin: 1.5rem;
  }

  .site-box { border-radius: 0 0 16px 16px; }
  .section-inner { padding: var(--section-py) var(--sp-12); }

  /* ── Navbar: switch to horizontal desktop mode ── */
  .hamburger { display: none; }

  .main-nav__list {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    padding: 0;
    position: static;
    background: none;
    box-shadow: none;
    border-top: none;
    gap: 0;
  }

  .nav-link {
    padding: 0.75rem var(--sp-3);
    font-size: 0.9rem;
  }
  .nav-link::after {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 6px;
  }
  .nav-link .dropdown-arrow { margin-left: var(--sp-1); }

  /* Desktop dropdown */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--clr-surface-card);
    border: 1px solid var(--clr-border-light);
    border-top: 3px solid var(--clr-primary);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-drop);
    padding: var(--sp-2) 0;
    margin: 0;
    border-left: none;
  }
  .dropdown-link { padding: 0.5rem var(--sp-4); }

  /* Show dropdown on hover for desktop */
  .nav-item:hover .dropdown-menu { display: flex; }
  .nav-item:hover .dropdown-arrow { transform: rotate(180deg); }

  /* Grids */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .video-grid { grid-template-columns: repeat(3, 1fr); }

  /* Photo gallery: 3 columns masonry */
  .photo-grid { columns: 3; }

  /* Hero full height */
  .hero { height: 88vh; min-height: 600px; max-height: 780px; }

  /* Timeline: alternating left-right */
  .timeline { max-width: 100%; }
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .timeline-item { justify-content: flex-end; }
  .timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .timeline-item__dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  .timeline-item__body { max-width: 42%; }
  .timeline-item:nth-child(odd) .timeline-item__body { margin-right: calc(50% + var(--sp-8)); }
  .timeline-item:nth-child(even) .timeline-item__body { margin-left: calc(50% + var(--sp-8)); }

  /* Projects grid */
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── xl: 1200px+ (max-width reached) ─────────────────────── */
@media (min-width: 1200px) {
  :root { --box-margin: 2rem; }

  .site-box { max-width: var(--box-max-w); }
  .section-inner { padding: var(--section-py) var(--sp-16); }

  .nav-link { padding: 0.75rem var(--sp-4); font-size: 0.9375rem; }
  .nav-link::after { left: var(--sp-4); right: var(--sp-4); }

  /* Hero text can go wider */
  .hero__content { max-width: 760px; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .topbar, .main-nav, .hero__cta, .cta-section,
  .hamburger, .lang-toggle, .photo-lightbox, .video-modal { display: none !important; }

  .site-box { box-shadow: none; border: none; }
  body { background: #fff; }
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal.revealed { animation: none; }
  .section-title.reveal::after { transform: none; }
}

/* ── English header: longer labels + long trust name — compact so the row fits ──
   (html[lang="en"] only; the Hindi header is unchanged) */
@media (min-width: 1024px) {
  html[lang="en"] .nav-link { padding: 0.75rem var(--sp-2); font-size: 0.8125rem; }
  html[lang="en"] .nav-link::after { left: var(--sp-2); right: var(--sp-2); }
  html[lang="en"] .masthead__name { font-size: clamp(0.95rem, 0.9vw + 0.45rem, 1.15rem); }
  html[lang="en"] .masthead__tagline { font-size: 0.8rem; }
  html[lang="en"] .masthead__inner { gap: var(--sp-3); }
}
@media (min-width: 1200px) {
  html[lang="en"] .nav-link { padding: 0.75rem var(--sp-3); font-size: 0.875rem; }
  html[lang="en"] .nav-link::after { left: var(--sp-3); right: var(--sp-3); }
}