/**
 * Mobile CSS for Josh Wallace Portfolio
 * This file contains styles specifically for mobile devices
 */

/* Apply mobile styles for screens up to 768px width */
@media (max-width: 768px) {

  /* === BANNER SECTION === */
  .banner {
    padding: 1rem 4%;
  }

  .profile-container {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .profile-photo {
    width: 120px;
    height: 120px;
  }

  h1 {
    font-size: 2rem;
  }

  .profile-info h2 {
    font-size: 1.1rem;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
  }

  .contact-info span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }

  .contact-info .separator {
    display: none;
  }

  .action-buttons {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
  }

  .primary-button,
  .secondary-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .primary-button i,
  .secondary-button i {
    display: none;
  }

  /* === MAIN CONTENT === */
  h2:after {
    left: 50%;
    transform: translateX(-50%);
  }

  .about-section,
  .experience-section,
  .education,
  .skills {
    padding: 1.5rem;
  }

  h2 {
    text-align: center;
  }

  /* === EXPERIENCE SECTION === */
  .experience-card {
    padding: 1rem;
    border-left-width: 2px;
  }

  .company {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .date-range {
    margin-left: 0;
    font-size: 0.9rem;
  }

  /* === EDUCATION & SKILLS SECTION === */
  .education-skills-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .education-item {
    text-align: center;
  }

  .skills-list {
    padding-left: 1rem;
  }

  /* === FOOTER === */
  .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .footer-contact {
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
  }
}

/* Extra small screens (phones under 480px) */
@media (max-width: 480px) {
  .banner {
    padding: 1.5rem 3%;
  }

  .profile-photo {
    width: 100px;
    height: 100px;
  }

  h1 {
    font-size: 1.75rem;
  }

  .profile-info h2 {
    font-size: 1rem;
  }

  .contact-info {
    font-size: 0.9rem;
  }

  .contact-info i {
    font-size: 1rem;
  }

  /* Smaller padding for content sections */
  .about-section,
  .experience-section,
  .education,
  .skills {
    padding: 1.25rem;
  }

  .experience-card {
    padding: 0.9rem;
  }

  /* === PROJECTS PAGE STYLES === */
  .project-gallery {
    grid-template-columns: 1fr;
  }

  .project-image {
    height: 200px;
  }

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

  .horizontal-scroll-gallery .gallery-item {
    width: 85%;
  }

  .horizontal-scroll-gallery .project-image {
    height: 220px;
  }

  .design-category h3:after {
    left: 50%;
    transform: translateX(-50%);
  }

  .design-category h3 {
    text-align: center;
  }

  .tech-stack {
    justify-content: center;
  }
}

/* === PROJECT-SPECIFIC STYLES FOR LARGER TABLETS === */
@media (max-width: 992px) {
  .project-gallery {
    grid-template-columns: 1fr;
  }

  .project-image {
    height: 300px;
  }
}