/* This file is shared byte-for-byte by school-outings.css and
   summer-camp.css (they @import this file instead of duplicating it —
   all three pages use the identical "photo gallery" template). */
@import url("shared.css");

/* ================= HERO — matches site pattern ================= */
.hero {
  position: relative;
  height: 88vh;
  min-height: 560px;
}
.hero .frame {
  position: absolute;
  inset: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 33, 71, 0.35) 0%,
    rgba(0, 33, 71, 0.1) 35%,
    rgba(0, 33, 71, 0.55) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 40px 68px;
}
.hero .eyebrow {
  color: var(--accent);
}
.hero h1 {
  color: var(--text-light);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 78px);
  line-height: 1.04;
  margin: 0;
  max-width: 16ch;
}

/* ================= INTRO (overrides on top of shared.css) ================= */
.intro {
  padding: 88px 0 56px;
}
.intro h2 {
  max-width: 22ch;
}

/* ================= MASONRY GALLERY ================= */
.gallery {
  padding: 20px 0 30px;
}
.m1 { height: 420px; }
.m2 { height: 270px; }
.m3 { height: 330px; }
.m4 { height: 230px; }
.m5 { height: 380px; }
.m6 { height: 300px; }
.m7 { height: 250px; }
.m8 { height: 410px; }
.m9 { height: 290px; }
.m10 { height: 320px; }
.m11 { height: 240px; }
.m12 { height: 360px; }

/* ================= QUOTE BAND (overrides on top of shared.css) ================= */
.quoteband {
  margin: 24px 0;
}

/* ================= CTA — matches real Admissions Open band =================
   Only the properties that actually differ from the global .cta in
   style.css are declared here; everything else is inherited from it. */
.cta .wrap {
  padding: 60px 40px;
}
.cta-text .kicker {
  letter-spacing: 0.15em;
}
.cta-text .headline {
  font-size: clamp(26px, 3vw, 38px);
  color: var(--text-light);
}
.cta-btn {
  padding: 15px 34px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.cta-btn:hover {
  color: var(--main);
}

@media (max-width: 760px) {
  .masonry {
    columns: 2 180px;
  }
  .hero h1 {
    max-width: none;
  }
}