/* Background canvas for hover previews */
.bg-canvas {
  position: fixed;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; */
  z-index: 0;              /* ensure it's behind content; increase if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;    /* don't interfere with mouse interaction */
  opacity: 0;
  transition: opacity 180ms ease; /* fast fade-in for instant feel */
  will-change: opacity, background-image;
  filter: blur(2px) saturate(1.05) brightness(0.9);
}

/* visible class toggled by JS */
.bg-canvas.visible {
  opacity: 1;
  filter: blur(3px) saturate(1) brightness(0.95);
}

/* ensure your content is above the canvas (example) */
.main-content, .navbar, .content-wrapper {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   Main content & layout grid
   ---------------------------------------------------------- */
   html {
    /* Set height to auto so it expands with content, not fixed to 100vh */
    height: auto; 
    /* Allow scrolling on the HTML element if needed, though usually body handles it */
    overflow-y: auto; 
}
body {
    /* Ensure body expands to fit all content */
    min-height: 100vh;
    height: auto; 
    /* Standard flow */
    overflow-y: visible; 
}

.main-content {
  position: relative;
  z-index: 20;             /* above canvas */
  /* leave room for the navbar at top (navbar is absolute) */
  padding-top: clamp(100px, 10vw, 175px);      /* fluid space between page top and first content */
  padding-left: clamp(20px, 5vw, 80px);      /* fluid side padding */
  padding-right: clamp(20px, 5vw, 80px);
  padding-bottom: 80px;
  box-sizing: border-box;
  min-height: 100vh;
}

/* stacked blocks container */
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 64px); /* fluid gap between blocks */
}

/* each content block uses the same 12-column grid so everything lines up */
.block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 12px); /* fluid gap */
  align-items: start;
  
}

/* column helpers (match nav columns)
   - col-1 spans 3 columns (narrow header column)
   - col-5 spans 3 columns (project names)
   - col-9 spans 2 columns (years)
*/
.col-1 { grid-column: 1 / span 3; }
.col-5 { grid-column: 5 / span 3; }
.col-9 { grid-column: 9 / span 2; }

/* block heading styling (fluid font size, uppercase, black) */
.block h2 {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 20px); /* fluid font size */
  line-height: 1;
  color: inherit;
  font-weight: 400;
  letter-spacing: clamp(0.8px, 0.1vw, 1.2px); /* fluid letter spacing */
}

/* ----------------------------------------------------------
   Projects list & Years list — precise row sizing
   ----------------------------------------------------------
   Important: both lists use the same grid row sizing:
   grid-auto-rows: 20px -> each <li> occupies exactly 20px height
   row-gap controls spacing between rows (vertical rhythm)
*/
.projects-list,
.years-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: clamp(16px, 2vw, 20px);    /* fluid row height */
  row-gap: clamp(12px, 2vw, 18px);           /* fluid vertical distance between rows */
  align-items: center;     /* vertically center inline content inside the row */
}

/* project anchors visuals */
.projects-list a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-size: clamp(16px, 1.2vw, 20px); /* fluid font size */
  line-height: 1;       /* ensures visual centering within the row */
  transition: color .18s ease, transform .18s ease;
  white-space: nowrap;
}

/* hover/focus feedback */
.projects-list a:hover,
.projects-list a:focus {
  color: rgb(40,40,40);
  transform: translateX(-4px);
  outline: none;
}

/* years styling */
.years-list li {
  color: inherit;
  font-size: clamp(16px, 1.2vw, 20px); /* fluid font size */
  line-height: 1;       /* same exact row height */
  list-style: none;
}

/* Make sure the lists themselves are visually aligned in columns:
   we already positioned parent .col-5 and .col-9 into the correct grid columns,
   so the nth rows of .projects-list and .years-list will align because both use
   identical grid-auto-rows and the same row-gap. */

/* accessibility focus ring */
.projects-list a:focus {
  box-shadow: 0 0 0 3px rgba(30,0,255,0.12);
  border-radius: 2px;
}

.block h2 {
  /* Ensure it can scale down near 12px */
  font-size: clamp(12px, 1.2vw, 20px); 
  /* ... other styles ... */
}

/* 4. Project Links / Years List Items */
.projects-list a,
.years-list li {
  /* Ensure it can scale down near 12px */
  font-size: clamp(12px, 1.2vw, 20px); 
  /* ... other styles ... */
}

/* 5. Project Row Height (to match 12px text minimum) */
.projects-list,
.years-list {
  /* Ensure row height shrinks to fit 12px text + a little space */
  grid-auto-rows: clamp(14px, 2vw, 20px); 
  /* ... other styles ... */
}
/* ----------------------------------------------------------
   Small visual helpers (optional)
   ---------------------------------------------------------- */
/* ensure nav & block elements sit above canvas */
.navbar, .main-content, .block { position: relative; z-index: 2; }

@media screen and (max-width: 767px) {
    
    
    /* =======================================
       2. MAIN CONTENT GLOBAL & ALIGNMENT
       ======================================= */
    html, body {
        /* Set base font size for rem/em calculations if used, though we use px */
        font-size: 12px; 
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .main-content {
        padding-top: 80px;
        padding-left: 10px; 
        padding-right: 10px;
    }

    .content-wrapper {
        gap: 80px; 
    }

    .block {
        gap: 6px; 
    }

    /* Redefine column spans for content */
    .col-1 { grid-column: 1 / span 4; }
    .col-5 { grid-column: 5 / span 8; }
    .col-9 { display: none; } /* HIDE YEARS COLUMN */

    /* --------------------------------------
       3. UNIFORM TEXT SIZE FOR CONTENT
       -------------------------------------- */

    /* Headings (H2) */
    .block h2 {
        /* 🔥 UNIFORM TEXT SIZE: 12px for headings */
        font-size: 12px; 
        line-height: 1.2;
        letter-spacing: 0.5px;
        font-weight: 500; /* Optionally make it slightly bolder to stand out */
    }

    /* Project List and Years List Item Sizing */
    .projects-list,
    .years-list {
        /* Set a fixed, tight row height to accommodate 12px text */
        grid-auto-rows: 14px; 
        row-gap: 5px; 
    }
    
    .projects-list a,
    .years-list li {
        /* 🔥 UNIFORM TEXT SIZE: 12px for project and year lists */
        font-size: 12px; 
        line-height: 14px; 
        white-space: normal; 
        padding-left: 0; 
        padding-right: 0;
    }
}