:root {
  --bg: #4c8672;
  --content:rgb(55, 88, 77);
  --content:rgb(55, 88, 77);
  --fg: #e4e4ec;
  --black: #000000;
  --primary: #c7d7ce;
}
html {
  font-family: 'Roboto', sans-serif;
}
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  position: relative; /* establish stacking context */
  background-color: var(--bg);
}


#tag-filters {
  position: sticky;
  top: 0;                   /* sticks to the top of the viewport */
  z-index: 100;             /* sits above other content */
  background-color: rgb(255, 255, 255);
  width: 100%;
  margin-bottom: 1rem;
}

/* horizontal list */
.tag-nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: flex-start; /* align left */
  gap: 0.5rem;
  position: static;

}

/* each item holds a link + optional separator */
.tag-nav-item {
  display: flex;
  align-items: center;
}

/* the separators */
.tag-separator {
  margin: 0 0.5rem;
  font-size: 1.8rem;
  color: var(--black);
}

/* links */
.tag-filter {
  color: var(--black);
  text-decoration: none;
  font-size: 2rem;
}
.tag-filter:hover {
    text-decoration: underline;

}
.tag-filter.active {
  color: var(--black);
  font-weight: bold;
}
.project-page {
    position: relative;  /* This will be the parent for the absolute positioning of project-detail */
}
hr {
    width: 80%; /* Adjust as needed */
    border: none; /* Removes the default border */
    border-top: 1px solid #e4e4ec; /* Sets the line color */
    margin: 30px auto; /* Centers the line and gives space above and below */
}
#clients-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* spacing between each logo div */
}

.client-logo-container {
    width: 150px;  /* Adjust as needed */ 
    height: 150px; /* Adjust as needed */
    display: flex;
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
}

.client-logo {
    max-width: 100%;
    max-height: 100%;
    display: block; 
}

/* ——————————————————————————————————————————————
   Collaborators section styling
   —————————————————————————————————————————————— */
#collaborators-section {
  max-width: 70%;
  margin: 0 auto;
  padding: 2rem 0;
  background: none;
}

/* only the heading gets the black background */
#collaborators-section .collaborators-title {
  display: block;
  width: 100%;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 0;     /* vertical padding only */
  margin: 0 0 1rem;
  text-align: center;    /* center the text */
}

/* logos grid has no bg and stays responsive */
#clients-grid {
  background: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 1000px; 
  gap:min(2vw,20px);                 /* gap scales with window */
}

.client-logo-container{
  flex:1 1 clamp(110px,15vw,200px);  /* <min> <ideal> <max> */
  aspect-ratio:1/1;                  /* keep the box square   */
  z-index: 10;
}
#projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 0fr));
    row-gap: 30px;
    column-gap: 30px;
    padding: 0;
    width: 100%;
    max-width: 1500px;  /* or 70%, or whatever max you prefer */
    margin: 0 auto;     /* center it horizontally */
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

/* default = 1×1 */
#projects-grid .project-anchor 
{ 
    grid-column: span 2; 
    grid-row: span 2; 

    display: block;
    height: 100%;
    width: 100%;
}
#projects-grid .project-anchor .project-item {
  height: 100%;
  width: 100%;
}
/* medium = 2×1 */
#projects-grid .project-anchor.one_by_one 
{ 
    grid-column: span 1; 
}

/* medium = 2×1 */
#projects-grid .project-anchor.two_by_one 
{ 
    grid-column: span 2; 
}

/* large = 2×2 */
#projects-grid .project-anchor.two_by_two 
{
  grid-column: span 2;
  grid-row: span 2;
}


#projects-grid .project-anchor.two_by_four 
{
  grid-column: span 2;
  grid-row: span 4;
}

#projects-grid .project-anchor.four_by_four 
{
  grid-column: span 4;
  grid-row: span 4;
  
}

.project-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fill the box, cropping if needed */
  z-index: 0;
}

.project-overlay,
.project-title-container,
.view-project-button {
  position: relative;
  z-index: 1;
}
.project-item {
    border: 1px solid #ddd;
    padding: 0px;
    border-radius: 0px;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;    cursor: pointer; /* Indicate interactivity */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; 
    position: relative;
    overflow: hidden;
    background-size: cover;      /* Scales the image to cover the element */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat;/* Ensures the image doesn't repeat */
    position: relative;          /* To position the button and other content correctly */
}
.project-item:hover {
    transform: scale(1.005); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.9); /* This adds a black overlay with 70% opacity */
}

