/* Fluid Layout Fixes */

/* Ensure all elements respect their containers */
* {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix for potential overflow issues */
html,
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Ensure images don't break layout */
img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Ensure containers are fluid */
.container {
  width: 100% !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 576px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 992px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Fix for grid layouts */
.grid,
.container-card,
.container-stack {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
}

/* Fix for flex layouts */
.flex {
  display: flex;
  flex-wrap: wrap;
}

/* Fix for potential text overflow */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Fix for form elements */
input,
textarea,
select,
button {
  max-width: 100%;
}

/* Fix for tables */
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Fix for iframes and embeds */
iframe,
embed,
object,
video {
  max-width: 100%;
  height: auto;
}

/* Fix for navigation on small screens */
@media (max-width: 768px) {
  .nav-item {
    width: 100%;
  }

  .nav-item a {
    width: 100%;
    display: block;
  }
}

/* Fix for portfolio filter on small screens */
@media (max-width: 576px) {

  .filter-list,
  .category-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }

  .filter-item,
  .category-tab {
    margin-bottom: 0.5rem;
  }
}

/* Fix for contact section on small screens */
@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
  }

  .contact-details {
    margin-bottom: 2rem;
  }
}

/* Fix for footer on small screens */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Fix for modal on small screens */
@media (max-width: 576px) {
  .card-modal {
    width: 95%;
    flex-direction: column;
  }

  .card-modal .brand {
    height: 200px;
  }
}

/* Fix for about section on small screens */
@media (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .avatar-icon {
    margin: 0 auto 1.5rem;
  }

  .git-account {
    display: inline-block;
    margin: 1rem auto;
  }

  /* Improve About Me section container */
  .about-section .container {
    padding: 0 1rem;
  }

  .book-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  /* Fix social links on mobile */
  .social-links-group {
    width: 100%;
  }

  /* Ensure profile details are properly aligned */
  .profile-details {
    width: 100%;
    max-width: 100%;
  }

  .detail-item {
    width: 100%;
  }
}

/* Additional fixes for very small screens */
@media (max-width: 375px) {
  .about-section .container {
    padding: 0 0.5rem;
  }

  .section-title h2 {
    font-size: 1.5rem;
  }

  .profile-links {
    gap: 0.5rem;
  }

  .social-links-group {
    gap: 0.5rem;
  }

  .download-buttons {
    gap: 0.5rem;
  }
}

/* Fix for tech stack section on small screens */
@media (max-width: 576px) {
  .stack-item {
    min-height: auto;
  }

  .img-team {
    height: 150px;
  }
}

/* Fix for hero section on small screens */
@media (max-width: 576px) {
  .home-text h1 {
    font-size: 2rem;
  }

  .home-text p {
    font-size: 1rem;
  }

  .home-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .home-buttons .btn {
    width: 100%;
  }
}

/* Fix for header on small screens */
@media (max-width: 576px) {
  .header .container {
    padding: 0 1rem;
  }

  .logo-text {
    font-size: 1.2rem;
  }

  .main-logo {
    width: 30px;
    height: 30px;
  }
}

/* Fix for section spacing */
@media (max-width: 576px) {
  .section {
    padding: 3rem 0;
  }

  .section-title {
    margin-bottom: 2rem;
  }
}

/* Fix for card spacing */
@media (max-width: 576px) {
  .card {
    margin-bottom: 1.5rem;
  }

  .card h2 {
    font-size: 1.25rem;
  }

  .card p {
    font-size: 0.9rem;
  }
}

/* Fix for stack item spacing */
@media (max-width: 576px) {
  .stack-item {
    margin-bottom: 1.5rem;
  }

  .item-description h3 {
    font-size: 0.9rem;
  }

  .item-description p {
    font-size: 0.8rem;
  }
}

/* Fix for contact form spacing */
@media (max-width: 576px) {
  .thank-you-form {
    padding: 1.5rem;
  }

  .thank-you-form h3 {
    font-size: 1.5rem;
  }

  .form-group {
    margin-bottom: 1rem;
  }
}

/* Fix for footer spacing */
@media (max-width: 576px) {
  .footer {
    padding: 3rem 0 1rem;
  }

  .footer-content {
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .footer-logo p,
  .footer-links ul li a,
  .footer-newsletter p,
  .footer-bottom p {
    font-size: 0.8rem;
  }
}