/* ==========================================================
   SEWAARTH — SHARED PAGE SPACING (matches the Home hero)
   Load LAST on every inner page (after hero-photos.css).
   One source of truth for hero padding + side gutters so
   About / Projects / Gallery / Blog / Volunteer / Contact /
   Donate all line up with Home.

   Home reference:
     side gutter  : 88% wide, max 1280px  (90% <=1000px, 92% <=400px)
     hero padding : 24px top / 80px bottom (20px / 65px <=650px)  [text sits high]
========================================================== */

/* ---------- 1. HERO VERTICAL PADDING (all inner pages) ---------- */
.about-hero,
.projects-hero,
.gallery-hero,
.volunteer-hero,
.contact-hero {
  display: block;
  min-height: 0;
  padding: 24px 0 24px;
}

/* ---------- 2. HERO SIDE GUTTERS ----------
   hero-photos.css sets .hero-split{width:100%}, which removed the
   88% gutter and left the text/photo touching the screen edge.
   Higher specificity here restores the same container as Home.   */
.about-hero .container.hero-split,
.projects-hero .container.hero-split,
.gallery-hero .container.hero-split,
.volunteer-hero .container.hero-split,
.contact-hero .container.hero-split,
.projects-hero .projects-hero-container.hero-split {
  width: 88%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 3. DONATE PAGE ---------- */
main.donate-page {
  padding: 24px 0 90px;
}
main.donate-page .donate-hero,
main.donate-page .donate-grid {
  width: 88%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
main.donate-page .donate-hero {
  margin-bottom: 55px;
}

/* ---------- 4. TABLET ---------- */
@media (max-width: 1000px) {
  .about-hero .container.hero-split,
  .projects-hero .container.hero-split,
  .gallery-hero .container.hero-split,
  .volunteer-hero .container.hero-split,
  .contact-hero .container.hero-split,
  .projects-hero .projects-hero-container.hero-split,
  main.donate-page .donate-hero,
  main.donate-page .donate-grid {
    width: 90%;
  }
}

/* ---------- 5. MOBILE ---------- */
@media (max-width: 650px) {
  .about-hero,
  .projects-hero,
  .gallery-hero,
  .volunteer-hero,
  .contact-hero {
    padding: 20px 0 65px;
  }
  main.donate-page {
    padding: 20px 0 70px;
  }
}

/* ---------- 6. SMALL MOBILE ---------- */
@media (max-width: 400px) {
  .about-hero .container.hero-split,
  .projects-hero .container.hero-split,
  .gallery-hero .container.hero-split,
  .volunteer-hero .container.hero-split,
  .contact-hero .container.hero-split,
  .projects-hero .projects-hero-container.hero-split,
  main.donate-page .donate-hero,
  main.donate-page .donate-grid {
    width: 92%;
  }
}


/* ==========================================================
   7. BACKGROUND — same page background as Home on every page
   Home = one fixed gradient (cream-yellow -> blush -> sky) from
   home-theme-all-pages.css, with soft yellow + pink glows in the
   hero. Any section that painted its own white/cream band is
   made transparent so the gradient shows through everywhere.
========================================================== */

/* sections that still painted solid bands (incl. inline page styles) */
.our-story, .vision, .journey, .team-video, .about-cta,
.projects-browse, .our-work, .sponsor-project,
.gallery-section, .gallery-more,
.blog-section, .volunteer-section, .contact-section {
  background: transparent !important;
}

/* Donate had its own white-ish gradient */
main.donate-page {
  background: transparent !important;
}

/* Home-style glows behind every inner hero */
.about-hero,
.projects-hero,
.gallery-hero,
.volunteer-hero,
.contact-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}
.about-hero::before,
.projects-hero::before,
.gallery-hero::before,
.volunteer-hero::before,
.contact-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -160px;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(255, 222, 67, 0.40) 0%, rgba(255, 222, 67, 0.08) 60%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.about-hero::after,
.projects-hero::after,
.gallery-hero::after,
.volunteer-hero::after,
.contact-hero::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -100px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(255, 139, 167, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.about-hero .hero-split,
.projects-hero .hero-split,
.gallery-hero .hero-split,
.volunteer-hero .hero-split,
.contact-hero .hero-split {
  position: relative;
  z-index: 1;
}

@media (max-width: 650px) {
  .about-hero::before, .projects-hero::before, .gallery-hero::before,
  .volunteer-hero::before, .contact-hero::before {
    width: 420px; height: 420px; top: -80px; right: -140px;
  }
  .about-hero::after, .projects-hero::after, .gallery-hero::after,
  .volunteer-hero::after, .contact-hero::after {
    width: 300px; height: 300px;
  }
}


/* ==========================================================
   8. GALLERY GRID — every photo the same size
   Was: alternating 220px / 270px heights + align-items:start,
   so tiles were ragged and the last row left an empty slot.
   Now: one fixed height for all tiles, photos crop to fill
   (object-fit:cover), and a short last row stretches to fill
   the full width instead of leaving a gap.
========================================================== */
.gallery-section .gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 3 per row (2 cols each) */
  gap: 24px;
  align-items: stretch;
}
.gallery-section .gallery-grid .gallery-item {
  grid-column: span 2;
  width: 100%;
  height: clamp(220px, 20vw, 300px) !important;   /* same for every tile */
  border-radius: 24px;
  overflow: hidden;
}
.gallery-section .gallery-grid .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* last row has 2 photos -> each takes half the row (no empty slot) */
.gallery-section .gallery-grid .gallery-item:nth-last-child(2):nth-child(3n + 1),
.gallery-section .gallery-grid .gallery-item:last-child:nth-child(3n + 2) {
  grid-column: span 3;
}

/* tablet: 2 per row */
@media (max-width: 1000px) {
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .gallery-section .gallery-grid .gallery-item,
  .gallery-section .gallery-grid .gallery-item:nth-last-child(2):nth-child(3n + 1),
  .gallery-section .gallery-grid .gallery-item:last-child:nth-child(3n + 2) {
    grid-column: auto;
    height: clamp(200px, 30vw, 280px) !important;
  }
}

/* mobile: 1 per row */
@media (max-width: 650px) {
  .gallery-section .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gallery-section .gallery-grid .gallery-item {
    height: 240px !important;
    border-radius: 22px;
  }
}


/* ==========================================================
   9. GALLERY — "Free medical camp" and "Raincoat drive" photo grids
   Was: wide first photo with auto height + 4:5 portrait tiles, so
   rows were uneven and the grid left gaps. Now every row has one
   fixed height and all photos crop to fill their tile. The wide
   first photo is kept (it spans 2 columns), at the same height.
========================================================== */
.gallery-more .more-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(240px, 26vw, 340px);
  gap: 22px;
  width: 100%;
}
.gallery-more .more-photo-grid .more-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
.gallery-more .more-photo-grid .more-photo:first-child {
  grid-column: span 2;
}
.gallery-more .more-photo-grid .more-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .gallery-more .more-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(200px, 32vw, 280px);
    gap: 18px;
  }
  .gallery-more .more-photo-grid .more-photo:first-child {
    grid-column: span 2;
  }
}
@media (max-width: 560px) {
  .gallery-more .more-photo-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
    gap: 16px;
  }
  .gallery-more .more-photo-grid .more-photo:first-child {
    grid-column: auto;
  }
}


