/* ============================================================
   MOBILE RESPONSIVENESS & OVERFLOW CONTAINMENT
   CodewithSid Portfolio
   Target devices: 320px, 360px, 375px, 390px, 393px, 412px, 430px, 480px, 768px+
   Desktop visual/functional parity strictly preserved.
   ============================================================ */

/* 1. Global Viewport & Box Sizing Protection */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0 !important;
  max-width: 100%;
  overflow-x: clip !important;
  position: relative;
}

.content {
  min-width: 0 !important;
  max-width: 100%;
  overflow-x: clip;
}

.content__wrapper {
  max-width: 100%;
  overflow-x: clip;
}

/* Image / Media safety */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* 2. Gradient Background & Blur Animation Containment */
.gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 3. Mobile & Tablet (< 992px) Responsive Rules */
@media only screen and (max-width: 991px) {
  /* Avatar side block on mobile */
  .avatar {
    width: calc(100% - 32px);
    max-width: 580px;
    margin: 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }

  .avatar__container {
    width: 100%;
    padding: 2.4rem;
  }

  /* Fixed bottom navigation on mobile */
  .header {
    max-width: calc(100vw - 32px);
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Typography wrapping */
  h1, h2, h3, h4, h5, h6, p, a, span {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Headline & Intro */
  .headline {
    width: 100%;
    max-width: 100%;
  }

  .headline__title {
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    line-height: 1.18;
    max-width: 100%;
  }

  .headline__btnholder {
    width: 100%;
    gap: 1rem;
  }

  .headline__btnholder .btn {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
  }

  .rotating-btn {
    right: 16px;
    bottom: 20px;
  }

  /* Section Padding */
  .content__block {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .content__block.grid-block {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* 4. Mobile Devices (< 768px) */
@media only screen and (max-width: 767px) {
  /* Device showcase overflow elimination */
  .device-showcase {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 4.5rem;
  }

  .device-showcase__group {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* iPhone Mockup responsive scaling */
  .iphone-mockup {
    width: 220px;
    max-width: calc(100vw - 48px);
    height: 440px;
    margin: 0 auto;
  }

  /* Laptop Mockup: prevent 117vw foot blowout */
  .laptop-mockup {
    width: calc(100% - 32px);
    max-width: 440px;
    margin: 0 auto;
    overflow: visible;
  }

  .laptop-mockup__base {
    width: 106%;
    margin-left: -3%;
  }

  .laptop-mockup__foot {
    width: 116%;
    margin-left: -8%;
  }

  /* Achievements cards */
  .achievements {
    width: 100%;
    gap: 1.5rem;
  }

  .achievements__item {
    width: 100%;
    padding: 0;
  }

  .achievements__card {
    width: 100%;
    text-align: center;
  }

  /* Tools list cards */
  .tools-cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .tools-cards__item {
    flex: 0 0 calc(50% - 0.8rem);
    max-width: calc(50% - 0.8rem);
    padding: 0;
    margin-bottom: 1rem;
  }

  .tools-cards__card {
    width: 100%;
  }

  /* Social cards */
  .socials-cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .socials-cards__item {
    flex: 0 0 calc(33.333% - 0.8rem);
    max-width: calc(33.333% - 0.8rem);
    padding: 0;
    margin-bottom: 1rem;
  }

  .socials-cards__card {
    width: 100%;
  }

  /* Contact Lines */
  .contact-lines__data {
    margin-bottom: 2rem;
  }

  /* Form Container */
  .form-container {
    width: 100%;
    max-width: 100%;
  }

  .form-container input,
  .form-container textarea {
    max-width: 100%;
  }

  /* Testimonials slider */
  .testimonials-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .testimonials-card {
    width: 100%;
    max-width: 100%;
  }
}

/* 5. Very Small Mobile Devices (<= 375px) */
@media only screen and (max-width: 375px) {
  .avatar__container {
    padding: 1.8rem;
  }

  .avatar__socials .socials-square {
    gap: 0.6rem;
  }

  .tools-cards__item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .socials-cards__item {
    flex: 0 0 calc(50% - 0.8rem);
    max-width: calc(50% - 0.8rem);
  }

  .laptop-mockup {
    width: calc(100% - 20px);
    max-width: 300px;
  }

  .laptop-mockup__base {
    width: 104%;
    margin-left: -2%;
  }

  .laptop-mockup__foot {
    width: 110%;
    margin-left: -5%;
  }

  .showcase-laptop__base {
    width: 104%;
    margin-left: -2%;
  }

  .showcase-laptop__foot {
    width: 110%;
    margin-left: -5%;
  }

  .iphone-mockup {
    width: 190px;
    height: 380px;
  }

  .header {
    max-width: calc(100vw - 16px);
  }
}

/* 6. Respect Reduced Motion */
@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;
  }
}