/* =============================================================================
   Claudio Bonaglia – Engineering Portfolio
   Complete new modern dark design – 2026
   Clean, professional, slightly futuristic tech feel
   Updated to add distances (paddings/margins) from borders
   And to stick footer to bottom of viewport if content is short
   Footer centering reinforced; project pages (.post) now centered with margin auto
   Card grid now centers items without stretching full width
   Adjusted card grid to force 2 cards side-by-side when space allows (minmax to 1fr)
   ============================================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

   :root {
     /* Color palette – dark with electric blue accent */
     --bg: #0d0d0d;
     --surface: #141414;
     --surface-2: #1c1c1c;
     --text-primary: #f0f0f0;
     --text-secondary: #b0b0b0;
     --text-muted: #777777;
     --accent: #00d4ff;          /* bright cyan-blue */
     --accent-hover: #00ffaa;     /* teal-green on hover for energy */
     --border: #2a2a2a;
     --shadow: rgba(0, 212, 255, 0.15);
   }

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

   html {
     scroll-behavior: smooth;
     height: 100%; /* For sticky footer */
   }

   body {
     font-family: 'Inter', system-ui, sans-serif;
     background: var(--bg);
     color: var(--text-primary);
     line-height: 1.65;
     font-size: 16px;
     overflow-x: hidden;
     padding: 0 2rem; /* Added global horizontal padding to create distance from browser borders */
     display: flex; /* For sticky footer */
     flex-direction: column; /* For sticky footer */
     min-height: 100%; /* For sticky footer */
   }

   /* =============================================================================
      Layout & Containers
      ============================================================================= */

   .container {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 1rem; /* Reduced inner padding since body now has padding */
   }

   main {
     flex: 1; /* Grow to push footer down */
     margin: 2rem auto; /* Added margin for vertical spacing from header/footer */
     max-width: 1100px; /* Align with container width */
   }

   /* =============================================================================
      Header
      ============================================================================= */

   .header {
     text-align: center;
     padding: 6rem 2rem 4rem;
     background: linear-gradient(to bottom, #111114, transparent);
     margin: 0 auto; /* Center if needed */
     max-width: 1100px; /* Align with container */
   }

   .header h1 {
     font-size: 3.8rem;
     font-weight: 700;
     letter-spacing: -1px;
     margin-bottom: 0.5rem;
     background: linear-gradient(90deg, #ffffff, var(--accent));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }

   .header p {
     font-size: 1.35rem;
     color: var(--text-secondary);
     font-weight: 400;
   }

   .header.small {
     padding: 4rem 2rem 2rem;
   }

   .header.small h1 {
     font-size: 2.8rem;
   }

   /* =============================================================================
      Typography
      ============================================================================= */

   h2 {
     font-size: 2.2rem;
     margin: 3rem 0 1.5rem;
     position: relative;
     padding-bottom: 0.8rem;
   }

   h2::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 60px;
     height: 4px;
     background: var(--accent);
     border-radius: 2px;
   }

   h3 {
     font-size: 1.5rem;
     margin: 2rem 0 1rem;
     color: var(--accent);
   }

   p, li {
     color: var(--text-secondary);
   }

   ul {
     padding-left: 1.4rem;
   }

   li {
     margin-bottom: 0.5rem;
   }

   a {
     color: var(--accent);
     text-decoration: none;
     transition: color 0.25s ease;
   }

   a:hover {
     color: var(--accent-hover);
   }

   /* =============================================================================
      Project Grid & Cards
      ============================================================================= */

   .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Adjusted to 1fr max so cards expand equally, forcing 2 side-by-side when possible */
     gap: 2rem;
     margin-top: 3rem;
     justify-content: center; /* Center cards horizontally */
   }

   .card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 12px;
     overflow: hidden;
     transition: all 0.35s ease;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
     margin: 1rem 0; /* Added margin to cards for spacing from borders */
   }

   .card:hover {
     transform: translateY(-12px);
     border-color: var(--accent);
     box-shadow: 0 20px 40px var(--shadow);
   }

   .card h3 {
     padding: 1.5rem 1.5rem 0.5rem;
     font-size: 1.4rem;
     color: var(--text-primary);
   }

   .card p {
     padding: 0 1.5rem 1.5rem;
     font-size: 1rem;
   }

   /* =============================================================================
      Project Detail Pages (.post)
      ============================================================================= */

   .post {
     background: var(--surface);
     padding: 3rem;
     border-radius: 16px;
     border: 1px solid var(--border);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
     margin: 2rem auto; /* Changed to auto for horizontal centering */
     max-width: 900px; /* Slightly narrower for better readability and centering */
   }

   .meta {
     color: var(--text-muted);
     font-size: 0.95rem;
     margin-bottom: 2rem;
     font-family: 'JetBrains Mono', monospace;
   }

   .back {
     margin-top: 4rem;
     font-size: 1.1rem;
   }

   /* =============================================================================
      Footer – completely redesigned, now sticky if content short
      ============================================================================= */

   footer {
     margin-top: auto; /* Push to bottom */
     padding: 4rem 2rem 2rem;
     background: var(--surface-2);
     border-top: 1px solid var(--border);
     text-align: center; /* Reinforce centering for all text */
   }

   .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 2.5rem;
     margin-bottom: 2rem;
     font-size: 1.1rem;
     max-width: 1100px; /* Align with other containers */
     margin-left: auto;
     margin-right: auto;
   }

   .footer-content a {
     display: flex;
     align-items: center;
     gap: 0.6rem;
     padding: 0.6rem 0;
     transition: all 0.25s ease;
   }

   .footer-content a:hover {
     transform: translateY(-3px);
     color: var(--accent-hover);
   }

   .footer-content i {
     font-size: 1.4rem;
   }

   .copyright {
     text-align: center;
     font-size: 0.9rem;
     color: var(--text-muted);
     margin-top: 2rem;
     max-width: 1100px; /* Align with other containers */
     margin-left: auto;
     margin-right: auto;
   }

   /* =============================================================================
      Responsive Adjustments
      ============================================================================= */

   @media (max-width: 640px) {
     body { padding: 0 1rem; } /* Reduce padding on small screens */
     .header h1 { font-size: 3rem; }
     .header p { font-size: 1.2rem; }
     .post { padding: 2rem; }
     h2 { font-size: 1.9rem; }
   }


    /* Project Images */
  .project-image {
    margin: 2.5rem 0;
    text-align: center;
  }

  .project-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 212, 255, 0.18);
    border: 1px solid var(--border);
  }

  .project-image figcaption {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-style: italic;
  }