/* ============================================
   RESPONSIVE.CSS — media queries (load last)
   Part of the Sajan portfolio — split from a single stylesheet.
   ============================================ */

@media (pointer: fine) {
  a, button, [data-cursor-hover] { cursor: none; }
}

@media (pointer: coarse) {
  #cursor { display: none; }
}

@media (max-width: 992px) {
  .sidenav { display: none; }
}

@media (max-width: 768px) {
}

@media (max-width: 1024px) {
  .journey__body { padding: 0 40px 0 280px; }
  .journey__year { left: -190px; }
}

@media (max-width: 768px) {
  .journey__body {
    padding: 0 16px;
    max-width: 100%;
  }
  /* The curvy SVG snake squishes badly in a narrow column — swap it
     for a clean straight rail with per-item dots on mobile. */
  .journey__line-wrap { display: none; }

  .journey__items { position: relative; }
  .journey__items::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), rgba(var(--c-ink),0.10));
    opacity: 0.55;
  }

  .journey__item {
    min-height: 0;
    justify-content: flex-start;
    padding: 22px 0 22px 34px;
  }
  .journey__item::before {
    content: '';
    position: absolute;
    left: 1.5px;
    top: 30px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px rgba(var(--c-ink),0.10);
  }

  .journey__year {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--accent);
  }

  .journey__content { flex-direction: column; gap: 18px; }
  .journey__text { font-size: 15.5px; max-width: 100%; }
  .journey__photo {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 3 / 2;
    transform: rotate(-1.5deg);
  }
  .journey__item:nth-child(even) .journey__photo { transform: rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #preloader { display: none; }
  #cursor { display: none; }
  .marquee__track { animation: none; }
  .hero__scroll-line::after { animation: none; }
}

@media (max-width: 1200px) {
  :root { --section-gap: 110px; }

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

  .contact__container { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 992px) {
  :root { --section-gap: 90px; }

  /* Nav — hide pill links, show hamburger */
  .nav__pill { display: none; }
  .nav { justify-content: flex-end; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero__container { grid-template-columns: 1fr; }
  .hero__meta {
    display: none;
  }

  /* About */
  .about__container { grid-template-columns: 1fr; gap: 60px; }
  .about__right { order: -1; max-width: 360px; margin: 0 auto; }

  /* Metrics */
  .metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .metrics__item { border-bottom: 1px solid var(--border); }
  .metrics__item:nth-child(odd) { border-right: 1px solid var(--border); }
  .metrics__item:nth-child(even) { border-right: none; }
  .metrics__item:nth-last-child(-n+2) { border-bottom: none; }

  /* Projects */
  .pfs-tag, .pfs-counter { top: 28px; }
  .pfs-progress { bottom: 28px; }

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

@media (max-width: 768px) {
  :root { --section-gap: 70px; }

  .hero__social { gap: 16px; }
  .hero__cta-row { gap: 14px; }
  .metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .expertise__grid { grid-template-columns: repeat(2, 1fr); }

  .credentials__nav { display: none; }
}

@media (max-width: 480px) {
  :root {
    --section-gap: 60px;
    --pad: 20px;
  }

  .expertise__grid { grid-template-columns: 1fr; }
  .metrics__grid { grid-template-columns: 1fr 1fr; }

  .cred-card { flex-basis: 78vw; }

  .pfs-panel__desc { max-width: 100%; }

  .hero__cta-row .btn--ghost { display: none; }
}