.project-item a.view-project-button {
    /* ... other styles ... */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent; /* ensure it's transparent by default */
    z-index: 2; /* This ensures the anchor covers other elements during hover */
}
.project-overlay {
    position: absolute; /* Absolute positioning */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5; /* Ensure it's above other contents */
    justify-content: flex-end; /* Center the description vertically */
    align-items: center; /* Center the description horizontally */
    display: none; /* Make it hidden by default */
    transition: background-color 0.3s ease; /* Smoothly transition the overlay background color */
    font-size: min(3rem, 4vw) !important;
    padding-right: 10px;
    font-weight: bold;
}
.project-title, .project-tags, .view-project-button {
    transition: opacity 0.3s ease; /* Smoothly transition the opacity */
}
.project-grid-description {
  color: #fff;         /* always white */
  text-align: right;   /* align text to the right */
  /* adjust padding as needed—for right alignment you might want: */
  padding-left: 0;
  padding-right: 2rem;
  z-index: 100;
  font-size: 2.5rem;
  width: 100%;
}


.project-description 
{
  position: sticky;
  z-index: 100;             /* sits above other content */
  background-color: var(--primary);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: lighter;
  width:100%;
  padding-left: 5rem;
  padding-bottom: 3rem;
  margin: auto;
  margin-bottom: 1rem;
}

.project-item:hover .project-description {
    display: block; /* shown on hover */
}
.project-item:hover .project-overlay {
    background-color: rgba(48, 48, 48, 0.6); /* semi-transparent white background on hover */
    display: flex; /* Show it on hover */
}


.project-item a {
    /* Your styles for the link, if any */
    transition: color 0.3s ease; /* Smooth transition for color changes */
}

.view-project-button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: none;
    text-indent: -9999px; /* This effectively hides the button text */
    z-index: 10; /* This ensures the button is always on top */
}

.project-item:hover a {
    background-color: rgba(255,255,255,0.7); /* This is a semi-transparent white. Adjust the RGB values and the alpha (last value) to your liking */
}
.project-item-content {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    /* This stretches the content to fit the parent */
}
.project-tags {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 5px;
}
.tag {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8em;
}
.project-item::before {
    content: "";
    display: block;
    padding-bottom: 100%; /* This ensures a 1:1 aspect ratio. Adjust as needed. */
}
.project-item:hover .project-title-container,
.project-item:hover .project-title, 
.project-item:hover .project-tags, 
.project-item:hover .project-category-label, 
.project-item:hover .view-project-button {
    opacity: 0;
    visibility: hidden;
}


.hidden-tag {
    display: none;
}

#project-detail {
    position: relative;   
    background: rgb(255, 255, 255); 
    padding: 20px;       
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    z-index: 2;  
    border-radius: 0px;         
    text-align: center;   
}

/* right-side gallery ─ two equal columns */
#images-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* 2 columns */
  gap:1rem;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

/* images fit their cells */
#images-grid img{
  width:100%;
  height:auto;
  display:block;
  z-index: 10;
}

.project-image {
    width: 100%;
    height: auto;
    display: block;
}

.project-image img {
    max-width: 100%; 
    height: auto;
    display: block;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#project-title .project-description {
    font-size: 0.8em;  /* Smaller than regular text; adjust as needed */
    font-style: italic;
    margin-bottom: 0.5em; /* Optional, to give a little space between description and tag */
    
}

.detailed-project-description {
    font-style: italic;
    font-size: smaller; /* or use a specific size in px or em */
    margin-top: -0.2em;
    margin-bottom: 1em;
    color: #cfcfcf; /* Adjust this if needed for better contrast against white */

}

.project-page #project-title {
    color: #333; /* Adjust this if needed for better contrast against white */
    margin-bottom: 0.2em;  /* Reduce bottom margin to bring description closer */
}

.project-page .project-description {
    font-size: 0.8em;
    font-style: italic;
    margin-top: 0.1em; /* Reduced this value */
    color: #444;  /* Darker than #333 for contrast */
}

