/* Explore page */

/* ---------- Hero ---------- */
.page-explore .ex-hero {
  padding: 0 5%;
  background: #1E1E1E url("/assets/images/EduHam-making-a-difference-min-1.webp") center / cover no-repeat;
  color: var(--white);
  text-align: center;
}
.page-explore .ex-hero__inner {
  min-height: 650px; padding: 10px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.page-explore .ex-hero .title { margin-bottom: 20px; }
.page-explore .ex-hero .social { margin-bottom: 20px; }
.page-explore .ex-hero__text { padding: 0 15%; margin-bottom: 20px; font-size: 16px; line-height: 27.2px; }

/* ---------- Story ---------- */
.page-explore .story .container { padding: 10px; }
.page-explore .story__sub { margin: 10px 0; }
.page-explore .story__row { max-width: 1140px; margin: 0 auto; padding-top: 2%; display: flex; }
.page-explore .story__text {
  flex: 0 0 50%; padding-right: 50px;
  display: flex; flex-direction: column; justify-content: center;
}
.page-explore .story__text .title { margin-bottom: 20px; }
.page-explore .story__text .lead { line-height: 27.2px; }
.page-explore .story__media { flex: 0 0 50%; padding: 10px; }
.page-explore .story__media img { width: 100%; border-radius: 20px; }

/* ---------- Masonry gallery (3 / 2 / 1 columns, same placement as the original) ---------- */
.page-explore .photos .title { margin-bottom: 20px; }
.page-explore .masonry { container-type: inline-size; padding-top: 2%; }
.page-explore .masonry__grid {
  --cols: 3; --gap: 15px;
  --cw: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
  position: relative;
  height: calc(var(--h-ratio) * var(--cw) + var(--h-gaps) * var(--gap));
}
.page-explore .masonry__item {
  position: absolute;
  width: var(--cw);
  left: calc(var(--c) * (var(--cw) + var(--gap)));
  top: calc(var(--s) * var(--cw) + var(--n) * var(--gap));
}
.page-explore .masonry__item a { position: relative; display: block; overflow: hidden; border-radius: 20px; }
.page-explore .masonry__item img { width: 100%; }
.page-explore .masonry__item a::after {
  content: ""; position: absolute; inset: 0; background: #00000080;
  opacity: 0; transition: opacity .8s;
}
.page-explore .masonry__item a:hover::after, .page-explore .masonry__item a:focus-visible::after { opacity: 1; }

/* @masonry (generated by masonry.mjs: column, ratio-sum and gap-count above each item) */
.page-explore .masonry__grid { --h-ratio: 7.7218; --h-gaps: 4; }
.page-explore .masonry__item:nth-child(1) { --c: 0; --s: 0.0000; --n: 0; }
.page-explore .masonry__item:nth-child(2) { --c: 1; --s: 0.0000; --n: 0; }
.page-explore .masonry__item:nth-child(3) { --c: 2; --s: 0.0000; --n: 0; }
.page-explore .masonry__item:nth-child(4) { --c: 0; --s: 1.0000; --n: 1; }
.page-explore .masonry__item:nth-child(5) { --c: 2; --s: 1.5000; --n: 1; }
.page-explore .masonry__item:nth-child(6) { --c: 0; --s: 2.0007; --n: 2; }
.page-explore .masonry__item:nth-child(7) { --c: 1; --s: 2.1111; --n: 1; }
.page-explore .masonry__item:nth-child(8) { --c: 2; --s: 2.5000; --n: 2; }
.page-explore .masonry__item:nth-child(9) { --c: 0; --s: 2.5636; --n: 3; }
.page-explore .masonry__item:nth-child(10) { --c: 1; --s: 3.1111; --n: 2; }
.page-explore .masonry__item:nth-child(11) { --c: 2; --s: 3.5000; --n: 3; }
.page-explore .masonry__item:nth-child(12) { --c: 0; --s: 3.5636; --n: 4; }
.page-explore .masonry__item:nth-child(13) { --c: 2; --s: 4.2500; --n: 4; }
.page-explore .masonry__item:nth-child(14) { --c: 1; --s: 4.8889; --n: 3; }
.page-explore .masonry__item:nth-child(15) { --c: 2; --s: 5.2500; --n: 5; }
.page-explore .masonry__item:nth-child(16) { --c: 0; --s: 5.7055; --n: 5; }
.page-explore .masonry__item:nth-child(17) { --c: 2; --s: 6.0000; --n: 6; }
.page-explore .masonry__item:nth-child(18) { --c: 1; --s: 6.2222; --n: 4; }
@media (max-width: 1024px) {
  .page-explore .masonry__grid { --h-ratio: 11.2854; --h-gaps: 8; }
  .page-explore .masonry__item:nth-child(1) { --c: 0; --s: 0.0000; --n: 0; }
  .page-explore .masonry__item:nth-child(2) { --c: 1; --s: 0.0000; --n: 0; }
  .page-explore .masonry__item:nth-child(3) { --c: 0; --s: 1.0000; --n: 1; }
  .page-explore .masonry__item:nth-child(4) { --c: 1; --s: 2.1111; --n: 1; }
  .page-explore .masonry__item:nth-child(5) { --c: 0; --s: 2.5000; --n: 2; }
  .page-explore .masonry__item:nth-child(6) { --c: 1; --s: 3.1118; --n: 2; }
  .page-explore .masonry__item:nth-child(7) { --c: 0; --s: 3.5000; --n: 3; }
  .page-explore .masonry__item:nth-child(8) { --c: 1; --s: 3.6747; --n: 3; }
  .page-explore .masonry__item:nth-child(9) { --c: 0; --s: 4.5000; --n: 4; }
  .page-explore .masonry__item:nth-child(10) { --c: 1; --s: 4.6747; --n: 4; }
  .page-explore .masonry__item:nth-child(11) { --c: 0; --s: 5.5000; --n: 5; }
  .page-explore .masonry__item:nth-child(12) { --c: 0; --s: 6.2500; --n: 6; }
  .page-explore .masonry__item:nth-child(13) { --c: 1; --s: 6.4524; --n: 5; }
  .page-explore .masonry__item:nth-child(14) { --c: 1; --s: 7.4524; --n: 6; }
  .page-explore .masonry__item:nth-child(15) { --c: 0; --s: 8.3919; --n: 7; }
  .page-explore .masonry__item:nth-child(16) { --c: 1; --s: 8.7858; --n: 7; }
  .page-explore .masonry__item:nth-child(17) { --c: 0; --s: 9.1419; --n: 8; }
  .page-explore .masonry__item:nth-child(18) { --c: 1; --s: 9.7858; --n: 8; }
}
/* /@masonry */

/* ================= Tablet ================= */
@media (max-width: 1024px) {
  .page-explore .ex-hero__text { padding: 0 5%; }
  .page-explore .story__text { padding-right: 0; }
  .page-explore .masonry__grid { --cols: 2; --gap: 10px; }
}

/* ================= Mobile ================= */
@media (max-width: 767px) {
  .page-explore .ex-hero__inner { min-height: 450px; }
  .page-explore .ex-hero__text { padding: 0; }
  .page-explore .story { padding: 12% 4%; }
  .page-explore .story__row { flex-direction: column-reverse; }
  .page-explore .story__media { padding: 0; }
  .page-explore .story__text { padding-top: 30px; }
  .page-explore .photos { padding: 14% 4%; }
  .page-explore .masonry__grid { height: auto; }
  .page-explore .masonry__item { position: static; width: auto; margin-bottom: 10px; }
  .page-explore .masonry__item:last-child { margin-bottom: 0; }
}