/* 
  Responsive Styles for Portfolio Website
  Author: Your Name
  Date: May 2025
*/

/* ===== Large Devices (Desktops, less than 1200px) ===== */
@media (max-width: 1200px) {
    .container {
      max-width: 960px;
    }
    
    .hero h1 {
      font-size: 3rem;
    }
    
    .hero h2 {
      font-size: 1.75rem;
    }
  }
  
  /* ===== Medium Devices (Tablets, less than 992px) ===== */
  @media (max-width: 992px) {
    .container {
      max-width: 720px;
    }
    
    /* Global Adjustments */
    h1 {
      font-size: 2.2rem;
    }
    
    h2 {
      font-size: 1.8rem;
    }
    
    section {
      padding: var(--space-lg) 0;
    }
    
    /* Hero Section */
    .hero {
      padding: var(--space-lg) 0;
    }
    
    .hero::after {
      width: 35%;
      clip-path: polygon(100% 0, 100% 100%, 20% 100%, 0 50%, 20% 0);
    }
    
    .hero h1 {
      font-size: 2.5rem;
    }
    
    .hero h2 {
      font-size: 1.5rem;
    }
    
    .hero p {
      font-size: 1.1rem;
    }
    
    /* Projects Grid */
    .projects-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    /* Skills Overview */
    .skills-container {
      grid-template-columns: repeat(2, 1fr);
    }
    
    /* About Page */
    .about-grid {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    
    .about-image {
      text-align: center;
    }
    
    .about-image img {
      max-width: 300px;
    }
    
    /* Timeline (About Page) */
    .timeline-content {
      width: calc(100% - 60px);
    }
    
    /* Projects Page */
    .project-details-grid {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    
    /* Contact Page */
    .contact-container {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
  }
  
  /* ===== Small Devices (Landscape Phones, less than 768px) ===== */
  @media (max-width: 768px) {
    .container {
      max-width: 540px;
    }
    
    /* Header & Navigation */
    header {
      padding: var(--space-sm) 0;
    }
    
    .nav-links {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      background-color: var(--dark-surface);
      box-shadow: var(--shadow-md);
      padding: var(--space-md) 0;
      align-items: center;
      z-index: 100;
      transform: translateY(-10px);
      opacity: 0;
      visibility: hidden;
      transition: all var(--transition-medium);
    }
    
    .nav-links.show {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }
    
    .nav-links li {
      margin: var(--space-sm) 0;
      width: 100%;
      text-align: center;
    }
    
    .nav-links a {
      display: block;
      padding: var(--space-sm) 0;
    }
    
    .hamburger {
      display: flex;
      cursor: pointer;
    }
    
    .hamburger.active span:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
    }
    
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
    }
    
    /* Hero Section */
    .hero::after {
      width: 30%;
      opacity: 0.5;
    }
    
    /* Projects Grid */
    .projects-grid {
      grid-template-columns: 1fr;
    }
    
    /* Skills Overview */
    .skills-container {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    
    /* Footer */
    .footer-content {
      flex-direction: column;
      gap: var(--space-md);
    }
    
    /* Call to Action */
    .call-to-action h2 {
      font-size: 1.8rem;
    }
    
    /* Contact Page */
    .info-item {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .info-icon {
      margin-right: 0;
      margin-bottom: var(--space-sm);
    }
    
    .social-contact {
      text-align: center;
    }
    
    .social-icons {
      justify-content: center;
    }
  }
  
  /* ===== Extra Small Devices (Portrait Phones, less than 576px) ===== */
  @media (max-width: 576px) {
    .container {
      padding: 0 var(--space-md);
    }
  
    /* Typography */
    h1 {
      font-size: 2rem;
    }
    
    h2 {
      font-size: 1.6rem;
    }
    
    /* Hero Section */
    .hero h1 {
      font-size: 2.2rem;
    }
    
    .hero h2 {
      font-size: 1.3rem;
    }
    
    .hero p {
      font-size: 1rem;
    }
    
    .cta-buttons {
      flex-direction: column;
      gap: var(--space-sm);
      width: 100%;
    }
    
    .cta-buttons .btn {
      width: 100%;
    }
    
    /* Project Cards */
    .project-card {
      margin-bottom: var(--space-md);
    }
    
    /* Skill Items */
    .skill-items {
      flex-wrap: wrap;
      justify-content: center;
    }
    
    /* About Page */
    .about-cta {
      flex-direction: column;
      gap: var(--space-sm);
    }
    
    .about-cta .btn {
      width: 100%;
    }
    
    /* Timeline (About Page) */
    .timeline::before {
      left: 20px;
    }
    
    .timeline-item {
      padding-left: 50px;
    }
    
    .timeline-dot {
      left: 11px;
    }
    
    .timeline-date {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      margin-bottom: var(--space-sm);
      display: inline-block;
      padding: var(--space-xs) var(--space-sm);
      background-color: var(--marine-blue-dark);
      border-radius: 4px;
      font-size: 0.8rem;
    }
    
    .timeline-content {
      width: 100%;
    }
    
    /* Contact Form */
    .contact-form {
      padding: var(--space-lg) var(--space-md);
    }
    
    .contact-info {
      padding: var(--space-lg) var(--space-md);
    }
  }
  
  /* ===== Print Styles ===== */
  @media print {
    header, 
    footer, 
    .call-to-action,
    nav,
    .availability,
    .cta-buttons,
    .more-about,
    .view-all {
      display: none;
    }
    
    body {
      background-color: white;
      color: black;
    }
    
    .container {
      max-width: 100%;
      width: 100%;
    }
    
    a {
      color: #0a4d70;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: #000;
    }
    
    .project-card,
    .about-grid,
    .skill-category {
      break-inside: avoid;
      page-break-inside: avoid;
    }
  }