/* ---------- variables pulled from index.css ---------- */
:root{
  --text-dark:#151515;
  --accent:#4e894f;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;color:var(--text-dark);background:#fff}
h1{
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;line-height:1.1;
  font-size:clamp(2rem,4vw+1rem,3.5rem);
}

/* ---------- wrapper & heading ---------- */
.gallery-wrapper{
  max-width:1400px;
  margin:auto;
  padding:2rem 1rem 4rem;
}
.gallery-heading{margin-bottom:2rem}
.intro-copy{
  font-size:1rem;
  line-height:1.6;
  max-width:600px;
  margin-top:.8rem;
}

/* ---------- masonry grid via CSS columns ---------- */
.gallery-grid{
  column-count:3;              /* desktop: 3 masonry columns   */
  column-gap:1.5rem;
}

@media(max-width:991.98px){    /* tablet: 2 columns           */
  .gallery-grid{column-count:2}
}
@media(max-width:767.98px){    /* phone: 1 full-width column  */
  .gallery-grid{column-count:1}
}

/* each anchor acts as a masonry block */
.gallery-grid a{
  display:block;
  margin-bottom:1.5rem;        /* space between rows           */
  break-inside:avoid;          /* keep images intact           */
}

/* shared image styling */
.gallery-grid img{
  width:100%;
  height:auto;                 /* natural aspect ratio         */
  display:block;
  border:8px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:transform .3s;
}
.gallery-grid a:hover img{transform:scale(1.03)}

/* smaller border + heading on very small screens */
@media(max-width:767.98px){
  .gallery-grid img{border:4px solid #fff}
  h1{font-size:clamp(1.8rem,5.5vw+1rem,2.2rem)}
}
/* ===== Barn Project preview (isolated styles) ===== */
.barn-project-preview{padding:3rem 0;}
.barn-project-preview .bp-eyebrow{
  color:#7f797d;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  display:block;margin-bottom:.4rem;font-size:.8rem;
}
.barn-project-preview .bp-heading{font-size:2rem;margin-bottom:1rem;}
.barn-project-preview .bp-copy{max-width:600px;color:#333;font-family:'Mulish',sans-serif;}

.barn-project-preview .bp-thumbs{
  display:flex;gap:.5rem;margin-top:.5rem;
}
.barn-project-preview .bp-thumbs img{
  width:32%;object-fit:cover;border-radius:4px;
}

.barn-project-preview .bp-hero{
  width:100%;object-fit:cover;border-radius:4px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}