/* ============================================
   RESET & GLOBAL STYLES
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #2C2C2C;
  background-color: #F4F0EB;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Merriweather', serif;
  font-weight: 300;
}


/* ============================================
   GLOBAL LAYOUT CONSTRAINTS (The 1440px Wall)
   ============================================ */

nav, main, footer {
  max-width: 1440px;        /* Stops growing at 1440px */
  width: calc(100% - 48px); /* Forces a 24px gap on left/right for smaller screens */
  margin: 0 auto;           /* Centres the 1440px column on giant screens */
}


/* ============================================
   CONTAINER — max 1440px centered
   ============================================ */

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ============================================
   1. HEADER / NAVIGATION
   ============================================ */

header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* CHANGED: Transparent background so the sky wave shows through */
  background-color: transparent; 
  /* Added a subtle blur so if we scroll down, text behind the sticky header is legible */
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px);
  padding-top: max(20px, env(safe-area-inset-top));
}

nav {
  display: flex;
  justify-content: flex-start; /* Groups them to the left */
  gap: 40px; /* Adds the specific space between the buttons */
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #2C2C2C; /* Minimal header separation line */
}

nav a {
  text-decoration: none;
  color: #2C2C2C;
  font-family: 'Merriweather', serif;
  font-weight: 400;
  font-size: 2.5rem;
  padding: 8px 0px;
  transition: opacity 0.2s ease;
}

nav a:hover {
  opacity: 0.6;
}

/* Active page link is bold */
nav a.active {
  font-weight: 700;
}


/* ============================================
   2. sky SECTION
   ============================================ */

.sky {
  position: relative;
  overflow: hidden;
  /* CHANGED: Pull the section UP under the transparent header, 
     then push the text DOWN so it doesn't overlap the menu */
  margin-top: -100px; 
  padding-top: 130px;
  /* CHANGED: Forces the sky area to be roughly 1/3 of the viewport height */
  min-height: max(30vh, 300px); 
  max-height: 450px;   
  display: flex;
  /* CHANGED: Tells the text to stick to the top (which is determined by the padding-top) */
  align-items: flex-start; 

  /* This tells the CSS to load the SVG file behind the text */
  background-image: url('sky-background.svg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.sky-content {
  position: relative;
  z-index: 1;
  width: calc(100% - 48px);
  max-width: 1440px;
  margin: 0 auto;
  /* I can adjust the far right padding number for the intro text */
  padding: 0 24px 0 24px; 
}

.sky-content h1 {
  /* Locks at 1.7rem on mobile, stretches smoothly, stops at 2rem on desktop */
  font-size: clamp(1.7rem, 3vw, 2rem); 
  margin-bottom: 10px;
  line-height: 1.3;
}

.sky-content h2 {
  /* I can do the same for the h2, making it slightly smaller */
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin-bottom: 10px;
  line-height: 1.3;
}

.sky-content p {
  padding-top: 7px;
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  line-height: 1.5;
  max-width: 768px;
  opacity: 0.85;
  text-indent: 1ch; /* Indent the first line to give it a more "book-like" feel */
}


/* ============================================
   3. PORTFOLIO CARDS SECTION
   ============================================ */

.portfolio {
  flex: 1; /* Push footer down */
  padding: 20px 0 60px; /* Changed to 20px to get card in full view in smartphone */
  width: 100%;
}

/* --- Universal Card Carousel (Desktop, Tablet & Mobile) --- */
.card-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  
/* Forces the carousel to be exactly the same width as the nav */
  width: calc(100% - 48px);

/* Adds padding so the Alabaster background shows around the cards */
  padding: 10px 0px 40px 0px; 
  
/* Hides the ugly default scrollbar but keeps scroll functionality */
  scrollbar-width: none; 
  -ms-overflow-style: none;
}

.card-carousel::-webkit-scrollbar {
  display: none;
}

.card {
  background-color: #FDFCFA;
  
  /* 
    CHANGES: 
    1. Made the bottom-right corner sky blue (#d6eaf8f0) to complement the menu bar in the wash effect.
    2. Added an invisible inline SVG 'noise' generator. This adds a physical "paper grain" texture over the gradient.
  */
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.11'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #FFFFFFE6 0%, #FDFCFACC 75%, #d6eaf8f0 100%);
  
  /* Blend the noise specks directly into the blue gradient */
  background-blend-mode: multiply;

  /* Slightly stronger default shadow to make it pop */
  box-shadow: 0 4px 16px #0000000D; 
  /* Slightly darker edge to give the paper physical definition */
  border: 1px solid #e3dcd1d0; 
  
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  
  /* Slowed the transition down a tiny bit (0.3s) for a smoother feel */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  scroll-snap-align: start;
  
  flex-shrink: 0;          
  width: 330px;            
  height: 460px;           
}

