/* ============================================================
   PhotoGallery.css
   Styles for /PhotoGallery/ViewPhotoGallery.aspx.
   Shares the same visual language (fonts/palette) as
   Styles/Placement.css and Styles/CampusNews.css.
   Scoped under .photogallery-page.
   ============================================================ */

.photogallery-page{
  --ink:#1B2A4A;
  --paper:#F7F3EC;
  --paper-white:#FFFDF9;
  --brass:#C89B3C;
  --teal:#2F6F62;
  --charcoal:#22262B;
  --line:#D8CFC0;

  text-align:left;
  max-width:1180px;
  margin:0 auto;
  padding:24px 20px 50px;
  font-family:'Inter', Arial, sans-serif;
  color:var(--charcoal);
  line-height:1.55;
}
.photogallery-page *{box-sizing:border-box;}
.photogallery-page h1, .photogallery-page h2, .photogallery-page h3{
  font-family:'Fraunces', Georgia, serif; color:var(--ink); font-weight:600; margin:0;
}

.photogallery-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.92rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--teal); font-weight:600;
}
.photogallery-page h1{font-size:clamp(2.1rem, 4vw, 2.8rem); line-height:1.15; margin:10px 0 12px;}
.photogallery-lede{max-width:700px; color:#454b52; font-size:1.15rem; margin-bottom:8px;}

/* ---- gallery cards grid ---- */
.photogallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
  margin-top:34px;
}
.photogallery-card{
  background:var(--paper-white);
  border:1px solid var(--line);
  box-shadow:0 14px 30px rgba(27,42,74,0.08);
  overflow:hidden;
}
.photogallery-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.photogallery-card-head h3{
  font-size:1.1rem;
}
.photogallery-card-head .tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#8a8478;
}
.photogallery-card-body{
  padding:14px;
}

.photogallery-note{
  margin-top:20px;
  font-size:0.88rem;
  color:#8a8478;
}

@media (max-width:700px){
  .photogallery-grid{
    grid-template-columns:1fr;
  }
}