/* ============================================================
   MEDIAQUERIES.CSS — Responsive Breakpoints
   1024px · 768px · 480px · 360px + reduced-motion
============================================================ */

/* ── Global Project Image Icon Fixes (Always Active) ── */
.project-btn-icon {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  flex-shrink: 0; /* Prevents the image from squishing */
}

.project-links .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 8px !important;
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .hero-container  { gap: 2.8rem; }
  .hero-name       { font-size: clamp(2.2rem, 5vw, 3rem); }
  .hero-image-ring { width: 250px; height: 250px; }
  .skills-layout   { grid-template-columns: 1fr 1fr; }
  .contact-layout  { grid-template-columns: 1fr; gap: 2.4rem; }

  .footer-container { grid-template-columns: 1fr 1fr; }
  .footer-brand     { grid-column: 1 / -1; }
  .footer-social    { justify-content: flex-start; }
}

/* ── Mobile-lg ≤ 768px ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .hero-container {
    flex-direction: column-reverse;
    text-align: center;
    gap: 2.2rem;
    padding-top: 1rem;
    padding-bottom: 5.5rem;
  }
  .hero-greeting    { justify-content: center; }
  .hero-greeting::before { display: none; }
  .hero-desc        { margin-left: auto; margin-right: auto; }
  .hero-ctas        { justify-content: center; }
  .social-links     { justify-content: center; }
  .hero-title-wrap  { justify-content: center; }
  .hero-image-ring  { width: 210px; height: 210px; }
  .scroll-cue       { display: none; }

  .about-grid      { grid-template-columns: 1fr; }
  .skills-layout   { grid-template-columns: 1fr; }
  .projects-grid   { grid-template-columns: 1fr; }
  .section-title   { font-size: 1.8rem; }

  .form-row             { grid-template-columns: 1fr; }
  .contact-form-wrap    { padding: 1.4rem; }

  .footer-container { grid-template-columns: 1fr; text-align: center; }
  .footer-brand p   { max-width: 100%; }
  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 1.4rem;
  }
  /* Disable arrow animation on centred footer links */
  .footer-links a::before { display: none; }
  .footer-links a:hover   { padding-left: 0; }
  .footer-social { justify-content: center; }

  .back-to-top { bottom: 1.4rem; right: 1.4rem; }
}

/* ── Mobile ≤ 480px ── */
@media (max-width: 480px) {
  :root { --pad: 3.8rem; }

  .hero-name       { font-size: 2rem; }
  .hero-image-ring { width: 180px; height: 180px; }

  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .project-links      { flex-direction: column; gap: 0.8rem; }
  .project-links .btn { width: 100%; justify-content: center; }
  
  /* Keeps layout compact and organized inside full-width mobile cards */
  .project-links .btn img {
    width: 16px !important;
    height: 16px !important;
  }

  .skill-name { width: 96px; font-size: 0.73rem; }

  .about-card,
  .skill-card,
  .project-card { padding: 1.35rem; }

  .nav-logo { font-size: 1rem; }
}

/* ── Very small ≤ 360px ── */
@media (max-width: 360px) {
  .hero-name    { font-size: 1.8rem; }
  .section-title { font-size: 1.55rem; }
  .btn { font-size: 0.8rem; padding: 0.6rem 1rem; }
}

/* ── Reduced motion — disable ALL animations ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Make sure everything is visible when animations disabled */
  .reveal.will-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-anim-left,
  .hero-anim-right,
  .hero-greeting,
  .hero-name,
  .hero-title-wrap,
  .hero-desc,
  .hero-ctas,
  .social-links {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}