/* Mobile First Approach */

/* Base styles are already optimized for mobile in styles.css */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    padding: var(--spacing-24);
  }
  
  .profile-image-container {
    width: 140px;
    height: 140px;
  }
  
  .headline {
    font-size: 2rem;
  }
  
  .description {
    font-size: 1.125rem;
  }
  
  .button-content {
    padding: var(--spacing-20);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    padding: var(--spacing-32);
  }
  
  .profile-image-container {
    width: 160px;
    height: 160px;
    margin-bottom: var(--spacing-24);
  }
  
  .headline {
    font-size: 2.25rem;
    margin-bottom: var(--spacing-12);
  }
  
  .description {
    font-size: 1.25rem;
    max-width: 600px;
    margin-bottom: var(--spacing-32);
  }
  
  .link-button {
    border-radius: var(--radius-xl);
  }
  
  .button-content {
    padding: var(--spacing-24);
  }
  
  .location-icon {
    width: 48px;
    height: 48px;
  }
  
  .location-name {
    font-size: 1.125rem;
  }
  
  .location-details {
    font-size: 1rem;
  }
  
  .social-link {
    width: 48px;
    height: 48px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Add more desktop specific styles if needed */
  .container {
    padding: var(--spacing-40);
  }
  
  .link-button:hover {
    transform: translateY(-4px);
  }
  
  /* Additional hover effects only on desktop */
  .social-link:hover {
    transform: scale(1.15);
  }
}

/* Handle very small devices */
@media (max-width: 320px) {
  .container {
    padding: var(--spacing-8);
  }
  
  .profile-image-container {
    width: 100px;
    height: 100px;
  }
  
  .headline {
    font-size: 1.5rem;
  }
  
  .description {
    font-size: 0.875rem;
  }
  
  .button-content {
    padding: var(--spacing-12);
  }
  
  .location-icon {
    width: 36px;
    height: 36px;
    margin-right: var(--spacing-12);
  }
  
  .location-name {
    font-size: 0.875rem;
  }
  
  .location-details {
    font-size: 0.75rem;
  }
}