/* ============================================================
   media.css — Responsive Breakpoints for Tawhidul Islam Portfolio
   Breakpoints:
     XL  : ≤ 1280px
     LG  : ≤ 1024px
     MD  : ≤  768px
     SM  : ≤  480px
     XS  : ≤  360px
   ============================================================ */

/* ----------------------------------------------------------
   GLOBAL IMAGE DEFAULTS — applies at all screen sizes
   ---------------------------------------------------------- */

/* Every image is fluid by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Profile photo (About section) --- */
.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fills the box without stretching */
  object-position: top;    /* keeps the face visible when cropped */
  border-radius: inherit;  /* matches whatever shape the parent uses */
}

.about-photo-box {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;    /* consistent portrait shape on every screen */
  overflow: hidden;
  border-radius: 4px;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
}

/* --- WhatsApp floating button image --- */
.float-wa img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  display: block;
}

/* ----------------------------------------------------------
   XL — Large laptops / small desktops
   ---------------------------------------------------------- */
@media (max-width: 1280px) {
  nav {
    padding: 1rem 2rem;
  }

  .hero-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
  }

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

  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .accent-line {
    bottom: -1.5rem;
    right: 9.5rem;
    width: 60%;
    height: 86%;}
}

/* ----------------------------------------------------------
   LG — Tablets landscape / small laptops
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  /* --- Nav --- */
  nav {
    padding: 1rem 1.5rem;
    gap: 1rem;
  }

  .nav-links {
    gap: 1.25rem;
  }

  /* --- Hero --- */
  #hero {
    padding: 6rem 2rem 4rem;
  }

  .hero-title {
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  }

  .hero-sub {
    font-size: 1rem;
    max-width: 540px;
  }

  .hero-stats {
    gap: 2rem;
  }

  /* --- About --- */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-photo-box {
    max-width: 380px;
    margin: 0 auto;
  }

  /* --- Images @ LG --- */
  .photo-placeholder img {
    width: 100%;
    height: 100%;
  }
  .accent-line {
    bottom: -1.5rem;
    right: 15.5rem;
    width: 36%;
    height: 86%;}

  /* --- Skills --- */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

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

  /* --- Contact --- */
  .contact-inner {
    padding: 4rem 2rem;
  }
}

/* ----------------------------------------------------------
   MD — Tablets portrait / large phones
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* --- Nav --- */
  nav {
    position: relative;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links li a {
    font-size: 0.85rem;
  }

  nav .btn {
    order: 2;
    margin-left: auto;
  }

  /* --- Hero --- */
  #hero {
    padding: 7rem 1.25rem 3.5rem;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-sub {
    font-size: 0.95rem;
    margin: 1rem auto;
    max-width: 90%;
  }

  .hero-label {
    font-size: 0.8rem;
  }

  .hero-cta {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }

  .stat-num {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  /* --- Sections general --- */
  section {
    padding: 4rem 1.25rem;
  }

  .section-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  /* --- About --- */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-text p {
    font-size: 0.95rem;
  }

  .about-photo-box {
    max-width: 300px;
    margin: 0 auto;
  }

  /* --- Images @ MD --- */
  .photo-placeholder img {
    width: 100%;
    height: 100%;
    object-position: top center;
  }

  .float-wa img {
    width: 30px;
    height: 30px;
  }
  .accent-line{
    bottom: -1rem;
    right: 12.5rem;
    width: 34%;
    height: 78%;
  }

  /* --- Skills --- */
  .skills-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .skill-card {
    padding: 1.5rem 1.25rem;
  }

  /* --- Projects --- */
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .project-card {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }

  /* --- Contact --- */
  .contact-inner {
    padding: 3.5rem 1.25rem;
  }

  .contact-desc {
    font-size: 0.95rem;
  }

  .contact-links {
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  /* --- Footer --- */
  footer {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding: 1.5rem 1.25rem;
    font-size: 0.82rem;
  }

  /* --- WhatsApp float --- */
  .float-wa {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 50px;
    height: 50px;
  }
}

/* ----------------------------------------------------------
   SM — Small phones
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  /* --- Nav --- */
  nav {
    padding: 0.85rem 1rem;
  }

  .logo {
    font-size: 1rem;
  }

  .nav-links {
    gap: 0.75rem;
  }

  nav .btn {
    font-size: 0.72rem !important;
    padding: 0.45rem 0.9rem !important;
  }

  /* --- Hero --- */
  #hero {
    padding: 6.5rem 1rem 3rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 9vw, 2.4rem);
  }

  .hero-sub {
    font-size: 0.9rem;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  .hero-stats {
    gap: 1.25rem;
  }

  .stat-num {
    font-size: 1.8rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  /* --- Section headings --- */
  .section-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .section-label {
    font-size: 0.75rem;
  }

  /* --- Skills --- */
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .skill-card {
    padding: 1.25rem 1rem;
  }

  .skill-items {
    gap: 0.4rem;
  }

  .tag {
    font-size: 0.72rem;
    padding: 0.25rem 0.6rem;
  }

  /* --- Projects --- */
  .project-thumb {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .thumb-num {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .project-body {
    padding: 1.25rem;
  }

  .project-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .project-stack {
    width: 100%;
  }

  /* --- Contact form --- */
  .contact-form .btn {
    width: 100%;
    text-align: center;
  }

  .contact-links {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }

  .contact-link {
    font-size: 0.85rem;
  }

  /* --- About photo --- */
  .about-photo-box {
    max-width: 240px;
  }

  /* --- Images @ SM --- */
  .photo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .float-wa img {
    width: 28px;
    height: 28px;
  }
  .accent-line{
        bottom: -0.8rem;
        right: 3.8rem;
        width: 55%;
        height: 90%;
  } 
}

/* ----------------------------------------------------------
   XS — Very small phones (360px and below)
   ---------------------------------------------------------- */
@media (max-width: 360px) {
  .hero-title {
    font-size: 1.6rem;
  }

  .nav-links {
    display: none; /* collapse on very small screens if needed */
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }

  .stat-num {
    font-size: 1.6rem;
  }

  .hero-cta .btn {
    font-size: 0.82rem;
    padding: 0.6rem 1rem;
  }

  footer {
    font-size: 0.75rem;
  }

  /* --- Images @ XS --- */
  .about-photo-box {
    max-width: 200px;
    aspect-ratio: 1 / 1; /* square crop on very small screens */
  }
      .accent-line {
        bottom: -0.8rem;
        right: 1.5rem;
        width: 62%;
        height: 90%;
    }

  .float-wa img {
    width: 24px;
    height: 24px;
  }
}

/* ----------------------------------------------------------
   UTILITY — Reduce motion for accessibility
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}