/* === ENHANCED HOVER LIFT === */
.card:hover {
  /* Lifts twice as high as before (-8px instead of -4px) */
  transform: translateY(-8px);
  /* Much deeper, wider shadow to emphasize the card floating up toward the user */
  box-shadow: 0 16px 32px #0000001F;
}

.card h1 {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  line-height: 1.3;
}

.card p {
  padding-top: 7px;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.5;
  opacity: 0.85;
  text-indent: 1ch; /* Indent the first line to give it a more "book-like" feel */
}


/* ============================================
   4. FOOTER
   ============================================ */

footer {
  text-align: center;
  padding: 20px 12px;
  border-top: 0.9px solid #c2c2c2f2; /* Subtle top border for the footer */
}

footer p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.8;
  opacity: 0.7;
}

footer .social-links {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

footer .social-links a {
  color: #2C2C2C;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

footer .social-links a:hover {
  opacity: 1;
}

/* LinkedIn & Email simple SVG icons */
footer .social-links a svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: #2C2C2C;
}


/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */


/* ===============================================
   RESPONSIVE — Height Related
   =============================================== */

/* For shorter screens (iPhone SE, smaller Androids) */
@media (max-height: 1000px) {
  
  .sky {
  min-height: max(25vh, 250px); 
  padding-bottom: 0px; /* Added cushion at the bottom */
  }

  .portfolio {
    padding-bottom: 10px; /* Changed to 10px to get footer in full view in smartphone */
  }

  /* --- Universal Card Carousel (Desktop, Tablet & Mobile) --- */
  .card-carousel {
  /* Adds padding so the Alabaster background shows around the cards */
    padding-bottom: 10px; /* Changed to 10px to get footer in full view in smartphone */
  }

  .card {
    padding-bottom: 5px; /* Reduce padding to save vertical space */
  }
  
  footer {
    padding: 10px 12px; /* Tighten up the footer */
  }

  footer .social-links {
    margin-top: 4px;    /* Reduce the gap */
  }

}


/* ===============================================
   RESPONSIVE — Width related
   =============================================== */

/* Mobile Phone (≤ 768px) */
@media (max-width: 768px) {

  nav a {
  font-size: 1.7rem;
  }
  
  .sky {
  min-height: max(20vh, 200px); 
  padding-bottom: 0px; /* Added cushion at the bottom */
  }

  /* Mobile sky text alignment */
  .sky-content {
    margin-left: 0; 
    margin-right: auto;
    padding-left: 48px;
  }

  .sky-content h1 {
    font-size: 1.8rem; /* Make header slightly smaller to save space */
    margin-bottom: 5px;
  }
  
  /* Mobile card alignment */
  .card-carousel {
    gap: 16px;
    /* top right bottom left - Tweak the 24px to align the first card on mobile */
    padding: 10px 0px 30px 0px;
  }

}


/* ===============================================
   RESPONSIVE — the Floor - Mobile Phone (≤ 400px)
   =============================================== */

@media (max-width: 400px) {

  nav {
    gap: clamp(12px, 6vw, 40px); /* Change space to Minimum, Preferred, Maximum */
  }

  nav a {
  font-size: 1.6rem;
  }

  .sky {
    padding-top: 120px;
    min-height: max(15vh, 150px); 
    padding-bottom: 0px; /* Added cushion at the bottom */ 
  }

  .sky-content h1 {
    font-size: clamp(1.4rem, 2vw, 1.7rem); 
    margin-bottom: 0;
  }

  .sky-content h2 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    margin-bottom: 0;
  }

  .sky-content p {
      font-size: clamp(0.9rem, 2vw, 1.1rem);
      line-height: 1.5;
  }

  .card {
    width: 280px; /* Shrink the card width */
    height: 380px; /* Shrink the card height */
    padding: 20px 28px;
  }

  .card p {
    padding-top: 0px;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
  }

  footer {
    padding: 10px 12px; /* Tighten up the footer */
  }

  footer p {
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  line-height: 1.6;
  opacity: 0.7;
  }

  footer .social-links {
    margin-top: 4px;    /* Reduce the gap */
    font-size: 0.7rem;
  }

}


/* ===============================================
   4K & ULTRA-WIDE SCREENS (HARDWARE DETECTION)
   =============================================== */

/* min-device-width forces these rules based on the physical screen. */
@media screen and (min-device-width: 2500px) {
  
  /* Expand the "wall" so full-screen 4K uses the space. */
  nav, main, footer, .container, .sky-content, .card-carousel {
    max-width: 2400px;
  }

  /* Scale up the fonts so they can be read */
  nav a { font-size: 3.5rem; }
  .sky-content h1 { font-size: 3.5rem; }
  .sky-content h2 { font-size: 2.8rem; }
  .sky-content p { font-size: 2rem; max-width: 1200px; }
  
  /* Scale up cards */
  .card {
    width: 500px; 
    height: 700px; 
    padding: 50px 40px; 
  }

  .card h1 { font-size: 2.5rem; }
  .card p { font-size: 1.8rem; }

}