/* ==========================================================
   10. VOLUNTEER ROLE CARDS — SVG icons instead of emoji
========================================================== */
.volunteer-card .volunteer-icon {
  width: 56px;
  height: 56px;
  font-size: 0;
  background: #FFF0C9;
  border-radius: 50%;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.volunteer-card .volunteer-icon svg {
  width: 34px;
  height: 34px;
  display: block;
  overflow: visible;
}
@media (max-width: 650px) {
  .volunteer-card .volunteer-icon { width: 52px; height: 52px; }
  .volunteer-card .volunteer-icon svg { width: 32px; height: 32px; }
}


/* ==========================================================
   11. HERO TEXT SITS HIGH — start at the top of the photo
   (was vertically centred against the photo, which pushed the
   tag + heading down on every inner page)
========================================================== */
.about-hero .hero-split,
.projects-hero .hero-split,
.gallery-hero .hero-split,
.volunteer-hero .hero-split,
.contact-hero .hero-split {
  align-items: start;
}


/* ==========================================================
   12. GALLERY PHOTOS — show the WHOLE picture (no cropping)
   Tiles keep one uniform size. Each photo is shown in full
   (object-fit: contain) and the leftover space is filled with a
   soft blurred copy of the same photo, so portrait, 4:3 and
   widescreen pictures all look good side by side.
   (the blurred copy is set by the small script at the bottom of
   03-gallery.html; without JS the space is plain warm grey)
========================================================== */
.gallery-section .gallery-grid .gallery-item,
.gallery-more .more-photo-grid .more-photo {
  position: relative;
  background: #F1ECE5;
  isolation: isolate;
}
.gallery-section .gallery-grid .gallery-item::before,
.gallery-more .more-photo-grid .more-photo::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: var(--bg, none) center / cover no-repeat;
  filter: blur(22px) saturate(1.15) brightness(1.02);
  opacity: .85;
  z-index: -1;
}
.gallery-section .gallery-grid .gallery-item img,
.gallery-more .more-photo-grid .more-photo img {
  position: relative;
  object-fit: contain;
  object-position: center;
}

