/* ═══════════════════════════════════════════════════════════════════
   MoDSU — images.css
   ───────────────────────────────────────────────────────────────────
   HOW IT WORKS:
   1. Create a folder called  images/  next to your HTML files
   2. Drop your photos in with the filenames listed below
   3. The image appears automatically — nothing else to change!

   Every section below shows:
     • Which page uses it
     • The filename to use
     • The best photo to put there
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   SHARED RULES — applied to every image slot
   ─────────────────────────────────────────────────────────────────── */

/* When an image loads, hide the placeholder icon inside it */
.hero-img-ph,
.mini-ph,
.a-img-ph,
.gm-ph,
.prog-thumb-ph,
.prog-thumb-ph,
.lp-photo-ph,
.exec-photo .exec-avatar,
.exec-photo .exec-ph-label,
.pres-img-ph,
.s-img-ph,
.g-ph,
.ap-img-ph,
.board-avatar,
.prog-img-ph,
.prog-img-wrap .prog-img-ph {
  transition: opacity 0.3s ease;
}

/* Base style shared by all background-image slots */
[class*="bg-img"] {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE — index.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO BACKGROUND ──────────────────────────────────────────────
   File:  images/hero-bg.jpeg
   Size:  1920 × 1080 px (wide landscape)
   Photo: MoDSU group photo, campus, or Moyamba District scenery      */
.hero-bg {
  background-image: url('images/hero-bg.jpeg') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22 !important;
}

/* ── HERO CARD — main photo ───────────────────────────────────────
   File:  images/hero-main.jpeg
   Size:  600 × 340 px
   Photo: Main featured MoDSU event, group shot, or ceremony          */
.hero-img-ph {
  background-image: url('images/hero-main.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border: none !important;
}
.hero-img-ph i,
.hero-img-ph div,
.hero-img-ph span { display: none; }

/* ── HERO CARD — mini strip left ─────────────────────────────────
   File:  images/hero-2.jpeg
   Size:  400 × 130 px
   Photo: Students talking, campus life, or MoDSU meeting             */
.mini-img:first-child .mini-ph {
  background-image: url('images/hero-2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none !important;
}
.mini-img:first-child .mini-ph i,
.mini-img:first-child .mini-ph span { display: none; }

/* ── HERO CARD — mini strip right ────────────────────────────────
   File:  images/hero-3.jpeg
   Size:  400 × 130 px
   Photo: Students studying, graduation, or leadership workshop        */
.mini-img:last-child .mini-ph {
  background-image: url('images/hero-3.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none !important;
}
.mini-img:last-child .mini-ph i,
.mini-img:last-child .mini-ph span { display: none; }

/* ── ABOUT SECTION — tall main photo ─────────────────────────────
   File:  images/about-main.jpeg
   Size:  400 × 360 px (portrait)
   Photo: MoDSU founding event, ceremony, or large group photo        */
.about-imgs .a-img.tall .a-img-ph {
  background-image: url('images/about-main.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.about-imgs .a-img.tall .a-img-ph i,
.about-imgs .a-img.tall .a-img-ph div,
.about-imgs .a-img.tall .a-img-ph span { display: none; }

/* ── ABOUT SECTION — top right photo ─────────────────────────────
   File:  images/about-2.jpeg
   Size:  300 × 160 px
   Photo: Students gathering or MoDSU members meeting                 */
.about-imgs .a-img:nth-child(2) .a-img-ph {
  background-image: url('images/about-2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-imgs .a-img:nth-child(2) .a-img-ph i,
.about-imgs .a-img:nth-child(2) .a-img-ph div,
.about-imgs .a-img:nth-child(2) .a-img-ph span { display: none; }

/* ── ABOUT SECTION — bottom right photo ──────────────────────────
   File:  images/about-3.jpeg
   Size:  300 × 160 px
   Photo: Community activity, volunteering, or outreach               */
.about-imgs .a-img:nth-child(3) .a-img-ph {
  background-image: url('images/about-3.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-imgs .a-img:nth-child(3) .a-img-ph i,
.about-imgs .a-img:nth-child(3) .a-img-ph div,
.about-imgs .a-img:nth-child(3) .a-img-ph span { display: none; }

/* ── GALLERY — slot 1 (tall left, spans 2 rows) ──────────────────
   File:  images/gallery-1.jpeg
   Size:  700 × 480 px (wide/tall)
   Photo: Best MoDSU event — ceremony, summit, or large crowd         */
.gallery-mosaic .gm-item:nth-child(1) .gm-ph {
  background-image: url('images/gallery-1.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-mosaic .gm-item:nth-child(1) .gm-ph i,
.gallery-mosaic .gm-item:nth-child(1) .gm-ph div,
.gallery-mosaic .gm-item:nth-child(1) .gm-ph span { display: none; }

/* ── GALLERY — slot 2 (top center) ───────────────────────────────
   File:  images/gallery-2.jpeg
   Size:  350 × 240 px
   Photo: Students group or MoDSU members                             */
.gallery-mosaic .gm-item:nth-child(2) .gm-ph {
  background-image: url('images/gallery-2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-mosaic .gm-item:nth-child(2) .gm-ph i,
.gallery-mosaic .gm-item:nth-child(2) .gm-ph div,
.gallery-mosaic .gm-item:nth-child(2) .gm-ph span { display: none; }

/* ── GALLERY — slot 3 (top right) ────────────────────────────────
   File:  images/gallery-3.jpeg
   Size:  350 × 240 px
   Photo: Academic event or classroom photo                           */
.gallery-mosaic .gm-item:nth-child(3) .gm-ph {
  background-image: url('images/gallery-3.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-mosaic .gm-item:nth-child(3) .gm-ph i,
.gallery-mosaic .gm-item:nth-child(3) .gm-ph div,
.gallery-mosaic .gm-item:nth-child(3) .gm-ph span { display: none; }

/* ── GALLERY — slot 4 (bottom center) ────────────────────────────
   File:  images/gallery-4.jpeg
   Size:  350 × 240 px
   Photo: Awards, trophies, or recognition ceremony                   */
.gallery-mosaic .gm-item:nth-child(4) .gm-ph {
  background-image: url('images/gallery-4.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-mosaic .gm-item:nth-child(4) .gm-ph i,
.gallery-mosaic .gm-item:nth-child(4) .gm-ph div,
.gallery-mosaic .gm-item:nth-child(4) .gm-ph span { display: none; }

/* ── GALLERY — slot 5 (bottom right) ─────────────────────────────
   File:  images/gallery-5.jpeg
   Size:  350 × 240 px
   Photo: Handshake, community outreach, or partnership               */
.gallery-mosaic .gm-item:nth-child(5) .gm-ph {
  background-image: url('images/gallery-5.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-mosaic .gm-item:nth-child(5) .gm-ph i,
.gallery-mosaic .gm-item:nth-child(5) .gm-ph div,
.gallery-mosaic .gm-item:nth-child(5) .gm-ph span { display: none; }

/* ── PROGRAMS — Scholarship card thumbnail ────────────────────────
   File:  images/prog-scholarship.jpeg
   Size:  600 × 180 px
   Photo: Scholarship award or academic achievement ceremony           */
.prog-grid-home .prog-card:nth-child(1) .prog-thumb-ph {
  background-image: url('images/prog-scholarship.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-grid-home .prog-card:nth-child(1) .prog-thumb-ph i,
.prog-grid-home .prog-card:nth-child(1) .prog-thumb-ph span { display: none; }

/* ── PROGRAMS — Leadership card thumbnail ─────────────────────────
   File:  images/prog-leadership.jpeg
   Size:  600 × 180 px
   Photo: Workshop, seminar, or leadership summit                     */
.prog-grid-home .prog-card:nth-child(2) .prog-thumb-ph {
  background-image: url('images/prog-leadership.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-grid-home .prog-card:nth-child(2) .prog-thumb-ph i,
.prog-grid-home .prog-card:nth-child(2) .prog-thumb-ph span { display: none; }

/* ── PROGRAMS — Community card thumbnail ──────────────────────────
   File:  images/prog-community.jpeg
   Size:  600 × 180 px
   Photo: Community work, volunteering, or outreach project           */
.prog-grid-home .prog-card:nth-child(3) .prog-thumb-ph {
  background-image: url('images/prog-community.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-grid-home .prog-card:nth-child(3) .prog-thumb-ph i,
.prog-grid-home .prog-card:nth-child(3) .prog-thumb-ph span { display: none; }

/* ── PROGRAMS — Mentorship card thumbnail ─────────────────────────
   File:  images/prog-mentorship.jpeg
   Size:  600 × 180 px
   Photo: Mentorship session or one-on-one coaching                   */
.prog-grid-home .prog-card:nth-child(4) .prog-thumb-ph {
  background-image: url('images/prog-mentorship.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-grid-home .prog-card:nth-child(4) .prog-thumb-ph i,
.prog-grid-home .prog-card:nth-child(4) .prog-thumb-ph span { display: none; }

/* ── PROGRAMS — Advocacy card thumbnail ───────────────────────────
   File:  images/prog-advocacy.jpeg
   Size:  600 × 180 px
   Photo: Public speaking, debate, or advocacy event                  */
.prog-grid-home .prog-card:nth-child(5) .prog-thumb-ph {
  background-image: url('images/prog-advocacy.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-grid-home .prog-card:nth-child(5) .prog-thumb-ph i,
.prog-grid-home .prog-card:nth-child(5) .prog-thumb-ph span { display: none; }

/* ── PROGRAMS — Partnerships card thumbnail ───────────────────────
   File:  images/prog-partnerships.jpeg
   Size:  600 × 180 px
   Photo: Partnership signing, MOU, or stakeholder meeting            */
.prog-grid-home .prog-card:nth-child(6) .prog-thumb-ph {
  background-image: url('images/prog-partnerships.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-grid-home .prog-card:nth-child(6) .prog-thumb-ph i,
.prog-grid-home .prog-card:nth-child(6) .prog-thumb-ph span { display: none; }

/* ── EVENTS — Event card 1 ───────────────────────────────────────
   File:  images/event-1.jpeg
   Size:  500 × 180 px
   Photo: Leadership Summit or major MoDSU event                      */
.events-grid .event-card:nth-child(1) .event-img-ph {
  background-image: url('images/event-1.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.events-grid .event-card:nth-child(1) .event-img-ph i,
.events-grid .event-card:nth-child(1) .event-img-ph span { display: none; }

/* ── EVENTS — Event card 2 ───────────────────────────────────────
   File:  images/event-2.jpeg
   Size:  500 × 180 px
   Photo: Scholarship awards ceremony                                 */
.events-grid .event-card:nth-child(2) .event-img-ph {
  background-image: url('images/event-2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.events-grid .event-card:nth-child(2) .event-img-ph i,
.events-grid .event-card:nth-child(2) .event-img-ph span { display: none; }

/* ── EVENTS — Event card 3 ───────────────────────────────────────
   File:  images/event-3.jpeg
   Size:  500 × 180 px
   Photo: Community outreach day                                      */
.events-grid .event-card:nth-child(3) .event-img-ph {
  background-image: url('images/event-3.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.events-grid .event-card:nth-child(3) .event-img-ph i,
.events-grid .event-card:nth-child(3) .event-img-ph span { display: none; }

/* ── LEADERSHIP PREVIEW — President ── */
.lp-grid .lp-card:nth-child(1) .lp-photo {
  background-image: url('images/president.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.lp-grid .lp-card:nth-child(1) .lp-photo-ph .avatar,
.lp-grid .lp-card:nth-child(1) .lp-photo-ph .ph-lbl { display: none; }

/* ── LEADERSHIP PREVIEW — Vice President ── */
.lp-grid .lp-card:nth-child(2) .lp-photo {
  background-image: url('images/vp.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.lp-grid .lp-card:nth-child(2) .lp-photo-ph .avatar,
.lp-grid .lp-card:nth-child(2) .lp-photo-ph .ph-lbl { display: none; }

/* ── LEADERSHIP PREVIEW — Secretary General ── */
.lp-grid .lp-card:nth-child(3) .lp-photo {
  background-image: url('images/secretary.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.lp-grid .lp-card:nth-child(3) .lp-photo-ph .avatar,
.lp-grid .lp-card:nth-child(3) .lp-photo-ph .ph-lbl { display: none; }

/* ── LEADERSHIP PREVIEW — PRO ── */
.lp-grid .lp-card:nth-child(4) .lp-photo {
  background-image: url('images/pro.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.lp-grid .lp-card:nth-child(4) .lp-photo-ph .avatar,
.lp-grid .lp-card:nth-child(4) .lp-photo-ph .ph-lbl { display: none; }

/* ── LEADERSHIP PREVIEW — Financial Secretary ── */
.lp-grid .lp-card:nth-child(5) .lp-photo {
  background-image: url('images/financial.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.lp-grid .lp-card:nth-child(5) .lp-photo-ph .avatar,
.lp-grid .lp-card:nth-child(5) .lp-photo-ph .ph-lbl { display: none; }

/* ── LEADERSHIP PREVIEW — Welfare Officer ── */
.lp-grid .lp-card:nth-child(6) .lp-photo {
  background-image: url('images/welfare.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.lp-grid .lp-card:nth-child(6) .lp-photo-ph .avatar,
.lp-grid .lp-card:nth-child(6) .lp-photo-ph .ph-lbl { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   ABOUT PAGE — about.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── STORY SECTION — tall main photo ─────────────────────────────
   File:  images/story-main.jpeg
   Size:  400 × 440 px (portrait)
   Photo: MoDSU founding event, large group, or key ceremony          */
.story-imgs .s-img.tall .s-img-ph {
  background-image: url('images/story-main.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.story-imgs .s-img.tall .s-img-ph i,
.story-imgs .s-img.tall .s-img-ph div,
.story-imgs .s-img.tall .s-img-ph code { display: none; }

/* ── STORY SECTION — top right ───────────────────────────────────
   File:  images/story-2.jpeg
   Size:  300 × 220 px
   Photo: Students meeting or campus gathering                        */
.story-imgs .s-img:nth-child(2) .s-img-ph {
  background-image: url('images/story-2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.story-imgs .s-img:nth-child(2) .s-img-ph i,
.story-imgs .s-img:nth-child(2) .s-img-ph div,
.story-imgs .s-img:nth-child(2) .s-img-ph code { display: none; }

/* ── STORY SECTION — bottom right ────────────────────────────────
   File:  images/story-3.jpeg
   Size:  300 × 220 px
   Photo: Community work or volunteering scene                        */
.story-imgs .s-img:nth-child(3) .s-img-ph {
  background-image: url('images/story-3.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.story-imgs .s-img:nth-child(3) .s-img-ph i,
.story-imgs .s-img:nth-child(3) .s-img-ph div,
.story-imgs .s-img:nth-child(3) .s-img-ph code { display: none; }

/* ── ABOUT GALLERY — slot 1 (wide, spans 2 cols) ─────────────────
   File:  images/gallery-about-1.jpeg
   Size:  700 × 200 px
   Photo: Wide event, ceremony, or crowd photo                        */
.gallery-grid .g-item:nth-child(1) .g-ph {
  background-image: url('images/gallery-about-1.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-grid .g-item:nth-child(1) .g-ph i,
.gallery-grid .g-item:nth-child(1) .g-ph div,
.gallery-grid .g-item:nth-child(1) .g-ph code { display: none; }

/* ── ABOUT GALLERY — slot 2 ──────────────────────────────────────
   File:  images/gallery-about-2.jpeg
   Size:  350 × 200 px
   Photo: Students group photo                                        */
.gallery-grid .g-item:nth-child(2) .g-ph {
  background-image: url('images/gallery-about-2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-grid .g-item:nth-child(2) .g-ph i,
.gallery-grid .g-item:nth-child(2) .g-ph div,
.gallery-grid .g-item:nth-child(2) .g-ph code { display: none; }

/* ── ABOUT GALLERY — slot 3 ──────────────────────────────────────
   File:  images/gallery-about-3.jpeg
   Size:  350 × 200 px
   Photo: Academic or classroom event                                 */
.gallery-grid .g-item:nth-child(3) .g-ph {
  background-image: url('images/gallery-about-3.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-grid .g-item:nth-child(3) .g-ph i,
.gallery-grid .g-item:nth-child(3) .g-ph div,
.gallery-grid .g-item:nth-child(3) .g-ph code { display: none; }

/* ── ABOUT GALLERY — slot 4 ──────────────────────────────────────
   File:  images/gallery-about-4.jpeg
   Size:  350 × 200 px
   Photo: Community service or outreach                               */
.gallery-grid .g-item:nth-child(4) .g-ph {
  background-image: url('images/gallery-about-4.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-grid .g-item:nth-child(4) .g-ph i,
.gallery-grid .g-item:nth-child(4) .g-ph div,
.gallery-grid .g-item:nth-child(4) .g-ph code { display: none; }

/* ── ABOUT GALLERY — slot 5 (wide) ───────────────────────────────
   File:  images/gallery-about-5.jpeg
   Size:  700 × 200 px
   Photo: Awards ceremony or wide celebration                         */
.gallery-grid .g-item:nth-child(5) .g-ph {
  background-image: url('images/gallery-about-5.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-grid .g-item:nth-child(5) .g-ph i,
.gallery-grid .g-item:nth-child(5) .g-ph div,
.gallery-grid .g-item:nth-child(5) .g-ph code { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   PROGRAMS PAGE — programs.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── Scholarship — large feature image ───────────────────────────
   File:  images/prog-scholarship.jpeg
   Size:  600 × 380 px
   Photo: Scholarship award ceremony or academic achievement          */
.prog-feature:nth-child(1) .prog-img-ph {
  background-image: url('images/prog-scholarship.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.prog-feature:nth-child(1) .prog-img-ph i,
.prog-feature:nth-child(1) .prog-img-ph p,
.prog-feature:nth-child(1) .prog-img-ph code { display: none; }

/* ── Leadership Dev — large feature image ────────────────────────
   File:  images/prog-leadership.jpeg
   Size:  600 × 380 px
   Photo: Leadership workshop, seminar, or summit                     */
.prog-feature:nth-child(2) .prog-img-ph {
  background-image: url('images/prog-leadership.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-feature:nth-child(2) .prog-img-ph i,
.prog-feature:nth-child(2) .prog-img-ph p,
.prog-feature:nth-child(2) .prog-img-ph code { display: none; }

/* ── Community Dev — large feature image ─────────────────────────
   File:  images/prog-community.jpeg
   Size:  600 × 380 px
   Photo: Community outreach or development project                   */
.prog-feature:nth-child(3) .prog-img-ph {
  background-image: url('images/prog-community.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-feature:nth-child(3) .prog-img-ph i,
.prog-feature:nth-child(3) .prog-img-ph p,
.prog-feature:nth-child(3) .prog-img-ph code { display: none; }

/* ── Mentorship — large feature image ────────────────────────────
   File:  images/prog-mentorship.jpeg
   Size:  600 × 380 px
   Photo: Mentorship session or one-on-one coaching                   */
.prog-feature:nth-child(4) .prog-img-ph {
  background-image: url('images/prog-mentorship.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prog-feature:nth-child(4) .prog-img-ph i,
.prog-feature:nth-child(4) .prog-img-ph p,
.prog-feature:nth-child(4) .prog-img-ph code { display: none; }

.prog-feature:nth-child(5) .prog-img-ph {
    background-image: url(images/prog-mentorship5.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ═══════════════════════════════════════════════════════════════════
   LEADERSHIP PAGE — leadership.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── PRESIDENT — large featured card ─────────────────────────────
   File:  images/president.jpeg
   Size:  380 × 420 px (portrait)
   Photo: National President clear headshot or portrait               */
.pres-img-ph {
  background-image: url('images/president.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.pres-img-ph .big-avatar,
.pres-img-ph p,
.pres-img-ph code { display: none; }

/* ── EXECUTIVE CARDS — nth-child targets each officer ────────────

   File:  images/vp.jpeg            (Vice President)
   File:  images/secretary.jpeg     (Secretary General)
   File:  images/asst-secretary.jpeg (Assistant Secretary)
   File:  images/financial.jpeg     (Financial Secretary)
   File:  images/treasurer.jpeg     (Treasurer)
   File:  images/pro.jpeg           (PRO)
   File:  images/welfare.jpeg       (Welfare Officer)
   File:  images/organizing.jpeg    (Organizing Secretary)
   File:  images/projects.jpeg      (Projects & Partnerships)

   Size for all: 280 × 240 px (portrait / headshot)                  */

.exec-grid .exec-card:nth-child(1) .exec-photo { background-image: url('images/vp.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(1) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(1) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(2) .exec-photo { background-image: url('images/secretary.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(2) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(2) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(3) .exec-photo { background-image: url('images/asst-secretary.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(3) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(3) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(4) .exec-photo { background-image: url('images/financial.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(4) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(4) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(5) .exec-photo { background-image: url('images/treasurer.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(5) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(5) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(6) .exec-photo { background-image: url('images/pro.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(6) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(6) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(7) .exec-photo { background-image: url('images/welfare.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(7) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(7) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(8) .exec-photo { background-image: url('images/organizing.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(8) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(8) .exec-photo .exec-ph-label { display: none; }

.exec-grid .exec-card:nth-child(9) .exec-photo { background-image: url('images/projects.jpeg'); background-size: cover; background-position: center top; }
.exec-grid .exec-card:nth-child(9) .exec-photo .exec-avatar,
.exec-grid .exec-card:nth-child(9) .exec-photo .exec-ph-label { display: none; }

/* ── BOARD OF DIRECTORS ───────────────────────────────────────────
   File:  images/board-chair.jpeg   (Board Chairperson)
   File:  images/board-2.jpeg       (Board Member 2)
   File:  images/board-3.jpeg       (Board Member 3)
   File:  images/board-4.jpeg       (Board Member 4)
   Size for all: 200 × 200 px                                        */

.board-grid .board-card:nth-child(1) .board-avatar { background-image: url('images/board-chair.jpeg'); background-size: cover; background-position: center top; font-size: 0; color: transparent; border: none; }
.board-grid .board-card:nth-child(2) .board-avatar { background-image: url('images/board-2.jpeg'); background-size: cover; background-position: center top; font-size: 0; color: transparent; border: none; }
.board-grid .board-card:nth-child(3) .board-avatar { background-image: url('images/board-3.jpeg'); background-size: cover; background-position: center top; font-size: 0; color: transparent; border: none; }
.board-grid .board-card:nth-child(4) .board-avatar { background-image: url('images/board-4.jpeg'); background-size: cover; background-position: center top; font-size: 0; color: transparent; border: none; }


/* ═══════════════════════════════════════════════════════════════════
   MEMBERSHIP PAGE — membership.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── APPLICATION FORM — photo strip 1 ────────────────────────────
   File:  images/apply-1.jpeg
   Size:  300 × 130 px
   Photo: MoDSU event, students, or union activity                    */
.apply-photo-strip .ap-img:nth-child(1) .ap-img-ph {
  background-image: url('images/apply-1.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.apply-photo-strip .ap-img:nth-child(1) .ap-img-ph i,
.apply-photo-strip .ap-img:nth-child(1) .ap-img-ph span { display: none; }

/* ── APPLICATION FORM — photo strip 2 ────────────────────────────
   File:  images/apply-2.jpeg
   Size:  300 × 130 px
   Photo: MoDSU members or group activity                             */
.apply-photo-strip .ap-img:nth-child(2) .ap-img-ph {
  background-image: url('images/apply-2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.apply-photo-strip .ap-img:nth-child(2) .ap-img-ph i,
.apply-photo-strip .ap-img:nth-child(2) .ap-img-ph span { display: none; }

/* ── APPLICATION FORM — photo strip 3 ────────────────────────────
   File:  images/apply-3.jpeg
   Size:  300 × 130 px
   Photo: Academic or graduation photo                                */
.apply-photo-strip .ap-img:nth-child(3) .ap-img-ph {
  background-image: url('images/apply-3.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.apply-photo-strip .ap-img:nth-child(3) .ap-img-ph i,
.apply-photo-strip .ap-img:nth-child(3) .ap-img-ph span { display: none; }

/* ── APPLICATION FORM — photo strip 4 ────────────────────────────
   File:  images/apply-4.jpeg
   Size:  300 × 130 px
   Photo: Handshake, community activity, or partnership               */
.apply-photo-strip .ap-img:nth-child(4) .ap-img-ph {
  background-image: url('images/apply-4.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.apply-photo-strip .ap-img:nth-child(4) .ap-img-ph i,
.apply-photo-strip .ap-img:nth-child(4) .ap-img-ph span { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   QUICK REFERENCE — ALL 35 IMAGE FILES

   Just rename your photos and drop them into the  images/  folder.
   ─────────────────────────────────────────────────────────────────
   HOME PAGE (index.html)
     hero-bg.jpeg            ← Full-page hero background
     hero-main.jpeg          ← Hero card main photo
     hero-2.jpeg             ← Hero card mini strip (left)
     hero-3.jpeg             ← Hero card mini strip (right)
     about-main.jpeg         ← About section tall photo
     about-2.jpeg            ← About section top-right photo
     about-3.jpeg            ← About section bottom-right photo
     gallery-1.jpeg          ← Gallery main/wide photo
     gallery-2.jpeg          ← Gallery top-center photo
     gallery-3.jpeg          ← Gallery top-right photo
     gallery-4.jpeg          ← Gallery bottom-center photo
     gallery-5.jpeg          ← Gallery bottom-right photo
     prog-scholarship.jpeg   ← Scholarship program thumbnail
     prog-leadership.jpeg    ← Leadership program thumbnail
     prog-community.jpeg     ← Community program thumbnail
     prog-mentorship.jpeg    ← Mentorship program thumbnail
     prog-advocacy.jpeg      ← Advocacy program thumbnail
     prog-partnerships.jpeg  ← Partnerships program thumbnail
     event-1.jpeg            ← Event card 1 photo
     event-2.jpeg            ← Event card 2 photo
     event-3.jpeg            ← Event card 3 photo

   ABOUT PAGE (about.html)
     story-main.jpeg         ← Story tall main photo
     story-2.jpeg            ← Story top-right photo
     story-3.jpeg            ← Story bottom-right photo
     gallery-about-1.jpeg    ← About gallery wide photo
     gallery-about-2.jpeg    ← About gallery photo 2
     gallery-about-3.jpeg    ← About gallery photo 3
     gallery-about-4.jpeg    ← About gallery photo 4
     gallery-about-5.jpeg    ← About gallery wide photo

   LEADERSHIP PAGE (leadership.html)
     president.jpeg          ← National President portrait
     vp.jpeg                 ← Vice President portrait
     secretary.jpeg          ← Secretary General portrait
     asst-secretary.jpeg     ← Assistant Secretary portrait
     financial.jpeg          ← Financial Secretary portrait
     treasurer.jpeg          ← Treasurer portrait
     pro.jpeg                ← PRO portrait
     welfare.jpeg            ← Welfare Officer portrait
     organizing.jpeg         ← Organizing Secretary portrait
     projects.jpeg           ← Projects Officer portrait
     board-chair.jpeg        ← Board Chairperson photo
     board-2.jpeg            ← Board Member 2 photo
     board-3.jpeg            ← Board Member 3 photo
     board-4.jpeg            ← Board Member 4 photo

   MEMBERSHIP PAGE (membership.html)
     apply-1.jpeg            ← Form strip photo 1
     apply-2.jpeg            ← Form strip photo 2
     apply-3.jpeg            ← Form strip photo 3
     apply-4.jpeg            ← Form strip photo 4

   NOTE: Programs page (programs.html) shares images with Home.
         No extra files needed for programs.html!
   ═══════════════════════════════════════════════════════════════════ */