/* Responsive Styles */

/* Media Queries */

/* Extra Small Devices (phones, 576px and down) */
@media (max-width: 576px) {
    html {
      font-size: 58%;
    }
    
    /* Typography */
    h1 {
      font-size: var(--font-size-4xl);
    }
    
    h2 {
      font-size: var(--font-size-3xl);
    }
    
    .section-title {
      font-size: var(--font-size-3xl);
    }
    
    /* Layout */
    .section {
      padding: var(--space-6) 0;
    }
    
    .hero {
      padding-top: 10rem;
      text-align: center;
      min-height: auto;
    }
    
    .hero-content {
      margin: 0 auto;
    }
    
    .hero-image {
      position: relative;
      top: auto;
      right: auto;
      transform: none;
      width: 100%;
      height: 30vh;
      margin-top: var(--space-4);
    }
    
    .hero-cta {
      flex-direction: column;
      gap: var(--space-2);
    }
    
    .hero-cta .btn {
      width: 100%;
    }
    
    .about-content,
    .skills-content,
    .contact-content {
      grid-template-columns: 1fr;
    }
    
    .work-grid {
      grid-template-columns: 1fr;
    }
    
    .footer-content {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    
    .footer-links {
      grid-template-columns: 1fr 1fr;
    }
    
    .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: var(--space-2);
    }
    
    /* Components */
    .mobile-menu-toggle {
      display: flex;
    }
    
    .main-nav {
      position: fixed;
      top: 7rem;
      left: 0;
      width: 100%;
      background-color: var(--color-background);
      box-shadow: var(--shadow-md);
      padding: var(--space-3);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-1rem);
      transition: all var(--transition-medium);
      z-index: var(--z-dropdown);
    }
    
    .main-nav.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .main-nav ul {
      flex-direction: column;
      gap: var(--space-2);
    }
    
    .main-nav a {
      display: block;
      padding: var(--space-2);
    }
    
    /* About */
    .about-image {
      order: -1;
      margin-bottom: var(--space-4);
    }
    
    .about-stats {
      grid-template-columns: 1fr;
    }
    
    /* Work */
    .work-filters {
      flex-wrap: wrap;
    }
    
    .work-filter {
      flex: 0 0 calc(50% - var(--space-2));
      text-align: center;
    }
    
    /* Testimonials */
    .testimonials-slider {
      padding: 0 var(--space-2);
    }
    
    .testimonial-content {
      padding: var(--space-3);
    }
    
    /* Contact */
    .contact-form-container {
      margin-top: var(--space-4);
    }
    
    /* Footer */
    .newsletter-form {
      flex-direction: column;
    }
    
    .newsletter-form input,
    .newsletter-form button {
      width: 100%;
      border-radius: var(--border-radius-md);
    }
    
    .newsletter-form button {
      margin-top: var(--space-2);
    }
  }
  
  /* Small Devices (tablets, 577px - 767px) */
  @media (min-width: 577px) and (max-width: 767px) {
    html {
      font-size: 60%;
    }
    
    .hero {
      padding-top: 12rem;
    }
    
    .hero-content {
      margin: 0 auto;
      text-align: center;
    }
    
    .hero-image {
      position: relative;
      top: auto;
      right: auto;
      transform: none;
      width: 100%;
      height: 40vh;
      margin-top: var(--space-4);
    }
    
    .about-content,
    .skills-content,
    .contact-content {
      grid-template-columns: 1fr;
    }
    
    .about-image {
      order: -1;
      margin-bottom: var(--space-4);
    }
    
    .work-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .mobile-menu-toggle {
      display: flex;
    }
    
    .main-nav {
      position: fixed;
      top: 7rem;
      left: 0;
      width: 100%;
      background-color: var(--color-background);
      box-shadow: var(--shadow-md);
      padding: var(--space-3);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-1rem);
      transition: all var(--transition-medium);
      z-index: var(--z-dropdown);
    }
    
    .main-nav.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .main-nav ul {
      flex-direction: column;
      gap: var(--space-2);
    }
    
    .footer-content {
      grid-template-columns: 1fr 1fr;
    }
    
    .footer-newsletter {
      grid-column: span 2;
      margin-top: var(--space-4);
    }
  }
  
  /* Medium Devices (tablets, 768px - 991px) */
  @media (min-width: 768px) and (max-width: 991px) {
    html {
      font-size: 62.5%;
    }
    
    .hero-content {
      max-width: 50rem;
    }
    
    .hero-image {
      width: 40%;
    }
    
    .work-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .mobile-menu-toggle {
      display: flex;
    }
    
    .main-nav {
      position: fixed;
      top: 7rem;
      left: 0;
      width: 100%;
      background-color: var(--color-background);
      box-shadow: var(--shadow-md);
      padding: var(--space-3);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-1rem);
      transition: all var(--transition-medium);
      z-index: var(--z-dropdown);
    }
    
    .main-nav.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .main-nav ul {
      flex-direction: column;
      gap: var(--space-2);
    }
  }
  
  /* Large Devices (desktops, 992px - 1199px) */
  @media (min-width: 992px) and (max-width: 1199px) {
    html {
      font-size: 62.5%;
    }
    
    .hero-content {
      max-width: 55rem;
    }
    
    .work-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* Extra Large Devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    html {
      font-size: 62.5%;
    }
  }
  
  /* Landscape Mode */
  @media (max-height: 500px) and (orientation: landscape) {
    .hero {
      min-height: auto;
      padding: 12rem 0 var(--space-6);
    }
    
    .hero-content {
      margin: 0;
    }
    
    .hero-image {
      height: 50vh;
    }
    
    .scroll-indicator {
      display: none;
    }
  }
  
  /* Print Styles */
  @media print {
    .theme-toggle,
    .header,
    .mobile-menu-toggle,
    .scroll-indicator,
    .work-filters,
    .testimonial-controls,
    .contact-form-container,
    .footer-newsletter,
    .footer-social,
    .cursor,
    .cursor-follower {
      display: none !important;
    }
    
    body {
      color: #000;
      background-color: #fff;
    }
    
    .container {
      width: 100%;
      max-width: none;
    }
    
    .section {
      padding: 2rem 0;
      page-break-inside: avoid;
    }
    
    .work-grid,
    .about-content,
    .skills-content,
    .contact-content {
      grid-template-columns: 1fr 1fr;
    }
    
    a {
      color: #000;
    }
    
    a[href]:after {
      content: " (" attr(href) ")";
    }
    
    abbr[title]:after {
      content: " (" attr(title) ")";
    }
    
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
      content: "";
    }
    
    pre, blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
    
    thead {
      display: table-header-group;
    }
    
    tr, img {
      page-break-inside: avoid;
    }
    
    img {
      max-width: 100% !important;
    }
    
    p, h2, h3 {
      orphans: 3;
      widows: 3;
    }
    
    h2, h3 {
      page-break-after: avoid;
    }
  }