/* a little more height so every photo reads larger */
.gallery-section .gallery-grid .gallery-item {
  height: clamp(250px, 25vw, 360px) !important;
}
@media (max-width: 1000px) {
  .gallery-section .gallery-grid .gallery-item,
  .gallery-section .gallery-grid .gallery-item:nth-last-child(2):nth-child(3n + 1),
  .gallery-section .gallery-grid .gallery-item:last-child:nth-child(3n + 2) {
    height: clamp(230px, 38vw, 340px) !important;
  }
}
@media (max-width: 650px) {
  .gallery-section .gallery-grid .gallery-item { height: 280px !important; }
}
.gallery-more .more-photo-grid {
  grid-auto-rows: clamp(250px, 27vw, 360px);
}
@media (max-width: 900px) {
  .gallery-more .more-photo-grid { grid-auto-rows: clamp(230px, 38vw, 320px); }
}
@media (max-width: 560px) {
  .gallery-more .more-photo-grid { grid-auto-rows: 270px; }
}


/* ==========================================================
   13. MEDICAL CAMP + RAINCOAT GRIDS — equal 4:3 tiles
   Replaces the wide first photo with equal tiles so each photo
   is shown whole and large. 3 per row; a short last row of 2 is
   centred.  (Overrides sections 9 and 12 for these grids.)
========================================================== */
.gallery-more .more-photo-grid {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 22px;
}
.gallery-more .more-photo-grid .more-photo,
.gallery-more .more-photo-grid .more-photo:first-child {
  grid-column: span 2;
  height: auto;
  aspect-ratio: 4 / 3;
}
.gallery-more .more-photo-grid .more-photo:nth-last-child(2):nth-child(3n + 1) {
  grid-column: 2 / span 2;
}
.gallery-more .more-photo-grid .more-photo:last-child:nth-child(3n + 2) {
  grid-column: 4 / span 2;
}

@media (max-width: 900px) {
  .gallery-more .more-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .gallery-more .more-photo-grid .more-photo,
  .gallery-more .more-photo-grid .more-photo:first-child,
  .gallery-more .more-photo-grid .more-photo:nth-last-child(2):nth-child(3n + 1),
  .gallery-more .more-photo-grid .more-photo:last-child:nth-child(3n + 2) {
    grid-column: auto;
  }
  /* odd photo on its own last row: centred at tile width */
  .gallery-more .more-photo-grid .more-photo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 9px);
    justify-self: center;
  }
}
@media (max-width: 560px) {
  .gallery-more .more-photo-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gallery-more .more-photo-grid .more-photo:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}


/* ==========================================================
   COLLAGE LAYOUTS (main gallery + medical camp + raincoat drive)
   Photos crop to fill every tile: no letterboxing, no blurred
   side bars, no empty gaps. Placed last so it wins over the
   "contain" rules above.
========================================================== */

/* ---------- Main gallery (8 photos, 4 columns) ---------- */
body .gallery-section .gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  grid-auto-flow: row;
  gap: 14px;
  align-items: stretch;
}
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item {
  position: relative;
  width: 100%;
  height: auto !important;
  padding: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  background: transparent !important;
}
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item::before { display: none !important; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(4) { grid-area: 2 / 4 / 4 / 5; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(5) { grid-area: 3 / 1 / 6 / 2; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(6) { grid-area: 3 / 2 / 4 / 4; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(7) { grid-area: 4 / 2 / 6 / 4; }
body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(8) { grid-area: 4 / 4 / 6 / 5; }

/* ---------- Medical camp + Raincoat drive (5 photos each) ---------- */
body .gallery-more .more-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 12vw, 170px);
  grid-auto-flow: row;
  gap: 14px;
  width: 100%;
}
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
}
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo::before { display: none !important; }
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(3) { grid-area: 1 / 4 / 4 / 5; }
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(5) { grid-area: 3 / 3 / 4 / 4; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  body .gallery-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    grid-auto-flow: dense;
    gap: 12px;
  }
  body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(n) { grid-area: auto; grid-column: span 1; grid-row: span 2; }
  body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(1),
  body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(7) { grid-column: span 2; }
  body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(4),
  body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(5) { grid-row: span 3; }

  body .gallery-more .more-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    grid-auto-flow: dense;
    gap: 12px;
  }
  body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(n) { grid-area: auto; grid-column: span 1; grid-row: span 2; }
  body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(1) { grid-column: span 2; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  body .gallery-section .gallery-grid,
  body .gallery-more .more-photo-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }
  body .gallery-section .gallery-grid > .gallery-item.gallery-item.gallery-item:nth-child(n),
  body .gallery-more .more-photo-grid > .more-photo.more-photo.more-photo:nth-child(n) {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
    height: 240px !important;
  }
}


/* ==========================================================
   CONTACT FORM CARD: end the card right after the button
   (it used to stretch to match the left column's height)
========================================================== */
body .contact-grid {
  align-items: start;
}
body .contact-grid .contact-form-card {
  align-self: start;
  height: auto;
  min-height: 0;
}
#contactStatusMessage:empty {
  display: none;
}