/* ====================== GALLERY CSS ====================== */

/* ------------------ MOBILE-FIRST DEFAULTS ------------------ */


.gallery-intro {
    margin-top: -1rem;  /* small top space on mobile */
    text-align: center;
}

.gallery-h1 {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.9rem;       /* same as paragraph */
  font-weight: 500;        /* slightly stronger than normal */
  line-height: 1.65;
  color: #666666;          
  margin: 2rem 0 0 0;    /* 0.5rem space above, 0 below */
  text-align: center;
}

.gallery-intro p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.9rem;   /* mobile */
  line-height: 1.65;
  color: #666666;

  max-width: 360px;     /* important */
  margin: 0 auto 0rem auto;  /* auto centers the block */
  text-align: center;   /* centers the text */
}



/* ------------------ CALL TO ACTION ------------------ */

.cta-container {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #666666;
  max-width: 90%;
  margin: .8rem auto 1.5rem auto; /* snug under intro */
  text-align: center;
}

/* make the <a> itself just clickable, no animation */
.cta-container a {
  color: inherit;
  text-decoration: none;
  display: inline;            /* inline so only text flows naturally */
  cursor: pointer;
}

/* animate only the "get in touch" */
.cta-container .cta-link {
  color: #666666;
  font-weight: 600;
  display: inline-block;      /* needed for transform */
  transition: color 0.3s ease, transform 0.3s ease;
}

.cta-container .cta-link:hover {
  transform: scale(1.1);     /* subtle zoom only on "here" */
  color: #333333;             /* optional slightly darker hover */
}

/* Desktop override */
@media (min-width: 600px) {
  .cta-container {
    font-size: 1rem;           /* match paragraph */
    line-height: 1.65;         /* match paragraph */
    color: #a1a1a1;            /* match paragraph */
    max-width: 460px;          /* same as intro paragraph */
    margin: 0 auto 3rem auto;  /* same vertical spacing as <p> */
  }

  /* make "here" match h1 and stronger zoom */
  .cta-container .cta-link {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;           /* same as .gallery-h1 desktop font */
    font-weight: 500;           /* same emphasis */
    color: #888888;            /* almost the same color as h1 */
        margin-left: 0.1em;         /* tiny gap so zoom doesn't overlap previous word */
    transform-origin: center;   /* optional: keeps scaling centered */
  }

  .cta-container .cta-link:hover {
    transform: scale(1.08);    /* stronger zoom */
    color: #666666;             /* slightly darker on hover */
  }
}












.project-set {
  margin-bottom: 2rem; /* bigger gap between sets */
}

.project-set figure {
  margin: 0; /* spacing is controlled by grid gap */
}

.project-set img {
  width: 100%;
  display: block;
}

/* Grid for portrait pairs / mixed gallery */
.project-set {
  display: grid;
  grid-template-columns: 1fr; /* mobile: stacked */
  gap: 1.5rem;                /* vertical spacing inside set */
}


.mixed-gallery {
    max-width: 1400px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 1fr; /* single column on mobile */
    gap: 2rem;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0px; /* subtle rounding optional */
}



.gallery-item figcaption {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #666666;              /* match intro if desired */
    text-align: center;          /* mobile = centered */
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    line-height: 1.4;            /* helps when wrapping */
    word-break: break-word;      /* prevents overflow */
}



/* Triple set container */
.project-set-triple {
    display: grid;
    grid-template-columns: 1fr; /* mobile: stacked */
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.project-set-triple .gallery-item img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* Desktop: 3 columns */
/* @media (min-width: 600px) {
    .project-set-triple {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        margin-bottom: 10rem;
    }
} */

/* Desktop: 3 columns */
@media (min-width: 600px) {
    .project-set-triple {
        width: 95%;           /* restrict to 95% */
        margin: 0 auto;       /* center it horizontally */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        margin-bottom: 10rem;
        margin-top: -8rem;
    }
}

















/* back to homepage */
.back-home {
    text-align: center;        /* center the link */
    margin: -2rem 0 4rem 0;     /* space above and below */
}

.back-home a {
    text-decoration: none;
    color: #aaa;               /* same grey as captions */
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.2s;
}

.back-home a:hover {
    color: #aaa;            /* grey hover, same as your name hover */
}












/* ------------------ DESKTOP OVERERIDES ------------------ */


@media (min-width: 600px) {

.gallery-intro {
    margin-top: 1rem;  /* more space from top on desktop */
    max-width: 1100px; /* optional: constrain width for readability */
    margin-left: auto;
    margin-right: auto;
    }    


  .gallery-intro .gallery-h1 {
    color: #a1a1a1;  
    font-size: 1rem;           /* slightly bigger than mobile */
    font-weight: 500;          /* same subtle emphasis */
    line-height: 1.7;          /* match paragraph spacing */
    margin: 3.8rem 0 0 0;      /* small space above, 0 below */
    text-align: center;
  }  

.gallery-intro p {
    color: #a1a1a1;  /* change from previous #a1a1a1 or default */
    font-size: 1rem;            /* desktop font size */
    margin: 0rem auto 1rem auto;  /* reduce top margin to move up */
    max-width: 100%;
  }


  .project-set {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two columns for portrait pairs */
    gap: 3rem;                             /* horizontal + vertical spacing inside the set */
    margin-bottom: 10rem;                   /* extra vertical space between project sets */
  }
  

  /* Landscape spans full width */
  .project-set .gallery-item.landscape {
    grid-column: 1 / -1;
  }

  /* Portraits form pairs, slightly smaller than full width */
  .project-set .gallery-item.portrait img {
    max-width: 90%;
    margin: 0 auto; /* center in grid cell */
    display: block;
  }


  /* horizontal pairs, slightly smaller than full width */
  .project-set .gallery-item.horizontal img {
    max-width: 95%;
    margin: 0 auto; /* center in grid cell */
    display: block;
  }




 

  .project-set figcaption {
      grid-column: auto;  /* remove full-span */
      text-align: right;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 1rem;
      color: #a1a1a1;
      margin-top: 0.5rem;
  }









/* back to homepage */

    .back-home {
        margin: -6rem 0 3rem 0; /* slightly less top margin, more bottom on desktop if needed */
    }



.back-home a {
    font-size: 0.9rem;           
    font-weight: 600;            /* explicit to prevent weight jump */
    display: inline-block;       /* needed for transform */
    color: #a1a1a1;             
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.25s ease-in-out;  /* smooth & gentle */
}

    .back-home a:hover {
        transform: scale(1.05); /* subtle zoom */
        color: #888888;          /* slightly darker on hover */
        font-weight: 600;            /* keep weight constant */
    }






}