/* ── Side‐aligned category stripe ── */
.project-category-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;                 /* thickness of the stripe */
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;                    /* stays white */
  font-size: min(0.6rem, 5vw) !important;
  font-weight: bold;
  border-bottom-left-radius: 0px; /* round only the end corner */
  z-index: 1;
}


/* make room for the stripe */
#projects-grid .project-anchor > div {
  position: relative;          /* ensure absolute children work */
  padding-left: calc(1.5rem + 0.5rem); /* stripe width + gap */
}


/* ——————————————————————————————————————————————
   Mobile: resize project titles & descriptions
   —————————————————————————————————————————————— */
/* at the very bottom of style.css */

/* vertical, always-visible top-left nav */
/* horizontal navbar below the banner */
nav {
  position: static;
  width: 100%;
  margin: 1rem 0;            /* space above/below */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: right;
    text-decoration: underline;

}

nav a {
  color: var(--fg);
  font-size: 2rem;
}

nav a:hover {
  text-decoration: underline;
}


#banner {
  position: relative;           /* establish containing block */
  display: flex;                
  align-items: flex-end;        /* vertical: bottom */
  justify-content: flex-start;  /* horizontal: left */
  background: var(--primary);
  box-sizing: border-box;
  height: 15vh;
  font-size: 5rem;  
  padding-bottom: 2%;
}

.banner-text {
  color: #000000;                       /* your fg color */
  font-size: 5rem;                      /* match or tweak your banner size */
  font-weight: bold;
}

/* ─── two-column fixed sidebar + fluid content ─── */
.layout {
  display: flex;
  justify-content: center;   /* center the pair in the window */
  align-items: flex-start;
  min-height: 100vh;
}

.sidebar {
  width: 120px;              /* your nav strip width */
  position: sticky;
  top: 0;
}

.sidebar nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* left-align the links */
}

.sidebar nav li + li {
  margin-top: 0.5rem;
}

.sidebar a {
  color: inherit;
  text-decoration: none;
}
.sidebar a:hover {
  text-decoration: underline;
}

.content {
    max-width: 1500px;    /* match your desired content width */
  min-width: 500px;    /* match your desired content width */
  background-color: var(--content);
    position: relative;   /* containing block for the overlay */
  overflow: hidden;     /* clip any children to its box */
  
}

.content > #banner,
.content > #projects-grid {
  width: 100%;
  max-width: 1500px;    /* match your desired content width */
  min-width: 500px;    /* match your desired content width */
  margin: 0 auto;       /* redundant given flex centering, but safe */
}

.body-noise-overlay {
  position: absolute;
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  background: var(--bg) url("../images/noise.png") repeat;
  background-blend-mode: overlay;
  filter: blur(0.6px);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;           /* ensure it sits behind your actual content */
  margin: 0;            /* remove any default margins */
}

.content-noise-overlay {
  position: absolute;
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  background: var(--content) url("../images/noise.png") repeat;
  background-blend-mode:overlay;
  filter: blur(0.6px);
  opacity: 0.2;
  pointer-events: none;
  margin: 0;            /* remove any default margins */
}


/* ── two-column project layout ── */
.project-section{
  display:grid;
  grid-template-columns:1fr 1fr;   /* text | images */
  max-width:1500px;
  margin:0 auto;
}

.project-info{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.project-info .info-row{
  display:grid;
  grid-template-columns:1fr 3fr;   /* label | value */
  padding:.75rem 1.25rem;
  background:var(--primary); /* change this var per theme */
}

.project-info .label{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size: 1.2rem;

}

.project-info .value{
  line-height:1.5;
  font-size: 1.2rem;

}


.about-page{                     /* override the .content overflow */
  position:relative;
  overflow:visible;
  
}

.about-page #banner{
  position:relative;
  z-index:1;                     /* keeps banner above the photo */
}

.about-page .banner-bg-photo{
  position:absolute;
  top:0;
  right:0;              /* flush with the right edge */
  height:100%;          /* exactly match banner height */
  width:auto;           /* width scales automatically */
  object-fit:contain;   /* keep aspect ratio */
  z-index:-1;
  pointer-events:none;
}

