/* ===================================================================
   RESPONSIVE STYLES & MEDIA QUERIES
=================================================================== */

.hero-content {
  align-items: center;
  text-align: center;
  min-width: 0;
}

.hero-section .row > *,
.skills-grid > *,
.project-item {
  min-width: 0;
}

.hero-name,
.hero-typewriter-wrap,
.skill-cat-title,
.project-title {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero-avatar-outer-glow {
  width: min(330px, 78vw);
  height: min(330px, 78vw);
  aspect-ratio: 1;
}

.skill-tile img.skill-tile-icon-svg {
  display: block;
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
}

.hero-typewriter-wrap {
  justify-content: center;
}

.hero-bio {
  margin-left: auto;
  margin-right: auto;
}

.skill-cat-header {
  justify-content: center;
  text-align: center;
}

.skill-tiles-grid {
  justify-content: center;
}

/* Extra Large Screens (>= 1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 1180px;
  }

  .what-i-do-grid {
    max-width: 960px;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Large Desktops / Laptops (<= 1199px) */
@media (max-width: 1199px) {
  .hero-name {
    font-size: 3.4rem;
  }
  .hero-avatar-outer-glow {
    width: min(290px, 78vw);
    height: min(290px, 78vw);
  }
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .what-i-do-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .what-i-do-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.625rem);
  }
}

/* Laptops, Tablets & Mobile (<= 1199px) - Clean Collapsible Drawer */
@media (max-width: 1199px) {
  .navbar-collapse {
    background: rgba(11, 17, 32, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.25rem;
    margin-top: 1rem;
    border: 1px solid var(--card-border);
  }
  .nav-actions {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: center;
  }

  .navbar-nav {
    align-items: center;
  }

  .hero-content {
    align-items: center;
    text-align: center;
  }

  .hero-bio {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Medium Devices & Tablets (<= 991px) */
@media (max-width: 991px) {
  .reveal-slide-left,
  .reveal-slide-right {
    transform: translateX(0);
  }

  .hero-section .row {
    row-gap: 2rem;
  }

  .hero-section .row > * {
    width: 100%;
  }

  .hero-content > div {
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .hero-bio {
    max-width: 42rem;
  }

  .skill-category-card {
    height: auto;
  }

  #client-showcase .d-flex.align-items-center.justify-content-between {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  
  .hero-section {
    padding: 4.5rem 0 3.5rem;
    text-align: center;
  }

  .hero-content {
    align-items: center;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .hero-greeting {
    font-size: 1.8rem;
  }

  .hero-name {
    font-size: 2.8rem;
  }

  .hero-typewriter-wrap {
    font-size: 1.4rem;
    justify-content: center;
  }

  .hero-bio {
    margin-left: auto;
    margin-right: auto;
    font-size: 1.05rem;
  }

  .hero-section,
  .about-section,
  .skills-section,
  .projects-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .hero-cta-buttons {
    justify-content: center;
  }

  .hero-avatar-outer-glow {
    width: min(270px, 78vw);
    height: min(270px, 78vw);
  }

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

  .section-title {
    font-size: 2.1rem;
  }

  .skill-cat-header {
    justify-content: center;
    text-align: center;
  }
}

/* Small Devices & Mobile (<= 767px) */
@media (max-width: 767px) {
  .client-projects-track {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y;
  }

  .client-project-slide {
    flex-basis: min(88%, 32rem);
  }

  .project-cards-track,
  .honors-cards-track,
  .freelance-cards-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0.25rem 0.75rem 1rem;
    scroll-padding-inline: 0.75rem;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--accent-cyan) var(--bg-secondary);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .project-cards-track > .project-card-slide,
  .honors-cards-track > .honors-card-slide,
  .freelance-cards-track > .freelance-card-slide {
    flex: 0 0 min(92%, 34rem);
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
  }

  .project-cards-track::-webkit-scrollbar,
  .honors-cards-track::-webkit-scrollbar,
  .freelance-cards-track::-webkit-scrollbar {
    height: 6px;
  }

  .project-cards-track::-webkit-scrollbar-track,
  .honors-cards-track::-webkit-scrollbar-track,
  .freelance-cards-track::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 999px;
  }

  .project-cards-track::-webkit-scrollbar-thumb,
  .honors-cards-track::-webkit-scrollbar-thumb,
  .freelance-cards-track::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
    border-radius: 999px;
  }

  .hero-section,
  .about-section,
  .skills-section,
  .projects-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hero-section {
    overflow-x: clip;
  }

  .reveal-slide-left,
  .reveal-slide-right {
    transform: translateX(0);
  }

  .hero-name {
    font-size: 2.3rem;
    overflow-wrap: anywhere;
  }

  .hero-typewriter-wrap {
    font-size: 1.2rem;
  }

  .hero-avatar-outer-glow {
    width: 230px;
    height: 230px;
    padding: 6px;
  }

  .status-badge {
    font-size: 0.78rem;
    padding: 0.35rem 0.9rem;
    bottom: -10px;
  }

  .what-i-do-grid {
    grid-template-columns: 1fr;
  }

  .what-i-do-card:last-child {
    grid-column: auto;
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  .stat-card {
    padding: 1.2rem 0.8rem;
  }

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

  .skill-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
  }

  .skill-tile {
    width: 100%;
    min-width: 0;
    padding: 0.75rem 0.4rem;
  }

  .skill-tile-name {
    overflow-wrap: anywhere;
  }

  .timeline-wrap {
    padding-left: 2rem;
  }

  .timeline-dot {
    left: -2rem;
    width: 18px;
    height: 18px;
  }

  .floating-resume-btn {
    bottom: 20px;
    right: 16px;
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
  }

  .floating-whatsapp-btn {
    bottom: 74px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 1.45rem;
  }

  .project-title,
  .skill-cat-title {
    overflow-wrap: anywhere;
  }

  .project-filter-list {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 0 0.65rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .project-filter-list .project-filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  #client-showcase .d-flex.align-items-center.justify-content-between {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  #client-showcase .d-flex.align-items-center.justify-content-between h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* Extra Small Devices (<= 480px) */
@media (max-width: 480px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-name {
    font-size: clamp(1.8rem, 8vw, 2.2rem);
  }

  .hero-greeting {
    font-size: 1.55rem;
  }

  .hero-typewriter-wrap {
    font-size: 1.05rem;
    min-height: 2rem;
  }

  .hero-avatar-outer-glow {
    width: 200px;
    height: 200px;
  }

  .hero-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

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

  .section-title {
    font-size: 1.85rem;
  }

  .glass-card {
    padding: 1.25rem;
  }

  .skill-category-card {
    padding: 1.1rem;
  }

  .skill-cat-header {
    gap: 0.65rem;
    margin-bottom: 1rem;
  }

  .skill-cat-title {
    font-size: 1.05rem;
  }

  .hero-cta-buttons {
    align-items: stretch;
  }

  .hero-cta-buttons .btn {
    white-space: normal;
  }
}