/* — about page headings — */
.about-page h1{
  font-size:clamp(2.4rem,6vw,3rem);
  color:var(--primary);
  font-weight:300;
}
.about-page .heavy
{ 
  font-weight:bold; 
  font-style:normal;
  font-size:clamp(2.5rem,6vw,4rem);
  color: var(--fg);
}

.about-text{
  padding: 10px;
}

.about-page a{
  color:var(--fg);
  text-decoration:underline;          /* no underline by default   */
}

/* visited links: different colour, still no underline */
.about-page a:visited{
  text-decoration:none;
}

/* keep the hover clean (no underline / colour change) */
.about-page a:hover{
  color:var(--primary);
  text-decoration:none;
}

@media (max-width: 650px)
{

  /* sidebar turns into a top row */
  .layout
  { 
    flex-direction:column; 
    min-height: auto;
  }
  .sidebar{
    width:100%;
    position:static;
    margin-bottom:1rem;
  }
.sidebar nav ul{
  flex-direction:row;
  justify-content:left;
  align-items:center;   /* keeps first item level with the rest */
  gap:1rem;             /* horizontal distance between links   */
}

/* wipe the old vertical margin that pushed later items down */
.sidebar nav li{ margin:0; }

   /* remove the 500 px floor */
  .content,
  .content > #banner,
  .content > #projects-grid{
    min-width:0;
    width:100%;          /* stay fluid  */
  }

  /* let the collaborators/clients strip wrap normally */
  #clients-grid{
    width:100%;
    max-width:100%;
    justify-content:flex-start;   /* optional – left-align icons */
  }
  /* banner + photo scale down */

/* swap the two photos on hover */
.banner-bg-photo{ transition:opacity .25s; }

.banner-bg-photo.alt   { opacity:0; }     /* hidden by default */
.banner-bg-photo.default{ opacity:1; }

#banner:hover .banner-bg-photo.default{ opacity:0; }
#banner:hover .banner-bg-photo.alt   { opacity:1; }

  /* headings tighten up */
  .about-page h1{ font-size:1.5rem; }
  .about-page .heavy
  { 
    font-weight:bold; 
    font-style:normal;
    font-size:clamp(1.4rem,6vw,3rem);
    color: var(--fg);
  }

  #tag-filters{ overflow-x:auto; }   /* enables horizontal scroll if needed */

.tag-nav-list{
  flex-wrap:wrap;                  /* allows a second row */
  gap:.25rem;                      /* tighter spacing    */
}

.tag-filter{
  font-size:clamp(1rem,4vw,1.2rem);
  white-space:nowrap;              /* keeps each label on one line */
}

.tag-separator{
  font-size:1.2rem;
  margin:0 .25rem;
}
#projects-grid{
  box-sizing:border-box;                                   /* include padding in width calc */
  width:100vw;                                             /* exactly the viewport width   */
  max-width:100vw;                                         /* belt-and-braces              */
  padding-left:4vw;
  padding-right:4vw;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important;
  overflow-x:hidden;                                       /* just in case                */
}

/* squash any “big” tiles down to one cell on phones */
#projects-grid .project-anchor{
  grid-column:span 1 !important;
  grid-row:span 1 !important;
}
/* ─ projects page overrides ─ */
.projects-page #banner,
.projects-page #banner .banner-text{
  font-size:2rem;            /* smaller banner text */
}

.projects-page .project-description{
  font-size:1.3rem;            /* smaller banner text */
  padding-left: 5px;
}

.projects-page .project-section{
  grid-template-columns:1fr;   /* stack columns → info then images */
  row-gap:2rem;
}

.projects-page .project-info{ margin-bottom:1rem; }
.projects-page .project-info .info-row{
  grid-template-columns:1fr;  /* single column → one below the other */
  row-gap:.25rem;             /* small space between them (optional) */
}

about-page #banner{
  flex-direction: column;     /* stack title then image   */
  align-items: flex-start;
  height: auto;               /* auto-height, no 15vh cap */
  padding-bottom: .5rem;
}

.about-page .banner-bg-photo{
  position: static;           /* back in normal flow      */
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: .5rem;          /* gap under the heading    */
}

/* on touch screens the hover-swap is useless, so hide the alt */
.about-page .banner-bg-photo.alt{ display:none; }

}